Improve the layout of the home page

content/_index.md

@@ -2,4 +2,4 @@
 title: "CaAlden: Films"
 description: A blog about movies and my opinions of them
 ---
-This site is under construction. Please excuse the mess.
+A collection of quick recommendations and thoughts on movies

layouts/index.html

@@ -1,12 +1,41 @@
 {{ define "main" }}
-  <div>
-    {{ .Content }}
+  <div class="core-content">
+    <section class="home-page-header">
+      <header class="stack s1">
+        <h1 class="subtitle">Movie Recommendations</h1>
+        {{- .Content -}}
+      </header>
+      <div class="search-bar">
+        {{ partial "magnifying_glass.html" }}
+        <input list="movies" name="movie-search" id="movie-search" />
+        <datalist id="movies">
+          {{ range (where .Site.Pages "Section" "reviews") }}
+            {{ range .Pages }}
+              <option value="{{.Title}}" data-value="{{.RelPermalink}}">
+                {{- .Params.summary -}}
+              </option>
+            {{ end }}
+          {{ end }}
+        </datalist>
+        <script src="{{.Site.BaseURL}}search.js" async defer></script>
       </div>
-  <div class="cluster s1">
+      <div class="cluster justify:center s3">
+        <a class="button" href="{{.Site.BaseURL}}genres">Genres</a>
+        <a class="button" href="{{.Site.BaseURL}}a-z">A-Z</a>
+        <a class="button" href="{{.Site.BaseURL}}favorites">Favorites</a>
+      </div>
+    </section>
+    <section class="stack s1">
+      <header>
+        <h2>Recent</h2>
+      </header>
+      <div class="cards">
         {{ range (where .Site.Pages "Section" "reviews") }}
            {{ range .Pages }}
               {{- .Render "summary" -}}
            {{ end }}
         {{ end }}
       </div>
+    </section>
+  </div>
 {{end}}

layouts/partials/head.html

@@ -5,6 +5,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">

layouts/partials/magnifying_glass.html

@@ -0,0 +1,4 @@
+<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>

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

static/home.css

@@ -0,0 +1,39 @@
+.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;
+}

static/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;

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

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