From a05b4773409b17ddd228bc03b7c3ca80d2d98f81 Mon Sep 17 00:00:00 2001
From: Aditya Telange <21258296+adityatelange@users.noreply.github.com>
Date: Sat, 11 Apr 2026 14:31:33 +0530
Subject: [PATCH] Refactor CSS class names for consistency and clarity

- Update selectors from IDs to classes in header, search, and zmedia styles.
- Ensure consistent usage of class names across relevant files.
---
 assets/css/common/header.css | 16 ++++++++--------
 assets/css/common/search.css | 14 +++++++-------
 assets/css/core/zmedia.css   |  4 ++--
 layouts/_default/search.html |  4 ++--
 layouts/partials/header.html |  8 ++++----
 5 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/assets/css/common/header.css b/assets/css/common/header.css
index 68964333..7ca29352 100644
--- a/assets/css/common/header.css
+++ b/assets/css/common/header.css
@@ -13,7 +13,7 @@
 }
 
 .logo,
-#menu {
+.menu {
     display: flex;
     margin: auto var(--gap);
 }
@@ -36,35 +36,35 @@
     margin-inline-end: 8px;
 }
 
-button#theme-toggle {
+.theme-toggle {
     font-size: 26px;
     margin: auto 4px;
 }
 
-[data-theme="dark"] #moon {
+[data-theme="dark"] .moon {
     display: none;
 }
 
-[data-theme="light"] #sun {
+[data-theme="light"] .sun {
     display: none;
 }
 
-#menu {
+.menu {
     list-style: none;
     word-break: keep-all;
     overflow-x: auto;
     white-space: nowrap;
 }
 
-#menu li + li {
+.menu li + li {
     margin-inline-start: var(--gap);
 }
 
-#menu a {
+.menu a {
     font-size: 16px;
 }
 
-#menu .active {
+.menu .active {
     font-weight: 500;
     border-bottom: 2px solid currentColor;
 }
diff --git a/assets/css/common/search.css b/assets/css/common/search.css
index bba7c1b3..5ea9d3b0 100644
--- a/assets/css/common/search.css
+++ b/assets/css/common/search.css
@@ -1,4 +1,4 @@
-#searchbox input {
+.searchbox input {
     padding: 4px 10px;
     width: 100%;
     color: var(--primary);
@@ -7,11 +7,11 @@
     border-radius: var(--radius);
 }
 
-#searchbox input:focus {
+.searchbox input:focus {
     border-color: var(--secondary);
 }
 
-#searchResults li {
+.searchResults li {
     list-style: none;
     border-radius: var(--radius);
     padding: 10px;
@@ -20,17 +20,17 @@
     font-weight: 500;
 }
 
-#searchResults {
+.searchResults {
     margin: 10px 0;
     width: 100%;
 }
 
-#searchResults li:active {
+.searchResults li:active {
     transition: transform 0.1s;
     transform: scale(0.98);
 }
 
-#searchResults a {
+.searchResults a {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -38,7 +38,7 @@
     left: 0px;
 }
 
-#searchResults .focus {
+.searchResults .focus {
     transform: scale(0.98);
     border: 2px solid var(--tertiary);
 }
diff --git a/assets/css/core/zmedia.css b/assets/css/core/zmedia.css
index a68fd718..6a3355e2 100644
--- a/assets/css/core/zmedia.css
+++ b/assets/css/core/zmedia.css
@@ -48,8 +48,8 @@
     .button:active,
     .post-entry:active,
     .top-link,
-    #searchResults .focus,
-    #searchResults li:active {
+    .searchResults .focus,
+    .searchResults li:active {
         transform: none;
     }
 }
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index bb7d436d..fc1b518c 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -20,10 +20,10 @@
     {{- end }}
 </header>
 
-<div id="searchbox">
+<div id="searchbox" class="searchbox">
     <input id="searchInput" autofocus placeholder="{{ .Params.placeholder | default (printf "%s ↵" .Title) }}"
         aria-label="search" type="search" autocomplete="off" maxlength="64">
-    <ul id="searchResults" aria-label="search results"></ul>
+    <ul id="searchResults" class="searchResults" aria-label="search results"></ul>
 </div>
 
 {{- end }}{{/* end main */}}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e3eb7977..d30b455f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -33,13 +33,13 @@
             {{- end }}
             <div class="logo-switches">
                 {{- if (not site.Params.disableThemeToggle) }}
-                <button id="theme-toggle" accesskey="t" title="(Alt + T)" aria-label="Toggle theme">
-                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
+                <button id="theme-toggle" class="theme-toggle" accesskey="t" title="(Alt + T)" aria-label="Toggle theme">
+                    <svg class="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                         stroke-linejoin="round">
                         <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                     </svg>
-                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
+                    <svg class="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                         stroke-linejoin="round">
                         <circle cx="12" cy="12" r="5"></circle>
@@ -81,7 +81,7 @@
             </div>
         </div>
         {{- $currentPage := . }}
-        <ul id="menu">
+        <ul id="menu" class="menu">
             {{- range site.Menus.main }}
             {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
             {{- $page_url:= $currentPage.Permalink | absLangURL }}