#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;

        --illust-badge-background-color: rgba(0, 0, 0, .5);
        --illust-badge-ai-background-color: rgba(255, 0, 0, .5);

        --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;
    }
    img {
        object-fit: cover;
        max-width: 100%;
    }
    .center {
        text-align: center;
        display: block;
    }

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

    /* ILLUSTRATIONS GRID and ILLUSTRATION PREVIEW PAGE */
    .grid {
        gap: 1em;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .grid img {
        width: 15em;
        height: 15em;
    }

    /* ILLUSTRATIONS GRID (used in user illustrations page and search results page) */
    .grid p {
        width: 15em;
    }
    .illustsgriditem {
        position: relative;
    }
    .illustbadge {
        position: absolute;
        top: .25em;
        right: .25em;
        padding: .25em;
        color: var(--text-color);
        background-color: var(--illust-badge-background-color);
        text-decoration: none !important;
    }
    .illustbadge.ai {
        background-color: var(--illust-badge-ai-background-color);
    }

    /* ILLUSTRATIONS PAGE */
    .profilepicture.small {
        width: 2.5em;
        height: 2.5em;
    }
    .illustimages {
        display: grid;
        text-align: center;
    }
    .illustimages .landmark {
        padding-top: 1em;
        padding-bottom: 1em;
    }
    .illusttags {
        display: flex;
        flex-wrap: wrap;
        gap: 0 1em;
    }

    /* USER PAGE */
    .profilecover {
        width: 100%;
        height: 50vh;
        margin-bottom: 1em;
    }
    .profilepicture {
        margin-right: .5em;
        width: 5em;
        height: 5em;
    }
    .usermetadata {
        display: flex;
        align-items: center;
        margin-left: .5em;
    }

    /* SEARCH RESULTS PAGE */
    .searchsuggestions {
        text-align: left;
        display: inline-block;
        margin-top: .5em;
        margin-bottom: 0;
    }

    /* 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");
}