jeremy/karsttech.com
jeremy/karsttech.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added srcset to logo partial to improve compression and logo size on smaller devices.

Browse source
This commit is contained in:
Jeremy Karst 2026-01-07 18:59:31 -05:00
parent 4cfcb45a7d
commit 7a464e60c6
1 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
layouts/partials/logo.html
View file

@ -2,26 +2,31 @@
{{- $logo := resources.Get .Site.Params.header.logo }}
{{- $logo_dark := resources.Get .Site.Params.header.logoDark }}
{{- if $logo }}
{{- $logoResized := $logo.Resize (printf "%dx" (div $logo.Width 2)) }}
{{- $logoDarkResized := "" }}
{{- $logoResized1x := $logo.Resize "160x webp" }}
{{- $logoResized2x := $logo.Resize "320x webp" }}
{{- $logoDarkResized1x := "" }}
{{- $logoDarkResized2x := "" }}
{{- if $logo_dark }}
{{- $logoDarkResized = $logo_dark.Resize (printf "%dx" (div $logo_dark.Width 2)) }}
{{- $logoDarkResized1x = $logo_dark.Resize "160x webp" }}
{{- $logoDarkResized2x = $logo_dark.Resize "320x webp" }}
{{- end }}
<a href="{{ "" | relLangURL }}" class="mr-2">
<!-- prettier-ignore-attribute -->
<img
src="{{ $logoResized.RelPermalink }}"
width="{{ $logoResized.Width }}"
height="{{ $logoResized.Height }}"
src="{{ $logoResized1x.RelPermalink }}"
srcset="{{ $logoResized1x.RelPermalink }} 1x, {{ $logoResized2x.RelPermalink }} 2x"
width="{{ $logoResized1x.Width }}"
height="{{ $logoResized1x.Height }}"
class="max-h-[10rem] max-w-[10rem] object-scale-down object-left
{{ if $logo_dark }}hidden dark:flex{{ end }}"
alt="{{ .Site.Title }}"
/>
{{- if $logo_dark }}
<img
src="{{ $logoDarkResized.RelPermalink }}"
width="{{ $logoDarkResized.Width }}"
height="{{ $logoDarkResized.Height }}"
src="{{ $logoDarkResized1x.RelPermalink }}"
srcset="{{ $logoDarkResized1x.RelPermalink }} 1x, {{ $logoDarkResized2x.RelPermalink }} 2x"
width="{{ $logoDarkResized1x.Width }}"
height="{{ $logoDarkResized1x.Height }}"
class="max-h-[10rem] max-w-[10rem] object-scale-down object-left dark:hidden"
alt="{{ .Site.Title }}"
/>