warp/style.css

:root {
    /* UI Fonts */
    --ui-font-family: Inter, sans-serif;
    --code-font-family: Hack, monospace;
    font-family: var(--ui-font-family);
    font-feature-settings: 'liga' 1, 'calt' 1;

    /* UI Colors */
    --accent-1: rgba(255, 255, 255, 0.05);
    --accent-2: rgba(255, 255, 255, 0.1);
    --accent-3: rgba(255, 255, 255, 0.15);
    --widget-shadow:
        inset 0 0 0 1px var(--accent-3),
        0 0.2rem 2rem rgba(255, 255, 255, 0.1);
    --inner-border: inset 0 0 0 1px var(--accent-2);
    --accent-bg: linear-gradient(95deg, var(--accent-3), var(--accent-1));
    --august-pink: oklch(80.67% 0.1 0);
    --august-orange: oklch(80.67% 0.1 43);
    --accent-grad: linear-gradient(120deg in oklab, var(--august-pink) 10%, var(--august-orange) 80%);
    --font-color: white;
    color-scheme: dark;

    /* Text Size Calculation */
    --min-fs: 1;
    --max-fs: 1.5;
    --min-vw: 20;
    --max-vw: 45;
    --min-fs-rem: var(--min-fs) * 1rem;
    --max-fs-rem: var(--max-fs) * 1rem;
    --min-vw-rem: var(--min-vw) * 1rem;
    --slope: (var(--max-fs) - var(--min-fs)) * (100svi - var(--min-vw-rem)) / (var(--max-vw) - var(--min-vw));
    --font-size: clamp(var(--min-fs-rem), var(--min-fs-rem) + var(--slope), var(--max-fs-rem));
}

* {
    color: var(--font-color);
}

@supports (font-variation-settings: normal) {
    :root {
        font-family: InterVariable, sans-serif;
    }
}

::selection {
    background-color: color-mix(in srgb, white, transparent 70%);
}

a[href^='http'] {
    text-decoration: none;
    font-weight: 700;

    transition: color 0.3s ease;

    &:hover {
        color: var(--august-pink)
    }
}

.chevron {
    position: absolute;
    inline-size: 3rem;
    bottom: 5%;
    left: 50%;
    color: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%);
    animation: pullDown 5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    animation-delay: 4s;
}

@keyframes pullDown {

    from,
    to {
        bottom: 5%;
    }

    50% {
        bottom: 2%;
    }
}


body,
html {
    font-size: calc(var(--font-size) * 0.8);
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

.august-accent {
    background: var(--accent-grad);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.august-accent-underline {
    background-image: var(--accent-grad);
    color: black;
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
    background-position: left bottom;
}

body {
    display: flex;
    flex-direction: column;
}

code {
    font-family: var(--code-font-family);
}

.background {
    background: linear-gradient(160deg, #101010, #010101);
}

.dots {
    inline-size: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 0);
    background-size: 4rem 4rem;
    background-position: 0.1rem 0;
}

#typed {
    animation: blink-cursor 1s step-end infinite;
    padding-inline-end: 0.5ch;
}

.echo {
    color: var(--august-pink)
}

.page {
    --inner-padding: calc(var(--font-size) * 2);

    flex-direction: column;
    display: flex;
    position: relative;
    padding: var(--inner-padding);
    gap: var(--font-size);

    &:first-child,
    &:last-child {
        div {
            margin: auto;
        }

        block-size: calc(100svb - calc(2 * var(--inner-padding)));

        p {
            font-size: calc(var(--font-size));
        }

        h1 {
            margin-block: 0.5rem;
            font-size: calc(4 * var(--font-size));

            &.accent {
                font-size: calc(1.5 * var(--font-size));
                align-self: start;
            }
        }
    }

    &:nth-child(2) {
        align-items: center;

        .about-menu {
            flex: 0 1 50%;

            h1 {
                font-size: calc(3 * var(--font-size));
                max-block-size: 2ch;
            }

            p {
                font-size: calc(var(--font-size) * 1.8);
                font-weight: 300;
                text-wrap: pretty;
                padding: 1rem;

                a {
                    text-decoration: none;
                    padding-inline: 0.25rem;
                    font-weight: 500 !important;
                    background-size: 100% 2px;
                    background-image: var(--accent-grad);
                    background-repeat: no-repeat;
                    background-position: left bottom;
                    transition: background-size 0.3s ease, color 0.3s ease;
                }

            }
        }



        #about-display {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 1 50%;
            block-size: 90%;

            &>:first-child {
                pointer-events: all;
                opacity: 1;
            }

            &>:not(:first-child) {
                pointer-events: none;
                opacity: 0;
            }
        }


        .about {
            display: flex;
            position: absolute;
            flex-direction: column;
            justify-content: space-between;
            inline-size: 80%;
            block-size: 100%;

            &>* {
                border-radius: 1rem;
            }

            img {
                max-inline-size: 100%;
            }

            &>:first-child {
                max-block-size: 100%;
                block-size: 100%;
                overflow: hidden;
            }

            p {
                font-size: var(--font-size);
                padding: 1rem;
            }

            .train {
                background: white;
                padding: 1rem;
            }

            .george {
                background-color: #110500;
                padding: 2.5rem 1rem;

                & canvas {
                    inline-size: 100%;
                    object-fit: contain;
                    image-rendering: pixelated;
                    z-index: -10;

                    /* this is a bug with rust_minifb, 
       it makes 2 canvases for some reason... */
                    &:nth-child(2) {
                        display: none;
                    }

                }
            }
        }
    }
}

