site/style.css

/*
i use catppuccin color schemes because jod i LOVE catppuccin
*/
@media (prefers-color-scheme: light) {
    /*
    catppuccin latte
    */
    :root {
        --rosewater: #dc8a78;
        --flamingo: #dd7878;
        --pink: #ea76cb;
        --mauve: #8839ef;
        --red: #d20f39;
        --maroon: #e64553;
        --peach: #fe640b;
        --yellow: #df8e1d;
        --green: #40a02b;
        --teal: #179299;
        --sky: #04a5e5;
        --sapphire: #209fb5;
        --blue: #1e66f5;
        --lavender: #7287fd;
        --text: #4c4f69;
        --subtext1: #5c5f77;
        --subtext0: #6c6f85;
        --overlay2: #7c7f93;
        --overlay1: #8c8fa1;
        --overlay0: #9ca0b0;
        --surface2: #acb0be;
        --surface1: #bcc0cc;
        --surface0: #ccd0da;
        --base: #eff1f5;
        --mantle: #e6e9ef;
        --crust: #dce0e8;

        /* wallpaper */
        --background-image: url("./assets/backgrounds/plasma-6-day-mocha.png");
    }
}

@media (prefers-color-scheme: dark) {
    /*
    catppuccin mocha
    */
    :root {
        --rosewater: #f5e0dc;
        --flamingo: #f2cdcd;
        --pink: #f5c2e7;
        --mauve: #cba6f7;
        --red: #f38ba8;
        --maroon: #eba0ac;
        --peach: #fab387;
        --yellow: #f9e2af;
        --green: #a6e3a1;
        --teal: #94e2d5;
        --sky: #89dceb;
        --sapphire: #74c7ec;
        --blue: #89b4fa;
        --lavender: #b4befe;
        --text: #cdd6f4;
        --subtext1: #bac2de;
        --subtext0: #a6adc8;
        --overlay2: #9399b2;
        --overlay1: #7f849c;
        --overlay0: #6c7086;
        --surface2: #585b70;
        --surface1: #45475a;
        --surface0: #313244;
        --base: #1e1e2e;
        --mantle: #181825;
        --crust: #11111b;

        /* wallpaper */
        --background-image: url("./assets/backgrounds/plasma-6-night-mocha.png");
    }
}

/*
shell aliasing ass
*/
:root {
    --bg: var(--base);
    --fg: var(--text);
    --accent: var(--green);
}

