Hakysidian/css/sidenotes.css

/*
This file is copied from
https://github.com/slotThe/slotThe.github.io/blob/main/css/sidenotes.css
with minor modifications made by Yu Cong.

The original author is Tony Zorman.

Extracted from:

    https://github.com/edwardtufte/tufte-css

   and modified to fit my website's theme.
*/

body {
    counter-reset: sidenote-counter;
}

.sidenote,
.marginnote,
.marginnote-left {
    position: relative;
    float: right;
    clear: right;
    width: 36%;
    margin-top: 0.45rem;
    margin-right: -42%;
    margin-bottom: 0;
    padding: 0.85rem 1rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--color-shadow-soft);
    backdrop-filter: blur(14px);
    vertical-align: baseline;
    font-size: 0.82em;
    line-height: 1.45;
    text-align: left;
}

@media (max-width: 1200px) {
    .sidenote,
    .marginnote,
    .marginnote-left {
        width: 33%;
        margin-right: -40%;
    }
}

.marginnote-left {
    position: relative;
    float: left;
    clear: left;
    width: 25%;
    margin-left: -32%;
    text-align: right;
}

/* The first condition is for the case of a left-aligned layout
   (on a smaller screen), and the second condition for a more centered
   layout on a larger screen. */
@media (max-width: 1349px), (min-width: 1367px) and (max-width: 1620px) {
    .marginnote-left {
        width: 30%;
        margin-left: -33%;
    }
}

.sidenote > :first-child,
.marginnote > :first-child,
.marginnote-left > :first-child {
    margin-top: 0;
}

.sidenote > :last-child,
.marginnote > :last-child,
.marginnote-left > :last-child {
    margin-bottom: 0;
}

.sidenote code {
    font-size: 0.92em;
}

/* Block code in side and margin notes gets a vertical scrollbar on some
   browsers; disable that. */
div .marginnote pre,
div .sidenote pre {
    margin: 0.75rem 0;
    overflow-y: hidden;
}

.sidenote-number {
    color: var(--color-link);
    counter-increment: sidenote-counter;
    font-family: "IosevkaC", sans-serif;
}

.sidenote-number:after,
.sidenote:before {
    position: relative;
    vertical-align: baseline;
    color: var(--color-link);
    font-family: "IosevkaC", sans-serif;
}

.sidenote-number:after {
    content: counter(sidenote-counter);
    top: -0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Properly position sidenote number and adjust position of sidenote
   paragraphs:
    https://github.com/edwardtufte/tufte-css/issues/93#issuecomment-670695382
*/
.sidenote::before {
    content: counter(sidenote-counter) " ";
    position: absolute;
    top: -0.55rem;
    right: calc(100% + 0.5em);
    font-size: 0.8rem;
    font-weight: 700;
}

.sidenote p {
    margin: 0.85em 0;
}

input.margin-toggle {
    display: none;
}

label.sidenote-number {
    display: inline-block;
    max-height: 2rem;
}

label.margin-toggle:not(.sidenote-number) {
    display: none;
    color: var(--color-link);
    font-family: "IosevkaC", sans-serif;
}

.iframe-wrapper {
    position: relative;
    height: 0;
    padding-top: 25px;
    padding-bottom: 56.25%;
    overflow: hidden;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--color-shadow-soft);
}

.iframe-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 1200px) {
    label.margin-toggle:not(.sidenote-number) {
        display: inline;
    }

    .sidenote,
    .marginnote,
    .marginnote-left {
        display: none;
    }

    /* Linkify sidenotes iff they are clickable. */
    .margin-toggle,
    .sidenote-number:after {
        color: var(--color-link);
        text-decoration: underline;
        text-decoration-color: var(--color-link-line);
    }

    .margin-toggle:checked + .sidenote,
    .margin-toggle:checked + .marginnote,
    .margin-toggle:checked + .marginnote-left {
        position: relative;
        float: left;
        left: 1rem;
        clear: both;
        display: block;
        width: 95%;
        margin: 1rem 2.5%;
        text-align: left;
    }

    label {
        cursor: pointer;
    }
}