From 8318d8dca55312de0fc1f42ba24f35bedf353698 Mon Sep 17 00:00:00 2001
From: Campbell Alden <campbell.alden@bibo.com.ph>
Date: Wed, 31 Aug 2022 12:57:24 +0900
Subject: [PATCH] PUBLISH: Improved Homepage

---
 docs/404.html                               |  1 +
 docs/about/index.html                       |  1 +
 docs/card.css                               |  4 +-
 docs/home.css                               | 40 ++++++++++++++
 docs/index.html                             | 58 +++++++++++++++++----
 docs/review.css                             |  3 +-
 docs/reviews/index.html                     |  1 +
 docs/reviews/no-reservations/index.html     |  1 +
 docs/reviews/the-french-dispatch/index.html |  1 +
 docs/search.js                              | 13 +++++
 docs/style.css                              | 22 +++++++-
 static/home.css                             |  1 +
 12 files changed, 130 insertions(+), 16 deletions(-)
 create mode 100644 docs/home.css
 create mode 100644 docs/search.js

diff --git a/docs/404.html b/docs/404.html
index 8385f62..418c698 100644
--- a/docs/404.html
+++ b/docs/404.html
@@ -14,6 +14,7 @@
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
   <link rel="stylesheet" href="/film/style.css">
   <link rel="stylesheet" href="/film/card.css">
+  <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/docs/about/index.html b/docs/about/index.html
index b63b9ec..2ba4321 100644
--- a/docs/about/index.html
+++ b/docs/about/index.html
@@ -16,6 +16,7 @@
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
   <link rel="stylesheet" href="/film/style.css">
   <link rel="stylesheet" href="/film/card.css">
+  <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/docs/card.css b/docs/card.css
index 27ff1d9..57727ed 100644
--- a/docs/card.css
+++ b/docs/card.css
@@ -5,8 +5,8 @@
   border-radius: 10px;
   background: var(--color-primary);
   aspect-ratio: 2 / 3;
-  width: 280px;
-  max-height: 380px;
+  flex-basis: 280px;
+  max-width: 300px;
   padding: 10px;
 }
 
diff --git a/docs/home.css b/docs/home.css
new file mode 100644
index 0000000..81f22fe
--- /dev/null
+++ b/docs/home.css
@@ -0,0 +1,40 @@
+.home-page-header {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  gap: 10px;
+}
+
+.home-page-header p {
+  text-align: center;
+  margin: 0;
+}
+
+.search-bar {
+  display: flex;
+  background: white;
+  padding: 10px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  gap: 10px;
+  align-items: center;
+  cursor: pointer;
+}
+
+.search-bar input {
+  flex-grow: 1;
+  flex-basis: 600px;
+  background: inherit;
+  outline: none;
+  border: none;
+  font-size: 16px;
+  font-family: var(--body-font-family)
+}
+
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
+  gap: 10px;
+  justify-content: center;
+}
diff --git a/docs/index.html b/docs/index.html
index cc606b4..3f274f0 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -17,6 +17,7 @@
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
   <link rel="stylesheet" href="/film/style.css">
   <link rel="stylesheet" href="/film/card.css">
+  <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -36,15 +37,48 @@
 </nav>
 </header>
 <main id="content">
-  <div>
-    <p>This site is under construction. Please excuse the mess.</p>
+  <div class="core-content">
+    <section class="home-page-header">
+      <header class="stack s1">
+        <h1 class="subtitle">Movie Recommendations</h1><p>A collection of quick recommendations and thoughts on movies</p>
+</header>
+      <div class="search-bar">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20.9999 21L16.6499 16.65" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
 
-  </div>
-  <div class="cluster s1">
-    
-       
-    
-       <div class="card">
+        <input list="movies" name="movie-search" id="movie-search" />
+        <datalist id="movies">
+          
+            
+          
+            
+              <option value="No Reservations" data-value="/film/reviews/no-reservations/">A NY City chef and her recently adopted niece adapt to their life together</option>
+            
+              <option value="The French Dispatch" data-value="/film/reviews/the-french-dispatch/">Authors for a New Yorker-esque magazine report on a small town in France</option>
+            
+          
+            
+          
+        </datalist>
+        <script src="https://caalden.github.io/film/search.js" async defer></script>
+      </div>
+      <div class="cluster justify:center s3">
+        <a class="button" href="https://caalden.github.io/film/genres">Genres</a>
+        <a class="button" href="https://caalden.github.io/film/a-z">A-Z</a>
+        <a class="button" href="https://caalden.github.io/film/favorites">Favorites</a>
+      </div>
+    </section>
+    <section class="stack s1">
+      <header>
+        <h2>Recent</h2>
+      </header>
+      <div class="cards">
+        
+           
+        
+           <div class="card">
   <div class="card-image">
     <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
   </div>
