inline critical CSS
This commit is contained in:
parent
5304273b28
commit
6b707587ef
6 changed files with 806 additions and 832 deletions
|
|
@ -17,6 +17,7 @@
|
||||||
--text-color: #302859;
|
--text-color: #302859;
|
||||||
--link-color: #004ec8;
|
--link-color: #004ec8;
|
||||||
--link-color-visited: #6c2380;
|
--link-color-visited: #6c2380;
|
||||||
|
--error-color: #d94141;
|
||||||
|
|
||||||
--shading-base: #592782;
|
--shading-base: #592782;
|
||||||
|
|
||||||
|
|
@ -31,6 +32,7 @@
|
||||||
--text-color: #f7ece5;
|
--text-color: #f7ece5;
|
||||||
--link-color: #93cce8;
|
--link-color: #93cce8;
|
||||||
--link-color-visited: #f7afde;
|
--link-color-visited: #f7afde;
|
||||||
|
--error-color: #e39393;
|
||||||
|
|
||||||
--shading-base: #e4d2ff;
|
--shading-base: #e4d2ff;
|
||||||
}
|
}
|
||||||
|
|
@ -55,3 +57,37 @@
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
759
static/css/critical.css
Normal file
759
static/css/critical.css
Normal file
|
|
@ -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 <html> 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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 <html> 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 */
|
/* Style dialogues */
|
||||||
|
|
||||||
dialog[open] {
|
dialog[open] {
|
||||||
|
|
@ -808,15 +12,6 @@ dialog[open] {
|
||||||
border-radius: 1.2rem;
|
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 */
|
/* Command line */
|
||||||
|
|
||||||
th-command-line {
|
th-command-line {
|
||||||
|
|
@ -922,14 +117,13 @@ th-command-line {
|
||||||
|
|
||||||
/* Literate programming support */
|
/* Literate programming support */
|
||||||
|
|
||||||
:root {
|
th-literate-program,
|
||||||
--error-color: #d94141;
|
th-literate-output {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
th-literate-program {
|
||||||
:root {
|
white-space: pre;
|
||||||
--error-color: #e39393;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th-literate-program[data-mode="input"] {
|
th-literate-program[data-mode="input"] {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
|
|
||||||
import { addSpell } from "treehouse/spells.js";
|
import { addSpell } from "treehouse/spells.js";
|
||||||
import * as ulid from "treehouse/ulid.js";
|
import * as ulid from "treehouse/ulid.js";
|
||||||
import { attachTooltip, Tooltip } from "treehouse/overlay.js";
|
|
||||||
|
|
||||||
/* Branch persistence */
|
/* Branch persistence */
|
||||||
|
|
||||||
|
|
@ -57,22 +56,6 @@ export class Branch {
|
||||||
this.namedID = element.id.replace(/^b-/, "");
|
this.namedID = element.id.replace(/^b-/, "");
|
||||||
Branch.branchesByNamedID.set(this.namedID, element);
|
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.
|
// Adjust dates to fit the user's time zone.
|
||||||
let timestamp = null;
|
let timestamp = null;
|
||||||
if (element.hasAttribute("th-ts")) {
|
if (element.hasAttribute("th-ts")) {
|
||||||
|
|
|
||||||
|
|
@ -19,9 +19,10 @@
|
||||||
// We want to let the user have a selection on collapsible blocks without collapsing them when
|
// We want to let the user have a selection on collapsible blocks without collapsing them when
|
||||||
// the user finishes marking their selection.
|
// the user finishes marking their selection.
|
||||||
document.addEventListener("click", event => {
|
document.addEventListener("click", event => {
|
||||||
if (getSelection().type == "Range") {
|
if (getSelection().type == "Range") {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
{{!-- Go through the import map for each script. --}}
|
{{!-- Go through the import map for each script. --}}
|
||||||
{{#each page.scripts}}
|
{{#each page.scripts}}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,8 @@
|
||||||
src: url("{{{ asset 'font/recursive-casl0.woff2' }}}");
|
src: url("{{{ asset 'font/recursive-casl0.woff2' }}}");
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" href="{{ asset 'css/base.css' }}">
|
<style>{{{ include_static 'css/base.css' }}}</style>
|
||||||
|
<style>{{{ include_static 'css/critical.css' }}}</style>
|
||||||
<link rel="stylesheet" href="{{ asset 'css/noncritical.css' }}">
|
<link rel="stylesheet" href="{{ asset 'css/noncritical.css' }}">
|
||||||
<link rel="stylesheet" href="{{ asset 'css/icons.css' }}">
|
<link rel="stylesheet" href="{{ asset 'css/icons.css' }}">
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue