web/css/gemini.css

/* Gemini.css
 * Author: Paul Wilde
 * Source: https://codeberg.org/pswilde/geminicss
 * Website: https://geminicss.paulwilde.uk
 * */
:root {
    --bg: #111111;
    --text: #eeeedd;
    --text-dark: #ccccbb;
    --accent: #d0c010;
    --accent-2: #228822;
    --accent-2-dark: #006600;
    --accent-3: #ffaa44;
    --accent-4: #ddd;
    --accent-5: #777;
}
* {
    color: var(--text);
    font-family: 'DejaVu Mono Sans', monospace;
}
body {
    margin:auto;
    background-color: var(--bg);
    font-size: 1em;
    max-width: 40vw;
    display:block;
    margin:auto;
    margin-top: 2em;
}
main {
}
p, a, label, h1, h2, h3, h4, h5, ul, li {
    color: var(--text);
}
h1:before, h2:before, h3:before, a:before {
    transition: left 0.5s;
}
h1:before, h2:before, h3:before, a:before {
    position:absolute;
    left: 25vw;
}
a {
    transition: color 0.3s, background 0.3s;
}
a:before {
    content: "=> "
}
a:hover {
    color: var(--accent);
}
a[id]:before {
    content: "";
}
h1 a:before, h2 a:before, h3 a:before {
    content: "";
}
a.button {
    display:inline-block;
    padding: 1em;
    margin: 0.4em;
    margin-left:0;
    background-color: var(--accent-2);
    border-radius: 15px;
    text-decoration:none;
}
a.button:before {
    content: "";
    position:relative;
}
a.button:hover {
    color: var(--text-dark);
    background-color: var(--accent-2-dark);
}
h1 a, h2 a, h3 a {
    text-decoration:0;
}
h1 {
    font-size: 1.8em;
    color: var(--accent);
}
h1:before {
    content: "# ";
}
h2 {
    font-size: 1.6em;
    color: var(--accent-2);
}
h2:before {
    content: "## ";
}
h3 {
    font-size: 1.4em;
    color: var(--accent-3);
}
h3:before {
    content: "### ";
}
h4 {
    font-size: 1.2em;
    color: var(--accent-3);
}
h4:before {
    content: "#### ";
}
h5 {
    font-size: 1.0em;
    color: var(--accent-3);
}
h5:before {
    content: "##### ";
}
blockquote {
    border-left: 3px solid var(--accent-2);
    padding: 0.4em;
    font-style: italic;
    padding-left: 2em;
    margin-left: 0;
}
blockquote pre {
    padding: 1em;
}

@media only screen and (max-width: 1600px) {
    h1:before, h2:before, h3:before, a:before {
        left: 220px;
    }
    body {
        max-width: 50vw;
    }
}
@media only screen and (max-width: 1200px) {
    h1:before, h2:before, h3:before, a:before {
        left: 50px;
    }
    body {
        max-width: 70vw;
    }
}
@media only screen and (max-width: 700px) {
    body {
        max-width: 70vw;
    }
    h1:before, h2:before, h3:before, a:before {
        left: 4px;
    }

}