@@ -87,9 +121,11 @@
   </div>
 </div>
 
-    
-       
-    
+        
+           
+        
+      </div>
+    </section>
   </div>
 
         </main><footer>
diff --git a/docs/review.css b/docs/review.css
index e1924c6..529a2c4 100644
--- a/docs/review.css
+++ b/docs/review.css
@@ -1,5 +1,6 @@
 .review {
-  max-width: 800px;
+  max-width: calc(70ch + 60px);
+  margin: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/docs/reviews/index.html b/docs/reviews/index.html
index 2db02b0..75b7a41 100644
--- a/docs/reviews/index.html
+++ b/docs/reviews/index.html
@@ -22,6 +22,7 @@
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
   <link rel="stylesheet" href="/film/style.css">
   <link rel="stylesheet" href="/film/card.css">
+  <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/docs/reviews/no-reservations/index.html b/docs/reviews/no-reservations/index.html
index a4594f1..2576ddb 100644
--- a/docs/reviews/no-reservations/index.html
+++ b/docs/reviews/no-reservations/index.html
@@ -25,6 +25,7 @@
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
   <link rel="stylesheet" href="/film/style.css">
   <link rel="stylesheet" href="/film/card.css">
+  <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/docs/reviews/the-french-dispatch/index.html b/docs/reviews/the-french-dispatch/index.html
index 028317d..ae7b6ca 100644
--- a/docs/reviews/the-french-dispatch/index.html
+++ b/docs/reviews/the-french-dispatch/index.html
@@ -25,6 +25,7 @@
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
   <link rel="stylesheet" href="/film/style.css">
   <link rel="stylesheet" href="/film/card.css">
+  <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/docs/search.js b/docs/search.js
new file mode 100644
index 0000000..0d5bec5
--- /dev/null
+++ b/docs/search.js
@@ -0,0 +1,13 @@
+const searchInput = document.getElementById('movie-search');
+const datalist = document.getElementById('movies');
+const dataitems = new Map();
+Array.from(datalist.children).forEach(function (ch) {
+  dataitems.set(ch.value, ch.getAttribute('data-value'));
+});
+
+searchInput.addEventListener('change', function(e) {
+  const targetLocation = dataitems.get(e.target.value);
+  if (targetLocation) {
+    window.location.href = targetLocation;
+  }
+});
diff --git a/docs/style.css b/docs/style.css
index d7a7c77..d56b255 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -75,6 +75,10 @@ p {
   text-align: justify;
 }
 
+.text-align\:center {
+  text-align: center !important;
+}
+
 html, body {
   background: var(--color-light-background);
   color: var(--color-secondary);
@@ -86,7 +90,7 @@ main {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-width: calc(70ch + 60px);
+  max-width: 900px;
 }
 
 .title, h1 {
@@ -208,12 +212,20 @@ a:hover {
 .cluster {
   display: flex;
 }
+.stack {
+  display: flex;
+  flex-direction: column;
+}
+
 .spacing\:between {
   justify-content: space-between;
 }
 .align\:center {
   align-items: center;
 }
+.justify\:center {
+  justify-content: center;
+}
 
 .icon {
   width: 24px;
@@ -225,6 +237,12 @@ a:hover {
 .s1 {
   gap: 10px;
 }
+.s2 {
+  gap: 20px;
+}
+.s3 {
+  gap: 30px;
+}
 
 .p1 {
   padding: 10px;
@@ -264,5 +282,5 @@ a:hover {
 }
 
 .http-header {
-  margin-top: 10vh;
+  class="home-page-header" margin-top: 10vh;
 }
diff --git a/static/home.css b/static/home.css
index 301b380..81f22fe 100644
--- a/static/home.css
+++ b/static/home.css
@@ -36,4 +36,5 @@
   flex-wrap: wrap;
   padding: 10px;
   gap: 10px;
+  justify-content: center;
 }