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' }}}");
}
-
+
+