FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dark logos

Browse source
This commit is contained in:
BernatBC 2024-03-09 10:32:35 +01:00
parent 1ec4cd2688
commit ec1f276ef8
4 changed files with 38 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

18
assets/scripts/features/darkmode/index.js
View file

@ -39,6 +39,8 @@ window.addEventListener('load', async () => {
// save preference to local storage
saveScheme(newScheme)
setImages(newScheme)
}
setScheme(loadScheme())
@ -50,3 +52,19 @@ window.addEventListener('load', async () => {
})
})
})
function setImages(newScheme) {
const els = Array.from(document.getElementsByClassName('logo-holder'));
for (const el of els) {
const light = el.querySelector('.light-logo');
const dark = el.querySelector('.dark-logo');
if (newScheme === "dark" && dark !== null) {
if (light !== null) light.style.display = 'none'
dark.style.display = 'inline'
}
else {
if (light !== null) light.style.display = 'inline'
if (dark !== null) dark.style.display = 'none'
}
}
}

8
layouts/partials/sections/education-alt.html
View file

@ -33,9 +33,13 @@
<div class="degree-info card">
{{ $logoImage:= resources.Get .institution.logo}}
{{ $darkLogoImage:= resources.Get .institution.darkLogo}}
{{ if $logoImage }}
<div class="logo-holder">
<img class="company-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
<div class="logo-holder">
<img class="company-logo light-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
{{ if $darkLogoImage }}
<img class="company-logo dark-logo" src="{{ $darkLogoImage.RelPermalink }}" alt="{{ .name }}" />
{{ end }}
</div>
{{ end }}

8
layouts/partials/sections/education.html
View file

@ -33,9 +33,13 @@
<div class="degree-info card">
{{ $logoImage:= resources.Get .institution.logo}}
{{ $darkLogoImage:= resources.Get .institution.darkLogo}}
{{ if $logoImage }}
<div class="logo-holder">
<img class="company-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
<div class="logo-holder">
<img class="company-logo light-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
{{ if $darkLogoImage }}
<img class="company-logo dark-logo" src="{{ $darkLogoImage.RelPermalink }}" alt="{{ .name }}" />
{{ end }}
</div>
{{ end }}

12
layouts/partials/sections/experiences/positions.html
View file

@ -1,11 +1,15 @@
<div class="col-10 col-lg-8">
<div class="experience-entry-heading">
{{ $logoImage:= resources.Get .company.logo}}
{{ if $logoImage }}
<div class="logo-holder">
<img class="company-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
</div>
{{ $darkLogoImage:= resources.Get .company.darkLogo}}
{{ if $logoImage }}
<div class="logo-holder">
<img class="company-logo light-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
{{ if $darkLogoImage }}
<img class="company-logo dark-logo" src="{{ $darkLogoImage.RelPermalink }}" alt="{{ .name }}" />
{{ end }}
</div>
{{ end }}
<!-- Total experience duration on a company is time between the starting date of the oldest position and ending date of most recent position -->
{{ $oldestPosition := index (last 1 .positions) 0}}
{{ $mostRecentPosition := index (first 1 .positions) 0}}