tsc-vfl/hugo-page
3
0
Fork 1
Code Issues 8 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

Reduce data transmission on light mode (not loading the dark logos as well)

Browse Source
This commit is contained in:
Christian Wolf
2025-12-23 17:32:05 +01:00
parent e371e15bca
commit 8ba3c66d26
3 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
themes/tsc_vfl/assets/css/dynamic.css
View File

@@ -1,3 +1,8 @@
:root {
--external-link-icon: url({{ (resources.Get "img/download.png" | fingerprint).Permalink }})
--logo-tsc-light: url({{ ((resources.Get "img/logo_tsc.png").Fit "400x68 webp" | fingerprint).Permalink }});
--logo-tsc-dark: url({{ ((resources.Get "img/logo_tsc_dark.png").Fit "400x68 webp" | fingerprint).Permalink }});
--logo-vfl-light: url({{ ((resources.Get "img/logo_hv.png").Fit "100x68 webp" | fingerprint).Permalink }});
--logo-vfl-dark: url({{ ((resources.Get "img/logo_hv_dark.png").Fit "100x68 webp" | fingerprint).Permalink }});
}

22
themes/tsc_vfl/assets/css/main.scss
View File

@@ -226,19 +226,23 @@ table {
}
}
.logo-light {
display: inline;
}
.logo-dark {
display: none;
}
@media (prefers-color-scheme: dark) {
.logo-light {
display: none;
visibility: hidden;
}
.logo-dark {
display: inline;
.logo-vfl {
--url: var(--logo-vfl-dark);
}
.logo {
--url: var(--logo-tsc-dark);
}
.space {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: var(--url);
}
}
}

10
themes/tsc_vfl/layouts/partials/page/header.html
View File

@@ -1,12 +1,14 @@
<div id="header">
<div class="logo-row">
<a href="/" class="logo">
<img src="{{ ((resources.Get "img/logo_tsc.png").Fit "400x68 webp" | fingerprint).Permalink }}" class="logo-light">
<img src="{{ ((resources.Get "img/logo_tsc_dark.png").Fit "400x68 webp" | fingerprint).Permalink }}" class="logo-dark">
<div class="space">
<img src="{{ ((resources.Get "img/logo_tsc.png").Fit "400x68 webp" | fingerprint).Permalink }}" class="logo-light">
</div>
</a>
<a href="https://www.vfl-sindelfingen.de/" class="logo-vfl">
<img src="{{ ((resources.Get "img/logo_hv.png").Fit "100x68 webp" | fingerprint).Permalink }}" class="logo-light" alt="VfL Sindelfingen">
<img src="{{ ((resources.Get "img/logo_hv_dark.png").Fit "100x68 webp" | fingerprint).Permalink }}" class="logo-dark" alt="VfL Sindelfingen">
<div class="space">
<img src="{{ ((resources.Get "img/logo_hv.png").Fit "100x68 webp" | fingerprint).Permalink }}" class="logo-light" alt="VfL Sindelfingen">
</div>
</a>
</div>
<div class="slider">