alois/hugo-PaperMod
1
0
Fork 0
mirror of https://github.com/adityatelange/hugo-PaperMod.git synced 2026-05-21 11:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor CSS class names for consistency and clarity

Browse Source 
- Update selectors from IDs to classes in header, search, and zmedia styles.
- Ensure consistent usage of class names across relevant files.
This commit is contained in:
Aditya Telange
2026-04-11 14:31:33 +05:30
parent 1b45b3f6a1
commit a05b477340
5 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/common/header.css
+8 -8
View File
@@ -13,7 +13,7 @@
} }
.logo, .logo,
#menu { .menu {
display: flex; display: flex;
margin: auto var(--gap); margin: auto var(--gap);
} }
@@ -36,35 +36,35 @@
margin-inline-end: 8px; margin-inline-end: 8px;
} }
button#theme-toggle { .theme-toggle {
font-size: 26px; font-size: 26px;
margin: auto 4px; margin: auto 4px;
} }
[data-theme="dark"] #moon { [data-theme="dark"] .moon {
display: none; display: none;
} }
[data-theme="light"] #sun { [data-theme="light"] .sun {
display: none; display: none;
} }
#menu { .menu {
list-style: none; list-style: none;
word-break: keep-all; word-break: keep-all;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
} }
#menu li + li { .menu li + li {
margin-inline-start: var(--gap); margin-inline-start: var(--gap);
} }
#menu a { .menu a {
font-size: 16px; font-size: 16px;
} }
#menu .active { .menu .active {
font-weight: 500; font-weight: 500;
border-bottom: 2px solid currentColor; border-bottom: 2px solid currentColor;
} }
assets/css/common/search.css
+7 -7
View File
@@ -1,4 +1,4 @@
#searchbox input { .searchbox input {
padding: 4px 10px; padding: 4px 10px;
width: 100%; width: 100%;
color: var(--primary); color: var(--primary);
@@ -7,11 +7,11 @@
border-radius: var(--radius); border-radius: var(--radius);
} }
#searchbox input:focus { .searchbox input:focus {
border-color: var(--secondary); border-color: var(--secondary);
} }
#searchResults li { .searchResults li {
list-style: none; list-style: none;
border-radius: var(--radius); border-radius: var(--radius);
padding: 10px; padding: 10px;
@@ -20,17 +20,17 @@
font-weight: 500; font-weight: 500;
} }
#searchResults { .searchResults {
margin: 10px 0; margin: 10px 0;
width: 100%; width: 100%;
} }
#searchResults li:active { .searchResults li:active {
transition: transform 0.1s; transition: transform 0.1s;
transform: scale(0.98); transform: scale(0.98);
} }
#searchResults a { .searchResults a {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -38,7 +38,7 @@
left: 0px; left: 0px;
} }
#searchResults .focus { .searchResults .focus {
transform: scale(0.98); transform: scale(0.98);
border: 2px solid var(--tertiary); border: 2px solid var(--tertiary);
} }
assets/css/core/zmedia.css
+2 -2
View File
@@ -48,8 +48,8 @@
.button:active, .button:active,
.post-entry:active, .post-entry:active,
.top-link, .top-link,
#searchResults .focus, .searchResults .focus,
#searchResults li:active { .searchResults li:active {
transform: none; transform: none;
} }
} }
layouts/_default/search.html
+2 -2
View File
@@ -20,10 +20,10 @@
{{- end }} {{- end }}
</header> </header>
<div id="searchbox"> <div id="searchbox" class="searchbox">
<input id="searchInput" autofocus placeholder="{{ .Params.placeholder | default (printf "%s ↵" .Title) }}" <input id="searchInput" autofocus placeholder="{{ .Params.placeholder | default (printf "%s ↵" .Title) }}"
aria-label="search" type="search" autocomplete="off" maxlength="64"> 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> </div>
{{- end }}{{/* end main */}} {{- end }}{{/* end main */}}
layouts/partials/header.html
+4 -4
View File
@@ -33,13 +33,13 @@
{{- end }} {{- end }}
<div class="logo-switches"> <div class="logo-switches">
{{- if (not site.Params.disableThemeToggle) }} {{- if (not site.Params.disableThemeToggle) }}
<button id="theme-toggle" accesskey="t" title="(Alt + T)" aria-label="Toggle theme"> <button id="theme-toggle" class="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" <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" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="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> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg> </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" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"> stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle> <circle cx="12" cy="12" r="5"></circle>
@@ -81,7 +81,7 @@
</div> </div>
</div> </div>
{{- $currentPage := . }} {{- $currentPage := . }}
<ul id="menu"> <ul id="menu" class="menu">
{{- range site.Menus.main }} {{- range site.Menus.main }}
{{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }} {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
{{- $page_url:= $currentPage.Permalink | absLangURL }} {{- $page_url:= $currentPage.Permalink | absLangURL }}