#manpage-container {
    display: flex;
    overflow: hidden;
}

#man-demo {
    display: flex;
    gap: var(--font-size);


    a {
        pointer-events: none;
    }

    .terminal {
        background: black;
        position: relative;
        display: flex;
        justify-content: end;
        flex-direction: column;
        padding: var(--font-size);
        min-block-size: calc(var(--font-size) * 6);

        &:not(:only-child) {
            transition: flex 0.8s;
            flex: 0 0 50%;
        }

        &:only-child {
            flex: 1;
        }

        p {
            margin: 0;

            &:nth-child(1) {
                color: lightblue;
            }
        }

        input,
        p {
            font-size: inherit;
            font-family: var(--code-font-family);
        }


        #results {
            div {
                margin-block: 1rem;
                padding: 0.25rem 0.5rem;
                overflow: hidden;
            }

            p {
                margin-block: 0.5rem;

                code {
                    color: var(--august-orange)
                }
            }

            .error {
                background: #ff615920;
                border-inline-start: solid 2px #ff6159;
            }

            code {
                color: lightblue;
            }
        }


        form {
            &>input {
                inline-size: 100%;
                background: transparent;
                outline: none;
                border: none;
            }

            code {
                color: pink;
            }
        }
    }

    #manpage-widget {
        --inner-padding: calc(var(--font-size)) calc(var(--font-size));
        overflow-y: auto;
        overflow-x: hidden;
        padding: 1rem;

        &>* {
            margin-block-start: 0;
            padding: var(--inner-padding);
        }

        a {
            pointer-events: none;

            ::after {
                content: none;
            }
        }


        #SYNOPSIS {
            margin-block-start: 0
        }


        h1 {
            font-family: InterVariable, sans-serif;
            font-size: var(--font-size);
            font-weight: 400;
        }

        &>h1 {
            position: sticky;
            top: 0;
            background: #000a;
            border-radius: 1rem;
            box-shadow: var(--inner-border);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(0.5rem);

            &::before {
                content: 'man';
                display: block;
                align-self: start;
                margin-block: 0 1rem;
                font-size: calc(var(--font-size) * 0.8);
                font-weight: 300;
                text-align: center;
                max-inline-size: 4ch;
                border-radius: 0.3rem;
                box-shadow: var(--inner-border);
                background: var(--accent-bg);
                padding: 0.2rem;
            }
        }


        & .manual-text>section:first-child {
            display: none;
        }

        section>h1,
        section>h2 {
            text-transform: lowercase;
            font-weight: 300;
            font-style: italic;
        }

        & * {
            text-decoration: none;
        }

        p:not(:has(*)) {
            background: none;
            border: none;
        }

        .Bl-tag dd {
            margin-block-end: 1rem;
        }

        b,
        i,
        code,
        pre {
            font-family: var(--code-font-family);

        }

        table {
            display: block;
            overflow: auto;

            tbody {
                display: inline-block;
            }

            &:is(.head, .foot) {
                display: none;
            }

            &.Nm tr {
                display: block;
                gap: 1rem;

            }

            td:nth-child(1) {
                padding-inline-end: 0.5rem;
            }

            td:not(:has(*)) {
                display: none;
            }

        }

        section.Sh:nth-child(2) .Pp,
        b:not(section.Sh:nth-child(2) .Pp b, dt b, pre b),
        pre,
        dt {
            background: #fff3;
            padding: 0.1rem 0.4rem;
            border-radius: 0.3rem;
        }

        .Pp {
            display: inline-block;
        }

        pre {
            overflow: auto;
        }

        dt {
            display: inline-block;
            margin-block: 0.4rem;
        }

    }

}

