layout: create base layout, header, footer, hero, and post card partials

7 files changed, 68 insertions, 14 deletions

diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html
index a7cd916..a9df047 100644
--- a/layouts/_partials/footer.html
+++ b/layouts/_partials/footer.html
@@ -1 +1,14 @@
-<p>Copyright {{ now.Year }}. All rights reserved.</p>
+<div class="footer-container">
+  <div class="footer-content">
+    <div class="footer-copyright">
+      © {{ now.Year }} {{ .Site.Params.author }}. All rights reserved.
+    </div>
+    <nav>
+      <ul class="footer-nav">
+        {{ range .Site.Menus.main }}
+          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+        {{ end }}
+      </ul>
+    </nav>
+  </div>
+</div>
diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html
index 02c2240..1a8a727 100644
--- a/layouts/_partials/head.html
+++ b/layouts/_partials/head.html
@@ -1,5 +1,8 @@
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="{{ .Site.Params.description }}">
+<meta name="theme-color" content="#060b10">
+<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
+
 {{ partialCached "head/css.html" . }}
 {{ partialCached "head/js.html" . }}
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 7980a00..872c207 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -1,2 +1,17 @@
-<h1>{{ site.Title }}</h1>
-{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
+<div class="header-container">
+  <a href="/" class="site-title">{{ .Site.Params.author }}</a>
+  <div class="header-controls">
+    <nav>
+      <ul>
+        {{ range .Site.Menus.main }}
+          <li>
+            <a href="{{ .URL }}" {{ if (in $.RelPermalink .URL) }}class="active"{{ end }}>
+              {{ .Name }}
+            </a>
+          </li>
+        {{ end }}
+      </ul>
+    </nav>
+    <button id="theme-toggle-btn" class="theme-toggle" aria-label="Toggle theme">🌙 dark</button>
+  </div>
+</div>
diff --git a/layouts/_partials/hero.html b/layouts/_partials/hero.html
new file mode 100644
index 0000000..11034be
--- /dev/null
+++ b/layouts/_partials/hero.html
@@ -0,0 +1,11 @@
+<section class="hero">
+  {{ partial "matrix-canvas.html" . }}
+  <div class="hero-content">
+    <div class="hero-avatar">{{ .Site.Params.avatar }}</div>
+    <div class="hero-text">
+      <h1>{{ .Site.Params.author }}</h1>
+      <div class="hero-role">// engineer • writer • human</div>
+      <p class="hero-bio">{{ .Site.Params.description }}</p>
+    </div>
+  </div>
+</section>
diff --git a/layouts/_partials/matrix-canvas.html b/layouts/_partials/matrix-canvas.html
new file mode 100644
index 0000000..b10b471
--- /dev/null
+++ b/layouts/_partials/matrix-canvas.html
@@ -0,0 +1 @@
+<canvas id="matrix-canvas"></canvas>
diff --git a/layouts/_partials/post-card.html b/layouts/_partials/post-card.html
new file mode 100644
index 0000000..7dd8c9a
--- /dev/null
+++ b/layouts/_partials/post-card.html
@@ -0,0 +1,16 @@
+{{ $featured := .featured }}
+<article class="post-card {{ if $featured }}featured{{ end }}">
+  {{ if .image }}
+    <img src="{{ .image }}" alt="{{ .title }}" class="post-card-image">
+  {{ else }}
+    <div class="post-card-image" style="background: linear-gradient(135deg, var(--color-{{ .type }}), var(--bg2));"></div>
+  {{ end }}
+  <div class="post-card-body">
+    <div class="post-type-badge {{ .type }}">{{ .type }}</div>
+    <h3 class="post-card-title"><a href="{{ .url }}">{{ .title }}</a></h3>
+    <p class="post-card-excerpt">{{ .description }}</p>
+    <div class="post-card-meta">
+      <span>{{ dateFormat "Jan 2, 2006" .date }}</span>
+    </div>
+  </div>
+</article>
diff --git a/layouts/baseof.html b/layouts/baseof.html
index 7d17aa5..ad6613f 100644
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -4,14 +4,9 @@
   {{ partial "head.html" . }}
 </head>
 <body>
-  <header>
-    {{ partial "header.html" . }}
-  </header>
-  <main>
-    {{ block "main" . }}{{ end }}
-  </main>
-  <footer>
-    {{ partial "footer.html" . }}
-  </footer>
+  <div class="reading-progress"></div>
+  <header>{{ partial "header.html" . }}</header>
+  <main>{{ block "main" . }}{{ end }}</main>
+  <footer>{{ partial "footer.html" . }}</footer>
 </body>
 </html>