From 6b707587ef34e2642b2be702bcc168a3bafa413e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=8A=E3=81=8D=E8=90=8C?= Date: Mon, 6 Oct 2025 14:43:02 +0200 Subject: [PATCH] inline critical CSS --- static/css/base.css | 36 ++ static/css/critical.css | 759 +++++++++++++++++++++++++++++++ static/css/noncritical.css | 816 +--------------------------------- static/js/tree.js | 17 - template/_tree.hbs | 7 +- template/components/_head.hbs | 3 +- 6 files changed, 806 insertions(+), 832 deletions(-) create mode 100644 static/css/critical.css diff --git a/static/css/base.css b/static/css/base.css index 88fcfd9..c72da27 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -17,6 +17,7 @@ --text-color: #302859; --link-color: #004ec8; --link-color-visited: #6c2380; + --error-color: #d94141; --shading-base: #592782; @@ -31,6 +32,7 @@ --text-color: #f7ece5; --link-color: #93cce8; --link-color-visited: #f7afde; + --error-color: #e39393; --shading-base: #e4d2ff; } @@ -55,3 +57,37 @@ * { box-sizing: border-box; } + +/* Colors */ + +body { + background-color: var(--background-color); + color: var(--text-color); +} + +:root { + scrollbar-color: var(--border-2) var(--shaded-background); + scrollbar-width: auto; + scrollbar-gutter: stable; +} + +:focus-visible { + outline: 0.1rem solid var(--accent-blue); + outline-offset: 0.2rem; +} + +::selection { + background-color: color-mix( + in srgb, + var(--background-color), + var(--accent-pink) 75% + ); + color: var(--text-color); +} + +@media (prefers-color-scheme: dark) { + ::selection { + background-color: var(--accent-pink); + color: var(--background-color); + } +} diff --git a/static/css/critical.css b/static/css/critical.css new file mode 100644 index 0000000..b466328 --- /dev/null +++ b/static/css/critical.css @@ -0,0 +1,759 @@ +/* Main layout */ + +body { + --main-min-size: 100vh; + + margin: 0; + + display: grid; + grid-template-columns: + [left] minmax(0, 1fr) + [right] auto; + grid-template-rows: + [nav] auto + [main] minmax(var(--main-min-size), auto) + [virtual] 100vh; +} + +html { + /* Leave a bunch of space at the top when scrolling to elements. + I'm honestly not sure why this is needed on and not the scrolled-to element... */ + scroll-padding-top: 10vh; +} + +.sidebar-sticky { + grid-column: right; + grid-row: main; +} + +aside.sidebar { + position: sticky; + top: 0px; + + max-width: 50rem; + height: 100vh; + padding: 0.8rem; + + display: flex; +} + +main { + grid-column: left; + grid-row: main; + min-width: 0; +} + +footer.pink-space { + grid-column: 1 / -1; + grid-row: virtual; +} + +/* Narrower layout: sidebar is pushed to the top */ + +@media (max-width: 1280px) { + body { + --main-min-size: 0; + } + + .sidebar-sticky { + grid-column: left; + grid-row: nav; + + display: flex; + justify-content: center; + } + + aside.sidebar { + position: relative; + height: auto; + padding: 0; + } +} + +/* Set up typography */ + +html { + font-size: 62.5%; +} + +body { + font-size: 1.6rem; +} + +body, +pre, +code, +kbd, +button, +select, +input, +dfn { + font-family: "RecVar", sans-serif; + font-style: normal; + line-height: 1.5; + text-size-adjust: none; +} + +pre, +code, +kbd, +button, +select, +input { + font-size: inherit; +} + +:root { + font-weight: 450; + font-style: normal; + --recursive-mono: 0; + --recursive-crsv: 0.5; +} + +*, +*:before, +*:after { + font-variation-settings: + "MONO" var(--recursive-mono), + "CRSV" var(--recursive-crsv); + font-feature-settings: "ss03", "ss04", "ss05", "ss06", "ss08"; +} + +h1 { + font-weight: 900; + + font-size: 4.8rem; +} + +h2 { + font-weight: 850; + + font-size: 3.2rem; +} + +h3 { + font-weight: 850; + + font-size: 2.4rem; +} + +h4 { + font-weight: 800; + + font-size: 1.6rem; +} + +code { + --recursive-mono: 0.5; +} + +pre, +pre code, +kbd, +th-literate-program { + --recursive-mono: 1; + font-weight: 450; + tab-size: 4; +} + +strong code { + font-weight: 800; +} + +b, +strong { + font-weight: 700; +} + +i, +em { + --recursive-crsv: 1; + font-style: italic; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance; +} + +/* Other classes for controlling typography */ + +.nowrap { + white-space: nowrap; +} + +/* Lay out elements a bit more compactly */ + +p, +pre { + margin: 0 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0.4rem 0; +} + +/* Make code examples a little prettier by giving them visual separation from the rest of the page */ + +code, +th-literate-program { + padding: 0.3rem 0.4rem; + background-color: var(--shaded-background); + border-radius: 0.4rem; +} + +kbd { + padding: 0.3rem 0.6rem; + border: 0.1rem solid var(--border-1); + border-radius: 0.4rem; +} + +pre, +th-literate-program { + padding: 0.8rem 1.2rem; + margin: 1.2rem 0; + background-color: var(--shaded-background); + border-radius: 0.4em; + + transition: background-color var(--transition-duration); +} + +@media (prefers-color-scheme: light) { + pre, + th-literate-program { + background-color: transparent; + border: 0.1rem solid var(--border-1); + } +} + +pre > code, +th-literate-program > code { + padding: 0; + background: none; + border-radius: 0; +} + +/* And don't let code examples fly off and overflow the window */ + +pre, +th-literate-program { + min-width: 0; + width: auto; + overflow: auto; +} + +/* Images */ + +img { + /* Prevent images from causing horizontal scrolling */ + max-width: 100%; + height: auto; +} + +img.pic { + border-radius: 0.6rem; + margin: 0.8rem 0; +} + +img.emoji { + max-width: 1.3125em; + max-height: 1.3125em; + vertical-align: text-bottom; + object-fit: contain; +} + +img { + /* Hints for tweaking rendering */ + &[src*="+pixel"] { + image-rendering: pixelated; + border-radius: 0; + } + + &[src*="+illust"] { + border-radius: 0; + } + + /* TODO: These could be autogenerated! */ + + &[src*="+width72"] { + width: 7.2rem; + height: auto; + } + + &[src*="+width160"] { + width: 16rem; + height: auto; + } + + &[src*="+width640"] { + width: 64rem; + height: auto; + } + + &[src*="+width752"] { + width: 75.2rem; + height: auto; + } + + /* Resources for use in JavaScript. */ + &.resource { + display: none; + } +} + +/* Fix the default blue and ugly purple links normally have */ + +a { + color: var(--link-color); +} + +a:visited { + color: var(--link-color-visited); +} + +a.secret { + color: var(--text-color); + text-decoration: none; +} + +/* Links to headings should be invisible by default, only appearing on hover. */ + +h1, +h2, +h3, +h4, +h5, +h6 { + & > a { + color: var(--text-color); + text-decoration: none; + + &:visited { + color: var(--text-color); + } + + &:hover { + text-decoration: underline; + } + } +} + +@media (hover: none) { + h1, + h2, + h3, + h4, + h5, + h6 { + & > a { + text-decoration: underline; + } + } +} + +/* Make blockquotes a bit prettier */ + +blockquote { + margin: 0; + padding: 0.4rem 1.2rem; + margin: 0.4rem 0; + border-left: 0.4rem solid var(--border-1); +} + +/* And tables. */ + +table { + margin: 0.8rem 0; +} + +table, +th, +td { + border: 0.1rem solid var(--border-2); + border-collapse: collapse; + padding: 0.4rem 1rem; +} + +th { + background-color: var(--shaded-background); + + font-weight: 700; +} + +/* Horizontal rules */ + +hr { + width: 100%; + border: none; + border-top: 0.1rem solid var(--border-1); + margin-top: 2em; + margin-bottom: 2em; +} + +/* Push buttons */ + +button.push { + padding: 0.2rem 1.2rem; + + border: 1px solid var(--border-2); + background-color: color-mix(in oklab, var(--background-color), white 25%); + color: var(--text-color); + box-shadow: + 0 1px 2px var(--border-1), + inset 0 -1px 2px rgb(from var(--shading-base) r g b / 0.05); + + border-radius: 0.75lh; + + transition: + background-color var(--transition-duration) var(--ease-out-quintic), + box-shadow var(--transition-duration) var(--ease-out-quintic), + transform var(--transition-duration) var(--ease-out-quintic); + + &:hover { + box-shadow: + 0 4px 6px var(--border-1), + inset 0 -1px 2px rgb(from var(--shading-base) r g b / 0.1); + transform: translateY(-2px); + } + + &:active { + background-color: color-mix( + in oklab, + var(--background-color), + var(--shading-base) 5% + ); + box-shadow: + 0 0 2px var(--border-1), + inset 0 1px 2px rgb(from var(--shading-base) r g b / 0.1); + transform: translateY(0); + transition: none; + } +} + +/* Feeds */ + +section.feed { + display: flex; + flex-direction: column; + + /* Titles */ + + & h2 { + & a { + color: var(--text-color); + text-decoration: underline; + + &:visited { + color: color-mix( + in srgb, + var(--background-color), + var(--text-color) 60% + ); + } + } + } + + & h1 { + font-weight: 800; + font-size: 125%; + padding-top: 1.2rem; + padding-bottom: 1.2rem; + } + + & h2 { + font-weight: 600; + font-size: 100%; + padding: 0; + } + + /* Articles */ + + & article { + display: flex; + flex-direction: column; + + padding-bottom: 1.2rem; + + line-height: 1.4; + + & .info { + display: flex; + flex-direction: row; + flex-wrap: wrap; + font-size: 87.5%; + + & > *:not(:first-child)::before { + content: "·"; + padding: 0 0.4rem; + } + } + + & .categories { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + list-style: none; + margin: 0; + padding: 0; + + & > *:not(:first-child) { + padding-left: 1ch; + } + + & a, + & a:visited { + color: var(--text-color); + } + } + } +} + +/* Page sidebar */ + +aside.sidebar { + overflow: clip; + + & > a { + display: block; + height: min-content; + margin-top: auto; + } +} + +header.floof { + margin-top: auto; + + position: relative; + + & > img { + display: block; + min-width: 0; + object-fit: cover; + object-position: 33% 0; + } + + & > h1 { + position: absolute; + top: 3rem; + left: 3rem; + + display: flex; + flex-direction: column; + line-height: 1; + width: min-content; + + font-weight: 900; + font-size: 5.6rem; + text-align: right; + + transform: skew(-5deg, -5deg); + + & .rikis { + width: max-content; + background-color: var(--text-color); + color: var(--background-color); + padding: 0.1em; + + --shadow-color: var(--accent-pink); + /* + import math + + print("box-shadow:") + x = 0 + max_x = 16 + while x < max_x: + print(f"{x}px {x}px {math.pow(x / max_x, 2) * 16}px rgba(from var(--shadow-color) r g b / {math.pow(1 - x / max_x, 3)}),") + x += 0.5 + */ + /* prettier-ignore */ + box-shadow: + 0px 0px 0.0px rgba(from var(--shadow-color) r g b / 1.0), + 0.5px 0.5px 0.015625px rgba(from var(--shadow-color) r g b / 0.909149169921875), + 1.0px 1.0px 0.0625px rgba(from var(--shadow-color) r g b / 0.823974609375), + 1.5px 1.5px 0.140625px rgba(from var(--shadow-color) r g b / 0.744293212890625), + 2.0px 2.0px 0.25px rgba(from var(--shadow-color) r g b / 0.669921875), + 2.5px 2.5px 0.390625px rgba(from var(--shadow-color) r g b / 0.600677490234375), + 3.0px 3.0px 0.5625px rgba(from var(--shadow-color) r g b / 0.536376953125), + 3.5px 3.5px 0.765625px rgba(from var(--shadow-color) r g b / 0.476837158203125), + 4.0px 4.0px 1.0px rgba(from var(--shadow-color) r g b / 0.421875), + 4.5px 4.5px 1.265625px rgba(from var(--shadow-color) r g b / 0.371307373046875), + 5.0px 5.0px 1.5625px rgba(from var(--shadow-color) r g b / 0.324951171875), + 5.5px 5.5px 1.890625px rgba(from var(--shadow-color) r g b / 0.282623291015625), + 6.0px 6.0px 2.25px rgba(from var(--shadow-color) r g b / 0.244140625), + 6.5px 6.5px 2.640625px rgba(from var(--shadow-color) r g b / 0.209320068359375), + 7.0px 7.0px 3.0625px rgba(from var(--shadow-color) r g b / 0.177978515625), + 7.5px 7.5px 3.515625px rgba(from var(--shadow-color) r g b / 0.149932861328125), + 8.0px 8.0px 4.0px rgba(from var(--shadow-color) r g b / 0.125), + 8.5px 8.5px 4.515625px rgba(from var(--shadow-color) r g b / 0.102996826171875), + 9.0px 9.0px 5.0625px rgba(from var(--shadow-color) r g b / 0.083740234375), + 9.5px 9.5px 5.640625px rgba(from var(--shadow-color) r g b / 0.067047119140625), + 10.0px 10.0px 6.25px rgba(from var(--shadow-color) r g b / 0.052734375), + 10.5px 10.5px 6.890625px rgba(from var(--shadow-color) r g b / 0.040618896484375), + 11.0px 11.0px 7.5625px rgba(from var(--shadow-color) r g b / 0.030517578125), + 11.5px 11.5px 8.265625px rgba(from var(--shadow-color) r g b / 0.022247314453125), + 12.0px 12.0px 9.0px rgba(from var(--shadow-color) r g b / 0.015625), + 12.5px 12.5px 9.765625px rgba(from var(--shadow-color) r g b / 0.010467529296875), + 13.0px 13.0px 10.5625px rgba(from var(--shadow-color) r g b / 0.006591796875), + 13.5px 13.5px 11.390625px rgba(from var(--shadow-color) r g b / 0.003814697265625) + ; + } + + & .fluffy-little-house { + display: flex; + flex-direction: column; + + background-color: var(--background-color); + width: min-content; + align-self: end; + + padding-left: 0.8rem; + padding-right: 0.8rem; + padding-top: 0.4rem; + + z-index: -1; + + color: var(--text-color); + + & .adjectives { + font-weight: 800; + font-size: 1.6rem; + padding-top: 0.6rem; + } + + & .house { + margin-top: -0.2em; + font-size: 3.6rem; + } + } + } +} + +/* Navigation header (contains page title & breadcrumbs) */ + +h1.page-title { + font-weight: 900; + + line-height: 1.2; + padding-top: 0.5lh; + padding-bottom: 0.5lh; +} + +@media (max-width: 700px) { + h1.page-title { + font-size: 4rem; + } +} + +/* Style the footer */ + +footer { + width: 100%; + max-width: 90ch; + padding: 1.6rem 0.8rem; + + display: flex; + flex-direction: row; + + & > .left { + flex-grow: 1; + } + + & > .right { + flex-shrink: 0; + } + + & #footer-icon { + display: block; + + & > svg { + display: block; + color: var(--text-color); + opacity: 40%; + } + } + + & #open-command-line { + width: 3.2rem; + height: 3.2rem; + + background: none; + border: none; + padding: 0; + + background-image: var(--icon-cmd); + background-repeat: no-repeat; + background-position: 50% 50%; + + opacity: 50%; + transition: var(--transition-duration) opacity; + + &:hover { + opacity: 100%; + } + + &:active { + opacity: 75%; + } + } +} + +footer.pink-space { + display: block; + max-width: none; + position: relative; + + & .copyright { + position: absolute; + right: 0; + top: 0; + opacity: 70%; + + padding: 1.6rem; + + & a, + & a:visited { + color: var(--text-color); + } + } + + & .jinkou { + position: absolute; + left: 0; + bottom: 0; + opacity: 70%; + + padding: 1.6rem; + + & a, + & a:visited { + color: var(--text-color); + } + } + + & pre.meow { + position: absolute; + right: 0; + bottom: 0; + + width: min-content; + background: none; + border: none; + + font-weight: 700; + line-height: 1.3; + font-size: 75%; + opacity: 25%; + + user-select: none; + } +} diff --git a/static/css/noncritical.css b/static/css/noncritical.css index 689b3ad..7f82fa1 100644 --- a/static/css/noncritical.css +++ b/static/css/noncritical.css @@ -1,799 +1,3 @@ -/* Main layout */ - -body { - --main-min-size: 100vh; - - margin: 0; - - display: grid; - grid-template-columns: - [left] minmax(0, 1fr) - [right] auto; - grid-template-rows: - [nav] auto - [main] minmax(var(--main-min-size), auto) - [virtual] 100vh; -} - -html { - /* Leave a bunch of space at the top when scrolling to elements. - I'm honestly not sure why this is needed on and not the scrolled-to element... */ - scroll-padding-top: 10vh; -} - -.sidebar-sticky { - grid-column: right; - grid-row: main; -} - -aside.sidebar { - position: sticky; - top: 0px; - - max-width: 50rem; - height: 100vh; - padding: 0.8rem; - - display: flex; -} - -main { - grid-column: left; - grid-row: main; - min-width: 0; -} - -footer.pink-space { - grid-column: 1 / -1; - grid-row: virtual; -} - -/* Narrower layout: sidebar is pushed to the top */ - -@media (max-width: 1280px) { - body { - --main-min-size: 0; - } - - .sidebar-sticky { - grid-column: left; - grid-row: nav; - - display: flex; - justify-content: center; - } - - aside.sidebar { - position: relative; - height: auto; - padding: 0; - } -} - -/* Choose more pretty colors than vanilla HTML */ - -body { - background-color: var(--background-color); - color: var(--text-color); -} - -:root { - scrollbar-color: var(--border-2) var(--shaded-background); - scrollbar-width: auto; - scrollbar-gutter: stable; -} - -:focus-visible { - outline: 0.1rem solid var(--accent-blue); - outline-offset: 0.2rem; -} - -::selection { - background-color: color-mix( - in srgb, - var(--background-color), - var(--accent-pink) 75% - ); - color: var(--text-color); -} - -@media (prefers-color-scheme: dark) { - ::selection { - background-color: var(--accent-pink); - color: var(--background-color); - } -} - -/* Set up typography */ - -html { - font-size: 62.5%; -} - -body { - font-size: 1.6rem; -} - -body, -pre, -code, -kbd, -button, -select, -input, -dfn { - font-family: "RecVar", sans-serif; - font-style: normal; - line-height: 1.5; - text-size-adjust: none; -} - -pre, -code, -kbd, -button, -select, -input { - font-size: inherit; -} - -:root { - font-weight: 450; - font-style: normal; - --recursive-mono: 0; - --recursive-crsv: 0.5; -} - -*, -*:before, -*:after { - font-variation-settings: - "MONO" var(--recursive-mono), - "CRSV" var(--recursive-crsv); - font-feature-settings: "ss03", "ss04", "ss05", "ss06", "ss08"; -} - -h1 { - font-weight: 900; - - font-size: 4.8rem; -} - -h2 { - font-weight: 850; - - font-size: 3.2rem; -} - -h3 { - font-weight: 850; - - font-size: 2.4rem; -} - -h4 { - font-weight: 800; - - font-size: 1.6rem; -} - -code { - --recursive-mono: 0.5; -} - -pre, -pre code, -kbd, -th-literate-program { - --recursive-mono: 1; - font-weight: 450; - tab-size: 4; -} - -strong code { - font-weight: 800; -} - -b, -strong { - font-weight: 700; -} - -i, -em { - --recursive-crsv: 1; - font-style: italic; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - text-wrap: balance; -} - -/* Other classes for controlling typography */ - -.nowrap { - white-space: nowrap; -} - -/* Lay out elements a bit more compactly */ - -p, -pre { - margin: 0 0; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0.4rem 0; -} - -/* Make code examples a little prettier by giving them visual separation from the rest of the page */ - -code, -th-literate-program { - padding: 0.3rem 0.4rem; - background-color: var(--shaded-background); - border-radius: 0.4rem; -} - -th-literate-program, -th-literate-output { - display: block; -} - -kbd { - padding: 0.3rem 0.6rem; - border: 0.1rem solid var(--border-1); - border-radius: 0.4rem; -} - -pre, -th-literate-program { - padding: 0.8rem 1.2rem; - margin: 1.2rem 0; - background-color: var(--shaded-background); - border-radius: 0.4em; - - transition: background-color var(--transition-duration); -} - -@media (prefers-color-scheme: light) { - pre, - th-literate-program { - background-color: transparent; - border: 0.1rem solid var(--border-1); - } -} - -pre > code, -th-literate-program > code { - padding: 0; - background: none; - border-radius: 0; -} - -th-literate-program { - white-space: pre; -} - -/* And don't let code examples fly off and overflow the window */ - -pre, -th-literate-program { - min-width: 0; - width: auto; - overflow: auto; -} - -/* Images */ - -img { - /* Prevent images from causing horizontal scrolling */ - max-width: 100%; - height: auto; -} - -img.pic { - border-radius: 0.6rem; - margin: 0.8rem 0; -} - -img { - /* Hints for tweaking rendering */ - &[src*="+pixel"] { - image-rendering: pixelated; - border-radius: 0; - } - - &[src*="+illust"] { - border-radius: 0; - } - - /* TODO: These could be autogenerated! */ - - &[src*="+width72"] { - width: 7.2rem; - height: auto; - } - - &[src*="+width160"] { - width: 16rem; - height: auto; - } - - &[src*="+width640"] { - width: 64rem; - height: auto; - } - - &[src*="+width752"] { - width: 75.2rem; - height: auto; - } - - /* Resources for use in JavaScript. */ - &.resource { - display: none; - } -} - -/* Fix the default blue and ugly purple links normally have */ - -a { - color: var(--link-color); -} - -a:visited { - color: var(--link-color-visited); -} - -a.secret { - color: var(--text-color); - text-decoration: none; -} - -/* Links to headings should be invisible by default, only appearing on hover. */ - -h1, -h2, -h3, -h4, -h5, -h6 { - & > a { - color: var(--text-color); - text-decoration: none; - - &:visited { - color: var(--text-color); - } - - &:hover { - text-decoration: underline; - } - } -} - -@media (hover: none) { - h1, - h2, - h3, - h4, - h5, - h6 { - & > a { - text-decoration: underline; - } - } -} - -/* Make blockquotes a bit prettier */ - -blockquote { - margin: 0; - padding: 0.4rem 1.2rem; - margin: 0.4rem 0; - border-left: 0.4rem solid var(--border-1); -} - -/* And tables. */ - -table { - margin: 0.8rem 0; -} - -table, -th, -td { - border: 0.1rem solid var(--border-2); - border-collapse: collapse; - padding: 0.4rem 1rem; -} - -th { - background-color: var(--shaded-background); - - font-weight: 700; -} - -/* Horizontal rules */ - -hr { - width: 100%; - border: none; - border-top: 0.1rem solid var(--border-1); - margin-top: 2em; - margin-bottom: 2em; -} - -/* Push buttons */ - -button.push { - padding: 0.2rem 1.2rem; - - border: 1px solid var(--border-2); - background-color: color-mix(in oklab, var(--background-color), white 25%); - color: var(--text-color); - box-shadow: - 0 1px 2px var(--border-1), - inset 0 -1px 2px rgb(from var(--shading-base) r g b / 0.05); - - border-radius: 0.75lh; - - transition: - background-color var(--transition-duration) var(--ease-out-quintic), - box-shadow var(--transition-duration) var(--ease-out-quintic), - transform var(--transition-duration) var(--ease-out-quintic); - - &:hover { - box-shadow: - 0 4px 6px var(--border-1), - inset 0 -1px 2px rgb(from var(--shading-base) r g b / 0.1); - transform: translateY(-2px); - } - - &:active { - background-color: color-mix( - in oklab, - var(--background-color), - var(--shading-base) 5% - ); - box-shadow: - 0 0 2px var(--border-1), - inset 0 1px 2px rgb(from var(--shading-base) r g b / 0.1); - transform: translateY(0); - transition: none; - } -} - -/* Feeds */ - -section.feed { - display: flex; - flex-direction: column; - - /* Titles */ - - & h2 { - & a { - color: var(--text-color); - text-decoration: underline; - - &:visited { - color: color-mix( - in srgb, - var(--background-color), - var(--text-color) 60% - ); - } - } - } - - & h1 { - font-weight: 800; - font-size: 125%; - padding-top: 1.2rem; - padding-bottom: 1.2rem; - } - - & h2 { - font-weight: 600; - font-size: 100%; - padding: 0; - } - - /* Articles */ - - & article { - display: flex; - flex-direction: column; - - padding-bottom: 1.2rem; - - line-height: 1.4; - - & .info { - display: flex; - flex-direction: row; - flex-wrap: wrap; - font-size: 87.5%; - - & > *:not(:first-child)::before { - content: "·"; - padding: 0 0.4rem; - } - } - - & .categories { - display: flex; - flex-direction: row; - flex-wrap: wrap; - - list-style: none; - margin: 0; - padding: 0; - - & > *:not(:first-child) { - padding-left: 1ch; - } - - & a, - & a:visited { - color: var(--text-color); - } - } - } -} - -/* Page sidebar */ - -aside.sidebar { - overflow: clip; - - & > a { - display: block; - height: min-content; - margin-top: auto; - } -} - -header.floof { - margin-top: auto; - - position: relative; - - & > img { - display: block; - min-width: 0; - object-fit: cover; - object-position: 33% 0; - } - - & > h1 { - position: absolute; - top: 3rem; - left: 3rem; - - display: flex; - flex-direction: column; - line-height: 1; - width: min-content; - - font-weight: 900; - font-size: 5.6rem; - text-align: right; - - transform: skew(-5deg, -5deg); - - & .rikis { - width: max-content; - background-color: var(--text-color); - color: var(--background-color); - padding: 0.1em; - - --shadow-color: var(--accent-pink); - /* - import math - - print("box-shadow:") - x = 0 - max_x = 16 - while x < max_x: - print(f"{x}px {x}px {math.pow(x / max_x, 2) * 16}px rgba(from var(--shadow-color) r g b / {math.pow(1 - x / max_x, 3)}),") - x += 0.5 - */ - /* prettier-ignore */ - box-shadow: - 0px 0px 0.0px rgba(from var(--shadow-color) r g b / 1.0), - 0.5px 0.5px 0.015625px rgba(from var(--shadow-color) r g b / 0.909149169921875), - 1.0px 1.0px 0.0625px rgba(from var(--shadow-color) r g b / 0.823974609375), - 1.5px 1.5px 0.140625px rgba(from var(--shadow-color) r g b / 0.744293212890625), - 2.0px 2.0px 0.25px rgba(from var(--shadow-color) r g b / 0.669921875), - 2.5px 2.5px 0.390625px rgba(from var(--shadow-color) r g b / 0.600677490234375), - 3.0px 3.0px 0.5625px rgba(from var(--shadow-color) r g b / 0.536376953125), - 3.5px 3.5px 0.765625px rgba(from var(--shadow-color) r g b / 0.476837158203125), - 4.0px 4.0px 1.0px rgba(from var(--shadow-color) r g b / 0.421875), - 4.5px 4.5px 1.265625px rgba(from var(--shadow-color) r g b / 0.371307373046875), - 5.0px 5.0px 1.5625px rgba(from var(--shadow-color) r g b / 0.324951171875), - 5.5px 5.5px 1.890625px rgba(from var(--shadow-color) r g b / 0.282623291015625), - 6.0px 6.0px 2.25px rgba(from var(--shadow-color) r g b / 0.244140625), - 6.5px 6.5px 2.640625px rgba(from var(--shadow-color) r g b / 0.209320068359375), - 7.0px 7.0px 3.0625px rgba(from var(--shadow-color) r g b / 0.177978515625), - 7.5px 7.5px 3.515625px rgba(from var(--shadow-color) r g b / 0.149932861328125), - 8.0px 8.0px 4.0px rgba(from var(--shadow-color) r g b / 0.125), - 8.5px 8.5px 4.515625px rgba(from var(--shadow-color) r g b / 0.102996826171875), - 9.0px 9.0px 5.0625px rgba(from var(--shadow-color) r g b / 0.083740234375), - 9.5px 9.5px 5.640625px rgba(from var(--shadow-color) r g b / 0.067047119140625), - 10.0px 10.0px 6.25px rgba(from var(--shadow-color) r g b / 0.052734375), - 10.5px 10.5px 6.890625px rgba(from var(--shadow-color) r g b / 0.040618896484375), - 11.0px 11.0px 7.5625px rgba(from var(--shadow-color) r g b / 0.030517578125), - 11.5px 11.5px 8.265625px rgba(from var(--shadow-color) r g b / 0.022247314453125), - 12.0px 12.0px 9.0px rgba(from var(--shadow-color) r g b / 0.015625), - 12.5px 12.5px 9.765625px rgba(from var(--shadow-color) r g b / 0.010467529296875), - 13.0px 13.0px 10.5625px rgba(from var(--shadow-color) r g b / 0.006591796875), - 13.5px 13.5px 11.390625px rgba(from var(--shadow-color) r g b / 0.003814697265625) - ; - } - - & .fluffy-little-house { - display: flex; - flex-direction: column; - - background-color: var(--background-color); - width: min-content; - align-self: end; - - padding-left: 0.8rem; - padding-right: 0.8rem; - padding-top: 0.4rem; - - z-index: -1; - - color: var(--text-color); - - & .adjectives { - font-weight: 800; - font-size: 1.6rem; - padding-top: 0.6rem; - } - - & .house { - margin-top: -0.2em; - font-size: 3.6rem; - } - } - } -} - -/* Navigation header (contains page title & breadcrumbs) */ - -h1.page-title { - font-weight: 900; - - line-height: 1.2; - padding-top: 0.5lh; - padding-bottom: 0.5lh; -} - -@media (max-width: 700px) { - h1.page-title { - font-size: 4rem; - } -} - -/* Style the footer */ - -footer { - width: 100%; - max-width: 90ch; - padding: 1.6rem 0.8rem; - - display: flex; - flex-direction: row; - - & > .left { - flex-grow: 1; - } - - & > .right { - flex-shrink: 0; - } - - & #footer-icon { - display: block; - - & > svg { - display: block; - color: var(--text-color); - opacity: 40%; - } - } - - & #open-command-line { - width: 3.2rem; - height: 3.2rem; - - background: none; - border: none; - padding: 0; - - background-image: var(--icon-cmd); - background-repeat: no-repeat; - background-position: 50% 50%; - - opacity: 50%; - transition: var(--transition-duration) opacity; - - &:hover { - opacity: 100%; - } - - &:active { - opacity: 75%; - } - } -} - -footer.pink-space { - display: block; - max-width: none; - position: relative; - - & .copyright { - position: absolute; - right: 0; - top: 0; - opacity: 70%; - - padding: 1.6rem; - - & a, - & a:visited { - color: var(--text-color); - } - } - - & .jinkou { - position: absolute; - left: 0; - bottom: 0; - opacity: 70%; - - padding: 1.6rem; - - & a, - & a:visited { - color: var(--text-color); - } - } - - & pre.meow { - position: absolute; - right: 0; - bottom: 0; - - width: min-content; - background: none; - border: none; - - font-weight: 700; - line-height: 1.3; - font-size: 75%; - opacity: 25%; - - user-select: none; - } -} - /* Style dialogues */ dialog[open] { @@ -808,15 +12,6 @@ dialog[open] { border-radius: 1.2rem; } -/* Style emojis to be readable */ - -img.emoji { - max-width: 1.3125em; - max-height: 1.3125em; - vertical-align: text-bottom; - object-fit: contain; -} - /* Command line */ th-command-line { @@ -922,14 +117,13 @@ th-command-line { /* Literate programming support */ -:root { - --error-color: #d94141; +th-literate-program, +th-literate-output { + display: block; } -@media (prefers-color-scheme: dark) { - :root { - --error-color: #e39393; - } +th-literate-program { + white-space: pre; } th-literate-program[data-mode="input"] { diff --git a/static/js/tree.js b/static/js/tree.js index 089056a..ea6b197 100644 --- a/static/js/tree.js +++ b/static/js/tree.js @@ -2,7 +2,6 @@ import { addSpell } from "treehouse/spells.js"; import * as ulid from "treehouse/ulid.js"; -import { attachTooltip, Tooltip } from "treehouse/overlay.js"; /* Branch persistence */ @@ -57,22 +56,6 @@ export class Branch { this.namedID = element.id.replace(/^b-/, ""); Branch.branchesByNamedID.set(this.namedID, element); - let permalinkButton = this.buttonBar.querySelector("a[th-p]"); - if (permalinkButton != null) { - permalinkButton.title = "copy permalink"; - permalinkButton.addEventListener("click", (event) => { - event.preventDefault(); // do not navigate the link - navigator.clipboard.writeText( - new URL(permalinkButton.href, window.location).toString(), - ); - attachTooltip(permalinkButton, () => { - let tooltip = new Tooltip(permalinkButton, "left"); - tooltip.append("permalink copied to clipboard!"); - return tooltip; - }).show(); - }); - } - // Adjust dates to fit the user's time zone. let timestamp = null; if (element.hasAttribute("th-ts")) { diff --git a/template/_tree.hbs b/template/_tree.hbs index 6324cd5..99310e1 100644 --- a/template/_tree.hbs +++ b/template/_tree.hbs @@ -19,9 +19,10 @@ // We want to let the user have a selection on collapsible blocks without collapsing them when // the user finishes marking their selection. document.addEventListener("click", event => { - if (getSelection().type == "Range") { - event.preventDefault(); - } + if (getSelection().type == "Range") { + event.preventDefault(); + } + }); {{!-- Go through the import map for each script. --}} {{#each page.scripts}} diff --git a/template/components/_head.hbs b/template/components/_head.hbs index a0d2d34..034ca77 100644 --- a/template/components/_head.hbs +++ b/template/components/_head.hbs @@ -10,7 +10,8 @@ src: url("{{{ asset 'font/recursive-casl0.woff2' }}}"); } - + +