PUBLISH: Improved Homepage

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">

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">

docs/card.css

@@ -5,8 +5,8 @@
   border-radius: 10px;
   background: var(--color-primary);
   aspect-ratio: 2 / 3;
-  width: 280px;
+  flex-basis: 280px;
-  max-height: 380px;
+  max-width: 300px;
   padding: 10px;
 }
 

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;
+}

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,11 +37,44 @@
 </nav>
 </header>
 <main id="content">
-  <div>
+  <div class="core-content">
-    <p>This site is under construction. Please excuse the mess.</p>
+    <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>
 
+        <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 s1">
+      <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">
         
            
         
@@ -90,6 +124,8 @@
         
            
         
+      </div>
+    </section>
   </div>
 
         </main><footer>

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;

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">

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">

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">

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;
+  }
+});

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;
 }

static/home.css

@@ -36,4 +36,5 @@
   flex-wrap: wrap;
   padding: 10px;
   gap: 10px;
+  justify-content: center;
 }