site/_includes/styles/base.css

/* ╭────────────────────────╮
/  │  _                     │
/  │ | |__   __ _ ___  ___  │
/  │ | '_ \ / _` / __|/ _ \ │
/  │ | |_) | (_| \__ \  __/ │
/  │ |_.__/ \__,_|___/\___| │
/  ╰────────────────────────╯
/  base - styling for regular/global html elements as well as the color schemes, and anything else that doesn't fit anywhere else */

:root {
    --pagefind-ui-font: var(--font-family);
    --pagefind-ui-primary: var(--foreground);
    --pagefind-ui-text: var(--foreground);
    --pagefind-ui-background: var(--background);
    --pagefind-ui-border: var(--accent);
    --pagefind-ui-tag: var(--background);
    --site-border: .1rem solid var(--border);
}

/*
custom color scheme, based off of both Ayu Light & Dark and Catppuccin Latte & Mocha.
it's basically a mix and mash of the both of them together, and slightly modified.
it doesn't have a name, call it "synth.download color scheme official real"
*/

:root {
    /* base colors */
    --background: #fafafa;
    --foreground: #3d454d;
    --selection: #f0eee4;
    --comment: #abb0b6;
    --accent: #ffaa33;
    --link: #9f5e03;

    /* original ayu colors */
    --orange: #ff9940;
    --green: #86b300;
    --blue: #4cbf99;
    --purple: #a37acc;
    --red: #ec3838;

    /* extended catppuccin based colors */
    --flamingo: #ff7d7d;
    --rosewater: #eca69a;
    --pink: #ff8adb;
    --mauve: #ba8aff;
    --maroon: #e06c75;
    --peach: #ffac6b;
    --yellow: #e5c07b;
    --teal: #2bbac5;
    --sky: #3eacce;
    --sapphire: #4db5d0;
    --lavender: #7881ce;

    /* ui accent colors */
    --ui-orange: #fa8d3e;
    --ui-green: #91b362;
    --ui-blue: #6994bf;
    --ui-purple: #7e57c2;
    --ui-teal: #56c2c0;
    --ui-lavender: #9d8cdb;

    /* misc. */
    --border: #e4e4e4;
    --shadow: rgba(0, 0, 0, 0.1);
    --hover: rgba(0, 0, 0, 0.05);
    --active: rgba(0, 0, 0, 0.1);
    --focus: #86b300;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* base colors */
        --background: #0a0e14;
        --foreground: #d8d6d2;
        --selection: #253340;
        --comment: #5c6773;
        --accent: #e6b450;
        --link: #e6b450;

        /* original ayu colors */
        --orange: #ffb454;
        --green: #aad94c;
        --blue: #59c2ff;
        --purple: #d2a6ff;
        --red: #f0646b;

        /* extended catppuccin based colors */
        --flamingo: #f2cdcd;
        --rosewater: #f5e0dc;
        --pink: #ffc9e3;
        --mauve: #cba6f7;
        --maroon: #eba0ac;
        --peach: #ffcca8;
        --yellow: #f9e2af;
        --teal: #8ddedc;
        --sky: #89dceb;
        --sapphire: #74c7ec;
        --lavender: #b4befe;

        /* ui accent colors */
        --ui-orange: #e6b450;
        --ui-green: #aad94c;
        --ui-blue: #39bae6;
        --ui-purple: #a37acc;
        --ui-teal: #7adbd3;
        --ui-lavender: #ada0f3;

        /* misc. */
        --border: #1a1f29;
        --shadow: rgba(0, 0, 0, 0.4);
        --hover: rgba(255, 255, 255, 0.05);
        --active: rgba(255, 255, 255, 0.1);
        --focus: #ffb454;
    }
}

/* theme classes for manual theme selection */
html[data-theme="light"] {
    /* base colors */
    --background: #fafafa;
    --foreground: #3d454d;
    --selection: #f0eee4;
    --comment: #abb0b6;
    --accent: #ffaa33;
    --link: #9f5e03;

    /* original ayu colors */
    --orange: #ff9940;
    --green: #86b300;
    --blue: #4cbf99;
    --purple: #a37acc;
    --red: #ec3838;

    /* extended catppuccin based colors */
    --flamingo: #ff7d7d;
    --rosewater: #eca69a;
    --pink: #ff8adb;
    --mauve: #ba8aff;
    --maroon: #e06c75;
    --peach: #ffac6b;
    --yellow: #e5c07b;
    --teal: #2bbac5;
    --sky: #3eacce;
    --sapphire: #4db5d0;
    --lavender: #7881ce;

    /* ui accent colors */
    --ui-orange: #fa8d3e;
    --ui-green: #91b362;
    --ui-blue: #6994bf;
    --ui-purple: #7e57c2;
    --ui-teal: #56c2c0;
    --ui-lavender: #9d8cdb;

    /* misc. */
    --border: #e4e4e4;
    --shadow: rgba(0, 0, 0, 0.1);
    --hover: rgba(0, 0, 0, 0.05);
    --active: rgba(0, 0, 0, 0.1);
    --focus: #86b300;
}

