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.

Author: adityatelange

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;
 }

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,25 +20,25 @@
     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%;
     top: 0px;
     left: 0px;
 }
 
-#searchResults .focus {
+.searchResults .focus {
     transform: scale(0.98);
     border: 2px solid var(--tertiary);
 }

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;
     }
 }

layouts/_default/search.html

@@ -20,10 +20,10 @@ <h1>{{- (printf "%s&nbsp;" .Title ) | htmlUnescape -}}
     {{- 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 */}}

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 }}