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

/*
 * COMMON DECLARATIONS FOR ALL THEMES
 */
@import url(https://fonts.googleapis.com/css?family=Nunito:700|Raleway:400,400i,700|Roboto+Mono);
@import "fontello/css/mini-tutorial-icons.css";

body {
    font-family: 'Raleway', sans-serif;
    font-size: 12pt;
    padding: 1em;

    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hidden, .print-only {
    display: none;
}

@media print {
    .hidden {
        display: block;
    }

    .no-print {
        display: none;
    }

    .print-only {
        display: inherit;
    }
}

/** Headings **/
h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif;
}

h1 {
    font-size: 24pt;

    color: rgb(194, 44, 23);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin-bottom: 0;
    padding-bottom: 0;
}

h2 {
    font-size: 18pt;
    color: rgb(22, 105, 135);
}

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

.chapter-title {
    color: rgb(194, 44, 23);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-size: 21pt;
}

@media print {
    .section-title, .chapter-title {
        margin-top: 2em;
    }
}

h3 {
    font-size: 13pt;
}

h4, h5, h6 {
    font-size: 12pt;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.25em;
}

p.subtitle {
    margin: 0;
}

/** Table of Contents **/
#toc {
    /* See: https://stackoverflow.com/a/38796408
     * transform makes the element the viewport on which "position: fixed"
     * children will be aligned.
     */
    transform: translateZ(0);
    z-index: 999;
}

#toc .toc-hamburger-button {
    text-align: right;
    cursor: pointer;
}

#toc .toc-hamburger-menu {
    position: fixed;
    width: max-content;
    right: 0;
    margin-top: 0.5em;
    padding: 0.5em;

    border: 1px solid lightgrey;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
    background: white;
}

@media print {
    #toc .toc-hamburger-menu {
        position: inherit;
        margin: 0;
        padding: 0;
        border: none;
        box-shadow: none;
    }
}

#toc ol, #toc ul {
    margin-top: 0;
}

#toc .tocListNone {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

#toc .icon {
    margin-right: 0.5em;
}

@media screen {
    #toc .active {
        font-weight: bold;
    }
}

/** Footer **/
footer > nav {
    margin-bottom: 0.5em;
}

@media print {
    footer {
        padding-top: 2em;
    }

    footer nav > * {
        display: none;
    }
}

/** Main content **/
p {
    text-align: justify;
    hyphens: auto;
    margin-top: 0;
}

a, a:visited {
    color: rgb(22, 105, 135);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

pre, code, tt, kbd {
    font-family: 'Roboto Mono', monospace;
}

li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/** Images and figures **/
figure {
    margin: 0 auto;
    margin-bottom: 1em;
}

figure img {
    display: block;
    width: 100%;
    margin-bottom: 0.5em;
}

figcaption {
    font-size: 90%;
}

.border {
    border: 1px solid #e0e0e0;
}

/** Auto-Number figures **/
body {
    counter-reset: fig;
}

figcaption {
    counter-increment: fig;
}

figcaption:before {
    content: var(--figure-short-code, 'Fig. ') counter(fig) ': ';
}

/** Better Tables **/
td {
    vertical-align: top;
}

th, td {
    padding-right: 1em;

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

/** Nicer quotes **/
blockquote {
    text-align: right;
}

/** Useful utility classes **/
.skip {
    margin-bottom: 2em;
}

.fn {
    /* Filename */
    font-family: 'Roboto Mono', monospace;
    color: darkgreen;
}

.cmd {
    /* Command */
    font-family: 'Roboto Mono', monospace;
    color: darkblue;
}

.scr {
    /* Screen text */
    font-family: 'Roboto Mono', monospace;
    color: darkred;
}

kbd {
    /* Keyboard Command */
    font-family: 'Roboto Mono', monospace;
    background-color: rgb(240, 240, 240);
    color: rgb(47, 47, 47);
    padding: 0 0.2em 0 0.2em;
    border-radius: 0.2em;
    border: 1px solid black;
}

.danger {
    /* Warning text */
    color: red;
}