2 files changed, 41 insertions, 22 deletions
diff --git a/themes/danix-xyz-hacker/layouts/partials/article-header.html b/themes/danix-xyz-hacker/layouts/partials/article-header.html
index b759909..a52f643 100644
--- a/themes/danix-xyz-hacker/layouts/partials/article-header.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-header.html
@@ -3,19 +3,28 @@
 {{ $typeData := index $typeConfig $articleType }}
 
 <div class="mb-8 pb-8 border-b border-border">
-  <!-- Type badge -->
-  {{ if $typeData }}
-  <span
-    class="inline-flex items-center px-3 py-1 rounded text-sm font-semibold mb-4 transition-colors type-{{ $articleType }}"
-  >
-    {{ i18n $articleType }}
-  </span>
-  {{ end }}
+  <!-- Title with accent corner -->
+  <div class="relative mb-6">
+    <!-- Vertical accent line (left side) -->
+    {{ if $typeData }}
+    <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 $typeData }}
+    <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 }}
 
-  <!-- Title -->
-  <h1 class="text-4xl md:text-5xl font-bold text-accent mb-4">
-    {{ .Title }}
-  </h1>
+    <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">
@@ -50,5 +59,15 @@
       <span>{{ .ReadingTime }} {{ i18n "min" }} {{ i18n "readingTime" }}</span>
     </div>
     {{ end }}
+
+    <!-- Type badge -->
+    {{ if $typeData }}
+    <span
+      class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold text-white transition-colors"
+      style="background-color: var(--type-{{ $articleType }});"
+    >
+      {{ i18n $articleType }}
+    </span>
+    {{ end }}
   </div>
 </div>
diff --git a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
index e491125..70d530c 100644
--- a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
@@ -16,13 +16,22 @@
 <article class="border border-border/30 rounded-lg overflow-hidden hover:border-accent/50 transition-all duration-200 group">
   <!-- Thumbnail -->
   {{ if $imageURL }}
-  <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50" tabindex="-1">
+  <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50 relative" tabindex="-1">
     <img
       src="{{ $imageURL }}"
       alt="{{ .Title }}"
       class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-200"
       loading="lazy"
     />
+    <!-- Type badge pill overlay -->
+    {{ if $typeData }}
+    <div
+      class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold text-white transition-opacity"
+      style="background-color: var(--type-{{ $articleType }});"
+    >
+      {{ i18n $articleType }}
+    </div>
+    {{ end }}
   </a>
   {{ end }}
 
@@ -48,15 +57,6 @@
       <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
         {{ .PublishDate.Format "Jan 2, 2006" }}
       </time>
-
-      <!-- Type badge -->
-      {{ if $typeData }}
-      <span
-        class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium transition-colors type-{{ $articleType }}"
-      >
-        {{ i18n $articleType }}
-      </span>
-      {{ end }}
     </div>
 
     <!-- Excerpt -->