From e155e276a30062594e39139b3eb6bc7c36500602 Mon Sep 17 00:00:00 2001
From: Himadri Bhattacharjee <107522312+lavafroth@users.noreply.github.com>
Date: Sat, 25 Oct 2025 18:41:07 +0530
Subject: [PATCH] feat: semantic nav and header

---
 themes/paprika/assets/app.css               | 75 ++++++++++-----------
 themes/paprika/layouts/partials/header.html | 13 ++--
 2 files changed, 41 insertions(+), 47 deletions(-)

diff --git a/themes/paprika/assets/app.css b/themes/paprika/assets/app.css
index 75887ae3..e1aa2160 100644
--- a/themes/paprika/assets/app.css
+++ b/themes/paprika/assets/app.css
@@ -31,7 +31,7 @@
 
 .site-name>svg {
   width: 18rem;
-  fill: var(--dark)
+  fill: var(--dark);
 }
 
 .math {
@@ -58,16 +58,14 @@ html {
   font-size: 8px;
 }
 
-.pagefind-ui__search-clear {
-  height: calc(60px * var(--pagefind-ui-scale) - 1px) !important;
-}
-
-.pagefind-ui * {
-  transition: background 0.4s ease-out !important;
-}
-
-.pagefind-ui__search-input::placeholder {
-  opacity: .5 !important;
+#search {
+  margin-bottom: var(--gap);
+  button {
+    background: transparent;
+  }
+  input::placeholder {
+    opacity: .5;
+  }
 }
 
 body {
@@ -97,7 +95,6 @@ body {
   color: var(--pro);
   word-break: break-word;
   background: var(--white);
-  transition: background 0.4s ease-out;
 }
 
 body>* {
@@ -112,10 +109,6 @@ body>* {
   }
 }
 
-#search {
-  margin-bottom: var(--gap);
-}
-
 abbr[title] {
   border-bottom: var(--narrow-separator) dotted;
   text-decoration: none;
@@ -269,7 +262,7 @@ img {
   max-width: 100%;
 }
 
-.header {
+header {
   max-width: var(--wide);
   margin-top: var(--gap);
   display: flex;
@@ -280,30 +273,32 @@ img {
   padding: var(--small-gap);
   gap: 1rem;
 
-  .push {
-    margin-left: auto
-  }
+  nav {
+    display: flex;
+    gap: 1rem;
+    margin-left: auto;
 
-  &>a {
-    width: 4rem;
-    height: 4rem;
-    position: relative;
+    a {
+      width: 4rem;
+      height: 4rem;
+      position: relative;
 
-    &:after {
-      width: 3rem;
-      height: 3rem;
-      top: .5rem;
-      left: .5rem;
+      &:after {
+        width: 3rem;
+        height: 3rem;
+        top: .5rem;
+        left: .5rem;
 
-      background: var(--black);
-      mask-image: var(--url);
-      mask-repeat: no-repeat;
-      mask-size: cover;
+        background: var(--black);
+        mask-image: var(--url);
+        mask-repeat: no-repeat;
+        mask-size: cover;
+      }
     }
   }
 
   /* background mask */
-  &>a:after,
+  nav a:after,
   &:after {
     z-index: -100;
     content: "";
@@ -318,15 +313,15 @@ img {
     mask-image: url('header.svg');
     mask-size: 24rem;
   }
-}
 
-.header a.active {
-  outline: 2px solid var(--air);
-  border-radius: 50%;
+  a.active {
+    outline: 2px solid var(--air);
+    border-radius: 50%;
+  }
 }
 
 @media (max-width: 360px) {
-  .header {
+  header {
     justify-content: space-evenly;
     flex-wrap: wrap;
 
@@ -707,4 +702,4 @@ img {
   font-family: LatinModern;
   src: url(latinmodern-math.otf);
   font-display: swap;
-}
\ No newline at end of file
+}
diff --git a/themes/paprika/layouts/partials/header.html b/themes/paprika/layouts/partials/header.html
index 4eda4862..9a5fdbf4 100644
--- a/themes/paprika/layouts/partials/header.html
+++ b/themes/paprika/layouts/partials/header.html
@@ -1,10 +1,8 @@
-<header class="header">
-		<h1>
-			<a class="site-name" href="{{ `` | absURL }}">
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8790 2400"><path d="M80 1935V465h216v1270h286v200ZM933 1935l222-1470h264l222 1470h-210l-40-300h-208l-40 300Zm280-528h148l-62-494-6-78h-12l-6 78ZM2238 1935 2014 465h210l108 868 8 142h12l8-142 108-868h210l-224 1470ZM3051 1935l222-1470h264l222 1470h-210l-40-300h-208l-40 300Zm280-528h148l-62-494-6-78h-12l-6 78ZM4182 1935V465h514v222h-298v386h200v222h-200v640ZM5092 1935V465h216q194 0 286 108 92 107 92 316 0 124-43 215-44 90-106 132l147 699h-216l-122-620h-38v620Zm216-820q60 0 95-26 35-27 50-76t15-116q0-105-34-161-35-57-126-57ZM6392 1951q-90 0-154-42-65-42-99-114-35-72-35-162V767q0-91 35-162 34-72 99-114 64-42 154-42t155 42q64 42 99 114 34 72 34 162v866q0 90-34 162-35 72-99 114-65 42-155 42Zm0-210q40 0 56-33 16-34 16-75V767q0-41-17-74-17-34-55-34-37 0-54 34-18 33-18 74v866q0 41 17 75 17 33 55 33ZM7282 1935V687h-204V465h624v222h-204v1248ZM8110 1935V465h216v608h168V465h216v1470h-216v-640h-168v640Z"/></svg>
-			</a>
-		</h1>
-		<div class="push"></div>
+<header>
+		<a class="site-name" href="{{ `` | absURL }}">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8790 2400"><path d="M80 1935V465h216v1270h286v200ZM933 1935l222-1470h264l222 1470h-210l-40-300h-208l-40 300Zm280-528h148l-62-494-6-78h-12l-6 78ZM2238 1935 2014 465h210l108 868 8 142h12l8-142 108-868h210l-224 1470ZM3051 1935l222-1470h264l222 1470h-210l-40-300h-208l-40 300Zm280-528h148l-62-494-6-78h-12l-6 78ZM4182 1935V465h514v222h-298v386h200v222h-200v640ZM5092 1935V465h216q194 0 286 108 92 107 92 316 0 124-43 215-44 90-106 132l147 699h-216l-122-620h-38v620Zm216-820q60 0 95-26 35-27 50-76t15-116q0-105-34-161-35-57-126-57ZM6392 1951q-90 0-154-42-65-42-99-114-35-72-35-162V767q0-91 35-162 34-72 99-114 64-42 154-42t155 42q64 42 99 114 34 72 34 162v866q0 90-34 162-35 72-99 114-65 42-155 42Zm0-210q40 0 56-33 16-34 16-75V767q0-41-17-74-17-34-55-34-37 0-54 34-18 33-18 74v866q0 41 17 75 17 33 55 33ZM7282 1935V687h-204V465h624v222h-204v1248ZM8110 1935V465h216v608h168V465h216v1470h-216v-640h-168v640Z"/></svg>
+		</a>
+		<nav>
 			{{ range .Site.Params.socials }}
   			<a
     			style="--url: url(./{{ .platform }}.svg)"
@@ -24,4 +22,5 @@
     			style="--url: url(./{{ .Name }}.svg)"
   			></a>
   		{{ end }}
+		<nav>
 </header>