Merge 843506a7f2 into 6cfbf4d946

Add scrolling over TOC

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Warning when building if links to Markdown files cannot be resolved ([#691](https://github.com/jpanther/congo/pull/691))
 - Ability to share articles to Telegram and Line ([#719](https://github.com/jpanther/congo/pull/719))
 - New icons for `line` and `google-scholar` ([#719](https://github.com/jpanther/congo/pull/719), [#755](https://github.com/jpanther/congo/pull/755))
+- Table of contents will now scroll if taller than the browser height ([#733](https://github.com/jpanther/congo/pull/733))
 - Korean translation ([#731](https://github.com/jpanther/congo/pull/731))
 
 ### Changed

assets/css/compiled/main.css

@@ -1137,6 +1137,12 @@ body:has(#menu-controller:checked) {
 
 /* Table of Contents */
 
+.toc {
+  max-height: 100vh;
+  overflow-y: auto;
+  padding-bottom: 50px;
+}
+
 .toc ul,
 .toc li {
   list-style-type: none;

assets/css/main.css

@@ -59,6 +59,12 @@ body:has(#menu-controller:checked) {
 }
 
 /* Table of Contents */
+.toc {
+  max-height: 100vh;
+  overflow-y: auto;
+  padding-bottom: 50px;
+}
+
 .toc ul,
 .toc li {
   @apply list-none px-0 leading-snug;

exampleSite/config/_default/params.toml

@@ -20,8 +20,8 @@ fingerprintAlgorithm = "sha256"
 
 [header]
   layout = "basic" # valid options: basic, hamburger, hybrid, custom
-  # logo = "img/logo.jpg"
-  # logoDark = "img/dark-logo.jpg"
+   logo = "img/logo.jpg"
+   logoDark = "img/dark-logo.svg"
   showTitle = true
 
 [footer]

layouts/partials/logo.html

@@ -1,28 +1,26 @@
-{{- if .Site.Params.header.logo }}
-  {{- $logo := resources.Get .Site.Params.header.logo }}
-  {{- $logo_dark := resources.Get .Site.Params.header.logoDark }}
-  {{- if $logo }}
-    <a href="{{ "" | relLangURL }}" class="mr-2">
-      <img
-        src="{{ $logo.RelPermalink }}"
-        width="{{ div $logo.Width 2 }}"
-        height="{{ div $logo.Height 2 }}"
-        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="{{ $logo_dark.RelPermalink }}"
-        width="{{ div $logo_dark.Width 2 }}"
-        height="{{ div $logo_dark.Height 2 }}"
-        class="max-h-[10rem] max-w-[10rem] object-scale-down object-left dark:hidden"
-        alt="{{ .Site.Title }}"
-      />
+{{- if $.Page.Site.Params.header.logo }}
+  {{- $logo := resources.Get $.Page.Site.Params.header.logo }}
+  {{- $logo_dark := resources.Get $.Page.Site.Params.header.logoDark }}
+  {{- $logoAlt := $.Page.Site.Title -}} 
+  {{- $logoClass     := "max-h-[10rem] max-w-[10rem] object-scale-down object-left flex" -}}
+  {{- $logoDarkClass := (print $logoClass " hidden dark:flex")  -}}
+  {{- if $logo_dark -}}
+    {{- $logoClass = (print $logoClass " dark:hidden" ) -}}
   {{- end }}  
+  {{- if or $logo $logo_dark -}}
+    <a href="{{ "" | relLangURL }}" class="mr-2">  
+  {{- end }}
+  {{- with $logo }}
+    {{- partial "picture.html" (dict "img" . "alt" $logoAlt "class" $logoClass "lazy" false "webp" false ) -}}
+  {{- end -}}
+  {{- with $logo_dark }}
+    {{- partial "picture.html" (dict "img" . "alt" $logoAlt "class" $logoDarkClass "lazy" false "webp" false ) -}}
+  {{- end -}}
+  {{- if or $logo $logo_dark -}}
     </a>
   {{- end }}
 {{- end }}
-{{- if .Site.Params.header.showTitle | default true }}
+{{- if $.Page.Site.Params.header.showTitle | default true }}
   <a
     class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
     rel="me"