feat: complete Hugo theme implementation from mockups

Transform all production-ready mockup files into a fully functional Hugo theme with all design patterns, components, and interactivity. Implements the complete plan: token alignment, global shell, homepage, articles section, single article views, photo gallery, static pages, and 404 page. Changes: - Phase 0: Token alignment (--color-* → --type-*, add spacing/z-index/timing scales) - Phase 1a: Global shell (baseof.html, hamburger menu, theme toggle, matrix rain) - Phase 1b: Homepage (hero layout, glitch/typing/scroll-reveal effects) - Phase 1c: Articles section (timeline layout, filter system, featured cards) - Phase 1d: Single article (meta bar, share sidebar, footer nav, progress bar) - Phase 1e: Photo gallery (lightbox, grid layout, shortcode updates) - Phase 1f: Static pages (about/contact page layout) - Phase 1g: 404 page (standalone HTML, quote randomization, recent articles) New files: - 6 CSS components: hamburger, article-hero, share-sidebar, timeline, lightbox, 404 - 8 JS modules: hamburger, glitch, typing, scroll-reveal, share-sidebar, lightbox, 404, photo-utils - 6 template partials: article-single, featured-card, photo-article, share-sidebar, static-page, timeline-item - 1 layout: 404.html (standalone) Updated: - All CSS variables with comprehensive token system - All JS modules integrated into main.js - All shortcodes (gallery, gal-img) for lightbox compatibility - All layout files (baseof, home, section, page) with new dispatching logic Verified: Hugo build succeeds with 21 pages, no errors. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
author: Danilo M. <danix@danix.xyz> 2026-04-10 11:29:00 +0200
committer: Danilo M. <danix@danix.xyz> 2026-04-10 11:29:00 +0200
commit: c42150058196f5affad5c6c590e99dd2fc7321c3 (patch)
tree: cb0a7ad297128a43d32111e403959491573b6ace /layouts
parent: d51e4ef7dcd8609cd008a803f9d51674ac3d3ed2 (diff)
download: danixxyz-theme-c42150058196f5affad5c6c590e99dd2fc7321c3.tar.gz
danixxyz-theme-c42150058196f5affad5c6c590e99dd2fc7321c3.zip
16 files changed, 434 insertions, 100 deletions
diff --git a/layouts/404.html b/layouts/404.html
new file mode 100644
index 0000000..3295630
--- /dev/null
+++ b/layouts/404.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.Language.Locale }}" dir="{{ or .Site.Language.Direction `ltr` }}">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#060b10">
+  <title>404 — {{ .Site.Title }}</title>
+
+  <script>
+    (function() {
+      const theme = localStorage.getItem('theme') || 'dark';
+      if (theme === 'light') {
+        document.documentElement.classList.add('theme-light');
+      }
+    })();
+  </script>
+
+  {{ partialCached "head/css.html" . }}
+  {{ partialCached "head/js.html" . }}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css">
+  {{ $notfound := resources.Get "css/components/404.css" | fingerprint }}
+  <link rel="stylesheet" href="{{ $notfound.RelPermalink }}">
+</head>
+<body>
+  <a href="#main-content" class="skip-link">Skip to content</a>
+  <canvas id="matrix-canvas" aria-hidden="true" data-mode="background"></canvas>
+
+  {{ partial "header.html" . }}
+
+  <main id="main-content" class="hero--404">
+    <div class="content-wrapper">
+      <!-- Left: Quote + Search -->
+      <div class="hero-left-404">
+        <div class="quote-section">
+          <div class="quote-mark">"</div>
+          <p class="quote-text" id="quote-text">The page you're looking for doesn't exist. But that's okay, nothing exists until you find it.</p>
+          <p class="quote-author" id="quote-author">— 404 Philosopher</p>
+        </div>
+
+        <div class="search-box">
+          <input type="text" placeholder="Search articles..." aria-label="Search">
+          <button aria-label="Search">
+            <svg data-feather="search"></svg>
+          </button>
+        </div>
+
+        <nav class="quick-nav">
+          <h3>Quick Links</h3>
+          <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/articles/">Articles</a></li>
+            <li><a href="/is/">About</a></li>
+            <li><a href="/is/here">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+
+      <!-- Right: Recent Articles + Terminal -->
+      <div class="hero-right-404">
+        <div class="recent-articles">
+          <h3>Recent Articles</h3>
+          <ul>
+            {{ range first 5 (.Site.RegularPages.ByDate.Reverse) }}
+              <li>
+                <a href="{{ .RelPermalink }}" class="article-link" data-type="{{ .Params.type }}">
+                  {{ .Title }}
+                </a>
+              </li>
+            {{ end }}
+          </ul>
+        </div>
+
+        <div class="terminal-widget">
+          <div class="terminal-bar">
+            <span class="terminal-dot" style="background: #ff6b6b;"></span>
+            <span class="terminal-dot" style="background: #ffd93d;"></span>
+            <span class="terminal-dot" style="background: #6bcf7f;"></span>
+          </div>
+          <div class="terminal-content">
+            <div>$ <span class="terminal-prompt">curl https://danix.xyz/lost</span></div>
+            <div>404: Not Found</div>
+            <div>$ <span class="terminal-prompt">ls /articles</span></div>
+            <div id="terminal-files"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  {{ partial "footer.html" . }}
+
+  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+  <script>feather.replace();</script>
+
+  {{ $notFoundJS := resources.Get "js/404.js" | fingerprint }}
+  <script src="{{ $notFoundJS.RelPermalink }}"></script>
+</body>
+</html>
diff --git a/layouts/_partials/article-single.html b/layouts/_partials/article-single.html
new file mode 100644
index 0000000..f030869
--- /dev/null
+++ b/layouts/_partials/article-single.html
@@ -0,0 +1,56 @@
+<article class="article-single">
+  <!-- Article Hero -->
+  {{ if .Params.image }}
+    <div class="article-hero" style="background-image: url('{{ .Params.image }}')">
+      <div class="article-hero-overlay"></div>
+      <div class="article-hero-content">
+        <nav class="article-breadcrumb">
+          <a href="/articles/">Articles</a>
+          <span>/</span>
+          <span>{{ .Title }}</span>
+        </nav>
+        <h1>{{ .Title }}</h1>
+      </div>
+    </div>
+  {{ end }}
+
+  <!-- Article Meta Bar -->
+  <div class="article-meta-bar">
+    <div class="article-meta">
+      <span class="article-type-badge type-{{ .Params.type }}">{{ .Params.type }}</span>
+      <span class="article-date">{{ .Date.Format "Jan 02, 2006" }}</span>
+      <span class="article-read-time">{{ .ReadingTime }} min read</span>
+    </div>
+  </div>
+
+  <!-- Share Sidebar (for large screens) -->
+  {{ partial "share-sidebar.html" . }}
+
+  <!-- Article Body -->
+  <div class="article-body container-narrow">
+    {{ .Content }}
+  </div>
+
+  <!-- Article Footer Nav -->
+  {{ $section := .Site.GetPage .Section }}
+  {{ if $section }}
+    {{ $prevPage := .PrevInSection }}
+    {{ $nextPage := .NextInSection }}
+    {{ if or $prevPage $nextPage }}
+      <nav class="article-footer-nav">
+        {{ if $prevPage }}
+          <a href="{{ $prevPage.RelPermalink }}" class="nav-prev">
+            <span class="nav-label">← Previous</span>
+            <span class="nav-title">{{ $prevPage.Title }}</span>
+          </a>
+        {{ end }}
+        {{ if $nextPage }}
+          <a href="{{ $nextPage.RelPermalink }}" class="nav-next">
+            <span class="nav-label">Next →</span>
+            <span class="nav-title">{{ $nextPage.Title }}</span>
+          </a>
+        {{ end }}
+      </nav>
+    {{ end }}
+  {{ end }}
+</article>
diff --git a/layouts/_partials/featured-card.html b/layouts/_partials/featured-card.html
new file mode 100644
index 0000000..cf2618f
--- /dev/null
+++ b/layouts/_partials/featured-card.html
@@ -0,0 +1,23 @@
+{{ $page := .page }}
+
+<article class="featured-article">
+  {{ if $page.Params.image }}
+    <div class="featured-image">
+      <img src="{{ $page.Params.image }}" alt="{{ $page.Title }}" loading="lazy">
+    </div>
+  {{ end }}
+
+  <div class="featured-body">
+    <div class="featured-header">
+      <span class="featured-type-badge" style="color: var(--type-{{ $page.Params.type }});">
+        {{ $page.Params.type }}
+      </span>
+      <span class="featured-date">$ {{ $page.Date.Format "2006-01-02" }}</span>
+    </div>
+    <h2 class="featured-title">{{ $page.Title }}</h2>
+    {{ with $page.Params.description }}
+      <p class="featured-excerpt">{{ . }}</p>
+    {{ end }}
+    <a href="{{ $page.RelPermalink }}" class="featured-link">Read the full article →</a>
+  </div>
+</article>
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 872c207..1f8efb8 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -1,17 +1,29 @@
-<div class="header-container">
-  <a href="/" class="site-title">{{ .Site.Params.author }}</a>
-  <div class="header-controls">
-    <nav>
-      <ul>
+<nav class="nav-header" role="navigation" aria-label="Main navigation">
+  <button class="hamburger" id="hamburger-btn" aria-label="Toggle menu" aria-expanded="false">
+    <span></span>
+    <span></span>
+    <span></span>
+  </button>
+
+  <div class="menu-overlay" id="menu-overlay">
+    <div class="menu-items">
+      <a href="/" class="menu-logo">{{ .Site.Params.author }}</a>
+
+      <ul class="menu-links">
         {{ range .Site.Menus.main }}
           <li>
