From 7595e2e6b90444eb61ab3001e11ba8d04d32f744 Mon Sep 17 00:00:00 2001
From: loikein <wanleiqiong@gmail.com>
Date: Tue, 25 Apr 2023 18:14:27 +0100
Subject: [PATCH] add css for dl; minor adjustments to book layouts

---
 assets/scss/general.scss                |  10 +--
 assets/scss/tufte.scss                  |  39 ++++++++-
 layouts/book/all.html                   |  12 +++
 layouts/book/volumes.html               |  13 +++
 layouts/partials/shortcodes/button.html | 107 ++++++++++++------------
 5 files changed, 120 insertions(+), 61 deletions(-)

diff --git a/assets/scss/general.scss b/assets/scss/general.scss
index 20068f2..7ea6777 100644
--- a/assets/scss/general.scss
+++ b/assets/scss/general.scss
@@ -197,11 +197,11 @@ mjx-container[jax="CHTML"][display="true"],
     grid-auto-flow: column;
     /* above 2 lines are equivalent as below 1 line */
     /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
-    gap: 1.3rem;
-    margin: 0 0 1rem 0;
+    gap: 1.4rem;
+    margin: 0 0 1.4rem 0;
   }
   .row .column {
-    margin-left: 0;
+    margin-left: 0 !important;
   }
 }
 
@@ -250,8 +250,8 @@ mjx-container[jax="CHTML"][display="true"],
 
 /* reduce zh & ja font-size to match en */
 
