xscratch/sass/style.sass

@import "reasonable-colors"
    
@mixin padding-horiz($amount) // this was probably unnecessary lmao
    padding-left: $amount
    padding-right: $amount

@font-face 
    font-family: "CMU Typewriter Text Roman"
    src: local("CMU Typewriter Text Roman"), url("cmuntt-webfont.woff") format("woff")

@font-face
    font-family: "CMU Serif Roman"
    src: local("CMU Serif Roman"), url("cmunrm-webfont.woff") format("woff")

@font-face
    font-family: "CMU Serif Bold"
    src: url("cmunbx-webfont.woff")

body
    display: grid
    grid-template-areas: "sidebar content" "footer content"

    grid-template-rows: 1fr 50px
    grid-template-columns: 20rem 1fr

    grid-column-gap: 2rem

    height: 100vh

    margin: 0
    padding-right: 1rem

    background-color: #e9e9dc

    font-family: "CMU Serif Bold", serif
    font-size: 14pt

    div.debug
        padding-left: 2ch 

    div.sections
        display: flex
        flex-flow: column nowrap
        padding-bottom: 0.5rem
        border-bottom: 2px solid silver
        margin-bottom: 0.5rem

    a
        color: #0053a7
        text-decoration: underline 0.1em rgba(0, 83, 167, 0)
        transition: text-decoration-color 300ms ease-in-out

        &:hover
            text-decoration-color: rgba(0, 83, 167, 0.5)
        
        &:visited
            color: #4520f7

        &:active
            color: #db2b07

        &.stealth
            color: inherit
    
    figure
        max-width: 100%

        img
            max-width: 100%
            object-fit: cover
        
        > *:nth-child(2) // todo: clean this up maybe
            display: flex
            flex-flow: row nowrap
            justify-content: space-between
            gap: 2rem
            padding-top: 0.5rem
            padding-bottom: 0.5rem
            border-bottom: 1px solid silver
            margin-bottom: 1rem

            a
                white-space: nowrap

        @for $i from 2 through 5 
            > .gallery#{$i}
                display: grid
                grid-template-columns: repeat(#{$i}, 1fr)
                gap: 1rem
                width: 100%

                img
                    aspect-ratio: 1 / 1
                    object-fit: cover
                    height: 100%
                    min-width: 100%
        

    article
        @include padding-horiz(2rem)
        margin: 1rem 0
        grid-area: content
        overflow-y: scroll
        background-color: #f9f9e8
        background-image: url("/paper53.png"), url("/paper89.png"), url("/paper59.png"), url("/paper67.png")
        background-attachment: local
        max-width: 80rem
        box-shadow: 0.2rem 0.2rem 1rem 0 rgba(0, 0, 0, 0.3)

        font-family: "CMU Typewriter Text Roman", serif
        font-size: 16pt

        > pre
            padding: 1rem
            font-size: 13pt
            max-height: 40rem
            overflow: scroll

            background-color: rgba(0, 0, 0, 0.007)
            box-shadow: 0 0 0.75rem 0 rgba(0, 0, 0, 0.1) inset

            &[data-linenos]
                padding: 1rem 0.5rem

            table td
                padding: 0

                &:first-of-type
                    text-align: right
                    user-select: none
                    padding-right: 0.5rem
                    border-right: 2px solid rgba(0, 0, 0, 0.2)

                    mark
                        background: none
                
                &:last-of-type
                    padding-left: 0.5rem

            mark
                display: block
                background-color: rgba($color-yellow-2, 0.3)
                font-weight: bold

            code
                font-family: "CMU Typewriter Text Roman", monospace
                @import "code-highlight-light"
        
        blockquote
            border-left: 1px solid silver
            margin-left: 2rem
            padding-left: 0.5rem

        .inset-box
            background-color: rgba(0, 0, 0, 0.02)
            box-shadow: 0 0 0.75rem 0 rgba(0, 0, 0, 0.1) inset
            max-width: 100%
            padding: 1rem
            margin: 1rem 0

        .note
            display: flex
            flex-flow: row nowrap
            justify-content: left
            gap: 2rem

        .shark
            padding: 0
            display: grid
            grid-template-columns: 5rem 1fr
            
            .shonk
                width: 100%
            
            div
                padding: 1rem
                

    aside
        @include padding-horiz(1rem)
        padding-top: 1rem
        grid-area: sidebar
        overflow-y: scroll
        background-color: #f2f2e1
        border-bottom: 2px solid rgba(0, 0, 0, 0.1)
        display: flex
        flex-flow: column nowrap
        gap: 0.5em

        ul
            margin: 0

    footer
        grid-area: footer
        display: flex
        justify-content: center
        align-items: center
        background-color: #f2f2e1
        height: 50px

    .sidebyside
        display: flex
        flex-flow: row nowrap
        justify-content: space-between

    #theme-toggle
        cursor: pointer
    

@media print 
    body
        grid-template-areas: "sidebar" "content" "footer"
        grid-template-columns: 1fr
        grid-template-rows: min-content 1fr auto

        aside
            break-after: always

        article
            overflow-y: visible
            box-shadow: none

            pre
                overflow: visible
                max-height: none

        figure
            break-inside: avoid
        
        #page-external-reading
            display: none

        #page-toc::marker
            content: ""


@media screen and (max-width: 1800px) 
    body
        article
            max-width: 60rem


@media screen and (max-width: 1400px)
    // at this point the page has roughly the same
    // padding on the left and right side
    body
        grid-template-columns: 15rem 1fr


@media screen and (max-width: 980px)
    body
        // height: revert
        display: flex
        flex-flow: column nowrap
        padding-right: 0

        aside
            overflow-y: revert
            border-bottom: none
            flex-shrink: 0
    
        article
            margin: 0
            overflow-y: revert
            flex-grow: 1

        footer
            flex-shrink: 0
        
@media screen and (max-width: 480)
    body
        font-size: 12pt

        article
            font-size: 15pt
            @include padding-horiz(1rem)