mkbook/style/layout.scss

html, body {
    width: 100%;
    min-height: 100vh;
}

body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    justify-items: stretch;
    align-items: stretch;

    nav.big {
        background: #2c2c38;
        padding: 1em;
    
        display: flex;
        flex-direction: column;
        
        a {
            width: 100%;
            font-size: 1.5em;
            text-decoration: none;
            font-family: $font-sansserif;
            margin: 0 0 0.25em 0;
            color: #5babd1;
    
            &:hover {
                color: #cf5ccd;
            }

            &.current {
                color: #cf5ccd;

                &:hover {
                    color: #fefefe;
                }
            }
        }
    }

    nav.small {
        display: none;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        background: #2c2c38;
        padding: 0;

        >* {
            margin: 0.5em;
        }
        
        a {
            text-decoration: none;
            font-family: $font-sansserif;
            color: #5babd1;
    
            &:hover {
                color: #cf5ccd;
            }
        }

        span.title {
            text-decoration: none;
            font-family: $font-sansserif;
            color: #fefefe;
        }

        span.placeholder {
            width: 1em;
            height: 1em;
        }
    }
    
    article {
        padding: 1em 2em 0 2em;
        max-width: 38em;
        min-width: 0;
        min-height: 0;
    
        >* {
            max-width: 100%;
        }
    }
}

@media screen and (max-width: 768px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;

        nav.big {
            display: none;
        }

        nav.small {
            display: flex;
        }

        article {
            padding: 1em 0.5em 0 0.5em;
        }
    }
}