refactor: replace _header.scss with UnoCSS and remove post-page-header

9 files changed, 47 insertions, 164 deletions

diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
deleted file mode 100644
index c099e535..00000000
--- a/assets/css/components/_header.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-#site-header {
-    /* header */
-
-    .header-title {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0.5rem;
-
-        .title-image {
-            width: 10rem
-        }
-
-        .title-link {
-            font-size: 2rem;
-            font-weight: 900;
-            text-align: center;
-            letter-spacing: .15rem;
-            filter: url(#x);
-        }
-    }
-
-    .header-title a {
-      text-decoration: none;
-    }
-
-    .header-subtitle {
-      color: var(--secondary-text-color);
-    }
-
-    .header-line {
-      width: 100%;
-      border-width: 1px;
-      border-color: var(--border-color);
-      border-style: solid none none none;
-    }
-
-    /* navigation */
-
-    #navigation-bar {
-        --gap: .75rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: var(--gap);
-        padding-left: calc(1rem + var(--gap))
-    }
-
-    .navigation {
-      margin: 1rem 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: fit-content;
-      border-radius: 1rem;
-      overflow: hidden;
-    }
-
-    .navigation-item a {
-      display: inline-block;
-      color: var(--background-color);
-      padding: 0.25rem 0.5rem;
-      background-color: var(--text-color);
-    }
-
-    .navigation-item:first-child a {
-      padding-left: 0.75rem
-    }
-
-    .navigation-item:last-child a {
-      padding-right: 0.75rem
-    }
-
-    .navigation-item.active a {
-      color: var(--text-color);
-      background-color: var(--block-background-color);
-    }
-
-    .navigation-item a:hover {
-      text-decoration: none;
-    }
-}
-
-/* skull logo */
-
-#post-page-header {
-    margin: 0 auto;
-    margin-bottom: 2rem;
-    max-width: var(--page-width);
-
-    .title-image {
-        width: 10rem;
-    }
-}
-
-#post-page-header.with-banner {
-    .title-image-container {
-        @include roundSticker;
-        transform: rotate(7deg);
-
-        position: absolute;
-        z-index: 5;
-        right: 0.25rem;
-        top: 0.25rem;
-        width: 3rem;
-        padding: 0.5rem;
-
-        @media screen and (min-width: 640px) {
-            right: 0.5rem;
-            top: 0.5rem;
-            width: 4rem;
-            padding: 1rem;
-        }
-
-        @media screen and (min-width: 768px) {
-            width: 6rem;
-            left: calc(50vw + var(--page-width) / 2 - 7rem);
-            top: calc(var(--page-margin-y) - 2rem);
-        }
-
-        @media screen and (min-width: 768px) {
-            width: 6rem;
-            left: calc(50vw + var(--page-width) / 2 - 7rem);
-            top: calc(var(--page-margin-y) - 2rem);
-        }
-
-        @media screen and (min-width: 1200px) {
-            width: 8rem;
-            left: calc(50vw + var(--page-width) / 2 - 5rem);
-        }
-
-        .title-image {
-            width: 100%;
-        }
-    }
-}
diff --git a/assets/css/global.scss b/assets/css/global.scss
index 2cfdb01f..950c24a3 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -4,7 +4,6 @@
 @import "utils/utility";
 
 @import "components/markdown";
-@import "components/header";
 @import "components/pages";
 @import "components/taxonomy";
 @import "components/postlist";
diff --git a/layouts/_partials/components/logo.html b/layouts/_partials/components/logo.html
index 79da48e8..1bb967a0 100644
--- a/layouts/_partials/components/logo.html
+++ b/layouts/_partials/components/logo.html
@@ -2,10 +2,11 @@
 {{ $link := .link | default "" }}
 {{ $src := .src | default $default }}
 {{ $class := .class | default "" }}
+{{ $imageClass := .imageClass | default "" }}
 
 <a href="{{ .Site.LanguagePrefix }}/{{ $link }}"
     class="title-image-container {{ $class }}">
     <img src="{{ $src }}" alt="Logo"
-        class="invert-if-dark title-image w-full"
+        class="invert-if-dark title-image {{ $imageClass }}"
         style="view-transition-name: title-image" />
 </a>
diff --git a/layouts/_partials/components/post-page-header.html b/layouts/_partials/components/post-page-header.html
deleted file mode 100644
index fffe4f3b..00000000
--- a/layouts/_partials/components/post-page-header.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<header id="post-page-header"
-    class="{{ with .Params.banner }}with-banner{{ end }} {{ if eq .Section "fictions" }} flex justify-center {{ end }}">
-    {{ if eq .Section "fictions" }}
-        {{ partial "components/logo" (dict "src" "/img/potted-skeleton.svg" "link" "fictions") }}
-    {{ else }}
-        {{ partial "components/logo" }}
-    {{ end }}
-</header>
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 1804ca0f..98d6109e 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -1,18 +1,25 @@
 <header id="site-header">
   <!-- Header Title -->
-  <div class="header-title">
-    {{ partial "components/logo" }}
-    <a class="title-link" href="{{ .Site.LanguagePrefix }}/"
+  <div class="flex flex-col items-center gap-[0.5rem]">
+    {{ partial "components/logo" (dict "imageClass" "w-[10rem]") }}
+    <a class="text-[2rem] font-900 text-center tracking-[.15rem]
+        xerox underline-offset-10 underline-3"
+        href="{{ .Site.LanguagePrefix }}/"
       >{{ .Site.Title }}</a
     >
   </div>
   <!-- Navigation -->