html[data-theme="dark"] {
    /* base colors */
    --background: #0a0e14;
    --foreground: #d8d6d2;
    --selection: #253340;
    --comment: #5c6773;
    --accent: #e6b450;
    --link: #e6b450;

    /* original ayu colors */
    --orange: #ffb454;
    --green: #aad94c;
    --blue: #59c2ff;
    --purple: #d2a6ff;
    --red: #f0646b;

    /* extended catppuccin based colors */
    --flamingo: #f2cdcd;
    --rosewater: #f5e0dc;
    --pink: #ffc9e3;
    --mauve: #cba6f7;
    --maroon: #eba0ac;
    --peach: #ffcca8;
    --yellow: #f9e2af;
    --teal: #8ddedc;
    --sky: #89dceb;
    --sapphire: #74c7ec;
    --lavender: #b4befe;

    /* ui accent colors */
    --ui-orange: #e6b450;
    --ui-green: #aad94c;
    --ui-blue: #39bae6;
    --ui-purple: #a37acc;
    --ui-teal: #7adbd3;
    --ui-lavender: #ada0f3;

    /* misc. */
    --border: #1a1f29;
    --shadow: rgba(0, 0, 0, 0.4);
    --hover: rgba(255, 255, 255, 0.05);
    --active: rgba(255, 255, 255, 0.1);
    --focus: #ffb454;
}

/* ----------------------------------
- background wallpaper, global font -
---------------------------------- */

html {
    background: var(--background) linear-gradient(var(--background) 50%, color-mix(in srgb, var(--accent) 25%, var(--background)) 50%);
    background-attachment: fixed;
}

body {
    background: linear-gradient(var(--background), color-mix(in srgb, var(--accent) 25%, var(--background)));
    min-height: calc(100vh - 4rem);
    font-family: var(--font-family);
    font-size: 1.125rem;
    text-transform: lowercase;
    margin: unset !important;
    /* idk why it does that */
}

/* text formatting and config stuff */

/* headings */
h1,
h1 a {
    color: var(--foreground);
    font-size: 2rem;
    text-decoration: none;
}

/* apparently having more than one h1 is against web standards
but i prefer how it looks so i just use the same styling again */
h2,
h2 a {
    color: var(--foreground);
    font-size: 2rem;
    text-decoration: none;
}

h3,
h3 a {
    font-size: 2rem;
}

/* text */
p,
li,
button {
    font-size: 1.125rem;

    .icon {
        transform: scale(1.13);
    }
}

/* links should look good i think */
a {
    font-size: 1.125rem;
    color: var(--link);
    transition: 0.2s;
}

a:hover {
    transition: 0.2s;
    text-shadow: 0em 0em 0.25em var(--link);
}

/* smol text */
small,
small a {
    font-size: 0.875rem;
}

/* lists need some styling */
li {
    margin-left: -.7em;
    padding-bottom: .5rem;
}

/* gay ass text */
.rainbow {
    animation: 2s linear infinite rainbow;
    -webkit-animation: 2s linear infinite rainbow;
    -moz-animation: 2s linear infinite rainbow;
}

/* heading 1 is also clickable */
h1 a:hover {
    text-decoration: underline;
}

/* the tabler icons svgs styling */
.tabler-icon,
.icon .icon-tabler {
    width: 1.3rem;
    height: 1.3rem;
    padding-bottom: .2rem;
    vertical-align: middle !important;
    color: var(--foreground) !important;
}

/* code (enforced monospace) */
.code {
    font-family: 'JetBrains Mono', monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif !important;
}

/* caption styled text */
.caption {
    font-size: small;
    opacity: .8;

    .section {
        font-size: smaller;
        opacity: .9;
    }
}

