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;
    position: relative;

    nav.big {
        background: #2c2c38;
        padding: 0.5rem 1rem 1rem;
        max-width: 15rem;
    
        display: flex;
        flex-direction: column;

        header {
            margin: 0 0 1rem;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            border-bottom: 2px solid #888888;
    
            h1 {
                font-size: 1.5rem;
                font-weight: 700;
                font-family: $font-sansserif;
                margin-bottom: 0;
                text-align: left;

                color: #eeeeee;

                a {
                    color: #eeeeee;
                    text-decoration: none;
            
                    &:hover {
                        color: #cf5ccd;
                    }
                }
            }
            
            h2 {
                font-size: 1rem;
                font-weight: 600;
                font-family: $font-sansserif;
                margin-bottom: 0;
                text-align: right;
                color: #eeeeee;
            }
        }

        ol {
            margin: 0 2rem;
            padding: 0;
            li {
                width: 100%;
                font-size: 1.25rem;
                font-family: $font-sansserif;
                color: #eeeeee;
                a {
                    text-decoration: none;
                    margin: 0 0 0.25rem 0;
                    color: #5babd1;
            
                    &:hover {
                        color: #cf5ccd;
                    }

                    &.current {
                        color: #cf5ccd;

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

                ol {
                    margin: 0 0 0 1rem;
                }
            }
        }
    }

    nav.small {
        display: none;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        background: #2c2c38;
        padding: 0;
        position: sticky;
        top: 0;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);

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

        span {
            display: inline-flex;
            align-items: center;

            >* {
                margin-right: 0.5rem;

                &:last-child {
                    margin-right: 0;
                }
            }
        }

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

        span.placeholder {
            width: 1em;
            height: 1em;
        }
    }

    >* {
        min-width: 0;
        min-height: 0;
    }
    
    article {
        max-width: 38rem;
        padding: 0.5rem 2rem 0 2rem;
    
        >* {
            max-width: 100%;
        }
    }

    .next-chapter {
        width: 100%;

        a {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-right: 0.5rem;
            
            font-size: 1.2rem;
            text-decoration: none;
            font-family: $font-sansserif;
            color: #5babd1;
    
            &:hover {
                color: #cf5ccd;
            }

            span:first-child {
                margin-right: 0.5rem;
            }
        }
    }

    footer {
        width: 100%;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
    }
}

@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: 1rem 0.5rem 0 0.5rem;
        }
    }
}