afg-website/sass/css/style.scss

$narrow-header-breakpoint: 500px;
$medium-header-breakpoint: 800px;
$margin-breakpoint: 960px;
$menu-breakpoint: 720px;
$wide-width: 960px;
$narrow-margin: 5px;
$background-color: #ffffff;
$code-background-color: scale-color($background-color, $lightness: 10%);
$text-color: #000000;
$menu-background-color: #000000;
$menu-text-color: #ffffff;
$menu-active-color: scale-color($menu-background-color, $lightness: 20%);
$link-color: #669df2;
$link-color-visited: #829bc2;

body {
    font-family: 'RedHatText';
    background-color: $background-color;
    color: $text-color;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font-size: 13pt;
}

header {
    background: {
        image: linear-gradient(rgba($background-color, 0.0), rgba($background-color, 1)), url("../images/header.jpg");
        size: cover;
    }
    height: 300px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;

    .logo {
        align-self: center;
        margin-right: 50px;
    }

    .text {
        align-self: center;

        .heading {
            font-family: 'Source Code Pro';
            font-weight: bold;
            font-size: 50px;
        }

        .subtext {
            font-family: 'Source Sans Pro';
            font-size: 20px;
        }
    }
    @media screen and (max-width: $medium-header-breakpoint) {
        height: 150px;

        .text {
            .heading {
                font-size: 25px;
            }

            .subtext {
                font-size: 15px;
            }
        }

        .logo {
            width: 100px;
        }
    }
    @media screen and (max-width: $narrow-header-breakpoint) {
        height: 75px;

        .logo {
            display: none;
        }

        .text {
            .heading {
                font-size: 25px;
            }

            .subtext {
                font-size: 15px;
            }
        }
    }
}

main {
    width: $wide-width;

    @media screen and (max-width: $margin-breakpoint) {
        margin: {
            left: $narrow-margin;
            right: $narrow-margin;
        }
        align-self: stretch;
        width: auto;
    }

    hr {
        color: $menu-background-color;
        margin: {
            top: 10px;
            bottom: 50px;
        }
    }
    
    h1 {
        font-family: 'Source Sans Pro';
    }
    
    h2 {
        font-family: 'Source Sans Pro';
    }

    img {
        @media screen and (min-width: $wide-width) {
            max-width: $wide-width;
        }
        max-width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    video {
        max-width: $wide-width;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    a {
        color: $link-color;
        font-family: 'Source Sans Pro';
        text-decoration: none;
    }

    a:visited {
        color: $link-color-visited;
    }

    .gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        a {
            margin: 5px;
        }
    }

    .lightbox {
        padding: 0.2em;
    }
    
    code {
        font-family: 'Source Code Pro';
        font-size: 14pt;
        background-color: $code-background-color;
        padding: {
            left: 0.2em;
            right: 0.2em;
        }
    }

    blockquote {
        border-left: $menu-background-color 5px solid;
        margin: {
            left: 0.5em;
            right: 0;
        }
        padding: {
            left: 1.0em;
            right: 1.5em;
        }
    }

    button {
        border: none;
        padding: {
            top: 3px;
            bottom: 3px;
            left: 10px;
            right: 10px;
        };
        background-color: $menu-active-color;
        color: $text-color;
        font-family: 'Source Sans Pro';
    }

    .mastodon-comment {
        margin: 0.5rem 0;
        display: flex;
        padding: 0.5rem 1rem;
        background-color: $code-background-color;

        .avatar img {
            margin-right: 1rem;
            min-width: 60px;
        }

        .content {
            width: 100%;
        }

        .date {
            float: right;
        }

        .ellipsis::after {
            content: "\2026";
        }

        .invisible {
            font-size: 0;
            line-height: 0;
            display: inline-block;
            width: 0;
            height: 0;

        }
    }
}

nav {
    width: $wide-width;
    @media screen and (max-width: $margin-breakpoint) {
        margin: {
            left: $narrow-margin;
            right: $narrow-margin;
        }
        align-self: stretch;
        width: auto;
    }
    overflow: hidden;

    background-color: $menu-background-color;
    color: $menu-text-color;
    font-weight: bold;

    a {
        float: left;
        display: block;
        border-left: $background-color 2px solid;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        color: $menu-text-color;
    }


    .active {
        background-color: $menu-active-color;
    }

    .icon {
        display: none;
    }

    .dropdown {
        float: left;
        overflow: hidden;

        .dropbtn {
            border: none;
            border-left: $background-color 2px solid;
            font-size: 17px;
            outline: none;
            padding: 14px 16px;
            margin: 0;
            background-color: $menu-background-color;
            color: $menu-text-color;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            min-width: 160px;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
            z-index: 1;

            a {
                float: none;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
                border-top: $background-color 2px solid;
                color: $menu-text-color;
                background-color: $menu-background-color;
            }

            a:hover {
                background-color: $menu-active-color;
                color: $menu-text-color;
            }
        }
    }

    .dropdown:hover .dropbtn,
    a:hover {
        background-color: $menu-active-color;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
    @media screen and (max-width: $menu-breakpoint) {
        .dropdown .dropbtn,
        a {
            display: none;
        }

        a.icon {
            float: right;
            display: block;
        }
    }
}
@media screen and (max-width: $menu-breakpoint) {
    nav.responsive {
        position: relative;

        .icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        a {
            border-top: $background-color 2px solid;
            float: none;
            display: block;
            text-align: left;
        }

        .dropdown {
            float: none;

            .dropbtn {
                border-top: $background-color 2px solid;
                display: block;
                width: 100%;
                text-align: left;
            }
        }

        .dropdown-content {
            position: relative;
        }
    }
}