From 03b0e7e34d152235c4923d08f714949ca5a4e3ef Mon Sep 17 00:00:00 2001 From: a Date: Thu, 13 Oct 2022 05:49:41 -0500 Subject: [PATCH] fix up layout responsiveness for wide widths --- static/js/script.js => assets/scripts/main.js | 0 assets/styles/common/base.scss | 45 ++ assets/styles/common/colors.scss | 35 ++ assets/styles/common/mixins.scss | 0 assets/styles/common/page.scss | 182 +++++++ assets/styles/common/reset.scss | 44 ++ assets/styles/components/docs-menu.scss | 56 ++ assets/styles/components/header-menu.scss | 5 + assets/styles/components/site-footer.scss | 11 + assets/styles/components/site-header.scss | 33 ++ assets/styles/print.scss | 24 + assets/styles/screen.scss | 12 + assets/styles/screen/layout.scss | 173 ++++++ assets/styles/screen/links.scss | 29 + layouts/_default/baseof.html | 17 +- layouts/_default/single.html | 4 +- layouts/partials/docs-menu.html | 79 ++- layouts/partials/main-menu.html | 19 + layouts/partials/site-header.html | 3 +- static/css/style.screen.css | 507 ------------------ 20 files changed, 740 insertions(+), 538 deletions(-) rename static/js/script.js => assets/scripts/main.js (100%) create mode 100644 assets/styles/common/base.scss create mode 100644 assets/styles/common/colors.scss create mode 100644 assets/styles/common/mixins.scss create mode 100644 assets/styles/common/page.scss create mode 100644 assets/styles/common/reset.scss create mode 100644 assets/styles/components/docs-menu.scss create mode 100644 assets/styles/components/header-menu.scss create mode 100644 assets/styles/components/site-footer.scss create mode 100644 assets/styles/components/site-header.scss create mode 100644 assets/styles/print.scss create mode 100644 assets/styles/screen.scss create mode 100644 assets/styles/screen/layout.scss create mode 100644 assets/styles/screen/links.scss create mode 100644 layouts/partials/main-menu.html delete mode 100644 static/css/style.screen.css diff --git a/static/js/script.js b/assets/scripts/main.js similarity index 100% rename from static/js/script.js rename to assets/scripts/main.js diff --git a/assets/styles/common/base.scss b/assets/styles/common/base.scss new file mode 100644 index 0000000..8bb9450 --- /dev/null +++ b/assets/styles/common/base.scss @@ -0,0 +1,45 @@ +$site-max-width: 80rem; + +:root { + --site-max-width: #{$site-max-width}; + --nav-height: 4rem; + --header-height: 4.5rem; + --footer-height: 3rem; +} + +html { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + scroll-behavior: smooth; + background: var(--ui-background); + color: var(--ui-text); +} + +/* Single column layout, where main content stretches to fill. */ +body { + display: flex; + flex-flow: column; + min-height: calc(var(--vh, 1vh) * 100); + max-width: 100vw; + margin: auto; +} +main {flex-grow: 1;} + +/* +Sections are primary block units, usually of type
. +Containers are an immediate child
, purely for constraining width. +*/ +.section { + padding: 2em 0; /* we apply a vertical padding only to sections */ +} +.container { + width: 100%; + max-width: var(--site-max-width); + margin: 0 auto; + padding: 0 1em; /* and we apply a horizontal padding only to containers */ +} + +/* Ensure consistent colors for text selection */ +::selection { + background: var(--primary-accent); + color: var(--primary-accent-text); +} \ No newline at end of file diff --git a/assets/styles/common/colors.scss b/assets/styles/common/colors.scss new file mode 100644 index 0000000..1b6a213 --- /dev/null +++ b/assets/styles/common/colors.scss @@ -0,0 +1,35 @@ +:root { + --link-color: #3371cf; + --link-visited: #594288; + + --primary-accent: rgb(0, 123, 255); + --primary-accent-transparent: rgba(0, 123, 255,0.25); + --primary-accent-text: #fff; + + --ui-background: #fff; + --ui-text: #111; + --ui-text-muted: #666; + --ui-text-bold: #000; + + --ui-overlay: #ddd; + --ui-overlay-text: var(--ui-text); +} + +@media (prefers-color-scheme: dark) { + :root { + --link-color: #8fb1df; + --link-visited: #a089d4; + + --primary-accent: rgb(0, 123, 255); + --primary-accent-transparent: rgba(64, 156, 255, 0.45); + --primary-accent-text: #fff; + + --ui-background: #212121; + --ui-text: #eee; + --ui-text-muted: #999; + --ui-text-bold: #fff; + + --ui-overlay: #333; + --ui-overlay-text: var(--ui-text); + } +} \ No newline at end of file diff --git a/assets/styles/common/mixins.scss b/assets/styles/common/mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/styles/common/page.scss b/assets/styles/common/page.scss new file mode 100644 index 0000000..708c542 --- /dev/null +++ b/assets/styles/common/page.scss @@ -0,0 +1,182 @@ +.page { + /* text */ + h1 {font-size: 1.8em} + h2 {font-size: 1.6em} + h3 {font-size: 1.423em} + h4 {font-size: 1.265em} + h5 {font-size: 1.125em} + h6 {font-size: 1em} + h1, h2, h3, h4, h5, h6 { + line-height: 1.2; + margin-bottom: 1rem; + margin-top: 2rem; + font-weight: 700; + } + p { + line-height: 2; + margin-bottom: 1em; + } + a { + word-wrap: break-word; + } + /* semantics */ + em {font-style: italic} + strong {font-weight: 700} + /* text formatting */ + --script-size: 0.65em; + sup { + position: relative; + font-size: var(--script-size); + top: -1em; + } + sub { + position: relative; + font-size: var(--script-size); + } + @supports #{'selector\(:has(kbd))'} { + /* style individual keys only (for the innermost element) */ + kbd kbd, + kbd:not(:has(kbd)) { + font-family: monospace; + padding: 0.25em; + background: var(--ui-overlay); + color: var(--ui-overlay-text); + } + } + @supports not #{'selector\(:has(kbd))'} { + /* style the entire key sequence */ + kbd { + font-family: monospace; + padding: 0.25em; + background: var(--ui-overlay); + color: var(--ui-overlay-text); + } + /* and prevent double-styling for nested keys */ + kbd kbd { + background: none; + } + } + mark { + background: var(--primary-accent-transparent); + color: var(--ui-text); + --pad-x-highlight: 0.125em; + padding-left: var(--pad-x-highlight); + padding-right: var(--pad-x-highlight); + } + abbr[title]:after { + content: '?'; + font-size: var(--script-size); + color: var(--ui-text-muted); + } + /* lists */ + ul {list-style: disc; margin: 1em 0;} + li {margin-bottom: 1em; line-height: 1.4; margin-left: 1em;} + ol {list-style: decimal; margin: 1em 0;} + dl {margin: 1em 0; line-height: 1.4;} + dt {font-weight: 700;} + dd {margin-left: 1em;} + /* block elements */ + img { + width: 100%; + margin-bottom: 1em; + } + blockquote { + font-style: italic; + font-size: 1em; + margin: 1em 0; + border-left: 0.25rem solid var(--ui-text-bold); + padding-left: 0.75em; + line-height: 1.4; + } + pre { + font-family: monospace; + background: #333; + color: white; + padding: 1em; + line-height: 1.4; + overflow-x: scroll; + margin-bottom: 1em; + } + code { + font-family: monospace; + } + /* figures */ + figure { + margin-bottom: 1em; + } + figure img { + width: 100%; + margin-bottom: -0.125em; + } + figcaption { + background: #212121; + color: white; + font-style: italic; + padding: 1em; + font-size: 0.8em; + line-height: 1.2; + } + /* tables */ + table {text-align: center;} + thead {font-weight: 700;} + th, td { + border: 1px solid black; + padding: 0.5em; + } + /* {{}} shortcode */ + .hint { + padding: 1em; + line-height: 2; + } + .hint, + .hint.info, + .hint.tip { + background: rgba(142, 226, 142, 0.2); + border-left: 4px solid rgb(142, 226, 142); + } + + .hint.warning { + background: rgba(218, 226, 142, 0.2); + border-left: 4px solid rgb(218, 226, 142); + } + + .hint.danger { + background: rgba(226, 142, 142, 0.2); + border-left: 4px solid rgb(226, 142, 142); + } + /* hugo-specific citation footnote */ + cite sup { + position: inherit; + font-size: inherit; + a { + padding: 0.25em; + } + &:before { + content: ' ['; + } + &:after { + content: ']'; + } + } + /* toc */ + .toc-title { + margin-bottom: 0.5em; + font-weight: 900; + text-transform: uppercase; + color: var(--ui-text-muted); + } + #TableOfContents { + ul { + list-style: none; + margin: 0; + } + li { + margin: 0; + line-height: 1.5; + } + li > ul { /* indent subheadings */ + margin: 0; + margin-left: 1em; + } + } +} \ No newline at end of file diff --git a/assets/styles/common/reset.scss b/assets/styles/common/reset.scss new file mode 100644 index 0000000..5cebaa4 --- /dev/null +++ b/assets/styles/common/reset.scss @@ -0,0 +1,44 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + box-sizing: border-box; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/assets/styles/components/docs-menu.scss b/assets/styles/components/docs-menu.scss new file mode 100644 index 0000000..d21c7da --- /dev/null +++ b/assets/styles/components/docs-menu.scss @@ -0,0 +1,56 @@ +/* navigation menu toggle */ + +.toggle-menu { + display: none; +} + +.toggle-menu:not(:checked) ~ .menu { + display: none; +} +.toggle-menu__label { + display: flex; + align-items: center; + font-weight: 900; + gap: 0.25rem; + text-transform: uppercase; +} + +/* navigation menu */ + +.docs-nav { + padding: 1em 0; + .menu { + margin-top: 1em; + > li { + margin-bottom: 1em; + } + } + li {line-height: 2} + .sub-menu { + margin-left: 1em; + li::marker { + content: '⟣ '; + } + .sub-menu li::marker { + content: '↳ '; + } + } + .section-title > a { + font-weight: 700; + text-decoration: none; + color: inherit; + } +} + +/* top of menu link should show only when focused */ + +#menu {margin-bottom: 1em;} +#menu:not(:focus) { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} \ No newline at end of file diff --git a/assets/styles/components/header-menu.scss b/assets/styles/components/header-menu.scss new file mode 100644 index 0000000..c567007 --- /dev/null +++ b/assets/styles/components/header-menu.scss @@ -0,0 +1,5 @@ +.header-nav { + display: flex; + flex-flow: column; + justify-content: center; +} \ No newline at end of file diff --git a/assets/styles/components/site-footer.scss b/assets/styles/components/site-footer.scss new file mode 100644 index 0000000..7d45f7d --- /dev/null +++ b/assets/styles/components/site-footer.scss @@ -0,0 +1,11 @@ +.site-footer { + height: var(--footer-height); + display: flex; + align-items: center; +} +.site-footer hr {display: none;} +.site-footer .container { + display: flex; + justify-content: space-between; +} +.breadcrumbs {display: flex; flex-flow: row wrap;} \ No newline at end of file diff --git a/assets/styles/components/site-header.scss b/assets/styles/components/site-header.scss new file mode 100644 index 0000000..aaa0772 --- /dev/null +++ b/assets/styles/components/site-header.scss @@ -0,0 +1,33 @@ +.site-masthead { + display: inline-flex; + flex-flow: row; + align-items: center; + gap: 1em; + padding: 4px; +} +.site-icon { + height: 2em; +} +.site-title { + font-weight: 900; + letter-spacing: -0.5px; + font-size: 1.25em; +} +.site-masthead, .site-masthead:visited { + color: inherit +} + +.site-masthead:focus { + color: var(--primary-accent-text); +} + +.site-header {padding: 1em 0;} + +.site-header a { + text-decoration: none; +} +.site-header .container { + display: flex; + flex-flow: row wrap; + justify-content: space-between; +} \ No newline at end of file diff --git a/assets/styles/print.scss b/assets/styles/print.scss new file mode 100644 index 0000000..428b01b --- /dev/null +++ b/assets/styles/print.scss @@ -0,0 +1,24 @@ +@import "common/reset"; +@import "common/colors"; +@import "common/base"; +@import "common/page"; + +@import "components/site-header"; + +.header-nav, +.docs-nav, +.site-footer, +.edit-on-github, +.footnote-backref +{ + display: none; +} +.page-header {padding: 0;} + +.page abbr[title]::after { + content: " (" attr(title) ") "; +} + +a[href^="http"]:after { + content: " (" attr(href) ") "; +} \ No newline at end of file diff --git a/assets/styles/screen.scss b/assets/styles/screen.scss new file mode 100644 index 0000000..0ef4dc2 --- /dev/null +++ b/assets/styles/screen.scss @@ -0,0 +1,12 @@ +@import "common/reset"; +@import "common/colors"; +@import "common/base"; +@import "common/page"; + +@import "components/site-header"; +@import "components/header-menu"; +@import "components/docs-menu"; +@import "components/site-footer"; + +@import "screen/layout"; +@import "screen/links"; diff --git a/assets/styles/screen/layout.scss b/assets/styles/screen/layout.scss new file mode 100644 index 0000000..a3f3178 --- /dev/null +++ b/assets/styles/screen/layout.scss @@ -0,0 +1,173 @@ +/* single layout */ + +.page { + .page-title {margin-top: 0;} + .lastmod { + margin-top: 1em; + color: var(--ui-text-muted) + } + .language-list { + display: flex; + flex-flow: wrap; + list-style: none; + } +} + +/* [responsive] re-show the navigation menu as a sidebar */ + +@media (min-width: 60rem) { + body { + display: grid; + grid-template-columns: 1fr 3fr; + height: calc(100 * var(--vh, 1vh)); + } + .site-header, .scroll-margin, .site-footer { + grid-column: span 2 + } + .docs-nav { + grid-column: 1; + height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height)); + overflow-y: auto; + padding: 0; + } + main { + grid-column: 2; + height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height)); + overflow-y: auto; + scrollbar-width: none; + } + .docs-nav::-webkit-scrollbar, + main::-webkit-scrollbar { + display: none; + } + + .docs-nav .menu {margin-top: 0;} + + .page-header { + padding: 0; + } + + /* toggle is no longer needed */ + + .toggle-menu { + display: none; + } + + .toggle-menu:not(:checked) ~ .menu { + display: unset; + } + .toggle-menu__label { + display: none; + } + +} + +/* [responsive] move the toc to its own column */ + +@media (min-width: 75rem) { + body { + grid-template-columns: 20rem 1fr; + } + .page { + display: grid; + grid-template-columns: 40rem 1fr; + } + .page .page-header { + grid-column: span 2 + } + .page .section { + grid-column: 1; + } + .page .toc { + grid-column: 2; + grid-row: span 2; + padding: 0; + } + .page .toc .container { + width: 15rem; + margin: 0; + position: fixed; + top: var(--header-height); + max-height: calc(100vh - var(--header-height) - var(--footer-height)); + overflow-y: auto; + } +} + +/* [responsive] let the
expand until max width of site */ + +@media (min-width: 80rem) { + + .page { + grid-template-columns: 1fr 20rem; /* toc now visually balanced with menu */ + } + + /* start limiting content since it can exceed 80ch now */ + + .page .content .container { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(80ch, 1fr) minmax(0, 1fr); + > * { + grid-column: 2; + } + > img + { + grid-column: 1 / span 3; + } + } + + /* also make the page header line up */ + + .page .page-header { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(80ch, 1fr) minmax(0, 1fr); + > .container { + grid-column: 2; + padding: 0; + } + } + +} + +/* [responsive]
has reached maxwidth */ + +@media (min-width: $site-max-width + 40rem) { + + /* we need to grow equally now */ + + body { + grid-template-columns: 1fr var(--site-max-width, $site-max-width) 1fr; + } + + .site-header, + .scroll-margin, + .site-footer + { + grid-column: 2 + } + + /* the page and toc take their space */ + + main {grid-column: 2 / span 2;} + + /* except now the page is fixed to maxwidth and the toc can "grow" */ + + .page { + grid-template-columns: var(--site-max-width, $site-max-width) 1fr; + } + + /* we don't actually want it to grow, though! just stick to the side */ + + .page {position: relative;} + .page .toc { + position: sticky; + top: 0; + } + + /* also the menu sidebar should stick to the other side */ + .docs-nav { + position: sticky; + width: 20rem; + place-self: end; + } + +} \ No newline at end of file diff --git a/assets/styles/screen/links.scss b/assets/styles/screen/links.scss new file mode 100644 index 0000000..b74dee5 --- /dev/null +++ b/assets/styles/screen/links.scss @@ -0,0 +1,29 @@ +a:link { + transition: all 0.1s ease-out; + color: var(--link-color); + text-decoration-thickness: .0625rem; + text-underline-offset: 0.125em; + text-decoration-skip-ink: none; +} + +a:visited { + color: var(--link-visited); +} + +a:focus { + outline: none; + background: var(--primary-accent); + color: var(--primary-accent-text); + border-radius: 2px; + text-decoration: none; + padding: 4px; +} + +a:hover { + text-decoration-thickness: 0.125em; + text-underline-offset: 0.25em; +} + +@media (prefers-reduced-motion) { + a:link {transition: none} +} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 76887d6..2096438 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,8 +5,21 @@ - - + {{ $screen := resources.Get "styles/screen.scss" | toCSS | minify | fingerprint }} + + {{ $print := resources.Get "styles/print.scss" | toCSS | minify | fingerprint }} + + {{ $script := resources.Get "scripts/main.js" | js.Build "script.js" | minify | fingerprint }} + {{ partial "seo.html" . }} {{ block "head" . }} {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index df76936..11ed0b0 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -4,8 +4,8 @@

{{ .Title }}

-

{{.Summary}}

-

Last modified {{ .Lastmod.Format "Mon Jan 2, 2006" }} - Edit this page on Github

+

{{.Page.Summary}}

+

Last modified {{ .Lastmod.Format "Mon Jan 2, 2006" }} - Edit this page on Github

{{ partial "i18nlist.html" . }}
diff --git a/layouts/partials/docs-menu.html b/layouts/partials/docs-menu.html index 2f05364..7103fd0 100644 --- a/layouts/partials/docs-menu.html +++ b/layouts/partials/docs-menu.html @@ -1,42 +1,69 @@ -
-{{ partial "docs-menu.html" .}} \ No newline at end of file +{{ partial "docs-menu.html" . }} \ No newline at end of file diff --git a/static/css/style.screen.css b/static/css/style.screen.css deleted file mode 100644 index 4c97413..0000000 --- a/static/css/style.screen.css +++ /dev/null @@ -1,507 +0,0 @@ -/*============================================================================== -Paradox - Hugo theme for simple, clean documentation - with an opinionated feature set. - -Table of contents: - - 0 - Reset - 1 - Base - 2 - Page content - 3 - Site structure -==============================================================================*/ - -/*============================================================================== -0 - Reset -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - box-sizing: border-box; -} - -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} - -/*============================================================================== -1 - Base - -This section contains foundational styles -for the structure of the website. -*/ - -:root { - --container-width: 1280px; - --nav-height: 4rem; - --header-height: 4rem; - --footer-height: 3rem; - --link-color: #3371cf; - --link-visited: #594288; - --primary-accent: rgb(0, 123, 255); - --primary-accent-transparent: rgba(0, 123, 255,0.25); - --primary-accent-text: #fff; - --ui-background: #fff; - --ui-text: #111; - --ui-text-muted: #666; - --ui-text-bold: #000; -} - -@media (prefers-color-scheme: dark) { - :root { - --link-color: #8fb1df; - --link-visited: #a089d4; - --primary-accent: rgb(0, 123, 255); - --primary-accent-transparent: rgba(0, 123, 255,0.25); - --primary-accent-text: #fff; - --ui-background: #212121; - --ui-text: #eee; - --ui-text-muted: #999; - --ui-text-bold: #fff; - } -} - -html { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - scroll-behavior: smooth; - background: var(--ui-background); - color: var(--ui-text); -} - -/* Single column layout, where main content stretches to fill. */ -body { - display: flex; - flex-flow: column; - min-height: calc(var(--vh, 1vh) * 100); - max-width: var(--container-width); - margin: auto; -} -main {flex-grow: 1;} - -/* -Sections are primary block units, usually of type
. -Containers are an immediate child
, purely for constraining width. -*/ -.section { - padding: 2em 0; /* we apply a vertical padding only to sections */ -} -.container { - width: 100%; - max-width: var(--container-width); - margin: 0 auto; - padding: 0 1em; /* and we apply a horizontal padding only to containers */ -} - -/*============================================================================== -2 - Page content - -This section contains foundational styles -for a single web page's content. -*/ - -.page h1 {font-size: 1.8em} -.page h2 {font-size: 1.6em} -.page h3 {font-size: 1.423em} -.page h4 {font-size: 1.265em} -.page h5 {font-size: 1.125em} -.page h6 {font-size: 1em} - -.page h1, -.page h2, -.page h3, -.page h4, -.page h5, -.page h6 { - line-height: 1.2; - margin-bottom: 1rem; - margin-top: 2rem; - font-weight: 700; -} -.page p { - line-height: 2; - margin-bottom: 1em; -} -.page a {word-wrap: break-word;} -.page blockquote { - font-style: italic; - font-size: 1em; - margin: 1em 0; - border-left: 0.25rem solid black; - padding-left: 0.75em; - line-height: 1.4; -} -.page pre { - font-family: monospace; - background: #333; - color: white; - padding: 1em; - line-height: 1.4; - overflow-x: scroll; - margin-bottom: 1em; -} -.page ul {list-style: disc; margin: 1em 0;} -.page li {margin-bottom: 1em; line-height: 1.4; margin-left: 1em;} -.page ol {list-style: decimal; margin: 1em 0;} -.page dl {margin: 1em 0; line-height: 1.4;} -.page dt {font-weight: 700;} -.page dd {margin-left: 1em;} -.page em {font-style: italic} -.page strong {font-weight: 700} -.page sup { - position: relative; - font-size: 0.8em; -} -.page sup a {position: relative; top: -0.5em;} -.page table {text-align: center;} -.page thead {font-weight: 700;} -.page th, -.page td { - border: 1px solid black; - padding: 0.5em; -} - -.page img { - width: 100%; - margin-bottom: 1em; -} - -.page figure {margin-bottom: 1em;} -.page figure img { - width: 100%; - margin-bottom: -0.125em; -} -.page figcaption { - background: #212121; - color: white; - font-style: italic; - padding: 1em; - font-size: 0.8em; - line-height: 1.2; -} - -.page .hint { - padding: 1em; -} - -/*============================================================================== -3 - Site structure - -This section contains styles -for laying out the structural elements. -*/ - -/* site header */ -.site-header {padding: 1em 0;} - -.site-header a { - text-decoration: none; -} -.site-header .container { - display: flex; - flex-flow: row wrap; - justify-content: space-between; -} -.site-masthead { - display: inline-flex; - flex-flow: row; - align-items: center; - gap: 1em; -} -.site-icon { - height: 2em; -} -.site-title { - font-weight: 900; - letter-spacing: -0.5px; - font-size: 1.25em; -} - -/* navigation menu */ - -.site-nav { - padding: 1em 0; -} -.site-nav .menu {margin-top: 1em;} -.site-nav .menu > li { - margin-bottom: 1em; -} -#menu {margin-bottom: 1em;} -#menu:not(:focus) { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; -} -.site-nav .section-title > a { - font-weight: 700; - text-decoration: none; - color: inherit; -} -.site-nav li {line-height: 2} -.site-nav .sub-menu {margin-left: 1em;} - -/* navigation menu toggle */ - -.toggle-menu { - display: none; -} - -.toggle-menu:not(:checked) ~ .menu { - display: none; -} -.toggle-menu__label { - display: flex; - align-items: center; -} - -/* page */ - -.page .content p { - max-width: 80ch; -} - -/* footer */ - -.site-footer { - height: var(--footer-height); - display: flex; - align-items: center; -} -.site-footer hr {display: none;} -.site-footer .container { - display: flex; - justify-content: space-between; -} -.breadcrumbs {display: flex; flex-flow: row wrap;} - -/*============================================================================== -4 - Aesthetic - -This section contains aesthetic styles -such as typography and color. -*/ - -a:link { - transition: all 0.1s ease-out; - color: var(--link-color); - text-decoration-thickness: .0625rem; - text-underline-offset: 0.125em; - text-decoration-skip-ink: none; -} - -a:visited { - color: var(--link-visited); -} - -a:focus { - outline: none; - background: var(--primary-accent); - color: var(--primary-accent-text); - padding: 4px; - border-radius: 2px; - text-decoration: none; -} - -a:hover { - text-decoration-thickness: 0.125em; - text-underline-offset: 0.25em; -} - -@media (prefers-reduced-motion) { - a:link {transition: none} -} - -.site-masthead, .site-masthead:visited { - color: inherit -} - -.site-masthead:focus { - color: var(--primary-accent-text); -} - -.toggle-menu__label { - font-weight: 900; - gap: 0.25rem; - text-transform: uppercase; -} - -.page .page-title { - margin-top: 0; -} - -.page .toc-title { - margin-bottom: 0.5em; - font-weight: 900; - text-transform: uppercase; - color: var(--ui-text-muted); -} -#TableOfContents ul { - list-style: none; - margin: 0; -} -#TableOfContents li { - margin: 0; - line-height: 1.5; -} -#TableOfContents li > ul { - margin: 0; - margin-left: 1em; -} - -.page blockquote { - border-color: var(--ui-text-bold) -} - -.page code { - font-family: monospace; - padding: 4px; - background: rgba(0,0,0,0.1); -} - -.page .hint { - line-height: 2; -} - -.page .hint, .page .hint.info, .page .hint.tip { - background: rgba(142, 226, 142, 0.2); - border-left: 4px solid rgb(142, 226, 142); -} - -.page .hint.warning { - background: rgba(218, 226, 142, 0.2); - border-left: 4px solid rgb(218, 226, 142); -} - -.page .hint.danger { - background: rgba(226, 142, 142, 0.2); - border-left: 4px solid rgb(226, 142, 142); -} - -.page ul.language-list { - display: flex; - flex-flow: wrap; - list-style: none; -} - -.page .lastmod { - margin-top: 1em; - color: var(--ui-text-muted) -} - -/*============================================================================== -5 - Responsive - -This section contains responsive styles -for wider screens. -*/ - -@media (min-width: 60rem) { - body { - display: grid; - grid-template-columns: 1fr 3fr; - height: 100 * var(--vh, 1vh); - } - .site-header, .scroll-margin, .site-footer { - grid-column: span 2 - } - .site-nav { - grid-column: 1; - height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height)); - overflow-y: auto; - scrollbar-width: none; - padding: 0; - } - main { - grid-column: 2; - height: calc(100 * var(--vh, 1vh) - var(--header-height) - var(--footer-height)); - overflow-y: auto; - scrollbar-width: none; - } - .site-nav::-webkit-scrollbar, - main::-webkit-scrollbar { - display: none; - } - - .site-nav .menu {margin-top: 0;} - - .page-header { - padding: 0; - } - - /* re-show the navigation menu as a sidebar */ - - .toggle-menu { - display: none; - } - - .toggle-menu:not(:checked) ~ .menu { - display: unset; - } - .toggle-menu__label { - display: none; - } - -} - -@media (min-width: 75rem) { - body { - grid-template-columns: 20rem 1fr; - } - .page { - display: grid; - grid-template-columns: 1fr 15rem; - } - .page .page-header { - grid-column: span 2 - } - .page .section { - grid-column: 1; - } - .page .toc { - grid-column: 2; - position: relative; - padding: 0; - } - .page .toc .container { - position: fixed; - width: 15rem; - } -} \ No newline at end of file