-            <a href="{{ .URL }}" {{ if (in $.RelPermalink .URL) }}class="active"{{ end }}>
+            <a href="{{ .URL }}" {{ if (in $.RelPermalink .URL) }}aria-current="page"{{ end }}>
               {{ .Name }}
             </a>
           </li>
         {{ end }}
       </ul>
-    </nav>
-    <button id="theme-toggle-btn" class="theme-toggle" aria-label="Toggle theme">🌙 dark</button>
+
+      <div class="menu-footer">
+        <button class="theme-switch" id="theme-switch" aria-label="Toggle theme">
+          <span class="theme-switch-dot"></span>
+        </button>
+      </div>
+    </div>
   </div>
-</div>
+</nav>
diff --git a/layouts/_partials/hero.html b/layouts/_partials/hero.html
index 11034be..ac8a4e1 100644
--- a/layouts/_partials/hero.html
+++ b/layouts/_partials/hero.html
@@ -1,11 +1,39 @@
-<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>
+<section class="hero" role="region" aria-label="Hero">
+  <div class="hero-left">
+    <div class="hero-prompt">// Featured</div>
+    <h1 class="hero-name" data-text="{{ .Site.Params.author }}">{{ .Site.Params.author }}</h1>
+    <div class="hero-role" id="typed" data-phrases='{{ .Site.Params.typingPhrases | jsonify }}'></div>
+    <p class="hero-tagline">{{ .Site.Params.description }}</p>
+    <div class="hero-buttons">
+      <a href="/articles/" class="btn btn-primary">Read Articles</a>
+      <a href="#articles" class="btn btn-outline">Explore</a>
     </div>
   </div>
