add css for dl; minor adjustments to book layouts

This commit is contained in:
loikein 2023-04-25 18:14:27 +01:00
parent fa6bda5448
commit 7595e2e6b9
5 changed files with 120 additions and 61 deletions

View file

@ -197,11 +197,11 @@ mjx-container[jax="CHTML"][display="true"],
grid-auto-flow: column; grid-auto-flow: column;
/* above 2 lines are equivalent as below 1 line */ /* above 2 lines are equivalent as below 1 line */
/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */ /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
gap: 1.3rem; gap: 1.4rem;
margin: 0 0 1rem 0; margin: 0 0 1.4rem 0;
} }
.row .column { .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 */ /* reduce zh & ja font-size to match en */
p:lang(zh), p:lang(zh), span:lang(zh),
p:lang(ja) { p:lang(ja), span:lang(ja), {
font-size: 1.2rem; font-size: 1.2rem;
} }

View file

@ -140,7 +140,8 @@ section {
p, p,
ol, ol,
ul { ul,
dl {
font-size: 1.4rem; font-size: 1.4rem;
} }
@ -196,7 +197,8 @@ blockquote footer {
} }
ol, ol,
ul { ul,
dl {
width: 45%; width: 45%;
-webkit-padding-start: 5%; -webkit-padding-start: 5%;
-webkit-padding-end: 5%; -webkit-padding-end: 5%;
@ -206,10 +208,37 @@ li ul {
width: 100%; width: 100%;
} }
li { li,
dt, dd {
padding: 0.5rem 0; 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 { figure {
padding: 0; padding: 0;
border: 0; border: 0;
@ -323,7 +352,9 @@ div.table-wrapper {
footer { footer {
width: 90%; width: 90%;
} }
ul { ul,
ol,
dl {
width: 85%; width: 85%;
} }
figure { figure {

View file

@ -13,6 +13,18 @@
{{ end }} {{ end }}
<section class="list-page"> <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 }} {{ $indexScratch := .Scratch }}
{{ range .Sections }} {{ range .Sections }}
{{ $indexScratch.Add "sections" (slice . ) }} {{ $indexScratch.Add "sections" (slice . ) }}

View file

@ -14,6 +14,19 @@
{{ end }} {{ end }}
<section class="list-page"> <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> <ul>
{{ range .Pages.ByTitle }} {{ range .Pages.ByTitle }}
{{ if .IsSection }} {{ if .IsSection }}

View file

@ -1,57 +1,60 @@
{{- $context := .context }} {{- $context := .context -}}
{{- $color := .color | default "" }} {{- $color := .color | default "" -}}
{{- $content := .content }} {{- $content := .content -}}
{{- $href := (trim .href " ") | default "" }} {{- $href := (trim .href " ") | default "" -}}
{{- $style := .style | default "default" }} {{- $style := .style | default "default" -}}
{{- if and (not $color) (eq (len $color) 0) }} {{- if and (not $color) (eq (len $color) 0) -}}
{{- $style = .style | default "transparent" }} {{- $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 }} {{- end }}
{{- $target := .target | default "" }} {{- $title := .title | default ($content) | default ($style | T) -}}
{{- $type := .type | default "" }} {{- $title = trim $title " " -}}
{{- $isButton := false }} {{- $icon := .icon | default "" -}}
{{- if or (not $href) (strings.HasPrefix $href "javascript:") }} {{- if and (not $icon) (eq (len $icon) 0) -}}
{{- $isButton = true }} {{- if eq $style "info" -}}{{ $icon = default "info-circle" }}{{- end -}}
{{- $href = substr $href (len "javascript:") }} {{- if eq $style "warning" -}}{{ $icon = default "exclamation-triangle" }}{{- end -}}
{{- if not $type }} {{- if eq $style "note" -}}{{ $icon = default "exclamation-circle" }}{{- end -}}
{{- $type = "button" }} {{- if eq $style "tip" -}}{{ $icon = default "lightbulb" }}{{- end -}}
{{- end }} {{- end -}}
{{- else if and (eq (len $target) 0) (or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") ) }} {{- $icon = trim $icon " " -}}
{{- $target = "_blank" }} {{- $iconposition := .iconposition | default "left" -}}
{{- if isset $context.Site.Params "externallinktarget" }} {{- with $context -}}
{{- $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 }}
<span class="btn {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}> <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 }}> {{ if $isButton -}}
{{- else }} <button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }}>
<a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }}> {{ else -}}
{{- end }} <a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }}>
{{- if and $icon (eq $iconposition "left") }} {{- end -}}
<span class="icon">{{ $icon }}</span>
{{- end }} {{ if and $icon (eq $iconposition "left") -}}
{{ $title | safeHTML }} <span class="icon">{{- $icon -}}</span>
{{- if and $icon (eq $iconposition "right") }} {{- end -}}
<span class="icon">{{ $icon }}</span> {{- $title | safeHTML -}}
{{- end }} {{ if and $icon (eq $iconposition "right") -}}
{{- if $isButton }} <span class="icon">{{- $icon -}}</span>
</button> {{- end -}}
{{- else }}
</a> {{ if $isButton -}}
{{- end }} </button>
{{ else -}}
</a>
{{ end -}}
</span> </span>
{{- end }} {{- end -}}
{{/* https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/shortcodes/button.html */}} {{/* https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/shortcodes/button.html */}}