From 0fec9abdd5fedb8b83a102101c1c27379afc3807 Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Mon, 5 Jan 2026 20:52:02 -0500 Subject: [PATCH] One CSS to rule them all: discordia.css The Law of Fives - organized into 5 sections: I. CHAOS - The void from which all emerges II. DISCORD - Navigation through the confusion III. CONFUSION - Forms that capture intent IV. BUREAUCRACY - The grid that contains V. AFTERMATH - Side quests for the worthy fnord --- static/css/base.css | 40 ---- static/css/discordia.css | 439 +++++++++++++++++++++++++++++++++++++++ static/css/forms.css | 109 ---------- static/css/nav.css | 51 ----- static/css/quests.css | 100 --------- static/css/results.css | 125 ----------- templates/base.html.j2 | 6 +- templates/live.html.j2 | 4 - templates/search.html.j2 | 4 - 9 files changed, 440 insertions(+), 438 deletions(-) delete mode 100644 static/css/base.css create mode 100644 static/css/discordia.css delete mode 100644 static/css/forms.css delete mode 100644 static/css/nav.css delete mode 100644 static/css/quests.css delete mode 100644 static/css/results.css diff --git a/static/css/base.css b/static/css/base.css deleted file mode 100644 index 79ee676..0000000 --- a/static/css/base.css +++ /dev/null @@ -1,40 +0,0 @@ -/* base.css - Core layout and typography */ - -* { box-sizing: border-box; } - -body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - margin: 0; - padding: 0; - background: #0a0a0a; - color: #e0e0e0; -} - -a { color: #ff6b6b; } - -.container { padding: 20px; } - -h1 { color: #ff6b6b; margin-bottom: 5px; } -.subtitle { color: #666; margin-bottom: 20px; } - -/* Common section styling */ -.section-title { - color: #ff6b6b; - font-size: 18px; - margin: 25px 0 15px 0; - border-bottom: 1px solid #333; - padding-bottom: 8px; -} - -/* Stats display */ -.stats { - padding: 10px 15px; - background: #1a1a1a; - border-radius: 8px; - margin-bottom: 20px; - font-size: 14px; - color: #888; -} - -/* Text selection */ -::selection { background: #ff6b6b; color: #0a0a0a; } diff --git a/static/css/discordia.css b/static/css/discordia.css new file mode 100644 index 0000000..11cbfa6 --- /dev/null +++ b/static/css/discordia.css @@ -0,0 +1,439 @@ +/* + * discordia.css - The Law of Fives + * + * All things happen in fives, or are divisible by or are multiples of five, + * or are somehow directly or indirectly appropriate to 5. + * + * This stylesheet is organized into 5 sections: + * I. CHAOS - The void from which all emerges + * II. DISCORD - Navigation through the confusion + * III. CONFUSION - Forms that capture intent + * IV. BUREAUCRACY - The grid that contains + * V. AFTERMATH - Side quests for the worthy + * + * fnord + */ + + +/* ═══════════════════════════════════════════════════════════════════════════ + * I. CHAOS - The void, the base, where all begins + * ═══════════════════════════════════════════════════════════════════════════ */ + +* { box-sizing: border-box; } + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + margin: 0; + padding: 0; + background: #0a0a0a; + color: #e0e0e0; +} + +a { color: #ff6b6b; } + +.container { padding: 20px; } + +h1 { color: #ff6b6b; margin-bottom: 5px; } +.subtitle { color: #666; margin-bottom: 20px; } + +.section-title { + color: #ff6b6b; + font-size: 18px; + margin: 25px 0 15px 0; + border-bottom: 1px solid #333; + padding-bottom: 8px; +} + +.stats { + padding: 10px 15px; + background: #1a1a1a; + border-radius: 8px; + margin-bottom: 20px; + font-size: 14px; + color: #888; +} + +::selection { background: #ff6b6b; color: #0a0a0a; } + + +/* ═══════════════════════════════════════════════════════════════════════════ + * II. DISCORD - Navigation, the path through chaos + * ═══════════════════════════════════════════════════════════════════════════ */ + +.nav { + background: #1a1a1a; + padding: 10px 20px; + display: flex; + gap: 20px; + align-items: center; + border-bottom: 1px solid #333; + flex-wrap: wrap; + position: relative; +} + +.nav a { + color: #ff6b6b; + text-decoration: none; + padding: 5px 0; +} + +.nav a:hover { text-decoration: underline; } + +.nav .brand { + font-weight: bold; + font-size: 18px; +} + +.nav select, +#lang-select { + background: #1a1a1a; + color: #888; + border: 1px solid #333; + border-radius: 4px; + padding: 4px 8px; + font-size: 12px; + cursor: pointer; +} + +@media (max-width: 600px) { + .nav { + gap: 12px; + padding: 10px 15px; + } + .nav a { font-size: 14px; } + .nav .brand { + font-size: 16px; + width: 100%; + margin-bottom: 5px; + } +} + + +/* ═══════════════════════════════════════════════════════════════════════════ + * III. CONFUSION - Forms, inputs, the capture of intent + * ═══════════════════════════════════════════════════════════════════════════ */ + +input[type="text"], +input[type="number"], +input[type="url"], +select, +textarea { + padding: 12px 16px; + font-size: 16px; + border: 2px solid #333; + border-radius: 8px; + background: #1a1a1a; + color: #fff; +} + +input[type="text"]:focus, +input[type="number"]:focus, +input[type="url"]:focus, +textarea:focus { + outline: none; + border-color: #ff6b6b; +} + +textarea { + min-height: 80px; + resize: vertical; + font-family: inherit; +} + +button, +.btn { + padding: 12px 24px; + font-size: 16px; + background: #ff6b6b; + color: #fff; + border: none; + border-radius: 8px; + cursor: pointer; + text-decoration: none; + display: inline-block; +} + +button:hover, +.btn:hover { background: #ff5252; } + +button:disabled { + background: #444; + cursor: not-allowed; +} + +.search-box { + display: flex; + gap: 10px; + margin-bottom: 20px; + flex-wrap: wrap; +} + +.search-box input[type="text"] { + flex: 1; + min-width: 200px; +} + +@media (max-width: 600px) { + .search-box input[type="text"] { + width: 100%; + flex: 1 1 100%; + } + .search-box select, + .search-box button { flex: 1 1 auto; } +} + +.form-group { margin-bottom: 15px; } + +.form-group label { + display: block; + margin-bottom: 5px; + color: #aaa; + font-size: 14px; +} + +.checkbox-group { + display: flex; + gap: 20px; + flex-wrap: wrap; + margin-bottom: 15px; +} + +.checkbox-group label { + display: flex; + align-items: center; + gap: 8px; + color: #ccc; + cursor: pointer; +} + +input[type="checkbox"] { + width: 18px; + height: 18px; + accent-color: #ff6b6b; +} + + +/* ═══════════════════════════════════════════════════════════════════════════ + * IV. BUREAUCRACY - The grid, results, structure imposed on chaos + * ═══════════════════════════════════════════════════════════════════════════ */ + +.results { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 15px; +} + +.result { + background: #1a1a1a; + border-radius: 8px; + overflow: hidden; + transition: transform 0.2s; +} + +.result:hover { transform: scale(1.02); } + +.result img, +.result video { + width: 100%; + height: 200px; + object-fit: contain; + background: #1a1a1a; +} + +.result-info { padding: 10px; } + +.result-filename { + font-size: 12px; + color: #aaa; + margin-bottom: 4px; + word-break: break-all; +} + +.result-meta { + font-size: 11px; + color: #666; +} + +.result-type { + display: inline-block; + padding: 2px 6px; + background: #333; + border-radius: 4px; + font-size: 10px; + color: #888; + text-transform: uppercase; +} + +.media-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 10px; +} + +.media-item { + background: #1a1a1a; + border-radius: 6px; + overflow: hidden; + animation: fadeIn 0.3s ease; +} + +.media-item img, +.media-item video { + width: 100%; + height: 150px; + object-fit: contain; + background: #0a0a0a; +} + +.media-item-info { + padding: 8px; + font-size: 11px; + color: #888; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +.pagination { + display: flex; + gap: 10px; + margin-top: 20px; + justify-content: center; + flex-wrap: wrap; +} + +.pagination a, +.pagination span { + padding: 8px 16px; + background: #1a1a1a; + border-radius: 4px; + text-decoration: none; + color: #888; +} + +.pagination a:hover { + background: #2a2a2a; + color: #ff6b6b; +} + +.pagination .current { + background: #ff6b6b; + color: #fff; +} + +.empty-state { + text-align: center; + padding: 60px 20px; + color: #666; +} + +.empty-state h2 { + color: #888; + margin-bottom: 10px; +} + + +/* ═══════════════════════════════════════════════════════════════════════════ + * V. AFTERMATH - Side quests, easter eggs, rewards for the curious + * + * "Not all who wander are lost." - 23 skidoo + * ═══════════════════════════════════════════════════════════════════════════ */ + +/* The brand reveals its nature */ +.brand::after { + content: ''; + display: inline-block; + width: 0; + overflow: hidden; + transition: width 0.3s ease; +} +.brand:hover::after { + content: ' \1F437'; /* 🐷 */ + width: 1.5em; +} +.brand:active::after { + content: ' oink!'; + width: 3em; + color: #ff6b6b; +} + +/* grow food not lawn - hover the void */ +body::after { + content: '\1F331 grow food not lawn'; + position: fixed; + bottom: -30px; + right: 20px; + color: #3a5; + font-size: 12px; + opacity: 0; + transition: all 0.5s ease; + pointer-events: none; +} +body:hover::after { + bottom: 10px; + opacity: 0.6; +} + +/* spider-pig descends from the nav */ +.nav::before { + content: '\1F577'; + position: absolute; + top: -20px; + left: 50%; + transform: translateX(-50%); + font-size: 10px; + opacity: 0; + transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} +.nav:hover::before { + top: 100%; + opacity: 0.3; +} + +/* The Sign Maker's mark */ +.sign-maker-mark { + margin-top: 80px; + font-size: 24px; + color: #222; + cursor: default; + transition: all 0.6s ease; + user-select: none; +} +.sign-maker-mark:hover { + color: #ff6b6b; + transform: rotate(360deg) scale(1.5); + text-shadow: 0 0 20px rgba(255,107,107,0.8); +} + +/* Spider SVG animation */ +.spider-svg { + position: absolute; + top: -60px; + left: 50%; + transform: translateX(-50%); + width: 24px; + height: 24px; + opacity: 0; + transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); +} +.hero-pig-wrap:hover .spider-svg { + top: -10px; + opacity: 0.6; +} + +/* The print reveals truth */ +@media print { + body::before { + content: 'You printed this? The Sign Maker approves. KALLISTI.'; + display: block; + text-align: center; + padding: 20px; + font-style: italic; + } + body::after { display: none; } + .nav::before { display: none; } +} + +/* fnord - you didn't see this */ diff --git a/static/css/forms.css b/static/css/forms.css deleted file mode 100644 index 8c9af28..0000000 --- a/static/css/forms.css +++ /dev/null @@ -1,109 +0,0 @@ -/* forms.css - Form elements, buttons, inputs */ - -input[type="text"], -input[type="number"], -input[type="url"], -select, -textarea { - padding: 12px 16px; - font-size: 16px; - border: 2px solid #333; - border-radius: 8px; - background: #1a1a1a; - color: #fff; -} - -input[type="text"]:focus, -input[type="number"]:focus, -input[type="url"]:focus, -textarea:focus { - outline: none; - border-color: #ff6b6b; -} - -textarea { - min-height: 80px; - resize: vertical; - font-family: inherit; -} - -button, -.btn { - padding: 12px 24px; - font-size: 16px; - background: #ff6b6b; - color: #fff; - border: none; - border-radius: 8px; - cursor: pointer; - text-decoration: none; - display: inline-block; -} - -button:hover, -.btn:hover { - background: #ff5252; -} - -button:disabled { - background: #444; - cursor: not-allowed; -} - -/* Search box layout */ -.search-box { - display: flex; - gap: 10px; - margin-bottom: 20px; - flex-wrap: wrap; -} - -.search-box input[type="text"] { - flex: 1; - min-width: 200px; -} - -@media (max-width: 600px) { - .search-box input[type="text"] { - width: 100%; - flex: 1 1 100%; - } - .search-box select, - .search-box button { - flex: 1 1 auto; - } -} - -/* Form groups */ -.form-group { - margin-bottom: 15px; -} - -.form-group label { - display: block; - margin-bottom: 5px; - color: #aaa; - font-size: 14px; -} - -/* Checkbox styling */ -.checkbox-group { - display: flex; - gap: 20px; - flex-wrap: wrap; - margin-bottom: 15px; -} - -.checkbox-group label { - display: flex; - align-items: center; - gap: 8px; - color: #ccc; - cursor: pointer; -} - -input[type="checkbox"] { - width: 18px; - height: 18px; - accent-color: #ff6b6b; -} diff --git a/static/css/nav.css b/static/css/nav.css deleted file mode 100644 index 419e220..0000000 --- a/static/css/nav.css +++ /dev/null @@ -1,51 +0,0 @@ -/* nav.css - Navigation styles */ - -.nav { - background: #1a1a1a; - padding: 10px 20px; - display: flex; - gap: 20px; - align-items: center; - border-bottom: 1px solid #333; - flex-wrap: wrap; - position: relative; -} - -.nav a { - color: #ff6b6b; - text-decoration: none; - padding: 5px 0; -} - -.nav a:hover { text-decoration: underline; } - -.nav .brand { - font-weight: bold; - font-size: 18px; -} - -/* Language selector */ -.nav select, -#lang-select { - background: #1a1a1a; - color: #888; - border: 1px solid #333; - border-radius: 4px; - padding: 4px 8px; - font-size: 12px; - cursor: pointer; -} - -/* Mobile nav */ -@media (max-width: 600px) { - .nav { - gap: 12px; - padding: 10px 15px; - } - .nav a { font-size: 14px; } - .nav .brand { - font-size: 16px; - width: 100%; - margin-bottom: 5px; - } -} diff --git a/static/css/quests.css b/static/css/quests.css deleted file mode 100644 index ef21375..0000000 --- a/static/css/quests.css +++ /dev/null @@ -1,100 +0,0 @@ -/* quests.css - Side quests, easter eggs, CSS-only delights - * - * Side quest 4/21: You found the quest stylesheet. - * Not all who wander are lost. - */ - -/* Brand hover pig */ -.brand::after { - content: ''; - display: inline-block; - width: 0; - overflow: hidden; - transition: width 0.3s ease; -} -.brand:hover::after { - content: ' \1F437'; /* 🐷 */ - width: 1.5em; -} -.brand:active::after { - content: ' oink!'; - width: 3em; - color: #ff6b6b; -} - -/* grow food not lawn - hover the void */ -body::after { - content: '\1F331 grow food not lawn'; /* 🌱 */ - position: fixed; - bottom: -30px; - right: 20px; - color: #3a5; - font-size: 12px; - opacity: 0; - transition: all 0.5s ease; - pointer-events: none; -} -body:hover::after { - bottom: 10px; - opacity: 0.6; -} - -/* spider-pig lives in the nav shadow */ -.nav::before { - content: '\1F577'; /* 🕷️ */ - position: absolute; - top: -20px; - left: 50%; - transform: translateX(-50%); - font-size: 10px; - opacity: 0; - transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); -} -.nav:hover::before { - top: 100%; - opacity: 0.3; -} - -/* The Sign Maker's mark - for those who scroll */ -.sign-maker-mark { - margin-top: 80px; - font-size: 24px; - color: #222; - cursor: default; - transition: all 0.6s ease; - user-select: none; -} -.sign-maker-mark:hover { - color: #ff6b6b; - transform: rotate(360deg) scale(1.5); - text-shadow: 0 0 20px rgba(255,107,107,0.8); -} - -/* Spider SVG descends */ -.spider-svg { - position: absolute; - top: -60px; - left: 50%; - transform: translateX(-50%); - width: 24px; - height: 24px; - opacity: 0; - transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); -} -.hero-pig-wrap:hover .spider-svg { - top: -10px; - opacity: 0.6; -} - -/* Print stylesheet surprise */ -@media print { - body::before { - content: 'You printed this? The Sign Maker approves. Truth, Freedom, Harmony, Love.'; - display: block; - text-align: center; - padding: 20px; - font-style: italic; - } - body::after { display: none; } - .nav::before { display: none; } -} diff --git a/static/css/results.css b/static/css/results.css deleted file mode 100644 index 613cc62..0000000 --- a/static/css/results.css +++ /dev/null @@ -1,125 +0,0 @@ -/* results.css - Media results grid styling */ - -.results { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - gap: 15px; -} - -.result { - background: #1a1a1a; - border-radius: 8px; - overflow: hidden; - transition: transform 0.2s; -} - -.result:hover { - transform: scale(1.02); -} - -.result img, -.result video { - width: 100%; - height: 200px; - object-fit: contain; - background: #1a1a1a; -} - -.result-info { - padding: 10px; -} - -.result-filename { - font-size: 12px; - color: #aaa; - margin-bottom: 4px; - word-break: break-all; -} - -.result-meta { - font-size: 11px; - color: #666; -} - -.result-type { - display: inline-block; - padding: 2px 6px; - background: #333; - border-radius: 4px; - font-size: 10px; - color: #888; - text-transform: uppercase; -} - -/* Live feed specific */ -.media-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 10px; -} - -.media-item { - background: #1a1a1a; - border-radius: 6px; - overflow: hidden; - animation: fadeIn 0.3s ease; -} - -.media-item img, -.media-item video { - width: 100%; - height: 150px; - object-fit: contain; - background: #0a0a0a; -} - -.media-item-info { - padding: 8px; - font-size: 11px; - color: #888; -} - -@keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } -} - -/* Pagination */ -.pagination { - display: flex; - gap: 10px; - margin-top: 20px; - justify-content: center; - flex-wrap: wrap; -} - -.pagination a, -.pagination span { - padding: 8px 16px; - background: #1a1a1a; - border-radius: 4px; - text-decoration: none; - color: #888; -} - -.pagination a:hover { - background: #2a2a2a; - color: #ff6b6b; -} - -.pagination .current { - background: #ff6b6b; - color: #fff; -} - -/* Empty state */ -.empty-state { - text-align: center; - padding: 60px 20px; - color: #666; -} - -.empty-state h2 { - color: #888; - margin-bottom: 10px; -} diff --git a/templates/base.html.j2 b/templates/base.html.j2 index 20d8b54..069e529 100644 --- a/templates/base.html.j2 +++ b/templates/base.html.j2 @@ -16,11 +16,7 @@ {% block title %}neopig{% endblock %} - - - - - {% block extra_css_links %}{% endblock %} + {% block extra_head %}{% endblock %} diff --git a/templates/live.html.j2 b/templates/live.html.j2 index b78508e..12c21b1 100644 --- a/templates/live.html.j2 +++ b/templates/live.html.j2 @@ -2,10 +2,6 @@ {% block title %}{{ t.live }} - neopig{% endblock %} -{% block extra_css_links %} - -{% endblock %} - {% block extra_css %} /* Live feed specific stats */ .stats { display: flex; gap: 30px; flex-wrap: wrap; padding: 15px; } diff --git a/templates/search.html.j2 b/templates/search.html.j2 index e037c24..4d77f86 100644 --- a/templates/search.html.j2 +++ b/templates/search.html.j2 @@ -2,10 +2,6 @@ {% block title %}neopig SERP{% endblock %} -{% block extra_css_links %} - -{% endblock %} - {% block extra_css %} /* Search page specific */ .result-hash { font-family: monospace; font-size: 11px; color: #ff6b6b; text-decoration: none; word-break: break-all; }