/* styled details elements */
details.styled {
    summary {
        span {
            padding-right: .6rem;
            transform: translateY(.1rem);
            vertical-align: middle;
        }
        .tabler--arrow-autofit-height:last-of-type {
            margin-left: auto;
        }
        background: linear-gradient(color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 20%, transparent));
        border-bottom: unset !important;
        cursor: pointer;
        padding: .5rem;
    }

    section {
        padding: 1.4rem;
        text-align: start !important;

        ul {
            margin: -.5rem -.5rem -.5rem -1rem;
        }
    }

    .card {
        background-color: var(--background);
        border-radius: 1rem;
        border: .1rem solid var(--border);
        margin-bottom: 1.4rem;
        padding: 1rem;

        h2 {
            margin-top: 0rem !important;
            margin-bottom: .4rem !important;
        }
    }
    .card.last {
        margin-bottom: unset !important;
    }

    .card.tilde-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
        margin-bottom: unset !important;
    }

    .card.question {
        p {
            margin: .6rem !important;
        }
    }

    .last {
        margin-bottom: .8rem;
    }

    background-color: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: .8rem .4rem .8rem .4rem;
    border: .15rem solid var(--accent);
    margin-top: 1rem;
    overflow: clip;
}

details.styled[open] {
    summary {
        border-bottom: .1rem solid var(--accent) !important;
    }
}

/* Dashed border */
hr.dashed {
    border: .1rem dashed var(--border);
}

/* Dotted border */
hr.dotted {
    border: .1rem dotted var(--border);
}

/* Solid border */
hr.solid {
    border: .1rem solid var(--border);
}

/* Rounded border */
hr.rounded {
    border: .2rem solid var(--border);
    border-radius: 5px;
} 

/* audio */
audio {
    border-radius: 3rem;
}

/* summary styling */
summary {
    display: flex;
}

/* button link styling */
.button {
    background-color: color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 1rem;
    color: var(--foreground);
    padding: .4rem;
    text-decoration: none;
    text-shadow: none;
    transition: all .2s;
    white-space: nowrap;
    line-height: 3rem;

    .icon {
        transform: scale(1.13) translateY(.7rem);
    }
}

.button:hover {
    background-color: var(--accent);
    color: var(--background);
    transition: all .2s;
}

/* focus styling */
:focus-visible {
    outline: .4rem solid var(--ui-purple) !important;
    border-radius: .2rem;
    z-index: 999999 !important;
}

/* image-button grid */
.img-buttons {
    text-align: center;
    font-size: 0px;

    img {
        margin-right: 5px;
        image-rendering: auto;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        transition: transform 0.2s;
    }

    img:hover {
        transform: scale(2);
    }
}

/* ---------------
- alt text popup -
--------------- */

.alt-popup {
    position: fixed;
    text-transform: none !important;
    background-color: color-mix(in srgb, var(--background) 85%, transparent);
    backdrop-filter: blur(.5rem);
    color: var(--foreground);
    padding: .5rem;
    border: solid .01rem var(--accent);
    border-radius: .5rem;
    font-size: 1rem;
    max-width: 30rem;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
}

/* ╭────────────────────────────────────────╮
/  │    ____                     _ _        │
/  │   / __ \ _ __ ___   ___  __| (_) __ _  │
/  │  / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │
/  │ | | (_| | | | | | |  __/ (_| | | (_| | │
/  │  \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
/  │   \____/                               │
/  ╰────────────────────────────────────────╯
/  @media / at-media - styling depending on browser configuration / settings 
/  other sorts of "Theming Jank" also goes in here for the sake of uniforming everything */

/* disable certain animations if user has animations disabled on their system */

@media (prefers-reduced-motion: reduce) {
    body {
        background: var(--background) !important;
        animation: unset !important;
        -moz-animation: unset !important;
        -webkit-animation: unset !important;
    }

    /* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
    * {
        transition: none !important;
        animation: unset !important;
        -moz-animation: unset !important;
        -webkit-animation: unset !important;
    }

    /* fedi icon on /me should keep its animation (temp, find a better solution later) */
    .fedi-icon {
        animation: opacity-blink 4s infinite !important;
    }
    .fedi-icon-2 {
        animation: opacity-blink-reverse 4s infinite !important;
    }
}

@media screen and (max-width: 1083px) {
    details.styled {
        section {
            /* reset margins for list on mobile view */
            ul {
                margin: unset !important;
            }
        }
    }
}