.accent {
    --spacing: calc(0.25 * var(--font-size));
    display: inline-block;
    font-weight: 300;
    border-radius: 0.3rem;
    padding: var(--spacing) calc(var(--spacing) * 2);
    box-shadow: var(--inner-border);
    background: var(--accent-bg);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
}

.widget {
    position: relative;
    background: black;
    border-radius: 1rem;
    box-shadow: inset 0 0 0 1px var(--accent-3),
        0 0.2rem 2rem rgba(255, 255, 255, 0.1);

    .traffic-lights {
        --spacing: calc(0.5 * var(--font-size));
        position: absolute;
        top: var(--spacing);
        left: calc(var(--spacing) * 1.25);
        user-select: none;

        .dot {
            display: inline-block;
            inline-size: var(--spacing);
            block-size: var(--spacing);
            margin-inline-end: 0.3rem;
            background: red;
            border-radius: 100%;
        }

        .red {
            background: #ff6159;
        }

        .yellow {
            background: #ffbd2e;
        }

        .green {
            background: #28c941;
        }
    }
}

@keyframes blink-cursor {

    from,
    to {
        border-inline-end: 0.15rem solid transparent;
    }

    50% {
        border-inline-end: 0.15rem solid white;
    }

}


@media all and (max-width: 60rem) {
    .page {
        &:nth-child(2) {
            flex-direction: column;

            .about {
                margin: 5svb auto;
                inline-size: 90%;
                position: relative;
                opacity: 1 !important;
            }

            #about-display {
                display: contents;
            }
        }
    }


    #man-demo {
        max-block-size: 80svb;
        flex-direction: column;

        #manpage-widget>h1 {
            position: relative;
        }
    }
}

@media all and (min-width: 60rem) {

    body {
        scroll-snap-type: block mandatory;
    }

    .page {
        flex-direction: row;
        block-size: calc(100svb - calc(2 * var(--inner-padding)));
        scroll-snap-align: center;
        scroll-snap-stop: always;

        .page-desc {
            h1 {
                font-size: calc(var(--font-size)* 1.7);
            }

            p {
                font-size: calc(var(--font-size)* 1.1);
                max-inline-size: 24ch;
            }
        }

    }
}

@media all and (min-width: 60rem) and (max-width: 80rem) {
    .page {
        &:nth-child(3) {
            flex-direction: row;
            grid-template-columns: 4;
        }

        &:nth-child(2) {
            #about {
                font-size: calc(var(--font-size) * 1.2);
            }

            flex-direction: row;
            grid-template-columns: 4;
        }

        .page-desc {

            h1 {
                font-size: calc(var(--font-size)* 1.3);
            }

            p {
                font-size: calc(var(--font-size));
                max-inline-size: 24ch;
            }
        }
    }

    #man-demo {
        min-inline-size: 50vi;
        inline-size: 50vi;
        flex-direction: column-reverse;

        .terminal:not(:only-child) {
            transition: flex 0.8s;
            flex: 0;
        }

    }
}



@media all and (min-width: 80rem) {

    .page:nth-child(3) {
        justify-content: space-between;
    }

    #man-demo {
        flex-direction: row;
        flex: 1;
        max-inline-size: 60%;
        justify-self: flex-end;
    }
}


@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes flex-in {
    from {
        flex: 0;
    }

    to {
        flex: 1;
    }
}