rkgk/static/base.css

/* Variables */

:root {
    --color-text: #111;
    --color-error: #db344b;

    --color-brand-blue: #40b1f4;
    
    --color-panel-border: rgba(0, 0, 0, 20%);
    --color-panel-background: #fff;
    --color-shaded-background: rgba(0, 0, 0, 5%);

    --dialog-backdrop: rgba(255, 255, 255, 0.5);
}

/* Reset */ 

body {
    margin: 0;
    color: var(--color-text);
    line-height: 1.5;
}

/* Fonts */

@font-face {
    font-family: "Atkinson Hyperlegible";
    src:
        local("Atkinson Hyperlegible Regular"),
        url("font/AtkinsonHyperlegible-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    src:
        local("Atkinson Hyperlegible Italic"),
        url("font/AtkinsonHyperlegible-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    src:
        local("Atkinson Hyperlegible Bold"),
        url("font/AtkinsonHyperlegible-Bold.ttf");
    font-weight: 700;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    src:
        local("Atkinson Hyperlegible Bold Italic"),
        url("font/AtkinsonHyperlegible-BoldItalic.ttf");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    /* NOTE: This is my own variant of Iosevka that more or less follows the stylistic choices
       of Atkinson Hyperlegible. */
    font-family: "Iosevka Hyperlegible";
    src:
        local("Iosevka Hyperlegible"),
        url("font/IosevkaHyperlegible-Regular.woff2");
    font-weight: 400;
}

:root {
    font-family: "Atkinson Hyperlegible", sans-serif;
}

button, textarea, input {
    font-size: inherit;
    font-family: inherit;
}

pre, code, textarea {
    font-family: "Iosevka Hyperlegible", monospace;
    line-height: 1.5;
}

/* Buttons */

button {
    border: 1px solid var(--color-panel-border);
    border-radius: 9999px;
    padding: 0.5rem 1.5rem;
    background-color: var(--color-panel-background);
}

/* Text areas */ 

input {
    border: none;
    border-bottom: 1px solid var(--color-panel-border);
}

*:focus {
    outline: 1px solid var(--color-brand-blue);
    outline-offset: 4px;
}

/* Modal dialogs */

dialog:not([open]) {
    /* Weird this doesn't seem to work by default. */
    display: none;
}

dialog::backdrop {
    background-color: var(--dialog-backdrop);
    backdrop-filter: blur(8px);
}

/* Details */

details>summary {
    cursor: pointer;
}

/* Throbbers */

@keyframes rkgk-throbber-loading {
    0% {
        clip-path: inset(0% 100% 0% 0%);
        animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    }

    50% {
        clip-path: inset(0% 0% 0% 0%);
        animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
    }

    100% {
        clip-path: inset(0% 0% 0% 100%);
    }
}

rkgk-throbber {
    display: inline;

    &.loading {
        display: block;
        width: 16px;
        height: 16px;
        background-color: var(--color-brand-blue);
        animation: infinite alternate rkgk-throbber-loading;
        /* I wonder how many people will get _that_ reference. */
        animation-duration: calc(60s / 141.98);
    }

    &.error {
        /* This could use an icon. */
        color: var(--color-error);
    }
}

/* Panels */

.rkgk-panel {
    --panel-border-radius: 8px;
    
    display: block;
    background: var(--color-panel-background);
    border: none;
    border-radius: var(--panel-border-radius);
    box-shadow:
        0 0 0 1px var(--color-panel-border);
        /* 4px 4px 0 0 var(--color-panel-border); */
    box-sizing: border-box;
}

/* Horizontal separators */

hr {
    border: none;
    border-bottom: 1px solid var(--color-panel-border);
}

/* Lists */

ul, ol {
    padding-left: 20px;
}

/* Code examples */

pre:has(code) {
    background-color: var(--color-shaded-background);
    border-radius: 8px;
    padding: 1em 1em;
}

/* Icons */

:root {
    --icon-rkgk-grayscale: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJtMCAwaDE2djE2aC0xNnoiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNhKSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Im0xMiAxNy00LjU1Mjc5LTkuMTA1NTdjLS42NjQ5LTEuMzI5ODEuMzAyMDktMi44OTQ0MyAxLjc4ODg2LTIuODk0NDNoOC43NjM5MyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxnIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0ibTUuNSAxMi0yLjUgNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0ibTMgNWgxIi8+PC9nPjwvZz48L3N2Zz4=');
    --icon-external-link: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMwMDAiPjxwYXRoIGQ9Im0xMC41IDl2Mi41aC02di02aDIuNSIvPjxwYXRoIGQ9Im03IDkgNC41LTQuNW0wIDBoLTMuNW0zLjUgMHYzLjUiLz48L2c+PC9zdmc+');
}

.icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;

    background-repeat: no-repeat;
    background-position: 50% 50%;

    &.icon-rkgk-grayscale { background-image: var(--icon-rkgk-grayscale); }
    &.icon-external-link { background-image: var(--icon-external-link); }
}