init
This commit is contained in:
parent
2fe0c9a830
commit
7b9c07b83e
1444 changed files with 11476 additions and 42112 deletions
121
layouts/partials/header.html
Executable file
121
layouts/partials/header.html
Executable file
|
@ -0,0 +1,121 @@
|
|||
{{- /* theme-toggle is enabled */}}
|
||||
{{- if (not site.Params.disableThemeToggle) }}
|
||||
{{- /* theme is light */}}
|
||||
{{- if (eq site.Params.defaultTheme "light") }}
|
||||
<script>
|
||||
if (localStorage.getItem("pref-theme") === "dark") {
|
||||
document.body.classList.add('dark');
|
||||
}
|
||||
|
||||
</script>
|
||||
{{- /* theme is dark */}}
|
||||
{{- else if (eq site.Params.defaultTheme "dark") }}
|
||||
<script>
|
||||
if (localStorage.getItem("pref-theme") === "light") {
|
||||
document.body.classList.remove('dark')
|
||||
}
|
||||
|
||||
</script>
|
||||
{{- else }}
|
||||
{{- /* theme is auto */}}
|
||||
<script>
|
||||
if (localStorage.getItem("pref-theme") === "dark") {
|
||||
document.body.classList.add('dark');
|
||||
} else if (localStorage.getItem("pref-theme") === "light") {
|
||||
document.body.classList.remove('dark')
|
||||
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.body.classList.add('dark');
|
||||
}
|
||||
|
||||
</script>
|
||||
{{- end }}
|
||||
{{- /* theme-toggle is disabled and theme is auto */}}
|
||||
{{- else if (and (ne site.Params.defaultTheme "light") (ne site.Params.defaultTheme "dark"))}}
|
||||
<script>
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.body.classList.add('dark');
|
||||
}
|
||||
|
||||
</script>
|
||||
{{- end }}
|
||||
|
||||
{{- if (not site.Params.disableThemeToggle) }}
|
||||
<script>
|
||||
// Initialize all theme toggle buttons when the DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const themeToggles = document.querySelectorAll('.theme-toggle-button');
|
||||
|
||||
themeToggles.forEach(function(button) {
|
||||
button.addEventListener('click', function() {
|
||||
if (document.body.classList.contains('dark')) {
|
||||
document.body.classList.remove('dark');
|
||||
localStorage.setItem("pref-theme", "light");
|
||||
} else {
|
||||
document.body.classList.add('dark');
|
||||
localStorage.setItem("pref-theme", "dark");
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{- end }}
|
||||
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
<div class="logo">
|
||||
{{- $label_text := (site.Params.label.text | default site.Title) }}
|
||||
{{- if site.Title }}
|
||||
<a href="{{ "" | absLangURL }}" accesskey="h" title="{{ $label_text }} (Alt + H)">
|
||||
{{- if site.Params.label.icon }}
|
||||
{{- $img := resources.Get site.Params.label.icon }}
|
||||
{{- if $img }}
|
||||
{{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}}
|
||||
{{- if hugo.IsExtended -}}
|
||||
{{- $processableFormats = $processableFormats | append "webp" -}}
|
||||
{{- end -}}
|
||||
{{- $prod := (hugo.IsProduction | or (eq site.Params.env "production")) }}
|
||||
{{- if and (in $processableFormats $img.MediaType.SubType) (eq $prod true)}}
|
||||
{{- if site.Params.label.iconHeight }}
|
||||
{{- $img = $img.Resize (printf "x%d" site.Params.label.iconHeight) }}
|
||||
{{ else }}
|
||||
{{- $img = $img.Resize "x30" }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
<img src="{{ $img.Permalink }}" alt="" aria-label="logo"
|
||||
height="{{- site.Params.label.iconHeight | default "30" -}}">
|
||||
{{- else }}
|
||||
<img src="{{- site.Params.label.icon | absURL -}}" alt="" aria-label="logo"
|
||||
height="{{- site.Params.label.iconHeight | default "30" -}}">
|
||||
{{- end -}}
|
||||
{{- else if hasPrefix site.Params.label.iconSVG "<svg" }}
|
||||
{{ site.Params.label.iconSVG | safeHTML }}
|
||||
{{- end -}}
|
||||
{{- $label_text -}}
|
||||
<img src="/favicon.svg" alt="favicon" class="site-logo">
|
||||
</a>
|
||||
{{- end }}
|
||||
</div>
|
||||
{{- $currentPage := . }}
|
||||
<!-- Desktop menu -->
|
||||
<div class="menu-wrapper">
|
||||
{{ partial "menu.html" }}
|
||||
</div>
|
||||
|
||||
<!-- Hamburger Menu -->
|
||||
<!-- Icon -->
|
||||
<label for="menu-toggle" class="hamburger-menu" aria-label="Toggle menu">
|
||||
<img src="/icons/hamburger-menu.svg" alt="Menu" width="24" height="24">
|
||||
</label>
|
||||
<!-- Hidden checkbox for toggling menu -->
|
||||
<input type="checkbox" id="menu-toggle">
|
||||
<!-- Menu overlay -->
|
||||
<div class="menu-overlay">
|
||||
<div class="mobile-menu">
|
||||
<label for="menu-toggle" class="mobile-menu-close" aria-label="Close menu">
|
||||
<img src="/icons/close-menu.svg" alt="Close Menu" width="24" height="24">
|
||||
</label>
|
||||
{{ partial "menu.html" }}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
Loading…
Add table
Add a link
Reference in a new issue