terminal.css/templates/partials/documentation.html

<section>
    <header><h2>Documentation</h2></header>
    <p>Most of the documentation is still at an early stage. For more details, please have a look at the source of this website.</p>
    <section>
        <header>
            <h2 id="DocVariables">Variables</h2>
        </header>
        <p>Customizing the style of Terminal CSS with CSS Variables is easy.</p>

        <dl class="custom-dl">
            <style>
                .custom-dl dt {
                    font-weight: 600;
                }

                .custom-dl dd.italic{
                    font-style: italic;
                }

            </style>
            <dt>--global-font-size</dt>
            <dd>The Base font size</dd>
            <dt>--global-line-height</dt>
            <dd>The baseline height. Modify this to achieve the best readability.</dd>
            <dt>--font-stack</dt>
            <dd>The fonts for the website.</dd>
            <dd>Use <code>@font-face</code> or any other font provider to include your custom fonts.</dd>
            <dt>--mono-font-stack</dt>
            <dd>Same as above but for <code>code</code>.</dd>
            <dt>--background-color</dt>
            <dd>The page background color</dd>
            <dt>--font-color</dt>
            <dd>The base font color for text, headlines, blockquotes, lists, etc.</dd>
            <dt>--invert-font-color</dt>
            <dd>Sometimes text appears on a colored background. Adjust this color to improve readability.</dd>
            <dt>--primary-color</dt>
            <dd>The primary color is used for links and buttons.</dd>
            <dt>--secondary-color</dt>
            <dd>The secondary color is more subtle than the primary color. It's used for code highlighting and image captions.</dd>
            <dt>--error-color</dt>
            <dd>Used for error alerts and form validation.</dd>
            <dt>--progress-bar-background</dt>
            <dd>The background color of progress bars.</dd>
            <dt>--progress-bar-fill</dt>
            <dd>The fill color, indicating the progress in progress bars.</dd>
            <dt>--code-bg-color</dt>
            <dd>The background color of <code>&lt;code&gt;</code> elements.</dd>
            <dt>--block-background-color</dt>
            <dd>The background color of <code>&lt;pre&gt;</code> elements. Also applies to <code>&lt;code&gt;</code> elements inside a <code>&lt;pre&gt;</code> element.</dd>
            <dt>--input-style</dt>
            <dd>The style of input element borders. Possible values are:</dd>
            <dd class="italic">none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden, inherit, initial, unset</dd>
            <dt>--display-h1-decoration</dt>
            <dd>Show a double dash below <code>h1</code> elements. Possible values are:</dd>
            <dd class="italic">block, none</dd>
        </dl>
    </section>
    <hr>
    <section>
        <header>
            <h2 id="DocTypography">Typography</h2>
        </header>
        <p>Terminal CSS uses a single font size for almost all elements. However, there is a way to use browser default font sizes if you wish.</p>
        <dl class="custom-dl">
            <dt>Single font size</dt>
            <dd>Use <code>&lt;body class=&quot;terminal&quot;&gt;</code>. If you leave that option, it will fall back to browser defaults. See <a href="/sans-serif/">here</a>.</dd>
        </dl>
    </section>
</section>