diff options
| -rw-r--r-- | assets/css/main.css | 30 | ||||
| -rw-r--r-- | assets/css/vars.css | 3 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-heading.html | 4 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-image.html | 7 |
4 files changed, 40 insertions, 4 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index d95ca04..61eca0a 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -37,6 +37,21 @@ h6 { margin-bottom: var(--hx-margin-bottom); } +.heading { + a { + text-decoration: none; + font-weight: normal; + color: var(--content-secondary); + visibility: hidden; + font-size: 0.9em; + font-family: var(--font-mono); + } + + &:hover a { + visibility: visible; + } +} + p { margin-top: var(--p-margin-top); margin-bottom: var(--p-margin-bottom); @@ -394,6 +409,20 @@ footer a { /* images */ +figure>div { + width: 100%; + display: flex; + justify-content: center; +} + +figure img { + max-width: 100%; + max-height: var(--figure-img-max-height); + width: auto; + height: auto; + margin-inline: auto; +} + .dark .img-light { display: none !important; } @@ -419,6 +448,7 @@ footer a { } .img-full img { + height: auto; width: 100vw !important; max-width: 100vw !important; } diff --git a/assets/css/vars.css b/assets/css/vars.css index 837acf7..995cf2e 100644 --- a/assets/css/vars.css +++ b/assets/css/vars.css @@ -53,6 +53,7 @@ /* Content */ --content-height: calc(100vh - var(--footer-height)); + --figure-img-max-height: 800px; /* Tables */ --table-cell-padding: .5rem; @@ -74,4 +75,4 @@ --social-icons-bottom-margin: 0rem; --caption-padding: calc(2 * var(--main-padding)); } -} +}
\ No newline at end of file diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html new file mode 100644 index 0000000..44430d6 --- /dev/null +++ b/layouts/_default/_markup/render-heading.html @@ -0,0 +1,4 @@ +<h{{ .Level }} class="heading" id="{{ .Anchor }}"> + {{ .Text }} + <a href="#{{ .Anchor }}">#</a> +</h{{ .Level }}> diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 0930316..679fd76 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -5,9 +5,9 @@ https://github.com/gohugoio/hugo/blob/89bd02/tpl/tplimpl/embedded/templates/_def */}} {{- $u := urls.Parse .Destination -}} {{- $url := $u.String -}} +{{- $imgResource := .Page.Scratch.Get "typoNilVariable" -}} {{- if not $u.IsAbs -}} {{- $path := strings.TrimPrefix "./" $u.Path -}} - {{- $imgResource := .Page.Scratch.Get "typoNilVariable" -}} {{/* Check if this is a page bundle or standalone page */}} {{- if .PageInner.Resources -}} {{- $imgResource = .PageInner.Resources.Get $path -}} @@ -42,11 +42,12 @@ and build the img class string as "img-tag1 img-tag2 ..." {{ $classes = printf "%s img-%s" $classes $tag}} {{ end }} + {{/* Use the computed classes on the rendered figure */}} <figure class="{{ $classes }}"> <div> - <img loading="lazy" alt="{{ .Text }}" src="{{ $url }}"> + <img loading="lazy" alt="{{ .Text }}" src="{{ $url }}" {{ with $imgResource }}width="{{ .Width }}px" height="{{ .Height }}px"{{ end }}> </div> {{ with .Title }} @@ -54,4 +55,4 @@ and build the img class string as "img-tag1 img-tag2 ..." <figcaption> {{ . | markdownify}} </figcaption> </div> {{ end }} -</figure>
\ No newline at end of file +</figure> |