diff --git a/assets/_defaults.scss b/assets/_defaults.scss index 7b4a01a..aa69e00 100644 --- a/assets/_defaults.scss +++ b/assets/_defaults.scss @@ -93,4 +93,4 @@ $mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default; @mixin accent($name, $color, $tint: 0.1) { --color-accent-#{$name}: #{$color}; --color-accent-#{$name}-tint: #{rgba($color, $tint)}; -} \ No newline at end of file +} diff --git a/assets/_main.scss b/assets/_main.scss index 4f13f5e..20a0ec2 100644 --- a/assets/_main.scss +++ b/assets/_main.scss @@ -43,7 +43,7 @@ small { @extend .text-small; } -:focus { +:focus-visible, input.toggle:focus-visible + label { @include outline; } @@ -57,7 +57,7 @@ nav ul { } a { - padding: .5em 0; + padding: 0.5em 0; display: flex; transition: opacity 0.1s ease-in-out; } @@ -154,12 +154,12 @@ a .book-icon { // for RTL support body[dir="rtl"] .book-menu { - input.toggle + label::after { - content: "◂"; + input.toggle + label > img:last-child { + transform: rotate(180deg); } - input.toggle:checked + label::after { - transform: rotate(-90deg); + input.toggle:checked + label > img:last-child { + transform: rotate(90deg); } } @@ -241,7 +241,7 @@ body[dir="rtl"] .book-menu { padding: 0; } - &:hover > ul { + &:hover > ul, &:focus-within > ul { display: block; } } @@ -251,13 +251,12 @@ body[dir="rtl"] .book-menu { .book-search { position: relative; margin: $padding-8 0; - border-bottom: 1px solid transparent; input { width: 100%; padding: $padding-8; - border: 0; + border: $padding-1 solid var(--gray-200); border-radius: var(--border-radius); background: var(--gray-100); @@ -384,10 +383,6 @@ body[dir="rtl"] .book-menu { display: inline; } - #menu-control:focus ~ main label[for="menu-control"] { - @include outline; - } - #menu-control:checked ~ main { .book-menu { visibility: initial; @@ -412,10 +407,6 @@ body[dir="rtl"] .book-menu { } } - #toc-control:focus ~ main label[for="toc-control"] { - @include outline; - } - #toc-control:checked ~ main { .book-header aside { display: block; diff --git a/assets/_markdown.scss b/assets/_markdown.scss index 9d745ea..483db8c 100644 --- a/assets/_markdown.scss +++ b/assets/_markdown.scss @@ -25,8 +25,7 @@ margin-inline-start: .25em; } - &:hover a.anchor, - a.anchor:focus { + &:hover a.anchor, a.anchor:focus-visible { opacity: initial; text-decoration: none; } @@ -64,8 +63,9 @@ code { direction: ltr; unicode-bidi: embed; - padding: 0 $padding-4; - background: var(--gray-200); + padding: .125em .25em; + background: var(--gray-100); + border: $padding-1 solid var(--gray-200); border-radius: var(--border-radius); font-size: 0.875em; } @@ -73,11 +73,17 @@ pre { padding: $padding-16; background: var(--gray-100); + border: $padding-1 solid var(--gray-200); border-radius: var(--border-radius); overflow-x: auto; + &:focus { + @include outline; + } + code { padding: 0; + border: 0; background: none; } } @@ -151,7 +157,15 @@ unicode-bidi: embed; border-radius: var(--border-radius); + table tbody { + border: $padding-1 solid var(--gray-200); + } + table tr { + pre { + border: 0; + } + td pre code > span { display: flex; } @@ -160,6 +174,7 @@ margin: 0; padding-inline-end: 0; } + td:nth-child(2) pre { margin: 0; padding-inline-start: 0; diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss index acdaeca..1af4458 100644 --- a/assets/_shortcodes.scss +++ b/assets/_shortcodes.scss @@ -8,8 +8,6 @@ border: $padding-1 solid var(--gray-200); border-radius: var(--border-radius); - overflow: hidden; - display: flex; flex-wrap: wrap; @@ -35,10 +33,6 @@ input[type="radio"]:checked+label+.book-tabs-content { display: block; } - - input[type="radio"]:focus+label { - @include outline; - } } // {{< columns >}} @@ -99,7 +93,7 @@ display: inline-block; font-size: var(--font-size-smaller); - font-weight: var(body-font-weight); + font-weight: var(--body-font-weight); vertical-align: middle; border-radius: var(--border-radius); border: $padding-1 solid var(--accent-color); @@ -238,10 +232,12 @@ } .book-codeblock-filename { - background: var(--gray-200); + background: var(--gray-100); + border: $padding-1 solid var(--gray-200); + border-bottom: 0; font-size: var(--font-size-smaller); margin-top: $padding-16; - padding: $padding-4 $padding-16; + padding: $padding-4 $padding-8; border-start-start-radius: var(--border-radius); border-start-end-radius: var(--border-radius); diff --git a/assets/_utils.scss b/assets/_utils.scss index 5191927..ffc3be5 100644 --- a/assets/_utils.scss +++ b/assets/_utils.scss @@ -89,6 +89,5 @@ input.toggle { @mixin outline { outline-style: auto; - outline-color: currentColor; - outline-color: -webkit-focus-ring-color; + outline-color: var(--color-link); } diff --git a/assets/clipboard.js b/assets/clipboard.js index 2799f2f..c13a285 100644 --- a/assets/clipboard.js +++ b/assets/clipboard.js @@ -1,23 +1,11 @@ (function () { - function select(element) { - const selection = window.getSelection(); - - const range = document.createRange(); - range.selectNodeContents(element); - - selection.removeAllRanges(); - selection.addRange(range); - } - - document.querySelectorAll("pre code").forEach(code => { - code.addEventListener("click", function (event) { - if (window.getSelection().toString()) { - return; - } - select(code.parentElement); - + document.querySelectorAll("pre:has(code)").forEach(code => { + code.addEventListener("click", code.focus); + code.addEventListener("copy", function (event) { + event.preventDefault(); if (navigator.clipboard) { - navigator.clipboard.writeText(code.parentElement.textContent); + const content = window.getSelection().toString() || code.textContent; + navigator.clipboard.writeText(content); } }); }); diff --git a/assets/search-data.json b/assets/search-data.json index 0a65bf0..9c00409 100644 --- a/assets/search-data.json +++ b/assets/search-data.json @@ -10,7 +10,7 @@ "id": {{ $index }}, "href": "{{ $page.RelPermalink }}", "title": {{ (partial "docs/title" $page) | jsonify }}, - "section": {{ (partial "docs/title" $page.Parent) | jsonify }}, + "section": {{ (partial "docs/title" $page.Parent) | default $.Site.Title | jsonify }}, "content": {{ $page.Plain | jsonify }} } {{- end -}} diff --git a/layouts/_partials/docs/brand.html b/layouts/_partials/docs/brand.html index 7824ef1..3c2167a 100644 --- a/layouts/_partials/docs/brand.html +++ b/layouts/_partials/docs/brand.html @@ -1,7 +1,7 @@

{{- with .Site.Params.BookLogo -}} - Logo + {{ partial {{- end -}} {{ .Site.Title }} diff --git a/layouts/_partials/docs/footer.html b/layouts/_partials/docs/footer.html index 04fd33e..dd5b7d0 100644 --- a/layouts/_partials/docs/footer.html +++ b/layouts/_partials/docs/footer.html @@ -3,8 +3,8 @@
{{ if and .GitInfo .Site.Params.BookLastChangeLink }} {{- $date := partial "docs/date" (dict "Date" .Lastmod "Format" .Site.Params.BookDateFormat) -}} - - + + {{ partial {{ $date }} {{ end }} @@ -13,8 +13,8 @@
{{ if and .File .Site.Params.BookEditLink }} - - {{ i18n "Edit this page" }} + {{ partial + {{ partial "docs/text/i18n" "Edit this page" }} {{ end }}
@@ -22,8 +22,3 @@
{{ partial "docs/prev-next" . }} - -{{ $script := resources.Get "clipboard.js" | resources.Minify }} -{{ with $script.Content }} - -{{ end }} diff --git a/layouts/_partials/docs/header.html b/layouts/_partials/docs/header.html index c2d3e54..6d360ed 100644 --- a/layouts/_partials/docs/header.html +++ b/layouts/_partials/docs/header.html @@ -1,13 +1,13 @@

{{ partial "docs/title" . }}

diff --git a/layouts/_partials/docs/html-head.html b/layouts/_partials/docs/html-head.html index d3b4ae2..0747c40 100644 --- a/layouts/_partials/docs/html-head.html +++ b/layouts/_partials/docs/html-head.html @@ -5,7 +5,7 @@ https://github.com/alex-shpak/hugo-book - + @@ -15,6 +15,7 @@ https://github.com/alex-shpak/hugo-book {{- end -}} {{ partial "opengraph.html" . }} +{{ partial "schema.html" . }} {{ partial "docs/html-head-title" . }} {{ partial "docs/html-head-favicon" . }} diff --git a/layouts/_partials/docs/icon.html b/layouts/_partials/docs/icon.html index 0f3ae06..859c179 100644 --- a/layouts/_partials/docs/icon.html +++ b/layouts/_partials/docs/icon.html @@ -1,3 +1,2 @@ -{{- with resources.Get (printf "icons/%s.svg" .) -}} -{{- .RelPermalink -}} -{{- end -}} +{{- $icon := resources.Get (printf "icons/%s.svg" .) -}} +{{- return $icon.RelPermalink -}} diff --git a/layouts/_partials/docs/languages.html b/layouts/_partials/docs/languages.html index 83557ab..bcdf3f5 100644 --- a/layouts/_partials/docs/languages.html +++ b/layouts/_partials/docs/languages.html @@ -14,10 +14,10 @@