style_screen.css

@media screen {
    :root {
        --p1: 2.5px;
        --p2: calc(2 * var(--p1));
        --p4: calc(4 * var(--p1));
        --p5: calc(5 * var(--p1));
        --p6: calc(6 * var(--p1));
        --p8: calc(8 * var(--p1));
        --p16: calc(16 * var(--p1));
        --sb-color: #262626;
        --bg-color: rgb(219, 219, 219);
        --bullet-color: rgb(143, 143, 143);
        --scroll-bar-width: 30px;
        --content-width: 65vw;
        /* hack to cover scrollbar gap Chrome.... */
        --sidebar-width: calc(35vw - var(--scroll-bar-width));
        --sidebar-max-width: 40ch;
        --content-max-width: 100ch;
        --sidebar-max-width: 60ch;
        --html-width: calc(var(--content-width) + var(--sidebar-width) + var(--scroll-bar-width));
        --html-max-width: calc(var(--content-max-width) + var(--sidebar-max-width));
        --gutter: 15px;
        --sb-gutter: 5px;
        --sidebar-height: 200vh;
        font-size: 15px;
    }
}
@supports (scrollbar-width: none) {
    :root {
        --scroll-bar-width: 15px;
    }
}

/* Our "natural" breakpoints, as per resizing in developer tools, are:
 *
 *   - less than 800px and sidebar is too wide, content stops fitting at current
 *     font size
 *   -
 */
@media only screen and (min-width: 800px) and (max-width: 1024px) {
    /*  */
}
/* NOTE: Remove .front-page class. It is not needed, you can get the front page
 * with just e.g. page(:first-of-type) and the .front-page div causes problems
 * for making flex containers.
 */
/* @media only screen and (min-width: 1024px) { */
@media only screen {
    html {
        background-color: var(--sb-color);
        width: 100vw;
        position: relative;
        right: 65vw;
    }
    .backdrop {
        width: var(--html-width);
        max-width: var(--html-max-width);
        height: 100vh;
        margin: 0 auto;
        background-color: var(--bg-color);
        position: fixed;
        z-index: -1;
    }
    .all-content {
        background-color: var(--sb-color);
        width: inherit;
        max-width: inherit;
    }
    .main-content {
        background-color: white;
    }
    /* HEADER */
    .header {
        width: 100%;
        flex-shrink: 0;
    }

    .pages {
        background-color: white;
        width: var(--content-width);
        max-width: var(--content-max-width);
        position: relative;
        left: calc(100vw - var(--scroll-bar-width));
        top: 0;
        min-height: 100vh;
    }

    /* SIDEBAR */
    .sidebar {
        font-size: 0.8rem;
        width: var(--sidebar-width);
        max-width: var(--sidebar-max-width);
        position: fixed;
        height: 100vh;
        right: var(--content-width);
        background-color: var(--sb-color);
        color: var(--bg-color);
        overflow-y: scroll;
        overflow-x: hidden; /* disables strange scolling behaviour on iPhone */
        scrollbar-width: none;
        align-self: flex-start;
    }
    .stickifier {
        /* see https://stackoverflow.com/a/57830863, this is the ONLY thing that works when when
         * the height of the sidebar and content are also dynamic. Note also the height of zero
         * on the .stickifier is essential for this to work.
         */
        position: sticky;
        top: 0px;
        height: 0px;
        align-self: flex-start;
    }
    .sidebar .section:not(.subsection) {
        padding-top: var(--gutter);
        padding-left: var(--gutter);
        padding-right: var(--gutter);
        font-size: 0.8rem;
    }
    .sidebar .section:last-of-type {
        padding-bottom: var(--gutter);
    }
    .sidebar .section h1,
    .sidebar .section h2 {
        font-family: "Raleway";
        font-weight: 500;
    }
    .sidebar .section h1 {
        padding-bottom: var(--p2);
        font-size: 1.2rem;
    }
    .sidebar .section h1:not(:first-of-type) {
        padding-top: var(--p4);
    }
    .sidebar .section h2 {
        margin-top: 0;
        padding-top: var(--p2);
        padding-bottom: 5px;
        font-size: 1rem;
    }
    .sidebar .section h1:after {
        left: 0;
        width: calc(var(--sidebar-width) - 2 * var(--gutter));
        border-bottom: 1px solid var(--color);
    }
    .sidebar .subsection {
        margin-top: 0;
        padding-top: 0;
    }
    /* SIDEBAR.contact */

    /* PAGES */
    .pages {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: stretch;
    }
    .page {
        margin: 0 0 0 0;
        flex-grow: 1;
    }
    .page .section {
        padding-left: var(--p4);
        padding-top: var(--p4);
    }
    .page .about {
        padding-bottom: var(--p4);
    }
    .page .subsection {
        padding-top: var(--p2);
    }
    .page .subsection h2 {
        padding-bottom: var(--p2);
    }
    .page h1,
    .page h2 {
        font-weight: 400;
        color: rgb(1, 69, 145);
        font-family: Raleway;
        font-size: 1.2rem;
        border-bottom: 0;
    }
    .page h1 + h1,
    .page h2 + h2 {
        margin-top: var(--p4);
        padding-top: 0;
    }
    .page h1 {
        font-size: 1.2rem;
    }
    .page h2 {
        font-size: 1rem;
    }
    .page h1:after {
        /* add bottom border */
        left: 0;
        border-bottom: 1px solid black;
    }

    /* Page */
    .page .section {
        font-family: "Petrona";
        font-weight: 300;
    }
    .page .section:not(:first-of-type) {
        padding-top: var(--gutter);
    }
    .page > .section > p {
        line-height: 1.2;
    }
    .subsection .repo {
        padding-left: var(--p4);
        padding-bottom: var(--p2);
    }

    /* LISTS */
    /* Top level */
    .page section > ul {
        /* list-style: symbols(cyclic "-") outside; */
        list-style-type: none;
    }
    .page section > ul > li p {
        padding-left: var(--p4);
    } /* must precede rule below */
    .page section > ul > li p::first-line {
        padding-left: var(--p8);
    }
    ul + li {
        padding-top: var(--p2);
    }

    /* Second-level */
    .page section > ul > ul {
        padding-left: var(--p6);
        padding-bottom: var(--p2);
    }
    .page section > ul > ul li::marker {
        color: var(--header-bg-color);
    }
    .page section > ul > ul > li {
        border-left: 2px solid var(--bullet-color);
        padding-left: var(--p4);
        /* line-height: 0.1px; */
        margin-top: var(--p2);
        /* margin-bottom: var(--p1); */
        /* margin-left: calc(0 - var(--p4)); */
    }
    .page section > ul > ul > li > p {
        padding-bottom: var(--p1);
        font-size: 0.875rem;
        line-height: 0.7rem;
        /* padding-left: 20px; */
    }
    /* repo sections */
    .repo > a {
        font-size: 0.8rem;
    }

    /* citation flexboxing */
    .citation {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
        column-gap: var(--p4);
        padding-left: var(--p4);
    }
    .citation + .citation {
        padding-top: var(--p4);
    }
    .authors {
        /* do not show in print to save space */
        display: none;
    }

    .citation .title {
        order: 0;
        flex-basis: 85%;
    }
    .citation .year {
        order: 1;
        flex-basis: 10%;
        text-align: right;
    }
    .citation .journal {
        order: 2;
        font-size: 0.8rem;
    }
    .citation .link {
        order: 3;
        font-size: 0.8rem;
    }
}