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: var(--accent);

        /* 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: var(--accent);

    /* 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, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--foreground);
    margin-top: .5rem;
    text-decoration-color: transparent;
    transition: .2s;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    text-decoration-color: var(--accent);
    text-decoration-thickness: .3rem !important;
    text-decoration: underline;
    transition: .2s;
}

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

h2,
h2 a {
    font-size: 1.8rem;
}

h3, h4,
h3 a, h4 a {
    font-size: 1.4rem;
}

/* text */
p,
li,
button {
    .icon {
        transform: scale(1.13);
    }
}

/* links should look good i think */
a {
    color: var(--foreground);
    text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
    text-decoration-thickness: 0.1em;
    transition: 0.2s;

    &:hover {
        color: var(--link);
        text-decoration-color: var(--accent);
        text-decoration-skip-ink: none;
        text-decoration-thickness: .3em;
        transition: 0.2s;
    }
}

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

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

/* text with "title", little hover-over info tibblets */
._info {
    cursor: help;
    text-decoration-color: color-mix(in srgb, var(--foreground) 40%, transparent);
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 0.1em;
    transition: 0.2s;

    &:hover {
        text-decoration-color: color-mix(in srgb, var(--foreground) 80%, transparent);
        text-decoration-skip-ink: none;
        transition: 0.2s;
    }
}

/* 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) 3%, transparent), color-mix(in srgb, var(--accent) 15%, transparent));
        border-bottom: unset !important;
        cursor: pointer;
        padding: .65rem;
    }

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

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

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

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

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

/* badge text styling */
.badge {
    border-radius: .2rem;
    border: .1rem solid var(--accent);
    color: var(--link);
    font-size: .8rem;
    font-weight: normal;
    padding: .15rem;
}

/* card styling */
.card {
    background-color: color-mix(in srgb, var(--background) 95%, white);
    border-radius: 1rem;
    border: .2rem solid var(--border);
    gap: .5rem;
    margin-bottom: 1.4rem;
    padding: 1rem;

    h4 {
        margin-top: unset !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;
    }
}

/* 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;
}

/* text formatting, like github kinda */
.info-box {
    padding: .5rem;
    border: .1rem solid;
    border-radius: .4rem;

    &.info {
        background-color: color-mix(in srgb, var(--blue) 10%, transparent);
        border-color: var(--blue);
        .icon { color: var(--blue); }
    }

    &.warn {
        background-color: color-mix(in srgb, var(--orange) 10%, transparent);
        border-color: var(--orange);
        .icon { color: var(--orange); }
    }
}

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

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

/* button link styling */
.button {
    background-color: color-mix(in srgb, var(--accent) 25%, 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(--foreground);
    transition: all .2s;
}

.button-container {
    margin-bottom: unset !important;
}

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

/* image-button grid */
.img-buttons {
    align-items: normal;
    display: flex;
    flex-wrap: wrap;
    font-size: 0 !important;
    gap: 5px;
    justify-content: center;
    margin-inline: auto;

    img {
        height: 31px;
        image-rendering: crisp-edges !important;
        margin: unset !important;
        transition: transform 0.2s;
        width: 88px;
    }

    .generic {
        align-content: center;
        background-color: color-mix(in srgb, var(--background) 90%, white);
        border: solid .15rem;
        box-sizing: border-box;
        color: var(--foreground);
        font-size: .95rem !important;
        height: 31px;
        text-align: center;
        transition: transform 0.2s;
        width: 88px;
    }

    .generic:hover, img:hover {
        transform: scale(2);
    }
}

/* spoiler text */
._spoiler {
    filter: blur(.4rem) contrast(200%);
    transition: 0.2s;

    &:hover {
        filter: unset !important;
        transition: 0.2s;
    }
}

/* ------------------
- nsfw toggle group -
------------------ */

.nsfw-toggle-holder {
    background-color: color-mix(in srgb, var(--background) 95%, white);
    border-radius: 1rem;
    border: .2rem solid var(--border);
    color: var(--foreground);
    padding: .5rem;
    position: fixed;
    max-width: 30rem;
    margin-left: .4rem;
    z-index: 30;
    right: .4rem;
    top: 3rem;
    transition: 0.2s;

    /* inital "shrunken" state */
    opacity: .5;
    scale: .75;
    transform-origin: top right;


    /* hide captions when unhovered */
    .caption {
        display: none;
    }

    &:hover {
        transition: 0.2s;

        /* hovered "full" state */
        opacity: 1;
        scale: 1;

        .caption {
            opacity: .9;
            display: unset;
        }
    }

    .nsfw-toggle, .spoil-nsfw-toggle {
        display: block;
    }

    /* hide the spoil option if nsfw itself is disabled */
    .spoil-nsfw-toggle {
        display: none;
        margin-top: 1rem;
    }

    &:has(input[type="checkbox"]#view-nsfw-content:checked) .spoil-nsfw-toggle {
        display: inherit !important;
    }

    /* shrink it even more if on a small display */
    @media screen and (max-width: 580px) {
        scale: .5;
    }
}

/* _is-nsfw class for elements that are "nsfw" - will be hidden and spoiled by default */
._is-nsfw {
    display: none;
}

/* inverse to remove elements if they aren't nsfw while the option is toggled */
._is-nsfw-inverse {
    display: inherit;
}

/* show if enabled */
html:has(input[type="checkbox"]#view-nsfw-content:checked) {
    ._is-nsfw {
        display: inherit;
    }

    ._is-nsfw-inverse {
        display: none;
    }
}

/* blue/spoiler if enabled */
html:has(input[type="checkbox"]#spoil-nsfw-content:checked) {
    ._is-nsfw {
        filter: blur(.4rem) contrast(200%);
        transition: 0.2s;

        &:hover {
            filter: unset !important;
            transition: 0.2s;
        }
    }
    
    /* _always-show to ignore the "spoiler" option */
    ._always-show {
        filter: unset !important;
    }
}

/* ---------------
- 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;
            }
        }
    }
}

/* different styling for elements in dark mode 
   must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */
html:not([data-theme="light"]) {
    @media (prefers-color-scheme: dark) {
        .button:hover {
            color: var(--background);
        }
    }
}

html[data-theme="dark"] {
    .button:hover {
        color: var(--background);
    }
}