/*
font config, JetBrains Mono
*/
@font-face {
    font-family: "JetBrains Mono";
    src:
        local("JetBrains Mono"),
        local("JetBrainsMono Nerd Font"),
        url("./assets/fonts/JetBrainsMono/fonts/ttf/JetBrainsMono-Regular.ttf") format("opentype"),
        url("./assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "JetBrains Mono";
    src:
        local("JetBrains Mono"),
        local("JetBrainsMono Nerd Font"),
        url("./assets/fonts/JetBrainsMono/fonts/ttf/JetBrainsMono-Bold.ttf") format("opentype"),
        url("./assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Bold.woff2") format("woff");
    font-weight: bold;
    font-style: bold;
}
@font-face {
    font-family: "JetBrains Mono";
    src:
        local("JetBrains Mono"),
        local("JetBrainsMono Nerd Font"),
        url("./assets/fonts/JetBrainsMono/fonts/ttf/JetBrainsMono-Italic.ttf") format("opentype"),
        url("./assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Italic.woff2") format("woff");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: "JetBrains Mono";
    src:
        local("JetBrains Mono"),
        local("JetBrainsMono Nerd Font"),
        url("./assets/fonts/JetBrainsMono/fonts/ttf/JetBrainsMono-BoldItalic.ttf") format("opentype"),
        url("./assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-BoldItalic.woff2") format("woff");
    font-weight: bold;    
    font-style: italic;
}

/*
font config, Lexend Deca
*/
@font-face {
    font-family: "Lexend Deca";
    src:
        local("Lexend Deca"),
        local("Lexend"),
        url("./assets/fonts/LexendDeca/static/LexendDeca-Regular.ttf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Lexend Deca";
    src:
        local("Lexend Deca"),
        local("Lexend"),
        url("./assets/fonts/LexendDeca/static/LexendDeca-Bold.ttf") format("opentype");
    font-weight: bold;
    font-style: bold;
}

/*
background wallpaper, font
*/
body {
    background-color: var(--crust);
    background: var(--background-image) no-repeat center center fixed;
    background-size: cover;

    font-family: "JetBrains Mono";
    font-size: 18px;
}

/*
styling of the terminal windows
*/
.terminal {
    /* the titlebar of the terminals */
    .term-titlebar {
        display: grid;
        grid-template-columns: 2fr auto 2fr;;
        grid-template-areas:
            "term-icon term-title term-buttons";

        margin: -10px 0px -20px;

        /* terminal icon */
        img {
            width: 22px;
            height: 22px;
            align-self: center;
        }
        
        /* title text */
        p {
            font-family: "Lexend Deca";
            font-size: 16px;
            
            grid-column: 2;
        }

        /* window buttons */
        div {
            display: flex;

            height: 22px;
            align-self: center;
            margin-left: auto;
            
            #minimize-btn {
                width: 22px;
                height: 22px;

                background: var(--surface2);
                border-radius: 50%;

                transition: .2s background;
            }

            #maximize-btn {
                width: 22px;
                height: 22px;

                background: var(--surface2);
                border-radius: 50%;
                margin-left: 10px;
                
                transition: .2s background;
            }

            #close-btn {
                width: 22px;
                height: 22px;

                background: var(--surface2);
                border-radius: 50%;
                margin-left: 10px;

                transition: .2s background;
            }
        }
    }

    background-color: var(--base);
    color: var(--text);

    border: var(--mantle) solid 3px;
    border-radius: 20px;

    max-width: 48em;
    padding: 14px 24px;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.4em;

    transition: .2s border-color;

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.terminal:hover {
    .term-titlebar {
        div {
            #minimize-btn {
                background: var(--yellow);
                transition: .2s background;
            }

            #maximize-btn {
                background: var(--green);
                transition: .2s background;
            }

            #close-btn {
                background: var(--red);
                transition: .2s background;
            }
        }
    }
    border-color: var(--green);

    transition: .2s border-color;
}

/*
text formatting and config stuff
font-family and <p> is set under .terminal
*/

/* the only headings i use */
h1 {
    font-size: 32px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 20px
}
/* TEXT */
p, li {
    font-size: 18px;
}
/* links should look good i think */
a {
    font-size: 18px;
    color: var(--green);
}
/* smol text */
small {
    font-size: 14px;
}
/* lists need some styling */
li {
    margin-left: -1em;
    padding-bottom: 18px;
}
/* gay ass text */
.rainbow {
    animation: 2s linear infinite rainbow;
}

/*
about me section/terminal
*/
.terminal:first-child {
    margin-top: 3.8em;
}

article#sneexy {
    img {
        width: 256px;
        height: 256px;

        animation: 3s linear infinite spin-y;

        margin-top: 1em;
        margin-bottom: 1em;
    }

    h1 {
        margin-bottom: 1px;
    }

    p {
        margin-top: 3px;
    }

    text-align: center;
}

/*
footer/credits
*/
footer {
    p, a {
        text-align: center;
        font-size: 16px;
        margin: .4em 0px .4em;
    }
    img {
        max-width: 30%;
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }
}

/*
animations
*/
@keyframes spin-y {
    /* values: 128px, 256px, 348px, 396px*/
    0% { transform: perspective(396px) rotateY(0); }
    100% { transform: perspective(396px) rotateY(360deg); }
}
@keyframes rainbow {
    0% {filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
    100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
}

/*
modify widths and spacing depending on the size of the display
*/
@media screen and (max-width: 59em) {
    .terminal:first-child {
        margin-top: 0.4em;
    }
    .terminal {
        .term-titlebar {
            margin: -16px 0px -24px;
        }
        margin-bottom: 0.7em;
        padding: 10px 16px;
    }
}