/* Lay out the main containers. */
body {
--top-min-spacing: 40px;
margin: 0;
display: grid;
grid-template-columns:
[left] minmax(
0,
clamp(136px, calc(100vw - (1920px - 360px - 160px)), 160px)
)
[center] minmax(0, auto)
[right] minmax(0, calc(100vw - (1920px - 360px)));
grid-template-rows:
[top] minmax(
clamp(
var(--top-min-spacing),
calc(100vw - (1920px - 360px - 160px)),
128px
),
min-content
)
[title] minmax(9.6rem, min-content)
[main] 1fr
[bottom] min-content;
}
html {
/* Try to always leave a bunch of empty space at the bottom, but don't overdo it.
It's kind of awkward when you scroll to the bottom and your page just turns blank. */
--virtual-space-ratio: 1.75;
height: calc(100% * var(--virtual-space-ratio));
/* 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;
}
body {
min-height: calc(100% / var(--virtual-space-ratio));
}
.noscript {
grid-row: top;
grid-column: center;
}
#nav-logo {
grid-row: title;
grid-column: left;
align-self: center;
justify-self: end;
}
section.page-header {
grid-row: title;
grid-column: center;
align-self: center;
}
main {
grid-row: main;
grid-column: center / center;
margin-right: 0.8rem;
}
footer {
grid-row: bottom;
grid-column: center / center;
}
@media (max-width: 1200px) {
main {
grid-column: left / -1;
}
footer {
grid-column: 1 / -1;
}
}
@media (max-width: 450px) {
body {
--top-min-spacing: 0px;
}
section.page-header {
grid-column: 1 / -1;
}
nav#nav-logo {
display: none;
}
}
/* 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;
}
/* Set up typography */
@font-face {
font-family: "RecVar";
/* NOTE: I put the hash in here manually instead of adding the complexity of piping CSS through
Handlebars because I don't really think it's worth it for this single asset.
Other assets are referenced rarely enough that caching probably isn't gonna make too much of
an impact.
It's unlikely I'll ever update the font anyways, so eh, whatever. */
src: url("../font/Recursive_VF_1.085.woff2?v=b3-445487d5");
}
body,
pre,
code,
kbd,
button,
select,
input,
dfn {
font-family: "RecVar", sans-serif;
font-style: normal;
line-height: 1.5;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
pre,
code,
kbd,
button,
select,
input {
font-size: inherit;
}
:root {
--recursive-mono: 0;
--recursive-casl: 0;
--recursive-wght: 450;
--recursive-slnt: 0;
--recursive-crsv: 0.5;
--recursive-simplified-f: "ss03";
--recursive-simplified-g: "ss04";
--recursive-simplified-l: "ss05";
--recursive-simplified-r: "ss06";
--recursive-no-serif-L-Z: "ss08";
}
*,
*:before,
*:after {
font-variation-settings:
"MONO" var(--recursive-mono),
"CASL" var(--recursive-casl),
"wght" var(--recursive-wght),
"slnt" var(--recursive-slnt),
"CRSV" var(--recursive-crsv);
font-feature-settings: var(--recursive-simplified-f),
var(--recursive-simplified-g), var(--recursive-simplified-l),
var(--recursive-simplified-r), var(--recursive-no-serif-L-Z);
}
h1 {
--recursive-wght: 900;
font-size: 5.6rem;
font-feature-settings: var(--recursive-simplified-r) 0;
}
h2 {
--recursive-wght: 850;
font-size: 3.2rem;
}
h3 {
--recursive-wght: 850;
font-size: 2.4rem;
}
h4 {
--recursive-wght: 800;
font-size: 1.6rem;
}
pre,
code,
kbd,
th-literate-program {
--recursive-mono: 1;
--recursive-wght: 450;
}
strong code {
--recursive-wght: 800;
}
b,
strong {
--recursive-wght: 700;
}
i,
em {
--recursive-slnt: -16;
font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}
/* 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.5em;
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;
}
/* Also don't let images get out of hand */
img {
max-width: 100%;
}
/* Also regarding images - make them look a bit more pretty by default */
img.pic {
border-radius: 0.6rem;
margin: 0.8rem 0;
}
/* Image hints for tweaking rendering */
img {
&[src*="+pixel"] {
image-rendering: pixelated;
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);
}
/* Allow for some secret links */
a.secret {
color: var(--text-color);
text-decoration: none;
}
/* 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);
--recursive-wght: 700;
}
/* Horizontal rules */
hr {
width: 100%;
border: none;
border-top: 0.1rem solid var(--border-1);
margin-top: 2em;
margin-bottom: 2em;
}
/* Style the noscript box a little more prettily. */
.noscript {
padding: 1.6rem;
background-color: #fde748;
color: #55423e;
border: 0.1rem solid #6c581c;
border-radius: 0.8rem;
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-top: 1.6rem;
margin-bottom: 1.6rem;
}
.noscript:empty {
display: none;
}
.noscript p {
margin-top: 0;
margin-bottom: 1.6rem;
}
.noscript p:last-child {
margin-bottom: 0;
}
.noscript a {
color: #004ec8;
}
.noscript a:visited {
color: #6c2380;
}
/* Navigation button */
#nav-logo {
width: min-content;
height: min-content;
}
#nav-logo .logo {
/* NOTE: Measurements in px for pixel perfection */
width: 120px;
height: 120px;
display: block;
opacity: 100%;
color: var(--text-color);
}
/* Navigation header (contains page title & breadcrumbs) */
h1.page-title {
--recursive-wght: 850;
margin-top: 0.32rem;
margin-bottom: 0.32rem;
margin-left: 3.6rem;
font-size: 4rem;
& a {
color: var(--text-color);
text-decoration: underline;
text-decoration-color: transparent;
transition: var(--transition-duration) text-decoration-color;
&:hover {
text-decoration-color: var(--text-color);
}
}
}
@media (hover: none) {
h1.page-title a {
text-decoration: underline;
}
}
/* Style badges */
span.badge {
--recursive-wght: 800;
--recursive-mono: 1;
border-radius: 100rem;
padding: 0.2rem 0.6rem;
font-size: 0.9em;
&.red {
color: white;
background-color: #d01243;
}
&.blue {
color: white;
background-color: #058ef0;
}
&.before-content {
margin-right: 0.6rem;
}
}
/* Style the footer */
footer {
padding-left: 1.6rem;
padding-right: 1.6rem;
margin-top: 6.4rem;
padding-bottom: 6.4rem;
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%;
}
}
}
@media (hover: none) {
footer > #version-info {
& > ul {
opacity: 100%;
}
}
}
/* Style dialogues */
dialog[open] {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: var(--text-color);
background-color: var(--background-color);
border: 0.1rem solid var(--border-1);
border-radius: 1.2rem;
}
/* Style emojis to be readable */
img[data-cast~="emoji"] {
max-width: 1.5em;
max-height: 1.5em;
vertical-align: bottom;
object-fit: contain;
}
/* Tooltips */
th-overlays {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
th-tooltip {
display: block;
position: fixed;
width: max-content;
z-index: 100;
background-color: var(--background-color-tooltip);
padding: 0.4rem 0.8rem;
border-radius: 0.6rem;
transition:
opacity var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1),
filter var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1),
transform var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0%;
filter: blur(0.3rem);
pointer-events: none;
font-size: 0.9em;
&[th-side="bottom"] {
transform: translateX(-50%) translateY(-10%) scale(0.8);
&.transitioned-in {
transform: translateX(-50%) scale(1);
}
}
&[th-side="left"] {
transform: translateX(-90%) translateY(-50%) scale(0.8);
&.transitioned-in {
transform: translateX(-100%) translateY(-50%);
}
}
}
th-tooltip.transitioned-in {
opacity: 100%;
filter: blur(0);
}
th-tooltip.tooltip-emoji {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.8rem;
margin-top: 0.8rem;
& > img {
display: block;
max-width: 7.2rem;
max-height: 7.2rem;
}
& > p {
color: var(--text-color);
margin: 0;
padding-top: 0.6rem;
line-height: 1;
}
}
.th-emoji-unknown {
text-decoration: 0.1rem underline var(--error-color);
cursor: help;
}
/* Command line */
th-command-line {
--recursive-mono: 1;
display: none;
flex-direction: column;
background-color: var(--background-color-tooltip);
font-size: 87.5%;
&.visible {
display: flex;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
& > .input-wrapper {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 0.4rem;
width: 100%;
&::before {
content: ":";
padding-right: 0.2rem;
opacity: 50%;
}
& > input {
background: none;
color: var(--text-color);
border: none;
flex-grow: 1;
padding: 0.2rem 0;
&:focus {
outline: none;
}
}
}
& > ul.suggestions {
list-style: none;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
max-height: 25vh;
overflow: auto;
& > li {
padding: 0.2rem 0.8rem;
cursor: default;
& > dfn {
--recursive-crsv: 0;
--recursive-wght: 700;
margin-right: 2ch;
}
&:hover,
&.tabbed {
background-color: var(--accent-purple);
color: white;
}
&.immediate {
cursor: pointer;
}
}
}
}
@media (hover: none) {
th-command-line {
& > ul.suggestions > li {
border-bottom: 0.1rem solid var(--border-1);
}
}
}
@media (pointer: coarse) {
th-command-line {
& > .input-wrapper > input {
padding: 0.8rem 0;
}
& > ul.suggestions > li {
padding: 0.8rem 0.8rem;
}
}
}
/* Literate programming support */
:root {
--error-color: #d94141;
}
@media (prefers-color-scheme: dark) {
:root {
--error-color: #e39393;
}
}
th-literate-program[data-mode="input"] {
/* Override the cursor with an I-beam, because the editor captures clicks and does not bubble
them back up to the caller */
cursor: text;
}
th-literate-program[data-mode="output"] {
padding: 0;
background: none;
border: none;
border-radius: 0;
& iframe,
& img.placeholder-image {
border-style: none;
border-radius: 0.4rem;
display: block;
}
& iframe {
width: 100%;
}
& img.placeholder-image.js {
transition: opacity var(--transition-duration);
}
& iframe,
& img.placeholder-image.loading {
opacity: 50%;
}
& iframe.loaded {
opacity: 100%;
}
/* The inner iframe is hidden until something requests display. */
& iframe.hidden {
display: none;
}
& pre > code {
display: block;
}
& pre.error {
color: var(--error-color);
position: relative;
&:empty {
display: none;
}
&::after {
content: "Error";
padding: 0.8rem;
position: absolute;
right: 0;
top: 0;
color: var(--text-color);
opacity: 50%;
}
}
& pre.console,
& pre.placeholder-console {
position: relative;
margin-top: 0;
margin-bottom: 0;
&:empty {
display: none;
}
&::after {
content: "Console";
padding: 0.8rem;
position: absolute;
right: 0;
top: 0;
color: var(--text-color);
opacity: 50%;
}
}
}
/* Syntax highlighting */
:root {
--syntax-comment: #6c657b;
--syntax-identifier: var(--text-color);
--syntax-keyword1: #b03b0d;
--syntax-keyword2: #02739d;
--syntax-operator: #ac4141;
--syntax-function: #9940b9;
--syntax-literal: #a84983;
--syntax-string: #2c7754;
--syntax-punct: #6c657b;
}
@media (prefers-color-scheme: dark) {
:root {
--syntax-comment: #a8a2b9;
--syntax-identifier: var(--text-color);
--syntax-keyword1: #ffb496;
--syntax-keyword2: #98dcfd;
--syntax-operator: #ffa5a5;
--syntax-function: #ffde9e;
--syntax-literal: #ffcaf4;
--syntax-string: #d6fbaa;
--syntax-punct: #a8a2b9;
}
}
.th-syntax-highlighting span {
&.comment {
--recursive-slnt: -16;
color: var(--syntax-comment);
}
&.identifier {
color: var(--syntax-identifier);
}
&.keyword1 {
color: var(--syntax-keyword1);
}
&.keyword2 {
color: var(--syntax-keyword2);
}
&.operator {
color: var(--syntax-operator);
}
&.function {
color: var(--syntax-function);
}
&.literal {
color: var(--syntax-literal);
}
&.string {
color: var(--syntax-string);
}
&.punct {
color: var(--syntax-punct);
}
&.error {
color: var(--error-color);
text-decoration: wavy underline;
}
&.hidden {
display: none;
}
&.type-hint {
color: var(--syntax-comment);
font-size: 80%;
}
}
.th-syntax-highlighting {
& .export {
text-decoration: underline dotted;
cursor: help;
text-decoration-color: transparent;
transition: text-decoration-color var(--transition-duration);
}
&:hover,
&:focus {
& .export {
text-decoration-color: var(--syntax-keyword1);
}
}
}
/* Style settings sections */
section[data-cast~="settings"] {
/* Don't display settings when JavaScript is disabled.
JS overrides this value on the element itself. */
display: none;
}