From 8029f97f9c6869c46cd5235fbc7180d433a88aab Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Fri, 19 May 2023 17:05:49 -0700 Subject: [PATCH] Move all the root styles to fragment files Create assets/styles/root to hold all the fragments of the root stylesheet. This should make it easier to find and hack on style. Yay! --- assets/styles/development.css | 19 +- assets/styles/nethack.css | 2 +- assets/styles/railroad.css | 8 +- assets/styles/root.css | 784 ++++-------------- assets/styles/root/001_reset.css | 7 + assets/styles/root/050_figures.css | 57 ++ .../styles/root/050_main_element_margins.css | 8 + assets/styles/root/050_ruby_controls.css | 29 + assets/styles/root/050_site_footer.css | 40 + assets/styles/root/050_site_header.css | 87 ++ .../styles/root/050_syntax_highlighting.css | 20 + assets/styles/root/050_tags_list.css | 57 ++ assets/styles/root/050_typography.css | 173 ++++ assets/styles/root/099_utility.css | 26 + layouts/_default/baseof.html | 18 +- layouts/partials/resources/root_css.html | 22 +- 16 files changed, 692 insertions(+), 665 deletions(-) create mode 100644 assets/styles/root/001_reset.css create mode 100644 assets/styles/root/050_figures.css create mode 100644 assets/styles/root/050_main_element_margins.css create mode 100644 assets/styles/root/050_ruby_controls.css create mode 100644 assets/styles/root/050_site_footer.css create mode 100644 assets/styles/root/050_site_header.css create mode 100644 assets/styles/root/050_syntax_highlighting.css create mode 100644 assets/styles/root/050_tags_list.css create mode 100644 assets/styles/root/050_typography.css create mode 100644 assets/styles/root/099_utility.css diff --git a/assets/styles/development.css b/assets/styles/development.css index 0f5d251..00cd343 100644 --- a/assets/styles/development.css +++ b/assets/styles/development.css @@ -29,6 +29,7 @@ details:has(.photo-params.debug) { border: 1px solid var(--separator-color); border-radius: 6px; box-shadow: 4px 5px 5px var(--box-shadow-color); + box-sizing: border-box; font-size: 12px; padding: 0.5rem; position: fixed; @@ -45,30 +46,34 @@ details:has(.photo-params.debug) { font-family: var(--font-family-heading); } -#debug-page-info > details > table { +#debug-page-info h4 { + margin-block: 1rem; + margin-inline-start: 2rem; +} + +#debug-page-info table { border: 0; border-color: rgb(var(--dk-gray)); display: block; - margin-block-start: 0.5em; - margin-inline-start: 1em; + margin-inline-start: 2rem; width: 100%; } -#debug-page-info > details > table > tbody { +#debug-page-info table > tbody { border: 1px solid; } -#debug-page-info > details > table > tbody + tbody { +#debug-page-info table > tbody + tbody { border-top: 1px solid; } -#debug-page-info > details > table > tbody > tr > td { +#debug-page-info td { border: 1px dotted; border-left: 1px solid; padding: 0.3em; } -#debug-page-info > details > table > tbody > tr:nth-child(even) { +#debug-page-info table > tbody > tr:nth-child(even) { background-color: var(--separator-color); } diff --git a/assets/styles/nethack.css b/assets/styles/nethack.css index f85b051..d095485 100644 --- a/assets/styles/nethack.css +++ b/assets/styles/nethack.css @@ -14,7 +14,7 @@ --header-series-arrow-foreground-color: rgb(var(--super-dk-gray)); --html-background-color: rgb(var(--black)); - --html-color: rgba(var(--white), 0.8); + --color: rgba(var(--white), 0.8); --platter-background-color: rgba(var(--black), var(--platter-background-opacity)); --platter-backdrop-filter: brightness(0.66) blur(10px); diff --git a/assets/styles/railroad.css b/assets/styles/railroad.css index da649ad..6a75b33 100644 --- a/assets/styles/railroad.css +++ b/assets/styles/railroad.css @@ -9,7 +9,7 @@ svg.railroad-diagram path { stroke-width: 2; - stroke: var(--html-color); + stroke: var(--color); fill: none; } @@ -17,7 +17,7 @@ svg.railroad-diagram text { font-family: var(--font-family-monospace); text-anchor: middle; white-space: pre; - fill: var(--html-color); + fill: var(--color); } svg.railroad-diagram text.diagram-text { @@ -42,7 +42,7 @@ svg.railroad-diagram g.non-terminal text { svg.railroad-diagram rect { stroke-width: 2; - stroke: var(--html-color); + stroke: var(--color); fill: var(--rect-fill); } @@ -54,7 +54,7 @@ svg.railroad-diagram rect.group-box { svg.railroad-diagram path.diagram-text { stroke-width: 2; - stroke: var(--html-color); + stroke: var(--color); fill: var(--html-background-color); cursor: help; } diff --git a/assets/styles/root.css b/assets/styles/root.css index e512e8b..6dfb763 100644 --- a/assets/styles/root.css +++ b/assets/styles/root.css @@ -1,4 +1,4 @@ -@layer reset, root, template, page; +@layer reset, typography, root, layout, template, page, utility; :root { --black: 0, 0, 0; @@ -19,8 +19,6 @@ --background: var(--white); - --site-nav-link-color: rgb(var(--mid-blue)); - --separator-color: rgb(var(--lt-gray)); --header-border-color: var(--separator-color); --footer-border-color: var(--separator-color); @@ -28,24 +26,12 @@ --box-shadow-color: rgba(var(--lt-gray), 0.8); --header-box-shadow-color: var(--box-shadow-color); - --font-family-body: Verdana, Helvetica, sans-serif; - --font-family-monospace: "Courier New", Courier, monospace; - --font-family-heading: Museo_Slab, Tahoma, "Hiragino Mincho ProN", serif; - --font-family-site-heading: Museo_Slab, Tahoma, sans-serif; - --font-size-min: 6px; - --font-size-max: 8px; - - --body-font-size: 2rem; - --body-item-spacing: 1em; - --body-line-height: 1.85; - --body-header-line-height: 1.1; + --body-item-spacing: 4rem; --body-code-background-color: rgb(var(--super-lt-gray)); - --heading-color: rgb(var(--black)); --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray)); --html-background-color: rgb(var(--background)); - --html-color: rgba(var(--black), 0.8); --nav-bulleted-spacing: 0.75rem; @@ -77,11 +63,9 @@ --box-shadow-color: rgba(var(--dk-gray), 0.8); --body-code-background-color: rgb(var(--dk-gray)); - --heading-color: rgb(var(--white)); --header-series-arrow-foreground-color: rgb(var(--super-dk-gray)); --html-background-color: rgb(var(--background)); - --html-color: rgba(var(--white), 0.8); --platter-background-color: rgba(var(--black), var(--platter-background-opacity)); --platter-backdrop-filter: brightness(0.66) blur(10px); @@ -99,649 +83,173 @@ } } -@font-face { - font-family: "Museo_Slab"; - src: url("{{ `/fonts/Museo_Slab_500.woff2` | relURL }}") format("woff2"), - url("{{ `/fonts/Museo_Slab_500.woff` | relURL }}") format("woff"); - font-weight: normal; - font-style: normal; -} - -@layer reset { - body, button, h1, h2, h3, h4, h5, h6, input, ol, ul, p, pre, textarea { - padding: 0; margin: 0; +@layer root { + a { text-decoration: none; } + a:hover { + text-decoration: underline; + text-underline-offset: 0.12em; } -} - -a { - color: rgb(var(--mid-blue)); - text-decoration: none; -} -a:hover { - text-decoration: underline; - text-underline-offset: 0.12em; -} -a:visited { color: rgb(var(--mid-blue)); } - -a.hover-only { - color: var(--html-color); - transition: color 0.2s; -} -a.hover-only:hover { - color: rgb(var(--mid-blue)); - text-decoration: underline; - transition: color 0.2s; -} - -a rt, -a:hover rt { - color: var(--html-color); -} - -article.two-column { - columns: 2; -} - -blockquote { - border-inline-start: 4px solid var(--separator-color); - padding-inline-start: 2rem; - margin-inline-start: 2rem; -} - -body { - font-size: var(--body-font-size); - line-height: var(--body-line-height); -} - -code { - background-color: var(--body-code-background-color); - border-radius: 0.25rem; - font-family: var(--font-family-monospace); - display: inline-block; - padding-inline: 0.6rem; -} - -code.nobg { - background: none; - border-radius: 0; - display: inline-block; - margin: 0; - padding: 0; -} - -figcaption { - font-size: 75%; - line-height: var(--body-line-height); - margin-block-start: 0.2em; - text-align: center; -} - -details { - width: 100%; -} - -details:has(#TableOfContents) { - box-sizing: border-box; - border: 1px solid var(--separator-color); - padding: var(--body-item-spacing); -} - -fieldset { - box-sizing: border-box; - border: 1px solid var(--separator-color); - padding: var(--body-item-spacing); - padding-top: calc(var(--body-item-spacing) / 10); -} - -fieldset#ruby-controls { -} - -fieldset#ruby-controls input[type=radio] { - margin-inline-end: calc(var(--body-item-spacing) / 6); -} - -fieldset#ruby-controls label { - margin-inline-end: calc(var(--body-item-spacing)); -} - -figure { - border-radius: 6px; - line-height: 1; - margin: 0; - margin-inline: 0; - overflow: hidden; - max-width: var(--content-width); - width: 100%; -} - -figure.bordered { - padding: 0.5rem; - border: 2px solid #eee; -} - -figure a, -figure a:hover { - border: 0; -} - -figure img { - display: block; - border-radius: 6px; - height: auto; - max-width: var(--content-width); - width: 100%; -} - -figure svg { - width: 100%; - height: auto; -} - -figure .youtube { - border-radius: 6px; - line-height: 1; - overflow: hidden; - max-width: var(--content-width); - width: 100%; -} - -footer.site { - align-items: center; - display: flex; - flex-direction: column; - font-size: 1.6rem; - margin-block: var(--body-item-spacing); - text-align: center; -} - -footer.site > ul { - align-items: center; - display: flex; - flex-wrap: wrap; - justify-content: center; - list-style: none; -} - -footer.site > .slogans { - margin-block-end: 0; -} - -footer.site > .slogans > li { - margin-block-end: 0; - margin-inline-start: 0.5em; -} - -footer.site > p { - margin: 0; -} - -footer.site p + p { - margin-top: 0.25rem; -} - -@media (max-width: 740px) { - footer.site .slogans span { - white-space: nowrap; + a.hover-only { + color: var(--color); + transition: color 0.2s; } -} - -h1 { font-size: 305%; } -h2 { font-size: 244%; } -h3 { font-size: 195%; } -h4 { font-size: 156%; } -h5 { font-size: 125%; } -h6 { font-size: 100%; } -h5, h6 { font-family: var(--font-family-body); } - -h1, h2, h3, h4, h5, h6 { - color: var(--heading-color); - font-family: var(--font-family-heading); - font-weight: 600; - margin-block: 3.5rem 1rem; - letter-spacing: 0.08em; - line-height: var(--body-header-line-height); -} - -:is(h1, h2, h3, h4, h5, h6) rt { - font-family: var(--font-family-body); - font-weight: normal; - letter-spacing: 0; -} - -h1.site { - --site-title-color1: rgb(103, 128, 229); - --site-title-color2: rgb(130, 90, 227); - --site-title-color3: rgb(135, 101, 228); - --site-title-color4: rgb(125, 115, 229); - --site-title-color5: rgb(107, 130, 230); - --site-title-color6: rgb(77, 153, 232); - --site-title-color7: rgb(74, 136, 230); - --site-title-color8: rgb(71, 128, 228); - --site-title-color9: rgb(65, 80, 224); - --site-title-color10: rgb(61, 58, 223); - - color: rgb(var(--mid-blue)); - font-size: 2.5em; -} - -@supports not (background-clip: text) { - h1.site span:nth-child(10n + 1) { color: var(--site-title-color1); } - h1.site span:nth-child(10n + 2) { color: var(--site-title-color2); } - h1.site span:nth-child(10n + 3) { color: var(--site-title-color3); } - h1.site span:nth-child(10n + 4) { color: var(--site-title-color4); } - h1.site span:nth-child(10n + 5) { color: var(--site-title-color5); } - h1.site span:nth-child(10n + 6) { color: var(--site-title-color6); } - h1.site span:nth-child(10n + 7) { color: var(--site-title-color7); } - h1.site span:nth-child(10n + 8) { color: var(--site-title-color8); } - h1.site span:nth-child(10n + 9) { color: var(--site-title-color9); } - h1.site span:nth-child(10n) { color: var(--site-title-color10); } -} -@supports (background-clip: text) { - h1.site { - background: - radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%), - radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%), - radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%), - radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%), - radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%), - radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; + a.hover-only:hover { + text-decoration: underline; + transition: color 0.2s; } -} -h1.site > a { color: inherit; } -h1.site > a:hover { text-decoration: none; } + blockquote { + border-inline-start: 4px solid var(--separator-color); + padding-inline-start: 2rem; + margin-inline-start: 2rem; + } -header.site { - display: flex; - width: 100%; - z-index: 10000; -} - -header.site > .grid > h1 { - font-family: var(--font-family-site-heading); - font-size: 2em; - margin: 0; - order: 1; - white-space: nowrap; -} - -header.site > .grid { - align-items: baseline; - display: flex; - flex-wrap: wrap; - gap: 0 0.5em; - margin: 0 auto; - max-width: var(--content-width); - padding: 1.5rem 3rem; - width: 100%; -} - -header.site > .grid > nav { - align-items: center; - display: flex; - font-size: max(1.5rem, 80%); - justify-content: start; - letter-spacing: 0.12em; - list-style: none; - text-transform: lowercase; -} - -header.site > .grid > nav > li { - color: var(--site-nav-link-color); - display: block; -} - -header.site > .grid > nav > .active { font-weight: bold; } - -header.site > .grid > nav:first-of-type { - justify-content: start; - order: 2; -} - -header.site > .grid > nav:last-of-type { - justify-content: end; - order: 3; -} - -@media (max-width: 516px) { - header.site > .platter { - border-left: none; + code { + background-color: var(--body-code-background-color); + border-radius: 0.25rem; + display: inline-block; + padding-inline: 0.6rem; + } + code.nobg { + background: none; border-radius: 0; - border-right: none; - border-top: none; + display: inline-block; + margin: 0; + padding: 0; } - header.site > .grid { - max-width: none; + + details { width: 100%; } + + details:has(#TableOfContents) { + box-sizing: border-box; + border: 1px solid var(--separator-color); + padding: var(--body-item-spacing); } -} -@media (max-width: 435px) { - header.site > .grid > nav:first-of-type { - order: 5; + fieldset { + box-sizing: border-box; + border: 1px solid var(--separator-color); + padding: var(--body-item-spacing); + padding-top: calc(var(--body-item-spacing) / 10); } -} -html { - --font-size-scale-factor: 1vmax; + html { background-color: var(--html-background-color); } - background-color: var(--html-background-color); - color: var(--html-color); - font-family: var(--font-family-body); - font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max)); -} + img { + height: auto; + max-width: 100%; + } -img { - height: auto; - max-width: 100%; -} + img.circular { + shape-outside: circle(50%); + -webkit-clip-path: circle(50%); + clip-path: circle(50%); + } -img.circular { - shape-outside: circle(50%); - -webkit-clip-path: circle(50%); - clip-path: circle(50%); -} + main { + box-sizing: border-box; + max-width: calc(var(--content-width) + 2 * var(--body-item-spacing)); + margin: var(--body-item-spacing) auto; + padding-inline: var(--body-item-spacing); + width: 100%; + } -main { - box-sizing: border-box; - max-width: calc(var(--content-width) + 2 * var(--body-item-spacing)); - margin: var(--body-item-spacing) auto; - padding-inline: var(--body-item-spacing); - width: 100%; -} + nav.bulleted > li:first-child::before { + content: ""; + margin-inline: 0; + } -main > :first-child, -main > article > :first-child { margin-block-start: 0; } -main > :not(:last-child), -main > article > :not(:last-child) { margin-block-end: var(--body-item-spacing); } -main > :last-child, -main > article > :last-child { margin-block-end: 0; } + nav.bulleted > li::before { + color: var(--heading-color); + content: "•"; + font-size: 60%; + font-weight: normal; + opacity: 80%; + margin-inline: var(--nav-bulleted-spacing); + } -nav.bulleted > li:first-child::before { - color: var(--html-color); - content: ""; - margin-inline: 0; -} + ul, + ol, + dl, + ul > li, + ol > li, + dl > dt, + ul > li > ul, + ul > li > ol, + ol > li > ul, + ol > li > ol { + margin-inline-start: calc(var(--body-item-spacing) + 2px); + } -nav.bulleted > li::before { - color: var(--heading-color); - content: "•"; - font-size: 60%; - font-weight: normal; - opacity: 80%; - margin-inline: var(--nav-bulleted-spacing); -} + header > span.series { + font-size: 1.75rem; + letter-spacing: 1px; + margin-inline-start: 0.5em; + } -nav.social > li { margin-inline-start: var(--nav-bulleted-spacing); } -nav.social > li:first-child { margin-inline-start: 0; } + header > span.series::before { + color: var(--header-series-arrow-foreground-color); + content: "↳"; + margin-inline-end: 0.25em; + } -p { - letter-spacing: 0.025em; - line-height: var(--body-line-height); -} - -ul, -ol, -dl, -ul > li, -ol > li, -dl > dt, -ul > li > ul, -ul > li > ol, -ol > li > ul, -ol > li > ol { - margin-inline-start: calc(var(--body-item-spacing) + 2px); -} - -header > span.series { - font-size: 1.75rem; - letter-spacing: 1px; - margin-inline-start: 0.5em; -} - -header > span.series::before { - color: var(--header-series-arrow-foreground-color); - content: "↳"; - margin-inline-end: 0.25em; -} - -.post-list { - list-style: none; - margin: 0; - padding: 0; -} -@supports (display: subgrid) { .post-list { + list-style: none; + margin: 0; + padding: 0; + } + @supports (display: subgrid) { + .post-list { + align-items: baseline; + display: grid; + gap: 1em; + grid-template-columns: + minmax(150px, max-content) minmax(20px, max-content) 3px auto; + grid-template-areas: "month day line title"; + } + } + + .post-list li { align-items: baseline; + border-radius: 6px; display: grid; gap: 1em; - grid-template-columns: - minmax(150px, max-content) minmax(20px, max-content) 3px auto; - grid-template-areas: "month day line title"; + padding: 0.1em; + } + + .post-title { + align-items: baseline; + display: flex; + flex-wrap: wrap; + gap: 0 4rem; + } + + .post-title h1 { + flex-grow: 1; + font-size: 1.8em; + margin-block: 0; + padding-bottom: 0; + } + + .post-title > .post-date { + color: var(--light-dim); + display: inline-block; + font-size: 1.75rem; + inline-size: min-content; + letter-spacing: 1px; + margin-block-start: 0.5rem; + white-space: nowrap; + } + + table { + border: 1px solid var(--separator-color); + border-collapse: collapse; + margin-inline: auto; + width: 50%; + } + + td, th { + border: 1px solid var(--separator-color); + padding-inline: 1rem; } } - -.post-list li { - align-items: baseline; - border-radius: 6px; - display: grid; - gap: 1em; - padding: 0.1em; -} - -.post-title { - align-items: baseline; - display: flex; - flex-wrap: wrap; - gap: 0 4rem; -} - -.post-title h1 { - flex-grow: 1; - font-size: 1.8em; - margin-block: 0; - padding-bottom: 0; -} - -.post-title > .post-date { - color: var(--light-dim); - display: inline-block; - font-size: 1.75rem; - inline-size: min-content; - letter-spacing: 1px; - margin-block-start: 0.5rem; - white-space: nowrap; -} - -.p5-sketch { - display: block; - position: relative; - width: 100%; -} - -.social { - display: block; - letter-spacing: 2px; - margin-left: auto; - order: 2; -} - -.social > li > a { - background-image: var(--url); - background-repeat: no-repeat; - background-size: var(--menu-icon-size); - display: block; - height: var(--menu-icon-size); - width: var(--menu-icon-size); -} - -.social > li > a > span { - display: none; -} - -.social > li + li:before { - color: var(--dark); - padding: 0 0.5rem; -} - -ul.tags { - display: flex; - height: min-content; - margin-inline-start: 0; - padding-inline-start: 0; -} - -ul.tags > li { - background-color: var(--tag-background-color); - color: var(--tag-foreground-color); - border-radius: 4px; - display: inline-block; - font-size: 75%; - letter-spacing: 1px; -} - -ul.tags > li:first-child { - margin-inline-start: 0; -} - -ul.tags > li:hover { - background-color: var(--tag-hover-background-color); -} - -ul.tags > li > a { - color: inherit; - display: block; - height: 100%; - width: 100%; - padding: 0.6rem 1rem; -} - -ul.tags > li > a:hover { - color: var(--tag-hover-foreground-color); - text-decoration: none; -} - -ul.tags > li + li { margin-inline-start: 1rem; } -ul.tags > li.chevron + li { margin-inline-start: 0 } - -ul.tags > .chevron { - align-items: center; - border: 0; - border-radius: 0; - color: var(--tag-spacer-foreground-color); - background-color: inherit; - display: flex; - justify-content: center; - margin-inline-start: 0; - padding-inline-start: 1px; - width: 2rem; -} - -ul.tags > .chevron:hover { - color: var(--tag-spacer-foreground-color); - background-color: inherit; -} - -rt { - transition: color 0.3s; -} -ruby:hover rt { - color: var(--html-color); - transition: color 0.3s; -} -@media (prefers-color-scheme: dark) { - rt { - color: rgba(var(--white), 0.5); - } -} - -body:has(fieldset#ruby-controls > input[value=NONE]:checked) rt { - display: none; -} -body:has(fieldset#ruby-controls > input[value=BOTH]:checked) rt { -} -body:has(fieldset#ruby-controls > input[value=ENGLISH]:checked) rt { -} - -/* When ruby-controls is set to hidden, hide the ruby base and only show the */ -body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) ruby > span { - display: none; -} -body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) rt { - color: inherit; - display: inline; - font-size: inherit; - white-space: inherit; -} -body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) :is(h1, h2, h3, h4, h5, h6) rt { - font-family: var(--font-family-heading); - font-weight: bold; -} - -table { - border: 1px solid var(--separator-color); - border-collapse: collapse; - margin-inline: auto; - width: 50%; -} - -td, th { - border: 1px solid var(--separator-color); - padding-inline: 1rem; -} - -.youtube iframe { - aspect-ratio: 16 / 9; - margin-bottom: -3px; - width: 100%; -} - -/** SYNTAX HIGHLIGHTING **/ - -.highlight code { - background-color: inherit; - margin-block: 0.5em; -} - -.highlight .line { - display: grid; - grid-template-columns: max-content auto; -} - -.highlight .ln a { - -webkit-user-select: none; - -moz-use-select: none; - -ms-user-select: none; - user-select: none; -} - -.highlight .cl { - white-space: pre-wrap; -} - -/** HELPER CLASSES **/ - -.centered { text-align: center; } -.float-right { float: right; } - -.nobreak { white-space: nowrap; } -.noselect { - cursor: default; - -webkit-user-select: none; - -moz-use-select: none; - -ms-user-select: none; - user-select: none; -} - -.platter { - -webkit-backdrop-filter: var(--platter-backdrop-filter); - backdrop-filter: var(--platter-backdrop-filter); - background-color: var(--platter-background-color); - border: 1px solid var(--header-border-color); - border-radius: 12px; - box-shadow: 3px 4px 4px var(--header-box-shadow-color); -} - -.visible { visibility: visible; } diff --git a/assets/styles/root/001_reset.css b/assets/styles/root/001_reset.css new file mode 100644 index 0000000..0d3eeb7 --- /dev/null +++ b/assets/styles/root/001_reset.css @@ -0,0 +1,7 @@ +@layer reset { + body, button, h1, h2, h3, h4, h5, h6, input, ol, ul, p, pre, textarea { + padding: 0; margin: 0; + } + + figure, figure .youtube { line-height: 1; } +} diff --git a/assets/styles/root/050_figures.css b/assets/styles/root/050_figures.css new file mode 100644 index 0000000..c27c36e --- /dev/null +++ b/assets/styles/root/050_figures.css @@ -0,0 +1,57 @@ +@layer root { + figcaption { + margin-block-start: 0.2em; + text-align: center; + } + + figure { + border-radius: 6px; + margin: 0; + margin-inline: 0; + overflow: hidden; + max-width: var(--content-width); + width: 100%; + } + + figure.bordered { + padding: 0.5rem; + border: 2px solid #eee; + } + + figure a, + figure a:hover { + border: 0; + } + + figure img { + display: block; + border-radius: 6px; + height: auto; + max-width: var(--content-width); + width: 100%; + } + + figure svg { + width: 100%; + height: auto; + } + + figure .youtube { + border-radius: 6px; + overflow: hidden; + max-width: var(--content-width); + width: 100%; + } + + .p5-sketch { + display: block; + position: relative; + width: 100%; + } + + .youtube iframe { + aspect-ratio: 16 / 9; + margin-bottom: -3px; + width: 100%; + } +} diff --git a/assets/styles/root/050_main_element_margins.css b/assets/styles/root/050_main_element_margins.css new file mode 100644 index 0000000..79c3ac6 --- /dev/null +++ b/assets/styles/root/050_main_element_margins.css @@ -0,0 +1,8 @@ +@layer root { + main > :first-child, + main > article > :first-child { margin-block-start: 0; } + main > :not(:last-child), + main > article > :not(:last-child) { margin-block-end: var(--body-item-spacing); } + main > :last-child, + main > article > :last-child { margin-block-end: 0; } +} diff --git a/assets/styles/root/050_ruby_controls.css b/assets/styles/root/050_ruby_controls.css new file mode 100644 index 0000000..60965f9 --- /dev/null +++ b/assets/styles/root/050_ruby_controls.css @@ -0,0 +1,29 @@ +@layer root { + body:has(fieldset#ruby-controls > input[value=NONE]:checked) rt { display: none; } + + /* When ruby-controls is set to hidden, hide the ruby base and only show the */ + body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) ruby > span { display: none; } + + body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) rt { + color: inherit; + display: inline; + font-size: inherit; + white-space: inherit; + } + + body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) :is(h1, h2, h3, h4, h5, h6) rt { + font-family: var(--font-family-heading); + font-weight: bold; + } + + fieldset#ruby-controls input[type=radio] { + margin-inline-end: calc(var(--body-item-spacing) / 6); + } + + fieldset#ruby-controls label { + margin-inline-end: calc(var(--body-item-spacing)); + } + + rt { transition: color 0.3s; } + ruby:hover rt { transition: color 0.3s; } +} diff --git a/assets/styles/root/050_site_footer.css b/assets/styles/root/050_site_footer.css new file mode 100644 index 0000000..1386547 --- /dev/null +++ b/assets/styles/root/050_site_footer.css @@ -0,0 +1,40 @@ +@layer root { + footer.site { + align-items: center; + display: flex; + flex-direction: column; + margin-block: var(--body-item-spacing); + text-align: center; + } + + footer.site > ul { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: center; + list-style: none; + } + + footer.site > .slogans { + margin-block-end: 0; + } + + footer.site > .slogans > li { + margin-block-end: 0; + margin-inline-start: 0.5em; + } + + footer.site > p { + margin: 0; + } + + footer.site p + p { + margin-top: 0.25rem; + } + + @media (max-width: 740px) { + footer.site .slogans span { + white-space: nowrap; + } + } +} diff --git a/assets/styles/root/050_site_header.css b/assets/styles/root/050_site_header.css new file mode 100644 index 0000000..c7fee94 --- /dev/null +++ b/assets/styles/root/050_site_header.css @@ -0,0 +1,87 @@ +@layer root { + header.site h1 > a:hover { text-decoration: none; } + + header.site { + display: flex; + width: 100%; + z-index: 10000; + } + + header.site h1 { + margin: 0; + order: 1; + } + + header.site > .grid { + align-items: baseline; + display: flex; + flex-wrap: wrap; + gap: 0 0.5em; + margin: 0 auto; + max-width: var(--content-width); + padding: 1.5rem 3rem; + width: 100%; + } + + header.site > .grid > nav { + align-items: center; + display: flex; + justify-content: start; + list-style: none; + } + + header.site nav > li { display: block; } + + header.site nav:first-of-type { + justify-content: start; + order: 2; + } + + header.site nav:last-of-type { + justify-content: end; + order: 3; + } + + @media (max-width: 516px) { + header.site > .platter { + border-left: none; + border-radius: 0; + border-right: none; + border-top: none; + } + + header.site > .grid { max-width: none; } + } + + @media (max-width: 435px) { + header.site nav:first-of-type { order: 5; } + } + + nav.social > li { margin-inline-start: var(--nav-bulleted-spacing); } + nav.social > li:first-child { margin-inline-start: 0; } + + .social { + display: block flex; + letter-spacing: 2px; + margin-left: auto; + order: 2; + } + + .social > li > a { + background-image: var(--url); + background-repeat: no-repeat; + background-size: var(--menu-icon-size); + display: block; + height: var(--menu-icon-size); + width: var(--menu-icon-size); + } + + .social > li > a > span { + display: none; + } + + .social > li + li:before { + color: var(--dark); + padding: 0 0.5rem; + } +} diff --git a/assets/styles/root/050_syntax_highlighting.css b/assets/styles/root/050_syntax_highlighting.css new file mode 100644 index 0000000..b4dc1f6 --- /dev/null +++ b/assets/styles/root/050_syntax_highlighting.css @@ -0,0 +1,20 @@ +.highlight code { + background-color: inherit; + margin-block: 0.5em; +} + +.highlight .line { + display: grid; + grid-template-columns: max-content auto; +} + +.highlight .ln a { + -webkit-user-select: none; + -moz-use-select: none; + -ms-user-select: none; + user-select: none; +} + +.highlight .cl { + white-space: pre-wrap; +} diff --git a/assets/styles/root/050_tags_list.css b/assets/styles/root/050_tags_list.css new file mode 100644 index 0000000..7490f3e --- /dev/null +++ b/assets/styles/root/050_tags_list.css @@ -0,0 +1,57 @@ +ul.tags { + display: flex; + height: min-content; + margin-inline-start: 0; + padding-inline-start: 0; +} + +ul.tags > li { + background-color: var(--tag-background-color); + color: var(--tag-foreground-color); + border-radius: 4px; + display: inline-block; + font-size: 75%; + letter-spacing: 1px; +} + +ul.tags > li:first-child { + margin-inline-start: 0; +} + +ul.tags > li:hover { + background-color: var(--tag-hover-background-color); +} + +ul.tags > li > a { + color: inherit; + display: block; + height: 100%; + width: 100%; + padding: 0.6rem 1rem; +} + +ul.tags > li > a:hover { + color: var(--tag-hover-foreground-color); + text-decoration: none; +} + +ul.tags > li + li { margin-inline-start: 1rem; } +ul.tags > li.chevron + li { margin-inline-start: 0 } + +ul.tags > .chevron { + align-items: center; + border: 0; + border-radius: 0; + color: var(--tag-spacer-foreground-color); + background-color: inherit; + display: flex; + justify-content: center; + margin-inline-start: 0; + padding-inline-start: 1px; + width: 2rem; +} + +ul.tags > .chevron:hover { + color: var(--tag-spacer-foreground-color); + background-color: inherit; +} diff --git a/assets/styles/root/050_typography.css b/assets/styles/root/050_typography.css new file mode 100644 index 0000000..c5ef537 --- /dev/null +++ b/assets/styles/root/050_typography.css @@ -0,0 +1,173 @@ +@font-face { + font-family: "Museo_Slab"; + src: url("{{ `/fonts/Museo_Slab_500.woff2` | relURL }}") format("woff2"), + url("{{ `/fonts/Museo_Slab_500.woff` | relURL }}") format("woff"); + font-weight: normal; + font-style: normal; +} + +@layer typography { + :root { + --font-family: Verdana, Helvetica, sans-serif; + --font-family-heading: Museo_Slab, Tahoma, "Hiragino Mincho ProN", serif; + --font-family-monospace: "Courier New", Courier, monospace; + --font-family-site-heading: Museo_Slab, Tahoma, sans-serif; + + --font-size: 2rem; + --font-size-max: 8px; + --font-size-min: 6px; + --font-size-scale-factor: 1vmax; + --site-header-font-size: 200%; + + --line-height: 2; + --heading-line-height: 1; + /* A little extra line height so the descenders don't get clipped */ + --site-heading-line-height: 1.1; + --landing-line-height: 1.85; + + --color: rgba(var(--black), 0.8); + --a-color: rgb(var(--mid-blue)); + --a-ruby-color: var(--color); + --heading-color: rgb(var(--black)); + --site-nav-link-color: var(--a-color); + } + @media (prefers-color-scheme: dark) { + :root { + --color: rgba(var(--white), 0.8); + --heading-color: rgb(var(--white)); + } + } + + a { color: var(--a-color); } + a:visited { color: var(--a-color); } + a.hover-only { color: var(--color); } + a.hover-only:hover { color: var(--a-color); } + a rt, a:hover rt { color: var(--a-ruby-color); } + + body { + font-size: var(--font-size); + line-height: var(--line-height); + } + + code { font-family: var(--font-family-monospace); } + + figcaption { + font-size: 80%; + line-height: var(--line-height); + } + + footer.site { + font-size: 80%; + line-height: 1; + } + + h1 { font-size: 305%; } + h2 { font-size: 244%; } + h3 { font-size: 195%; } + h4 { font-size: 156%; } + h5 { font-size: 125%; } + h6 { font-size: 100%; } + h5, h6 { font-family: var(--font-family-body); } + + header.site nav > .active { font-weight: bold; } + header.site nav > li { color: var(--site-nav-link-color); } + + main:has(header > .post-title > h1) h1 { font-size: 244%; } + main:has(header > .post-title > h1) h2 { font-size: 195%; } + main:has(header > .post-title > h1) h3 { font-size: 156%; } + main:has(header > .post-title > h1) h4 { font-size: 125%; } + main:has(header > .post-title > h1) h5 { font-size: 100%; } + main:has(header > .post-title > h1) h6 { font-size: 100%; } + main:has(header > .post-title > h1) :is(h5, h6) { font-family: var(--font-family-body); } + + h1, h2, h3, h4, h5, h6 { + color: var(--heading-color); + font-family: var(--font-family-heading); + font-weight: 600; + letter-spacing: 1pt; + line-height: var(--heading-line-height); + } + + header.site h1 { + --site-title-color1: rgb(103, 128, 229); + --site-title-color2: rgb(130, 90, 227); + --site-title-color3: rgb(135, 101, 228); + --site-title-color4: rgb(125, 115, 229); + --site-title-color5: rgb(107, 130, 230); + --site-title-color6: rgb(77, 153, 232); + --site-title-color7: rgb(74, 136, 230); + --site-title-color8: rgb(71, 128, 228); + --site-title-color9: rgb(65, 80, 224); + --site-title-color10: rgb(61, 58, 223); + + color: rgb(var(--mid-blue)); + font-family: var(--font-family-site-heading); + font-size: var(--site-header-font-size); + line-height: var(--site-heading-line-height); + white-space: nowrap; + } + + header.site h1 > a { color: inherit; } + + @supports not ((background-clip: text) or (-webkit-background-clip: text)) { + header.site h1 span:nth-child(10n + 1) { color: var(--site-title-color1); } + header.site h1 span:nth-child(10n + 2) { color: var(--site-title-color2); } + header.site h1 span:nth-child(10n + 3) { color: var(--site-title-color3); } + header.site h1 span:nth-child(10n + 4) { color: var(--site-title-color4); } + header.site h1 span:nth-child(10n + 5) { color: var(--site-title-color5); } + header.site h1 span:nth-child(10n + 6) { color: var(--site-title-color6); } + header.site h1 span:nth-child(10n + 7) { color: var(--site-title-color7); } + header.site h1 span:nth-child(10n + 8) { color: var(--site-title-color8); } + header.site h1 span:nth-child(10n + 9) { color: var(--site-title-color9); } + header.site h1 span:nth-child(10n) { color: var(--site-title-color10); } + } + @supports (background-clip: text) or (-webkit-background-clip: text) { + header.site h1 { + background: + radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%), + radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%), + radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%), + radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%), + radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%), + radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + } + } + + header.site nav { + font-size: max(1.5rem, 80%); + letter-spacing: 0.10em; + text-transform: lowercase; + } + + header.site nav > li { + color: var(--site-nav-link-color); + } + + :is(h1, h2, h3, h4, h5, h6) rt { + font-family: var(--font-family); + font-weight: normal; + letter-spacing: 0; + } + + html { + color: var(--color); + font-family: var(--font-family); + font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max)); + } + + main#landing p { line-height: var(--landing-line-height); } + + nav.bulleted > li:first-child::before { color: var(--color); } + nav.bulleted > li::before { color: var(--heading-color); } + + p { line-height: var(--line-height); } + + ruby:hover rt { color: var(--color); } + + @media (prefers-color-scheme: dark) { + rt { color: rgba(var(--white), 0.5); } + } +} diff --git a/assets/styles/root/099_utility.css b/assets/styles/root/099_utility.css new file mode 100644 index 0000000..eef66bb --- /dev/null +++ b/assets/styles/root/099_utility.css @@ -0,0 +1,26 @@ +@layer utility { + .centered { text-align: center; } + .float-right { float: right; } + + .nobreak { white-space: nowrap; } + .noselect { + cursor: default; + -webkit-user-select: none; + -moz-use-select: none; + -ms-user-select: none; + user-select: none; + } + + .platter { + -webkit-backdrop-filter: var(--platter-backdrop-filter); + backdrop-filter: var(--platter-backdrop-filter); + background-color: var(--platter-background-color); + border: 1px solid var(--header-border-color); + border-radius: 12px; + box-shadow: 3px 4px 4px var(--header-box-shadow-color); + } + + .visible { visibility: visible; } + + article.two-column { columns: 2; } +} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 817f6e9..91d008e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -4,20 +4,20 @@ {{ block "body" . -}} - {{ block "before" . }}{{ end }} - {{ block "header" . }}{{ partial "header.html" .}}{{ end }} -
- {{ block "main" . }}{{ end }} -
- {{- block "footer" . -}} - {{ partial "footer.html" . }} - {{- end -}} + {{- block "before" . -}}{{- end -}} + {{- block "header" . -}}{{ partial "header.html" .}}{{- end -}} +
+ {{ block "main" . }}{{ end }} +
+ {{- block "footer" . -}} + {{ partial "footer.html" . }} + {{- end -}} {{- end -}} {{- partial "development/page_info.html" . -}} {{ with partial "resources/root_css.html" . -}} - + {{ range . }}{{ end }} {{- end -}} {{- with partial "resources/section_css.html" . -}} diff --git a/layouts/partials/resources/root_css.html b/layouts/partials/resources/root_css.html index a47dddf..6f90ef4 100644 --- a/layouts/partials/resources/root_css.html +++ b/layouts/partials/resources/root_css.html @@ -1,11 +1,21 @@ {{ $allStylesheets := slice (resources.Get "styles/root.css") (resources.Get "styles/railroad.css") - (resources.Get "styles/monokai.css") }} + (resources.Get "styles/monokai.css") + | append (resources.Match "styles/root/*.css" | sort) }} {{ if not hugo.IsProduction }} {{ $allStylesheets = $allStylesheets | append (resources.Get "styles/development.css") }} {{ end }} -{{ $rootCSS := $allStylesheets - | resources.Concat "styles/root.css" - | resources.ExecuteAsTemplate "styles/root.css" . - | fingerprint "md5" }} -{{ return $rootCSS }} + +{{ $rootStylesheets := slice }} +{{ if hugo.IsProduction }} + {{ $rootStylesheets = $allStylesheets + | resources.ExecuteAsTemplate "styles/root.css" . + | resources.Concat "styles/root.css" + | minify | fingerprint "md5" }} +{{ else }} + {{ range $allStylesheets }} + {{ $rootStylesheets = $rootStylesheets | append (. | resources.ExecuteAsTemplate .Name .) }} + {{ end }} +{{ end }} + +{{ return $rootStylesheets }}