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: TT2020
    src: url("TT2020StyleE-Regular.woff2")

@import url("iosevka.css")

@import url("iosevka-etoile.css")

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

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

    grid-column-gap: 2rem

    height: 100vh

    margin: 0
    padding-right: 1rem

    background-color: #e9e9dc

    font-family: "Iosevka Etoile Web", sans-serif
    font-size: 13pt

    div.debug
        padding-left: 2ch 

    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
        
        > div
            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

    nav
        @include padding-horiz(1rem)
        grid-area: nav

        height: 50px
        display: flex
        flex-flow: row nowrap
        justify-content: space-between
        align-items: center
        background-color: #f2f2e1

    
    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: 60rem
        box-shadow: 0.2rem 0.2rem 1rem 0 rgba(0, 0, 0, 0.3)

        font-family: "TT2020", 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: "Iosevka Web", monospace
                font-stretch: extended
                font-feature-settings: "ss05" 1, "cv89" 2
                @import code-highlight-light

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

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

    #theme-toggle
        cursor: pointer
    
    


body.dark
    // todo: fix lmao
    background-color: #232327
    color: #e7e3d5

    a
        color: #207edb
        text-decoration-color: rgba(30, 115, 201, 0)
        &:hover
            text-decoration-color: rgba(30, 115, 201, 0.5)
        
        &:visited
            color: #aa99ff

        &:active
            color: #ed4523


    article
        font-family: "Iosevka Etoile Web"
        color: #e9e3d3
        background-color: #0a0b0c
        background-image: url("rocky-wall-50.png")

        pre
            background-color: rgba(5, 5, 5, 0.6)
            box-shadow: 0 0 0.5rem 0 rgba(255, 255, 255, 0.5) inset

            table td
                mark
                    color: #e9e3d3

            code
                @import code-highlight-dark
        
            mark
                background-color: rgba($color-yellow-2, 0.1)

    aside
        background-color: #18181a

    nav
        background-color: #18181a

    footer
        background-color: #18181a


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


@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
    
        article
            margin: 0
            overflow-y: revert
            
@media screen and (max-width: 480)
    body
        font-size: 12pt

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