+
+  <div class="hero-right">
+    <div class="hero-terminal">
+      <div class="terminal-bar">
+        <span class="terminal-dot" style="background: #ff6b6b;"></span>
+        <span class="terminal-dot" style="background: #ffd93d;"></span>
+        <span class="terminal-dot" style="background: #6bcf7f;"></span>
+      </div>
+      <div class="terminal-content">
+        <div>$ <span class="terminal-prompt">whoami</span></div>
+        <div>danilo</div>
+        <div>$ <span class="terminal-prompt">pwd</span></div>
+        <div>/home/danilo/web</div>
+        <div>$ <span class="terminal-prompt">ls -la</span></div>
+        <div>total 48</div>
+        <div>drwxr-xr-x  5 danilo  staff   160 Apr 9 2026 .</div>
+        <div>-rw-r--r--  1 danilo  staff  4.2K blog.md</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="scroll-indicator">
+    <span>Scroll to explore</span>
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <path d="M10 3v10M6 9l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </div>
 </section>
diff --git a/layouts/_partials/matrix-canvas.html b/layouts/_partials/matrix-canvas.html
deleted file mode 100644
index b10b471..0000000
--- a/layouts/_partials/matrix-canvas.html
+++ /dev/null
@@ -1 +0,0 @@
-<canvas id="matrix-canvas"></canvas>
diff --git a/layouts/_partials/photo-article.html b/layouts/_partials/photo-article.html
new file mode 100644
index 0000000..1040c9b
--- /dev/null
+++ b/layouts/_partials/photo-article.html
@@ -0,0 +1,32 @@
+<article class="article-single">
+  <!-- Photo Hero -->
+  {{ if .Params.image }}
+    <div class="article-hero" style="background-image: url('{{ .Params.image }}')">
+      <div class="article-hero-overlay"></div>
+      <div class="article-hero-content">
+        <h1>{{ .Title }}</h1>
+      </div>
+    </div>
+  {{ end }}
+
+  <!-- Article Meta Bar -->
+  <div class="article-meta-bar">
+    <div class="article-meta">
+      <span class="article-type-badge type-{{ .Params.type }}">{{ .Params.type }}</span>
+      <span class="article-date">{{ .Date.Format "Jan 02, 2006" }}</span>
+    </div>
+  </div>
+
+  <!-- Photo Grid -->
+  <div class="article-body container-narrow">
+    <div class="photo-grid" data-lightbox="true">
+      {{ .Content }}
+    </div>
+  </div>
+
+  <!-- Load photo utilities -->
+  {{ $photoUtils := resources.Get "js/photo-utils.js" }}
+  {{ $lightbox := resources.Get "js/lightbox.js" | fingerprint }}
+  <script src="{{ $photoUtils.RelPermalink }}"></script>
+  <script src="{{ $lightbox.RelPermalink }}"></script>
+</article>
diff --git a/layouts/_partials/share-sidebar.html b/layouts/_partials/share-sidebar.html
new file mode 100644
index 0000000..36b6d03
--- /dev/null
+++ b/layouts/_partials/share-sidebar.html
@@ -0,0 +1,28 @@
+<aside class="share-sidebar" id="share-sidebar" data-url="{{ .Permalink }}" data-title="{{ .Title | htmlEscape }}">
+  <div class="share-buttons">
+    <button class="share-btn" data-platform="whatsapp" title="Share on WhatsApp">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+    </button>
+    <button class="share-btn" data-platform="telegram" title="Share on Telegram">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
+    </button>
+    <button class="share-btn" data-platform="linkedin" title="Share on LinkedIn">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"></path><circle cx="4" cy="4" r="2"></circle></svg>
+    </button>
+    <button class="share-btn" data-platform="twitter" title="Share on X (Twitter)">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2s9 5 20 0a9.5 9.5 0 0 0 5-6.5"></path></svg>
+    </button>
+    <button class="share-btn" data-platform="facebook" title="Share on Facebook">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a6 6 0 0 0-6 6v4a6 6 0 0 0 6 6h3"></path><path d="M16 18v2"></path><path d="M6 6v12"></path></svg>
+    </button>
+    <button class="share-btn" data-platform="reddit" title="Share on Reddit">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm7-3c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3z"></path></svg>
+    </button>
+    <button class="share-btn" data-platform="email" title="Share via Email">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>
+    </button>
+    <button class="share-btn" id="share-copy" title="Copy link">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+    </button>
+  </div>
+</aside>
diff --git a/layouts/_partials/static-page.html b/layouts/_partials/static-page.html
new file mode 100644
index 0000000..d557b2f
--- /dev/null
+++ b/layouts/_partials/static-page.html
@@ -0,0 +1,33 @@
+<article class="static-page">
+  <!-- Static Page Hero -->
+  <div class="page-hero">
+    <div class="page-hero-overlay"></div>
+    <div class="page-hero-content">
+      <h1>{{ .Title }}</h1>
+    </div>
+  </div>
+
+  <!-- Page Content -->
+  <div class="page-content container-narrow">
+    {{ .Content }}
+  </div>
+
+  <!-- Related Pages Nav (for is/* section) -->
+  {{ if eq .Section "is" }}
+    <nav class="page-nav" style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border);">
+      <h3 style="margin-bottom: 1rem;">Other pages</h3>
+      <ul style="list-style: none; margin: 0;">
+        {{ $section := .Site.GetPage "/is" }}
+        {{ if $section }}
+          {{ range $section.Pages }}
+            <li style="margin-bottom: 0.5rem;">
+              <a href="{{ .RelPermalink }}" {{ if eq $.RelPermalink .RelPermalink }}class="active"{{ end }}>
+                {{ .Title }}
+              </a>
+            </li>
+          {{ end }}
+        {{ end }}
+      </ul>
+    </nav>
+  {{ end }}
+</article>
diff --git a/layouts/_partials/timeline-item.html b/layouts/_partials/timeline-item.html
new file mode 100644
index 0000000..fcb3f50
--- /dev/null
+++ b/layouts/_partials/timeline-item.html
@@ -0,0 +1,31 @@
+{{ $page := .page }}
+{{ $index := .index }}
+{{ $position := "left" }}
+{{ if (eq (mod $index 2) 1) }}
+  {{ $position = "right" }}
+{{ end }}
+
+<article class="timeline-item {{ $position }}" data-type="{{ $page.Params.type }}">
+  <div class="timeline-dot"></div>
+  
+  <div class="article-card">
+    {{ if $page.Params.image }}
+      <div class="article-card-image">
+        <img src="{{ $page.Params.image }}" alt="{{ $page.Title }}" loading="lazy">
+      </div>
+    {{ end }}
+
+    <div class="article-card-body">
+      <div class="article-card-header">
+        <span class="article-type-badge type-{{ $page.Params.type }}">{{ $page.Params.type }}</span>
+        <span class="article-date">{{ $page.Date.Format "Jan 02, 2006" }}</span>
+      </div>
+      <h3 class="article-card-title">
+        <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
+      </h3>
+      {{ with $page.Params.description }}
+        <p class="article-card-excerpt">{{ . }}</p>
+      {{ end }}
+    </div>
+  </div>
+</article>
diff --git a/layouts/baseof.html b/layouts/baseof.html
index ad6613f..c9633d0 100644
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -2,11 +2,21 @@
 <html lang="{{ site.Language.Locale }}" dir="{{ or site.Language.Direction `ltr` }}">
 <head>
   {{ partial "head.html" . }}
+  <script>
+    (function() {
+      const theme = localStorage.getItem('theme') || 'dark';
+      if (theme === 'light') {
+        document.documentElement.classList.add('theme-light');
+      }
+    })();
+  </script>
 </head>
 <body>
-  <div class="reading-progress"></div>
-  <header>{{ partial "header.html" . }}</header>
-  <main>{{ block "main" . }}{{ end }}</main>
+  <a href="#main-content" class="skip-link">Skip to content</a>
+  <div class="progress-bar" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+  <canvas id="matrix-canvas" aria-hidden="true" data-mode="{{ block "canvas-mode" . }}background{{ end }}"></canvas>
+  {{ partial "header.html" . }}
+  <main id="main-content">{{ block "main" . }}{{ end }}</main>
   <footer>{{ partial "footer.html" . }}</footer>
 </body>
 </html>
diff --git a/layouts/home.html b/layouts/home.html
index f285b41..6328ee5 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -1,29 +1,27 @@
+{{ define "canvas-mode" }}hero{{ end }}
+
 {{ define "main" }}
   {{ partial "hero.html" . }}
 
-  <div class="container feed-section">
-    <div class="feed-label">Latest</div>
-
-    <div class="feed-grid">
-      {{ $articlesSection := .Site.GetPage "/articles" }}
-      {{ if $articlesSection }}
-        {{ $articles := $articlesSection.Pages }}
-        {{ $articles := sort $articles "Date" "desc" }}
-        {{ range first 6 $articles }}
-          {{ $type := .Params.type }}
-          {{ if not $type }}{{ $type = "article" }}{{ end }}
+  <section id="articles" class="section-container reveal-group">
+    {{ $articlesSection := .Site.GetPage "/articles" }}
+    {{ if $articlesSection }}
+      {{ $articles := $articlesSection.Pages }}
+      {{ $articles := sort $articles "Date" "desc" }}
+      {{ range first 6 $articles }}
+        {{ $type := .Params.type }}
+        {{ if not $type }}{{ $type = "article" }}{{ end }}
 
-          {{ $excerpt := .Params.excerpt }}
-          {{ if not $excerpt }}
-            {{ $excerpt = .Summary | plainify | truncate 150 }}
-          {{ end }}
-
-          {{ $data := dict "title" .Title "type" $type "description" $excerpt "date" .Date "url" .RelPermalink "image" .Params.image "featured" .Params.featured }}
-          {{ partial "post-card.html" $data }}
+        {{ $excerpt := .Params.excerpt }}
+        {{ if not $excerpt }}
+          {{ $excerpt = .Summary | plainify | truncate 150 }}
         {{ end }}
+
+        {{ $data := dict "title" .Title "type" $type "description" $excerpt "date" .Date "url" .RelPermalink "image" .Params.image "featured" .Params.featured }}
+        {{ partial "post-card.html" $data }}
       {{ end }}
-    </div>
+    {{ end }}
 
-    <a href="/articles/" class="feed-cta">View all articles</a>
-  </div>
+    <a href="/articles/" class="btn btn-outline">View All Articles</a>
+  </section>
 {{ end }}
diff --git a/layouts/page.html b/layouts/page.html
index 8fb2903..44073b2 100644
--- a/layouts/page.html
+++ b/layouts/page.html
@@ -1,35 +1,9 @@
 {{ define "main" }}
-  <article class="page-page">
-    <div class="container-narrow">
-      <h1>{{ .Title }}</h1>
-      <div class="post-card-meta" style="margin-bottom: 2rem;">
-        <span>{{ dateFormat "Jan 2, 2006" .Date }}</span>
-        {{ if .Params.type }}<span class="post-type-badge {{ .Params.type }}">{{ .Params.type }}</span>{{ end }}
-      </div>
-
-      <div class="post-content">
-        {{ .Content }}
-      </div>
-    </div>
-  </article>
-
-  {{ if eq .Type "is" }}
-    <div class="container-narrow" style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border);">
-      <nav class="page-nav">
-        <h3 style="margin-bottom: 1rem;">Other pages</h3>
-        <ul style="list-style: none; margin: 0;">
-          {{ $section := .Site.GetPage "/is" }}
-          {{ if $section }}
-            {{ range $section.Pages }}
-              <li style="margin-bottom: 0.5rem;">
-                <a href="{{ .RelPermalink }}" {{ if eq $.RelPermalink .RelPermalink }}class="active"{{ end }}>
-                  {{ .Title }}
-                </a>
-              </li>
-            {{ end }}
-          {{ end }}
-        </ul>
-      </nav>
-    </div>
+  {{ if eq .Params.type "photo" }}
+    {{ partial "photo-article.html" . }}
+  {{ else if eq .Section "is" }}
+    {{ partial "static-page.html" . }}
+  {{ else }}
+    {{ partial "article-single.html" . }}
   {{ end }}
 {{ end }}
diff --git a/layouts/section.html b/layouts/section.html
index b9f0646..d817087 100644
--- a/layouts/section.html
+++ b/layouts/section.html
@@ -1,9 +1,9 @@
 {{ define "main" }}
-  <div class="container">
-    <h1>{{ .Title }}</h1>
-
-    {{ if eq .Type "articles" }}
-      <div class="filter-bar">
+  {{ if eq .Type "articles" }}
+    <!-- Articles Section with Timeline -->
+    <div class="page-header">
+      <h1>{{ .Title }}</h1>
+      <div class="filter-buttons">
         <button class="filter-btn active" data-filter="all">All</button>
         <button class="filter-btn" data-filter="tech">Tech</button>
         <button class="filter-btn" data-filter="life">Life</button>
@@ -11,25 +11,30 @@
         <button class="filter-btn" data-filter="link">Link</button>
         <button class="filter-btn" data-filter="photo">Photo</button>
       </div>
+    </div>
 
-      <div class="feed-list" id="articles-feed">
-        {{ range .Pages.ByDate.Reverse }}
-          {{ $excerpt := .Params.excerpt }}
-          {{ if not $excerpt }}
-            {{ $excerpt = .Summary | plainify | truncate 150 }}
-          {{ end }}
+    {{ $featured := (.Pages.ByDate.Reverse) }}
+    {{ if and $featured (index $featured 0).Params.featured }}
+      {{ partial "featured-card.html" (dict "page" (index $featured 0)) }}
+    {{ end }}
 
-          {{ $data := dict "title" .Title "type" .Params.type "description" $excerpt "date" .Date "url" .RelPermalink "image" .Params.image "featured" false }}
-          {{ partial "post-card.html" $data }}
+    <section class="timeline-section">
+      <div class="timeline-line"></div>
+      <div class="timeline-feed">
+        {{ $pages := .Pages.ByDate.Reverse }}
+        {{ range $index, $page := $pages }}
+          {{ partial "timeline-item.html" (dict "page" $page "index" $index) }}
         {{ end }}
       </div>
-    {{ else }}
-      {{ .Content }}
-    {{ end }}
-  </div>
+    </section>
 
-  {{ if eq .Type "articles" }}
     {{ $filters := resources.Get "js/filters.js" | fingerprint }}
     <script defer src="{{ $filters.RelPermalink }}"></script>
+
+  {{ else }}
+    <!-- Static Section (is/about, is/contact, etc.) -->
+    <div class="container-narrow" style="padding-top: 2rem;">
+      {{ .Content }}
+    </div>
   {{ end }}
 {{ end }}
diff --git a/layouts/shortcodes/gal-img.html b/layouts/shortcodes/gal-img.html
index 0693319..ae7d23e 100644
--- a/layouts/shortcodes/gal-img.html
+++ b/layouts/shortcodes/gal-img.html
@@ -1,7 +1,16 @@
 {{- $src := .Get "src" -}}
 {{- $source := resources.Get $src -}}
 {{- $alt := .Get "alt" -}}
-{{- $icon := $source.Resize "400x webp" -}}
-<a class="gallery-item" href="{{ $source.RelPermalink }}" target="_blank">
-    <img src="{{ $icon.RelPermalink }}" alt="{{ $alt }}">
-</a>
+{{- $caption := .Get "caption" -}}
+{{- $location := .Get "location" -}}
+{{- $fullsize := $source -}}
+{{- $thumb := $source.Resize "400x webp" -}}
+<figure class="photo-card"
+  data-photo-index="{{ .Ordinal }}"
+  data-src="{{ $fullsize.RelPermalink }}"
+  data-alt="{{ $alt }}"
+  data-caption="{{ $caption }}"
+  data-location="{{ $location }}">
+  <img src="{{ $thumb.RelPermalink }}" alt="{{ $alt }}" loading="lazy">
+  {{ with $caption }}<figcaption>{{ . }}</figcaption>{{ end }}
+</figure>
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
index 8a30fc5..f9e546e 100644
--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -1,5 +1,3 @@
-<div class="gallery">
-    <div class="gallery-inner">
-        {{ .Inner }}
-    </div>
+<div class="photo-grid" data-lightbox="true">
+    {{ .Inner }}
 </div>
author	Danilo M. <danix@danix.xyz>	2026-04-10 11:29:00 +0200
committer	Danilo M. <danix@danix.xyz>	2026-04-10 11:29:00 +0200
commit	c42150058196f5affad5c6c590e99dd2fc7321c3 (patch)
tree	cb0a7ad297128a43d32111e403959491573b6ace /layouts
parent	d51e4ef7dcd8609cd008a803f9d51674ac3d3ed2 (diff)
download	danixxyz-theme-c42150058196f5affad5c6c590e99dd2fc7321c3.tar.gz danixxyz-theme-c42150058196f5affad5c6c590e99dd2fc7321c3.zip