# SPDX-FileCopyrightText: © 2023 Christian BUHTZ <c.buhtz@posteo.jp>
#
# SPDX-License-Identifier: GPL-3.0-only
#
# This file is part of the program "Hyperorg" which is released under GNU
# General Public License v3 (GPLv3).
# See folder LICENSES or go to <https://www.gnu.org/licenses/#GPL>.
"""The default css content."""
import inspect

css_content = inspect.cleandoc('''
    /* CREDITS to https://ddavis.io/posts/eglot-python-ide/

    https://stackoverflow.com/a/1426641/4865723

        #idName for unique elements on the page. Good examples are #header
        and #footer
        TAGNAME for general purpose page styling.
        TAG.classname and .classname for exceptions/overrides to the
        above rules.
    */

    /* Colors */
    :root {
        --body-color: unset;
        --body-background-color: unset;

        --code-background-color: #f2f2f2;
        --code-border-color: #e6e6e6;
        --code-verbatim-background-color: unset;

        --hr-background-color: #333;
        --hr-gradient-color-1: #ccc;
        --hr-gradient-color-2: #333;

        --header-label-background-color: dimgray;
    }

    /* Main stuff */

    body {
        /* About the width. Default for browser not supporting clamp() the
           first "width" is used.
           The second means a minimum of 55vw, ideally 600px and max. 100%.
           The 600px is a threshold making the width 100% when the browser
           window becomes to small.

           Credits:
             - https://stackoverflow.com/a/75109548/4865723
             - https://piccalil.li/quick-tip/
               use-css-clamp-to-create-a-more-flexible-wrapper-utility/
        */
        width: 55vw;
        width: clamp(55vw, 600px, 100%);
        font-family: sans-serif;
        margin: 0 auto;
        line-height: 1.5;
        color: var(--body-color);
        background-color: var(--body-background-color);
    }

    footer {
        font-family: monospace;
        font-size: x-small;
        text-align: center;
    }

    hr {
        border: 0;
        height: 1px;
        background: var(--hr-background-color);
        background-image: linear-gradient(
            45deg,
            var(--hr-gradient-color-1),
            var(--hr-gradient-color-2),
            var(--hr-gradient-color-1)
        );
    }

    /* "Links" declared as insecure. */
    .insecure {
        text-decoration: underline dashed red .1em;
    }

    code {
        background-color: var(--code-background-color);
        padding: 0 .3em;
        border-radius: 4px;
        border: 1px solid var(--code-border-color);
    }

    code.verbatim {
        background-color: var(--code-verbatim-background-color);
    }

    pre:before {
        display: none;
        position: absolute;
        top: -8px;
        right: 12px;
        padding: 3px;
        /* color: #555; */
        /* background-color: #f2f2f299; */
    }

    pre:hover:before {
        display: inline;
        margin-top: 14px;
    }

    pre.src-python:before {
        content: 'Python';
    }

    pre {
        display: block;
        position: relative;
        border: 1px solid var(--code-border-color);
        border-radius: 3px;
        background-color: var(--code-background-color);
        padding: 8pt;
        font-family: monospace;
        overflow: auto;
        margin: 1.2em;
    }

    /* Navigation Menu */

    nav {
        width: 100%;
        text-align: center;
        font-size: 1.1em;
        margin-top: .5em;
    }

    nav ul {
        display: flex;
        justify-content: space-around;
        list-style-type: none;
        margin: 0;
    }

    nav li {
        display: inline-block;
    }

    nav a {
        font-weight: bold;
    }

    /* Meta infos in the head */

    h1 {
        margin-top: .5rem;
        margin-bottom: .25rem;
    }

    header {
        font-size: 0.875rem;
    }

    header ul {
        list-style-type: none;
        margin: 0;
        padding: 0 0 0 1em;
    }

    header li {
        margin-bottom: .375em;
    }

    header .label {
        color: var(--header-label-background-color);
    }

    #hyperorg-mtime {
        float: left;
    }

    #hyperorg-ctime {
        float: right;
    }

    /* Node index (sitemap like) */

    #hyperorg-index hr {
        width: 90%
    }

    article.hyperorg-index {
        display: flex;
        justify-content: flex-start;
    }

    article.hyperorg-index div {
        flex-grow:1;
    }

    a.hyperorg-index__toplink {
        display: block;
        text-align: right;
        text-decoration: none;
    }

    a.hyperorg-index__toplink:before {
        content: "🡹 ";
        font-size: 110%;
    }

    a.hyperorg-index__toplink:after {
        content: " 🡹";
        font-size: 110%;
    }

    article.hyperorg-index ul {
        list-style-type: none;
        margin: 0;
        padding: .5em 0 0 1em;
    }

    article.hyperorg-index li {
        margin-bottom: .375em;
    }

    article.hyperorg-index h2 {
        font-family: monospace;
        font-size: 4em;
        padding: .25em .25em 0 0;
        margin: 0;
    }

    .hyperorg-index__letter-nav {
        display: flex;
        justify-content: space-around;
        padding: .5em 1.5em 0.5em 1.5em;
        font-family: monospace;
        font-size: 2em;
        }
''')
