JOL/assets/css/app.css

@layer reset theme,layout;

@font-face {
    font-family: "BerkeleyMono";
    src: url("/fonts/BerkeleyMonoVariable-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "BerkeleyMonoItalic";
    src: url("/fonts/BerkeleyMonoVariable-Italic.woff2") format("woff2");
}

@layer reset {
    /*
    1. Use a more-intuitive box-sizing model.
    */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    /*
    2. Remove default margin
    */
    * {
        margin: 0;
    }
    /*
  Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
    */
    body {
        line-height: 1.5;
    }
    /*
    5. Improve media defaults
    */
    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
    }
    /*
    6. Remove built-in form typography styles
    */
    input,
    button,
    textarea,
    select {
        font: inherit;
    }
    /*
    7. Avoid text overflows
    */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    p {
        margin-bottom: 1em;
    }
}

@layer theme {
    :root {
        --header-font: BerkeleyMono;
        --body-font: BerkeleyMono;
        --main-accent-color: #ff0095;
        --main-background-color: #001626;
        --main-text-color: #ffffff;

        --default-grid-gap: 0vmax;
    }
}

@layout layout {
}

body {
    color: var(--main-text-color);
    background: var(--main-background-color);
    font-family: var(--header-font);
    margin: 1rem;
}

main {
    display: grid;
    gap: var(--default-grid-gap);
    grid-template-areas:
        "header"
        "sidebar"
        "content"
        "sidebar2"
        "footer";
    overflow: hidden;
    height: 90vh;
}

@media only screen and (min-width: 600px) {
    body {
        margin: 1rem;
    }

    main {
        grid-template-columns: 1fr 4fr;
        grid-template-areas:
            "header   header"
            "sidebar  content"
            "sidebar2 sidebar2"
            "footer   footer";
    }
}

@media only screen and (min-width: 1100px) {
    body {
        margin: 1rem 5rem;
    }

    main {
        grid-template-columns: min-content 3fr min-content;
        grid-template-areas:
            "header  header  header"
            "sidebar content sidebar2"
            "footer  footer  footer";
    }
}

header {
    grid-area: header;
    color: var(--main-accent-color);
}

div#sidebar {
    grid-area: sidebar;
}

div#sidebar2 {
    grid-area: sidebar2;
}

div#content {
    grid-area: content;
    padding: 0 1em;
}

footer {
    grid-area: footer;
}

.gridbox {
}