@dschulmeis/mini-tutorial.js/themes/roundbox.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.
 */

/** General page layout **/
@import "common.css";

html {
    margin: 0;
    max-width: none;

    display: flex;
    justify-content: center;
}

body {
    box-sizing: content-box; /* Override border-box from Bootstrap */
    max-width: 55em;
    flex-basis: auto;
    flex-grow: 1;
    margin: 0;
}

@media screen and (min-width: 600px) {
    html {
        font-size: 13pt;
    }

    body {
        margin: 1em 0 1em 0;
    }
}
@media screen and (min-width: 1024px) {
    html {
        font-size: 14pt;
    }
}

main {
    background: rgba(255, 255, 255, 0.9);
    border: 0px solid white;
    border-left-width: 1px;
    border-right-width: 1px;
    /* padding: 1rem; */
}

header, footer {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: 1px solid black;
    /* padding: 1rem; */
    margin: 0 !important;
}

@media screen {
    main, header, footer {
        padding: 1rem;
    }
}

header {
    border-radius: 0.4rem 0.4rem 0 0;
}

footer {
    border-radius: 0 0 0.4rem 0.4rem;
}

/** Document title **/
h1 {
    color: rgb(201, 30, 6);
}

/** Main Content **/
@media screen {
    .toc-title {
        margin-top: 0;
    }

    .section-title {
        margin-top: 1em;
    }
}

/** Navigation and footer **/
nav {
    display: flex;
    justify-content: space-between;
}

nav a,
nav a:visited {
    color: rgb(124, 178, 196);
}

/* Print version: Hide navigation and show all sections, instead */
@media print {
    html {
        display: block;
    }

    header, main, footer {
        border: 0;
    }
}