#include #include #include "routes.h" #include "../servehelper.h" static const constexpr char css[] = R"EOF( :root { --bg-color: black; --fg-color: white; --font-size: 13pt; --error-background-color: rgb(100, 0, 0); --error-border-color: red; --error-text-color: white; --accent-color: #962AC3; --bright-accent-color: #DE6DE6; } * { margin: 0; padding: 0; } html { background-color: var(--bg-color); color: var(--fg-color); font-size: var(--font-size); font-family: sans-serif; padding: 10px; overflow-wrap: break-word; } p, details { margin-top: 1em; margin-bottom: 1em; } details[open] { margin-bottom: 0; } img { object-fit: cover; } a { color: var(--accent-color); } a:hover { color: var(--bright-accent-color); } /* CUSTOM EMOJI and FONT AWESOME ICONS */ .custom_emoji, svg { height: 1em; width: 1em; /* https://stackoverflow.com/a/489394 */ vertical-align: middle; } /* FONT AWESOME ICONS */ svg { filter: invert(1); } /* POST */ .post { margin-top: 1em; } .post-header, .post-header a { display: flex; } .post-header a { color: inherit; text-decoration: none; } .post-header a:hover { text-decoration: underline; } .post-avatar { width: 3em; height: 3em; } .post-header span, .post-header time { margin-top: auto; margin-bottom: auto; margin-left: 0.5em; } .post-header a:has(time) { margin-left: auto; } .post-attachments:not(:empty) { margin-top: 1em; margin-bottom: 1em; } /* https://stackoverflow.com/a/7354648 */ @media (min-width: 801px) { .post-attachments { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0.5em; width: fit-content; } .post-attachments * { margin: initial; } } .post-attachments :is(img, video, audio) { width: 320px; height: 180px; } /* do not ask why not fit-content or min-content. i spent one hour on this, and that is one hour too long to be spending on this god damn grid */ .post-attachments audio { height: 40px; } /* 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); } .error * { margin: revert; padding: revert; } /* USER PAGE */ .user_page-header { width: 100%; height: 15em; object-fit: cover; } .user_page-main_header { display: flex; } .user_page-profile { width: 7.5em; height: 7.5em; } .user_page-main_header span { margin-top: auto; margin-bottom: auto; margin-left: 0.5em; } /* https://stackoverflow.com/a/7354648 */ @media (min-width: 801px) { .user_page-user_description { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em; } } .user_page-user_bio { line-height: 1.25; } .user_page-user_links { height: fit-content; width: fit-content; text-align: left; margin-top: 1em; margin-bottom: 1em; /* https://stackoverflow.com/a/5680823 */ border-collapse: collapse; } .user_page-user_links td { padding-left: 1em; } .user_page-user_links .verified { background-color: rgba(0, 150, 0, 0.3); } .user_page-user_links .verified td::after { content: " ✓"; color: rgb(100, 255, 100); } .user_page-user_posts_nav { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; } .user_page-user_posts_nav a { text-decoration: none; } .user_page-user_posts_nav .selected { font-weight: bold; color: inherit; } .user_page-user_posts_nav .selected:hover { text-decoration: underline; } .user_page-more_posts { margin-top: 1em; text-align: center; /* don't ask why, but making it a block element just works */ display: block; } )EOF"; // one for \0, one for trailing newline #define CSS_LEN sizeof(css) / sizeof(css[0]) - 2 #if __cpp_constinit #define CONSTINIT constinit #else #define CONSTINIT #endif CONSTINIT const uint64_t css_hash = FastHash(css, CSS_LEN, 0); void css_route(const httplib::Request& req, httplib::Response& res) { using namespace std::string_literals; res.set_header("ETag", "\""s + std::to_string(css_hash) + '"'); res.set_header("Cache-Control", "max-age=31536000, immutable"); if (should_send_304(req, css_hash)) { res.status = 304; res.set_header("Content-Length", std::to_string(CSS_LEN)); res.set_header("Content-Type", "text/css"); } else { res.set_content(css, CSS_LEN, "text/css"); } }