-  <div id="navigation-bar">
-      <nav class="navigation">
+  <div class="flex justify-center items-center gap-[0.75rem] pl-[1rem]">
+      <nav class="my-[1rem] flex justify-center items-center w-fit rounded-[1rem] overflow-hidden">
         {{ range .Site.Params.nav }}
-        <div class="navigation-item {{ if strings.Contains $.Page.RelPermalink .link }}active{{ end }}">
-          <a href="{{ .link }}" target="{{ .target }}" data-umami-event="💊 Click header navigation">{{ .name }}</a>
-        </div>
+        <a class="inline-block py-[0.25rem] px-[0.5rem] first:pl-[0.75rem] last:pr-[0.75rem]
+            block hover:no-underline
+            {{ if strings.Contains $.Page.RelPermalink .link }}
+            text-[var(--text-color)] bg-[var(--block-background-color)]
+            {{ else }}
+            text-[var(--background-color)] bg-[var(--text-color)]
+            {{ end }}"
+        href="{{ .link }}" target="{{ .target }}" data-umami-event="💊 Click header navigation">{{ .name }}</a>
         {{ end }}
       </nav>
 
diff --git a/layouts/fictions/page.html b/layouts/fictions/page.html
index 5654ffbb..1daccf7c 100644
--- a/layouts/fictions/page.html
+++ b/layouts/fictions/page.html
@@ -1,13 +1,17 @@
 {{ define "main" }}
-    {{ partial "components/post-page-header.html" . }}
     <article>
       <!-- Post Header -->
-      <header
-        style="view-transition-name: post-{{ .File.UniqueID }}"
-        class="text-center"
-      >
-        {{ partial "posts/banner" . }}
-        <h1 class="xerox text-4xl font-900" data-pagefind-meta="title">{{ .Title }}</h1>
+      <header class="text-center">
+        {{ partial "components/logo" (dict
+            "link" "fictions/"
+            "src" "/img/potted-skeleton.svg"
+            "imageClass" "block w-[10rem]"
+            "class" "flex justify-center"
+        ) }}
+        <h1
+            class="xerox text-4xl font-900"
+            data-pagefind-meta="title"
+        ><span style="view-transition-name: post-{{ .File.UniqueID }}">{{ .Title }}</span></h1>
         <div class="font-secondary">{{ partial "components/date" . }}</div>
       </header>
 
diff --git a/layouts/library/page.html b/layouts/library/page.html
index fa7cee46..e4f7949a 100644
--- a/layouts/library/page.html
+++ b/layouts/library/page.html
@@ -11,7 +11,8 @@
                 {{ partial "components/logo"
                 (dict
                     "link" "library"
-                    "class" "round-sticker absolute w-[2rem] h-[2rem] md:w-[5rem] md:h-[5rem] top-[2rem] right-[-2rem] md:right-[-3rem]") }}
+                    "class" "round-sticker absolute w-[2rem] h-[2rem] md:w-[5rem] md:h-[5rem] top-[2rem] right-[-2rem] md:right-[-3rem]"
+                    "imageClass" "w-full") }}
             </div>
             <h1 class="xerox" data-pagefind-meta="title">{{ .Title }}</h1>
             {{- $rating := .Params.rating -}}
diff --git a/layouts/posts/page.html b/layouts/posts/page.html
index bdb0f617..446116fb 100644
--- a/layouts/posts/page.html
+++ b/layouts/posts/page.html
@@ -1,11 +1,19 @@
 {{ define "main" }}
-    {{ partial "components/post-page-header.html" . }}
     <article class="post" id="article">
       <!-- Post Header -->
       <header
         style="view-transition-name: post-{{ .File.UniqueID }}"
-        class="post-header"
+        class="post-header relative"
       >
+        {{ if .Params.banner }}
+            {{ partial "components/logo" (dict
+                "class" "block round-sticker w-[5rem] h-[5rem] md:w-[7rem] md:h-[7rem] right-[-3rem] md:right-[-5rem] top-[1rem] absolute rotate-[3.0deg]"
+                "imageClass" "block w-full"
+            ) }}
+        {{ else }}
+            {{ partial "components/logo" }}
+        {{ end }}
+
         {{ partial "posts/banner" . }}
         <!-- Title and Subtitle -->
         <h1 class="post-title">
diff --git a/uno.config.js b/uno.config.js
index c3c6362c..3fc222d3 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -28,12 +28,19 @@ export default defineConfig({
       'opacity-[1.0]',
 
       'absolute',
+      'right-0',
       'w-[5rem]',
       'h-[5rem]',
       'top-[2rem]',
       'w-[calc(25%_-_1rem)]',
       'w-[calc(50%_-_2rem)]',
+      'w-[10rem]',
       'sm:w-full',
+      'right-[-3rem]',
+      'top-[1rem]',
+      'md:w-[7rem]',
+      'md:h-[7rem]',
+      'md:right-[-5rem]'
     ],
   content: {
     filesystem: ['./**/*.{html,md,js}'],