@dschulmeis/mini-tutorial.js/themes/book.css

Beautiful HTML tutorials with minimal effort

/*
 * mini-tutorial.js (https://www.wpvs.de/mini-tutorial/)
 * © 2018  Dennis Schulmeister-Zimolong <dennis@pingu-mail.de>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 */

/** EXTENSION TO WHITE.CSS FOR A BOOK-STYLE LAYOUT **/
@import "white.css";

/* Place Table of Contents left on large screens */
.icon {
    display: none;
}

@media screen and (min-width: 86em) {
    /* Override widht constraint from white.css */
    html {
        max-width: none;
    }

    /* Use grid to build the layout */
    body {
        display: grid;
        grid-gap: 1.5em;
        grid-template-columns: 25em 1em 50em;
        grid-template-rows: auto 1fr auto;
        justify-content: center;
    }

    body > .icon {
        display: block;
        grid-row: 1;
        grid-column: 2;
    }

    body > header {
        grid-row: 1;
        grid-column: 3;
    }

    body > aside {
        grid-row: 2;
        grid-column: 1;
    }

    body > main {
        grid-row: 2;
        grid-column: 3;
    }

    body > footer {
        grid-row: 3;
        grid-column: 3;
    }

    /* Fine-tune some margins */
    #toc ol {
        margin-bottom: 1.5em;
    }

    #toc ol:last-child {
        margin-bottom: 0;
    }

    /* Highlight Table of Contents */
    #toc {
        border: 1px solid #e0e0e0;
        background-color: #f9f9f9;
        padding: 0.5em;
    }
}