twopn/site-src/res/main.css

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 14pt;
    line-height: 1.3;
    font-family: CharisSILW, serif;
    --fg: #3f676e;
    --bg: #fdf7d3;
    --light: #555;
    --accent: #ab547d;
    /* cef5f84 */
    --accent2: #8bf3e4;
    color: var(--fg);

    background: var(--bg);
    hyphens: auto;
    text-decoration: none;
    text-wrap: pretty;
    text-align: left;
    /* idk */
    /* font-feature-settings: "aalt", "c2sc", "ccmp", "cv13", "cv17", "cv19", "cv20", "cv25", "cv28", "cv37", "cv43", "cv44", "cv46", "cv47", "cv49", "cv55", "cv57", "cv62", "cv68", "cv69", "cv70", "cv71", "cv75", "cv76", "cv77", "cv79", "cv80", "cv81", "cv82", "cv84", "cv90", "cv91", "cv92", "cv98", "frac", "liga", "locl", "smcp", "ss01", "ss04", "ss05", "ss11", "ss12", "subs", "sups", "mark", "mkmk";
     */
    min-height: 100%;
    display: grid;
    grid-template:
        "header"
        "body"
        "sidebar" / minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 1020px) {
    body {
        grid-template:
            "header header"
            "body sidebar" / minmax(0, 2fr) minmax(0, 1fr);
    }
}

main {
    grid-area: body;
    padding-inline: 2rem;
    padding-block-start: 1rem;
}

@media (prefers-color-scheme: dark) {
    body {
        --fg: #f6f6f6;
        --bg: #040402;
        --light: #aeaeae;
        --accent: #fff831;
        --accent2: #b94d04;
    }

    footer {
        min-height: 0;
        background-image: url(/res/prospit-extended.webp);
    }
}

/* we can make code wider :D */
p,
h1,
h2,
video {
    width: min(650px, 95vw, 100%);
    margin-inline: auto;
}

ul,
ol {
    width: min(650px, 80vw);
    margin-inline: auto;
}

li > p {
    width: 100%;
}

.highlight {
    overflow: auto;
    margin-bottom: 8pt;
}

pre {
    /* 80 is pretty aggressive */
    /* yeah what the heck let's do 100 (for rust's sake) */
    /* reducing the font-size a touch makes this more than reasonable methinks */
    /* nvm */
    width: min(80ch, 95vw);
    margin-inline: auto;
    font-size: 1rem;
}

.anchor {
    color: var(--light);
    opacity: 0;
    transition: opacity linear 0.1s;
    user-select: none;
    margin-left: 5px;
}

*:hover > .anchor {
    opacity: 1;
}

h1 {
    font-size: 1.3em;
    margin-bottom: 10pt;
    text-align: center;
    hyphens: none;
}

h2 {
    font-size: 1.1em;
    margin-top: 10pt;
    text-align: left;
    hyphens: none;
}

h1:not(#site-title) > a,
h2 > a {
    text-decoration: none;
    color: var(--fg);
}

p,
blockquote {
    margin-block: 0 8pt;
}

code,
pre {
    /* kde default i think; looks nice, so i want to keep it consistent */
    font-family: Hack, monospace;
    whitespace: pre;
}

/* mmmm */
code {
    white-space: nowrap;
    /*
    color: #008282;
    filter: grayscale(0.7); */
}

pre > code {
    white-space: pre;
}

.meta-date {
    /* broken, but only when really narrow */
    text-align: start;
}

.meta-date > .label {
    color: var(--light);
}

abbr {
    text-decoration: none;
    --fv-smcp: "smcp" on;
    --fv-c2sc: "c2sc" on;
    /*
    letter-spacing: 0.03em;
    font-size: 1.1em;
    */
}

a {
    color: var(--fg);
    text-decoration: dotted underline;
    text-decoration-color: var(--accent);
}

a:not(.heading):not([href="/"]):hover {
    color: var(--accent);
    transition:
        color linear 0.2s,
        text-decoration linear 0.2s;
    text-decoration: underline;
}

.note {
    color: var(--light);
}

blockquote {
    width: min(550px, 90vw);
    margin-inline: auto;
    font-size: 1em;
    line-height: 1.1;
}

hr {
    border: none;
    border-top: 2px solid var(--light);
    margin-block: 2rem;
    width: min(100%, 600px, 90vw);
    margin-inline: auto;
}

li {
    margin-bottom: 0.5rem;
}

/*
footer {
    width: min(700px, 95vw);
    --fv-smcp: "smcp" on;
    margin-inline: auto;
    display: flex;
    margin-bottom: 2rem;
    flex-flow: row wrap;
    justify-content: center;
}
*/

code,
.emoticon,
.css-property,
.url-link {
    font-family: Hack, monospace;
    font-size: 1rem;
}

/* todo: would be great (but hard) to have footnotes on the side when the screen is wide enough */
.footnote-return,
.footnote {
    user-select: none;
}

.footnote {
    font-size: 0.65rem;
    padding-inline: 0.07rem;
    vertical-align: super;
}

.footnote-content {
    width: fit-content;
    /* kinda inelegant V */
    padding-inline: 0.25rem;
}

.posts {
    text-align: left;
    hyphens: none;
}

.no-hyphens {
    hyphens: none;
}

.work-title {
    font-style: italic;
}

.heading-link {
    font-weight: 550;
    --fv-smcp: "smcp" on;
}

/* meh */
:target {
    outline: 1px solid var(--accent);
    border-radius: 0.125rem;
}

video {
    display: block;
    border-radius: 1rem;
    margin-block-end: 1rem;
}

#site-title {
    width: 100%;
    font-family:
        Courier New,
        Courier,
        monospace;
    background: var(--accent2);
    margin: 0;
    grid-area: header;
}

#site-title > a {
    color: var(--accent);
    text-decoration: none;
}

/*.badges a, marquee a, header a {
	border: none;
	background-color: #00000000;
	text-decoration: none;
}*/
.badges {
    image-rendering: pixelated;
    font-size: 0pt;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.badges > * {
    display: inline-flex;
    width: 88px;
    height: 31px;
    vertical-align: middle;
}
/*
.badges > :hover {
  transform: scale(2);
}
*/
.badges > a > img,
.badges .ff-container {
    width: 88px;
    height: 31px;
}

#webring {
    margin: 0 auto;
    text-align: center;
    background-color: var(--accent2);
    padding: 0.5rem;
}
#webring > a {
    font-size: 2rem;
}

footer {
    grid-area: sidebar;
    list-style: none;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    background-position: bottom left;
    background-repeat: repeat-x;
    image-rendering: pixelated;
    margin-block-start: 1rem;
}

footer > * {
    /* padding: 0.5rem; */
    min-width: 0;
    margin: 0;
}