create-modulo/build/modulo-docs/static/config.html

Starter projects for Modulo.html - Ready for all uses - Markdown-SSG / SSR / API-backed SPA

<script src=Modulo.html></script><template type=f>

<!-- "QuickDemo" and "Showdown" support: -->
<!--
<Configuration
    markdown.code-fence-tag="x-QuickDemo"
    markdown.code-fence-extra-syntax="edit:"
    markdown.markdown-util="showdownConvert"
></Configuration>
-->

<!-- Configure page meta options -->
<Include>
    <meta name="charset" charset="utf8">
    <meta name="content-type" http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="index, follow">
    <meta name="revisit-after" content="30 days">
</Include>

<Include>
<style>
    :root {
        --btn-shadow-dist: 4px;
        --btn-shadow-dist-neg: -4px;
        --color-fg-light: #00000011;
        --color-fg-semilight: #00000044;
        --color-fg-semi: #00000088;
        --color-fg-semidark: #000000DD;
        --color: #B90183;
        --color-alt: #a2e4b8;

        --font-serif: serif;
        --font-sans: sans-serif;
        --font-mono: monospace;

        --color: #B90183;
        --color-alt: #82d4a444;
        --fg: #000;
        --fg-shading: #05051020;
        --bg: #fff;
        --bg-semi: #ffffff99;
        --fg-inv: #fff;
        --fg-inv-shading: #ffffff20;
        --bg-inv: #000;
        --bg-inv-semi: #00000099;

        --color-fg: var(--fg);
        --color-bg: var(--bg);
        --color-content-bg: var(--bg);
        --color-outline: var(--fg-shading);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --btn-shadow-dist: 4px;
            --btn-shadow-dist-neg: -4px;
            --color-fg-light: #ffffff11;
            --color-fg-semilight: #ffffff44;
            --color-fg-semi: #ffffff88;
            --color-fg-semidark: #ffffffDD;
            --color-alt: #a2e4b8;
            --color-outline: #eee;
            --color-content-bg: black;
            --color-bg: black;


            --color: #B90183;
            --color-alt: #82d4a444;
            --fg: #eee;
            --fg-shading: #ffffff33;
            --bg: #000;
            --bg-semi: #00000099;
            --fg-inv: #000;
            --fg-inv-shading: #00000020;
            --bg-inv: #fff;
            --bg-inv-semi: #ffffff99;
        }
    }

    body {
        color: var(--color-fg);
        background-color: var(--color-content-bg);
        margin: 0;
        font-family: sans-serif;
    }

    /* Browser Reset */
    html, body {
        font-size: 17px;
        font-weight: 400;
        line-height: 1.4;
    }
</style>
</Include>