-p:lang(zh),
-p:lang(ja) {
+p:lang(zh), span:lang(zh),
+p:lang(ja), span:lang(ja), {
     font-size: 1.2rem;
 }
 
diff --git a/assets/scss/tufte.scss b/assets/scss/tufte.scss
index bc506ab..d2913ab 100644
--- a/assets/scss/tufte.scss
+++ b/assets/scss/tufte.scss
@@ -140,7 +140,8 @@ section {
 
 p,
 ol,
-ul {
+ul,
+dl {
     font-size: 1.4rem;
 }
 
@@ -196,7 +197,8 @@ blockquote footer {
 }
 
 ol,
-ul {
+ul,
+dl {
     width: 45%;
     -webkit-padding-start: 5%;
     -webkit-padding-end: 5%;
@@ -206,10 +208,37 @@ li  ul {
     width: 100%;
 }
 
-li {
+li,
+dt, dd {
     padding: 0.5rem 0;
 }
 
+dl {
+    display: grid;
+    gap: 0 1rem;
+}
+
+dt {
+    font-weight: 700;
+    grid-column: 1;
+}
+
+dd {
+    margin-bottom: 0;
+    margin-left: 1rem;
+}
+
+@media (min-width: 760px) {
+  dl {
+    grid-template-columns: fit-content(50%) auto;
+  }
+
+  dd {
+    grid-column: 2;
+    margin-left: 0;
+  }
+}
+
 figure {
     padding: 0;
     border: 0;
@@ -323,7 +352,9 @@ div.table-wrapper {
     footer {
         width: 90%;
     }
-    ul {
+    ul,
+    ol,
+    dl {
         width: 85%;
     }
     figure {
diff --git a/layouts/book/all.html b/layouts/book/all.html
index 616c6aa..3aab29d 100644
--- a/layouts/book/all.html
+++ b/layouts/book/all.html
@@ -13,6 +13,18 @@
 {{ end }}
 
 <section class="list-page">
+<!-- preambles -->
+
+<ul>
+{{ range .Pages.ByTitle }}
+{{ if .IsPage }}
+<li><a href="{{ .RelPermalink }}">{{ .Title }}{{- if .Draft -}} :: Draft {{- end -}}</a></li>
+{{ end }}
+{{ end }}
+</ul>
+
+<!-- sub categories & pages -->
+
 {{ $indexScratch := .Scratch }}
 {{ range .Sections }}
 {{ $indexScratch.Add "sections" (slice . ) }}
diff --git a/layouts/book/volumes.html b/layouts/book/volumes.html
index d714c2b..24da49d 100644
--- a/layouts/book/volumes.html
+++ b/layouts/book/volumes.html
@@ -14,6 +14,19 @@
 {{ end }}
 
 <section class="list-page">
+
+<!-- preambles -->
+
+<ul>
+{{ range .Pages.ByTitle }}
+{{ if .IsPage }}
+<li><a href="{{ .RelPermalink }}">{{ .Title }}{{- if .Draft -}} :: Draft {{- end -}}</a></li>
+{{ end }}
+{{ end }}
+</ul>
+
+<!-- sub categories -->
+
 <ul>
 {{ range .Pages.ByTitle }}
 {{ if .IsSection }}
diff --git a/layouts/partials/shortcodes/button.html b/layouts/partials/shortcodes/button.html
index 905b3e9..b4e2a6b 100644
--- a/layouts/partials/shortcodes/button.html
+++ b/layouts/partials/shortcodes/button.html
@@ -1,57 +1,60 @@
-{{- $context := .context }}
-{{- $color := .color | default "" }}
-{{- $content := .content }}
-{{- $href := (trim .href " ") | default "" }}
-{{- $style := .style | default "default" }}
-{{- if and (not $color) (eq (len $color) 0) }}
-  {{- $style = .style | default "transparent" }}
+{{- $context := .context -}}
+{{- $color := .color | default "" -}}
+{{- $content := .content -}}
+{{- $href := (trim .href " ") | default "" -}}
+{{- $style := .style | default "default" -}}
+{{- if and (not $color) (eq (len $color) 0) -}}
+  {{- $style = .style | default "transparent" -}}
+{{- end -}}
+{{- $target := .target | default "" -}}
+{{- $type := .type | default "" -}}
+{{- $isButton := false -}}
+{{- if or (not $href) (strings.HasPrefix $href "javascript:") -}}
+  {{- $isButton = true -}}
+  {{- $href = substr $href (len "javascript:") -}}
+  {{- if not $type -}}
+    {{- $type = "button" -}}
+  {{- end -}}
+{{- else if and (eq (len $target) 0) (or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") ) -}}
+  {{- $target = "_blank" -}}
+  {{- if isset $context.Site.Params "externallinktarget" -}}
+    {{- $target = $context.Site.Params.externalLinkTarget -}}
+  {{- end -}}
 {{- end }}
-{{- $target := .target | default "" }}
-{{- $type := .type | default "" }}
-{{- $isButton := false }}
-{{- if or (not $href) (strings.HasPrefix $href "javascript:") }}
-  {{- $isButton = true }}
-  {{- $href = substr $href (len "javascript:") }}
-  {{- if not $type }}
-    {{- $type = "button" }}
-  {{- end }}
-{{- else if and (eq (len $target) 0) (or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") ) }}
-  {{- $target = "_blank" }}
-  {{- if isset $context.Site.Params "externallinktarget" }}
-    {{- $target = $context.Site.Params.externalLinkTarget }}
-  {{- end }}
-{{- end }}
-{{- $title := .title | default ($content) | default ($style | T) }}
-{{- $title = trim $title " " }}
-{{- $icon := .icon | default "" }}
-{{- if and (not $icon) (eq (len $icon) 0) }}
-  {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
-  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
-  {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
-  {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
-{{- end }}
-{{- $icon = trim $icon " " }}
-{{- $iconposition := .iconposition | default "left" }}
-{{- with $context }}
+{{- $title := .title | default ($content) | default ($style | T) -}}
+{{- $title = trim $title " " -}}
+{{- $icon := .icon | default "" -}}
+{{- if and (not $icon) (eq (len $icon) 0) -}}
+  {{- if eq $style "info" -}}{{ $icon = default "info-circle" }}{{- end -}}
+  {{- if eq $style "warning" -}}{{ $icon = default "exclamation-triangle" }}{{- end -}}
+  {{- if eq $style "note" -}}{{ $icon = default "exclamation-circle" }}{{- end -}}
+  {{- if eq $style "tip" -}}{{ $icon = default "lightbulb" }}{{- end -}}
+{{- end -}}
+{{- $icon = trim $icon " " -}}
+{{- $iconposition := .iconposition | default "left" -}}
+{{- with $context -}}
 <span class="btn {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
-  {{- if $isButton }}
-  <button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }}>
-  {{- else }}
-  <a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }}>
-  {{- end }}
-    {{- if and $icon (eq $iconposition "left") }}
-    <span class="icon">{{ $icon }}</span>
-    {{- end }} 
-    {{ $title | safeHTML }}
-    {{- if and $icon (eq $iconposition "right") }}
-    <span class="icon">{{ $icon }}</span>
-    {{- end }}
-  {{- if $isButton }}
-  </button>
-  {{- else }}
-  </a>
-  {{- end }}
+
+{{ if $isButton -}}
+<button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }}>
+{{ else -}}
+<a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }}>
+{{- end -}}
+
+  {{ if and $icon (eq $iconposition "left") -}}
+  <span class="icon">{{- $icon -}}</span>
+  {{- end -}}
+  {{- $title | safeHTML -}}
+  {{ if and $icon (eq $iconposition "right") -}}
+  <span class="icon">{{- $icon -}}</span>
+  {{- end -}}
+
+{{ if $isButton -}}
+</button>
+{{ else -}}
+</a>
+{{ end -}}
 </span>
-{{- end }}
+{{- end -}}
 
 {{/* https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/shortcodes/button.html */}}