pixwhile/routes/css.cpp

#include "routes.h"

void css_route(const httplib::Request& req, httplib::Response& res) {
    res.set_content(R"EOF(

    /* GENERAL */
    :root {
        --background-color: black;
        --text-color: white;

        --error-background-color: rgb(100, 0, 0);
        --error-border-color: red;
        --error-text-color: white;

        --accent-color: #962AC3;
        --dark-accent-color: #7D3F7D;
        --bright-accent-color: #DE6DE6;
    }

    body {
        background-color: var(--background-color);
        color: var(--text-color);
        font-family: sans-serif;
    }

    a {
        color: var(--accent-color);
        text-decoration: none;
    }
    a:hover {
        color: var(--bright-accent-color);
        text-decoration: underline;
    }

    img {
        object-fit: cover;
        max-width: 100%;
    }

    .center {
        text-align: center;
        display: block;
    }

    /* USER PAGE (and a tiny bit for illustrations page) */
    .cover {
        width: 100%;
        height: 50vh;
        margin-bottom: 1em;
    }
    .profilepicture, .smallprofilepicture {
        margin-right: .5em;
    }
    .profilepicture {
        width: 5em;
        height: 5em;
    }
    .smallprofilepicture {
        width: 2.5em;
        height: 2.5em;
    }
    .usermetadata {
        display: flex;
        align-items: center;
        margin-left: .5em;
    }

    /* USER ILLUSTRATIONS PAGE (and illustrations page) */
    .grid {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        justify-content: center;
    }
    .grid img {
        width: 15em;
        height: 15em;
    }
    .grid p {
        width: 15em;
    }

    /* ILLUSTRATIONS PAGE */
    .illusttags {
        display: flex;
        flex-wrap: wrap;
        gap: 0 1em;
    }
    .illust {
        display: grid;
        text-align: center;
    }
    .illust .landmark {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    /* ERROR PAGE */
    .error {
        text-align: center;
        background-color: var(--error-background-color);
        color: var(--error-text-color);
        border-style: solid;
        border-color: var(--error-border-color);
    }

    )EOF", "text/css");
}