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;
|
||||
--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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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 */
|
||||
|
||||
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"] {
|
||||
|
|
|
|||
|
|
@ -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")) {
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
src: url("{{{ asset 'font/recursive-casl0.woff2' }}}");
|
||||
}
|
||||
</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/icons.css' }}">
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue