1 files changed, 71 insertions, 0 deletions
diff --git a/layouts/partials/article-header.html b/layouts/partials/article-header.html
new file mode 100644
index 0000000..94c78a5
--- /dev/null
+++ b/layouts/partials/article-header.html
@@ -0,0 +1,71 @@
+{{ $articleType := .Params.type | default "life" }}
+{{ $typeConfig := .Site.Params.articleTypes }}
+{{ $typeData := index $typeConfig $articleType }}
+{{ $hasType := .Params.type }}
+
+<div class="mb-8 pb-8 border-b border-border">
+  <!-- Title with accent corner -->
+  <div class="relative mb-6">
+    <!-- Vertical accent line (left side) -->
+    {{ if and $typeData $hasType }}
+    <div
+      class="absolute left-0 top-0 bottom-0 w-1 rounded-full"
+      style="background-color: var(--type-{{ $articleType }});"
+    ></div>
+    {{ end }}
+
+    <!-- Horizontal accent line (bottom, 50% width with fade) -->
+    {{ if and $typeData $hasType }}
+    <div
+      class="absolute left-0 bottom-0 h-1 rounded-full"
+      style="width: 50%; background: linear-gradient(to right, var(--type-{{ $articleType }}), var(--type-{{ $articleType }}) 0%, transparent 100%);"
+    ></div>
+    {{ end }}
+
+    <h1 class="text-4xl md:text-5xl font-bold text-accent pl-6 pt-2">
+      {{ .Title }}
+    </h1>
+  </div>
+
+  <!-- Metadata -->
+  <div class="flex flex-wrap items-center gap-4 text-sm text-text-dim">
+    <!-- Publish date -->
+    {{ if .PublishDate }}
+    <div class="flex items-center gap-1">
+      <i data-feather="calendar" class="w-4 h-4"></i>
+      <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
+        {{ .PublishDate.Format "Jan 2, 2006" }}
+      </time>
+    </div>
+    {{ end }}
+
+    <!-- Update date if different -->
+    {{ if .Lastmod }}
+      {{ $lastmodDate := .Lastmod.Format "2006-01-02" }}
+      {{ $pubDate := .PublishDate.Format "2006-01-02" }}
+      {{ if ne $lastmodDate $pubDate }}
+      <div class="flex items-center gap-1">
+        <i data-feather="edit-2" class="w-4 h-4"></i>
+        <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}">
+          {{ .Lastmod.Format "Jan 2, 2006" }}
+        </time>
+      </div>
+      {{ end }}
+    {{ end }}
+
+    <!-- Reading time -->
+    {{ if .Site.Params.readingTime }}
+    <div class="flex items-center gap-1">
+      <i data-feather="clock" class="w-4 h-4"></i>
+      <span>{{ .ReadingTime }} {{ i18n "min" }} {{ i18n "readingTime" }}</span>
+    </div>
+    {{ end }}
+
+    <!-- Type badge -->
+    {{ if and $typeData $hasType }}
+    <span class="inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200" style="background-color: var(--type-{{ $articleType }}); border: 1px solid var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);">
+      {{ i18n $articleType }}
+    </span>
+    {{ end }}
+  </div>
+</div>