commit ca5406f39d4fbea27f5e1b4f971261e16741fc73 parent 753f3bc97495618ffd66f6a35791a23a91fc68da Author: Chris <chris@echoz.io> Date: Fri, 8 May 2026 14:30:35 +0200 feat: update papermod and hugo, fix issues and improve experience at very small screen sizes Diffstat:
| M | assets/css/extended/hamburger.css | | | 20 | ++++++++++++++------ |
| M | flake.lock | | | 6 | +++--- |
| M | flake.nix | | | 3 | +++ |
| A | layouts/_partials/header.html | | | 117 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | layouts/_partials/index_profile.html | | | 96 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| D | layouts/partials/header.html | | | 152 | ------------------------------------------------------------------------------- |
| D | layouts/partials/index_profile.html | | | 96 | ------------------------------------------------------------------------------- |
7 files changed, 233 insertions(+), 257 deletions(-)
diff --git a/assets/css/extended/hamburger.css b/assets/css/extended/hamburger.css @@ -1,3 +1,15 @@ +@media (max-width: 420px) { + .header .logo a { + font-size: 18px; + } +} + +@media (max-width: 340px) { + .header .logo a { + font-size: 0; + } +} + .header #menu-button { display: none; } @@ -70,7 +82,7 @@ align-items: end; position: absolute; top: var(--header-height); - right: 0px; + right: var(--gap); background: var(--entry); border-radius: var(--radius); z-index: 2; @@ -88,7 +100,7 @@ .header #menu li { line-height: initial; - margin-inline-end: var(--gap); + margin-inline: var(--gap); margin-top: var(--gap); } @@ -96,10 +108,6 @@ margin-bottom: var(--gap); } - .header #menu li:last { - margin: var(--gap); - } - .header #menu-button:checked ~ #menu-icon span { background: transparent; } diff --git a/flake.lock b/flake.lock @@ -2,11 +2,11 @@ "nodes": { "nixpkgs": { "locked": { - "lastModified": 1762111121, - "narHash": "sha256-4vhDuZ7OZaZmKKrnDpxLZZpGIJvAeMtK6FKLJYUtAdw=", + "lastModified": 1777954456, + "narHash": "sha256-hGdgeU2Nk87RAuZyYjyDjFL6LK7dAZN5RE9+hrDTkDU=", "owner": "NixOS", "repo": "nixpkgs", - "rev": "b3d51a0365f6695e7dd5cdf3e180604530ed33b4", + "rev": "549bd84d6279f9852cae6225e372cc67fb91a4c1", "type": "github" }, "original": { diff --git a/flake.nix b/flake.nix @@ -23,6 +23,9 @@ default = pkgs.mkShell { packages = with pkgs; [ hugo + (pkgs.writeShellScriptBin "dev" '' + hugo serve + '') ]; }; } diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html @@ -0,0 +1,117 @@ +<header class="header"> + <nav class="header-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 -}} + </a> + {{- end }} + + {{- $lsenabled := (or (not site.Params.disableThemeToggle) (and (not site.Params.disableLangToggle) (hugo.IsMultilingual))) }} + {{- if $lsenabled }} + <div class="logo-switches"> + {{- if (not site.Params.disableThemeToggle) }} + <button id="theme-toggle" class="theme-toggle" accesskey="t" title="(Alt + T)" aria-label="Toggle theme"> + <svg class="moon" xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" + fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="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> + </svg> + <svg class="sun" xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" + fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" + stroke-linejoin="round"> + <circle cx="12" cy="12" r="5"></circle> + <line x1="12" y1="1" x2="12" y2="3"></line> + <line x1="12" y1="21" x2="12" y2="23"></line> + <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> + <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> + <line x1="1" y1="12" x2="3" y2="12"></line> + <line x1="21" y1="12" x2="23" y2="12"></line> + <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> + <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> + </svg> + </button> + {{- end }} + + {{- if (not site.Params.disableLangToggle) }} + {{- $lang := .Lang}} + {{- with site.Home.Translations }} + {{- $separator := or $label_text (not site.Params.disableThemeToggle)}} + {{- if $separator }}<span class="nav-sep">|</span>{{ end }} + <ul class="lang-menu"> + {{- range . -}} + {{- if ne $lang .Lang }} + <li> + <a href="{{- .Permalink -}}" title="{{ .Language.Params.languageAltTitle | default (.Language.LanguageName | emojify) | default (.Lang | title) }}" + aria-label="{{ .Language.LanguageName | default (.Lang | title) }}"> + {{- if (and site.Params.displayFullLangName (.Language.LanguageName)) }} + {{- .Language.LanguageName | emojify -}} + {{- else }} + {{- .Lang | title -}} + {{- end -}} + </a> + </li> + {{- end -}} + {{- end}} + </ul> + {{- end }} + {{- end }} + </div> + {{- end }} + </div> + {{- $currentPage := . }} + <input id="menu-button" type="checkbox"/> + <label id="menu-capture" for="menu-button"></label> + <label id="menu-icon" for="menu-button"><span></span></label> + <ul id="menu" class="menu"> + {{- range site.Menus.main }} + {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }} + {{- $page_url:= $currentPage.Permalink | absLangURL }} + {{- $is_search := eq (site.GetPage .KeyName).Layout `search` }} + <li> + <a href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}" + {{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}> + <span {{- if eq $menu_item_url $page_url }} class="active" {{- end }}> + {{- .Pre }} + {{- .Name -}} + {{ .Post -}} + </span> + {{- if (findRE "://" .URL) }} + <svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" + stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="12" width="12"> + <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path> + <path d="M15 3h6v6"></path> + <path d="M10 14L21 3"></path> + </svg> + {{- end }} + </a> + </li> + {{- end }} + </ul> + </nav> +</header> diff --git a/layouts/_partials/index_profile.html b/layouts/_partials/index_profile.html @@ -0,0 +1,96 @@ +<div class="profile" style="flex-direction: column;"> + {{- with site.Params.profileMode }} + <div class="profile_inner"> + {{- if .imageUrl -}} + {{- $img := "" }} + {{- if not (urls.Parse .imageUrl).IsAbs }} + {{- $img = resources.Get .imageUrl }} + {{- end }} + {{- 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 (not (and (not .imageHeight) (not .imageWidth))) }} + {{- $img = $img.Resize (printf "%dx%d" .imageWidth .imageHeight) }} + {{- else if .imageHeight }} + {{- $img = $img.Resize (printf "x%d" .imageHeight) }} + {{ else if .imageWidth }} + {{- $img = $img.Resize (printf "%dx" .imageWidth) }} + {{ else }} + {{- $img = $img.Resize "150x150" }} + {{- end }} + {{- end }} + <img draggable="false" src="{{ $img.Permalink }}" alt="{{ .imageTitle | default "profile image" }}" title="{{ .imageTitle }}" + height="{{ .imageHeight | default 150 }}" width="{{ .imageWidth | default 150 }}" /> + {{- else }} + <img draggable="false" src="{{ .imageUrl | absURL }}" alt="{{ .imageTitle | default "profile image" }}" title="{{ .imageTitle }}" + height="{{ .imageHeight | default 150 }}" width="{{ .imageWidth | default 150 }}" /> + {{- end }} + {{- end }} + <h1>{{ .title | default site.Title | markdownify }}</h1> + <span>{{ .subtitle | markdownify }}</span> + {{- partial "social_icons.html" (dict "align" "center") -}} + + {{- with .buttons }} + <div class="buttons"> + {{- range . }} + <a class="button" href="{{ trim .url " " }}" rel="noopener" title="{{ .name }}"> + <span class="button-inner"> + {{ .name }} + {{- if (findRE "://" .url) }} + <svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" + stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="14" width="14"> + <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path> + <path d="M15 3h6v6"></path> + <path d="M10 14L21 3"></path> + </svg> + {{- end }} + </span> + </a> + {{- end }} + </div> + {{- end }} + </div> + {{- end }} + {{- with site.Params.homePostListTitle }} + <a href="{{ .url | absURL }}" style="text-align: left; width: 100%;"><h2 style="margin: 32px auto 24px;">{{ .title }}</h2></a> + {{- end }} + {{- $pages := union .RegularPages .Sections }} + {{- $pages = where site.RegularPages "Type" "in" site.Params.mainSections }} + {{- $pages = where $pages "Params.hiddenInHomeList" "!=" "true" }} + {{- $pages = first 3 $pages }} + + {{- $term := .Data.Term }} + {{- range $index, $page := $pages }} + + {{- $class := "post-entry" }} + {{- if $term }} + {{- $class = "post-entry tag-entry" }} + {{- end }} + + <article class="post-entry" style="text-align: left; width: 100%; background-"> + {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} + {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} + <header class="entry-header"> + <h2> + {{- .Title }} + {{- if .Draft }}<sup><span class="entry-isdraft"> [draft]</span></sup>{{- end }} + </h2> + </header> + {{- if (ne (.Param "hideSummary") true) }} + <div class="entry-content"> + <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p> + </div> + {{- end }} + {{- if not (.Param "hideMeta") }} + <footer class="entry-footer"> + {{- partial "post_meta.html" . -}} + </footer> + {{- end }} + <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a> + </article> + {{- end }} + </div> diff --git a/layouts/partials/header.html b/layouts/partials/header.html @@ -1,152 +0,0 @@ -{{- /* 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 }} - -<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 -}} - </a> - {{- end }} - <div class="logo-switches"> - {{- if (not site.Params.disableThemeToggle) }} - <button id="theme-toggle" accesskey="t" title="(Alt + T)"> - <svg id="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" - stroke-linejoin="round"> - <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> - </svg> - <svg id="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" - stroke-linejoin="round"> - <circle cx="12" cy="12" r="5"></circle> - <line x1="12" y1="1" x2="12" y2="3"></line> - <line x1="12" y1="21" x2="12" y2="23"></line> - <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> - <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> - <line x1="1" y1="12" x2="3" y2="12"></line> - <line x1="21" y1="12" x2="23" y2="12"></line> - <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> - <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> - </svg> - </button> - {{- end }} - - {{- $lang := .Lang}} - {{- $separator := or $label_text (not site.Params.disableThemeToggle)}} - {{- with site.Home.AllTranslations }} - <ul class="lang-switch"> - {{- if $separator }}<li>|</li>{{ end }} - {{- range . -}} - {{- if ne $lang .Lang }} - <li> - <a href="{{- .Permalink -}}" title="{{ .Language.Params.languageAltTitle | default (.Language.LanguageName | emojify) | default (.Lang | title) }}" - aria-label="{{ .Language.LanguageName | default (.Lang | title) }}"> - {{- if (and site.Params.displayFullLangName (.Language.LanguageName)) }} - {{- .Language.LanguageName | emojify -}} - {{- else }} - {{- .Lang | title -}} - {{- end -}} - </a> - </li> - {{- end -}} - {{- end}} - </ul> - {{- end }} - </div> - </div> - {{- $currentPage := . }} - <input id="menu-button" type="checkbox"/> - <label id="menu-capture" for="menu-button"></label> - <label id="menu-icon" for="menu-button"><span></span></label> - <ul id="menu"> - {{- range site.Menus.main }} - {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }} - {{- $page_url:= $currentPage.Permalink | absLangURL }} - {{- $is_search := eq (site.GetPage .KeyName).Layout `search` }} - <li> - <a href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}" - {{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}> - <span {{- if eq $menu_item_url $page_url }} class="active" {{- end }}> - {{- .Pre }} - {{- .Name -}} - {{ .Post -}} - </span> - {{- if (findRE "://" .URL) }} - <svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" - stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="12" width="12"> - <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path> - <path d="M15 3h6v6"></path> - <path d="M10 14L21 3"></path> - </svg> - {{- end }} - </a> - </li> - {{- end }} - </ul> - </nav> -</header> diff --git a/layouts/partials/index_profile.html b/layouts/partials/index_profile.html @@ -1,96 +0,0 @@ -<div class="profile" style="flex-direction: column;"> - {{- with site.Params.profileMode }} - <div class="profile_inner"> - {{- if .imageUrl -}} - {{- $img := "" }} - {{- if not (urls.Parse .imageUrl).IsAbs }} - {{- $img = resources.Get .imageUrl }} - {{- end }} - {{- 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 (not (and (not .imageHeight) (not .imageWidth))) }} - {{- $img = $img.Resize (printf "%dx%d" .imageWidth .imageHeight) }} - {{- else if .imageHeight }} - {{- $img = $img.Resize (printf "x%d" .imageHeight) }} - {{ else if .imageWidth }} - {{- $img = $img.Resize (printf "%dx" .imageWidth) }} - {{ else }} - {{- $img = $img.Resize "150x150" }} - {{- end }} - {{- end }} - <img draggable="false" src="{{ $img.Permalink }}" alt="{{ .imageTitle | default "profile image" }}" title="{{ .imageTitle }}" - height="{{ .imageHeight | default 150 }}" width="{{ .imageWidth | default 150 }}" /> - {{- else }} - <img draggable="false" src="{{ .imageUrl | absURL }}" alt="{{ .imageTitle | default "profile image" }}" title="{{ .imageTitle }}" - height="{{ .imageHeight | default 150 }}" width="{{ .imageWidth | default 150 }}" /> - {{- end }} - {{- end }} - <h1>{{ .title | default site.Title | markdownify }}</h1> - <span>{{ .subtitle | markdownify }}</span> - {{- partial "social_icons.html" site.Params.socialIcons -}} - - {{- with .buttons }} - <div class="buttons"> - {{- range . }} - <a class="button" href="{{ trim .url " " }}" rel="noopener" title="{{ .name }}"> - <span class="button-inner"> - {{ .name }} - {{- if (findRE "://" .url) }} - <svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" - stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="14" width="14"> - <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path> - <path d="M15 3h6v6"></path> - <path d="M10 14L21 3"></path> - </svg> - {{- end }} - </span> - </a> - {{- end }} - </div> - {{- end }} - </div> - {{- end }} - {{- with site.Params.homePostListTitle }} - <a href="{{ .url | absURL }}" style="text-align: left; width: 100%;"><h2 style="margin: 32px auto 24px;">{{ .title }}</h2></a> - {{- end }} - {{- $pages := union .RegularPages .Sections }} - {{- $pages = where site.RegularPages "Type" "in" site.Params.mainSections }} - {{- $pages = where $pages "Params.hiddenInHomeList" "!=" "true" }} - {{- $pages = first 3 $pages }} - - {{- $term := .Data.Term }} - {{- range $index, $page := $pages }} - - {{- $class := "post-entry" }} - {{- if $term }} - {{- $class = "post-entry tag-entry" }} - {{- end }} - - <article class="post-entry" style="text-align: left; width: 100%; background-"> - {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} - {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} - <header class="entry-header"> - <h2> - {{- .Title }} - {{- if .Draft }}<sup><span class="entry-isdraft"> [draft]</span></sup>{{- end }} - </h2> - </header> - {{- if (ne (.Param "hideSummary") true) }} - <div class="entry-content"> - <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p> - </div> - {{- end }} - {{- if not (.Param "hideMeta") }} - <footer class="entry-footer"> - {{- partial "post_meta.html" . -}} - </footer> - {{- end }} - <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a> - </article> - {{- end }} - </div>