cbillowes/curious-programmer-helium

@charset "UTF-8";
@import "./variables";

@media screen {
    *::-webkit-scrollbar {
        width: 20px;
    }

    *::-webkit-scrollbar:horizontal {
        height: 20px;
    }

    *::-webkit-scrollbar-track {
        background-color: $scrollbar-track;
    }

    *::-webkit-scrollbar-corner {
        background-color: $scrollbar-track;
    }

    *::-webkit-scrollbar-thumb {
        background-color: $scrollbar-thumb;
        min-height: 25px;
        border: solid 3px darken($secondary, 20%);
        border-radius: 25px;
   }

    *::-webkit-scrollbar-thumb:horizontal {
        background-color: $secondary;
        border-bottom: solid 10px darken($secondary, 20%);
    }

    *::-webkit-scrollbar-thumb:vertical {
        background-color: $secondary;
        border-right: solid 10px darken($secondary, 20%);
    }

    * {
        box-sizing: border-box;
    }

    html {
        height: 100%;
        background-color: $background !important;
    }

    body {
        background-color: $background;
        text-shadow: $text-shadow;
        color: $foreground;
        font-family: $font-family-serif;
        padding: 0;
        margin: 0;
        font-size: $font-size-base;
        line-height: 2em;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: $font-family-sans-serif-heavy;
        font-family: $font-family-sans-serif;
        line-height: 1.5em;
        text-shadow: $text-shadow;
    }

    h1 {
        font-size: $font-size-lg-h1;
        font-weight: $font-family-sans-serif-heavy;
    }

    h2 {
        font-size: $font-size-lg-h2;
    }

    h3 {
        font-size: $font-size-lg-h3;
        margin-top: 1em;
    }

    h4,
    h5,
    h6 {
        font-size: $font-size-lg-rest;
    }

    .gatsby-highlight,
    code {
        font-size: $font-size-base - 0.75;
    }

    @include medium-media {
        body {
            font-size: $font-size-medium;
        }

        h1 {
            font-size: $font-size-md-h1;
        }

        h2 {
            font-size: $font-size-md-h2;
        }

        h3 {
            font-size: $font-size-md-h3;
        }

        h4,
        h5,
        h6 {
            font-size: $font-size-md-rest;
        }
    }

    @include small-media {
        body {
            font-size: $font-size-small;
        }

        h1 {
            font-size: $font-size-sm-h1;
        }

        h2 {
            font-size: $font-size-sm-h2;
        }

        h3 {
            font-size: $font-size-sm-h3;
        }

        h4,
        h5,
        h6 {
            font-size: $font-size-sm-rest;
        }

        .gatsby-highlight,
        code {
            font-size: $font-size-small - 0.5;
        }
    }

    a {
        color: $primary;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        text-decoration: none;

        &:hover,
        &:visited:hover {
            color: $secondary;
        }

        &:visited {
            color: darken($primary, 10%);
        }
    }

    blockquote {
        border-left: solid 10px $accent;
        font-style: italic;
        padding-left: 1.5em;
    }

    table {
        width: 100%;
        background-color: $table-background;

        tr {
            th {
                padding: 0.75em;
                background-color: $table-head-background;
            }

            td {
                border-bottom: solid 1px $table-border;
                padding: 0.75em;
            }

            &:hover {
                td {
                    background-color: $primary;
                    color: $table-hover-text;
                }

                a {
                    color: $table-hover-link;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }

    hr {
        margin-top: 3em;
        border-top: solid 2px $background-lighter;
        border-bottom: solid 1px $background-darker;
        border-left: transparent;
        border-right: transparent;
    }

    .container {
        max-width: $container-width;
        margin: 0 auto;
        padding: 0 1.5em;
    }

    .for-print {
        display: none;
    }

    pre[class*="language-"] {
        position: relative;
        padding-top: 3em;

        .stuff {
            position: absolute;
            top: 0;
            right: 0;

            .language {
                border-radius: 0 0 0 $border-radius;
                background-color: $background-darker;
                display: inline-block;
                margin-right: 0.5em;
                padding: 0.25em 0.5em;
            }

            .copy {
                border-radius: 0 0 0 $border-radius;
                background-color: $background-darker;
                display: inline-block;
                padding: 0.25em 0.5em;
                cursor: pointer;
            }
        }
    }
}

@media print {
    body {
        line-height: 1.5em;
    }

    .web {
        display: none;
    }
}