blog-static/themes/vanilla/assets/scss/sidenotes.scss

@import "style.scss";

$sidenote-width: 30rem;
$sidenote-offset: 1.5rem;
$sidenote-padding: 1rem;
$sidenote-highlight-border-width: .2rem;

.sidenote {
    &:hover {
        .sidenote-label {
            background-color: $primary-color;
            color: white;
        }

        .sidenote-content {
            border: $sidenote-highlight-border-width dashed;
            padding: $sidenote-padding -
                ($sidenote-highlight-border-width - $standard-border-width);
            border-color: $primary-color;
        }
    }
}

.sidenote-label {
    border-bottom: .2rem solid $primary-color;
}

.sidenote-checkbox {
    display: none;
}

.sidenote-content {
    display: block;
    position: absolute;
    width: $sidenote-width;
    margin-top: -1.5rem;

    &.sidenote-right {
        right: 0;
        margin-right: -($sidenote-width + $sidenote-offset);
    }

    &.sidenote-left {
        left: 0;
        margin-left: -($sidenote-width + $sidenote-offset);
    }

    @media screen and
        (max-width: $container-width + 2 * ($sidenote-width + 2 * $sidenote-offset)) {
        position: static;
        margin-top: 1rem;
        margin-bottom: 1rem;
        width: 100%;
        display: none;

        .sidenote-checkbox:checked ~ & {
            display: block;
        }

        &.sidenote-left {
            margin-left: 0rem;
        }

        &.sidenote-right {
            margin-right: 0rem;
        }
    }

    @include bordered-block;
    padding: $sidenote-padding;
    box-sizing: border-box;
    text-align: left;
}