From f273eb61f9172ac03e9acb64d82e6dd89b042fb0 Mon Sep 17 00:00:00 2001
From: swag <swaggboi@slackware.uk>
Date: Fri, 26 May 2023 23:48:50 -0400
Subject: [PATCH] Split up CSS into separate files

---
 README.md                |   1 -
 assets/assetpack.def     |   4 +-
 assets/css/elements.css  |  35 ++++++
 assets/css/nested.css    |  99 +++++++++++++++
 assets/css/post_text.css | 258 ---------------------------------------
 assets/css/simple.css    | 110 +++++++++++++++++
 6 files changed, 247 insertions(+), 260 deletions(-)
 create mode 100644 assets/css/elements.css
 create mode 100644 assets/css/nested.css
 delete mode 100644 assets/css/post_text.css
 create mode 100644 assets/css/simple.css

diff --git a/README.md b/README.md
index 88a094e..4d12db6 100644
--- a/README.md
+++ b/README.md
@@ -58,7 +58,6 @@ Run the tests locally (against development environment):
 
 ## TODOs
 
-1. CSS
 1. Create mod takes null input??
 1. Check status for items not found, should be 404 but getting 5xx
 1. "All new posts flagged" mode (require approval for new posts)
diff --git a/assets/assetpack.def b/assets/assetpack.def
index 6cd5fb3..e2a5c19 100644
--- a/assets/assetpack.def
+++ b/assets/assetpack.def
@@ -1,3 +1,5 @@
 ! app.css
 < https://unpkg.com/normalize.css@8.0.1/normalize.css
-< css/post_text.css
+< css/elements.css
+< css/simple.css
+< css/nested.css
diff --git a/assets/css/elements.css b/assets/css/elements.css
new file mode 100644
index 0000000..c8ab3dd
--- /dev/null
+++ b/assets/css/elements.css
@@ -0,0 +1,35 @@
+:root {
+    --light-warm-gray: #C2B3A9;
+    --dark-warm-gray: #A59990;
+    --teal: #5B90A4;
+    --light-blue: #8C97A8;
+    --dark-blue: #696F80;
+    --true-gray: #999999;
+    --highlight-green: green;
+    --highlight-red: red;
+    --transparent: #FFFFFFDD;
+
+    box-sizing: border-box;
+    font-size: calc(8px + 1vmin);
+}
+
+*, ::before, ::after { box-sizing: inherit; }
+
+body {
+    background-image: url('/images/background2.gif');
+    width: 95vmin;
+    margin: 0 auto;
+}
+
+code {
+    background-color: black;
+    color: lime;
+    font-size: 0.75rem; /* Why tho?? */
+}
+
+pre > code {
+    white-space: pre-wrap;
+    padding: 0.5em 1em;
+    display: inline-block;
+    width: 100%;
+}
diff --git a/assets/css/nested.css b/assets/css/nested.css
new file mode 100644
index 0000000..fb7998b
--- /dev/null
+++ b/assets/css/nested.css
@@ -0,0 +1,99 @@
+.pager {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25em;
+  padding: 0;
+}
+
+.pager__nav {
+  display: flex;
+  flex-flow: row wrap;
+  border: inset var(--dark-warm-gray);
+  background-color: var(--dark-warm-gray);
+  padding: 0.5em 0.25em;
+  gap: 0.25em;
+}
+
+/* ================================================================== */
+
+/*
+ * Can't really add a class to these nav elements with
+ * Mojolicious::Plugin::TagHelpers::Pagination...
+ */
+
+.pager__nav > a {
+  border: outset var(--light-blue);
+  flex: 1;
+  text-align: center;
+  background-color: var(--light-blue);
+  text-decoration: none;
+  color: black;
+}
+
+.pager__nav > a[rel="self"] {
+  border: inset var(--dark-blue);
+  background-color: var(--dark-blue);
+}
+
+.pager__nav > a:link::first-letter { text-decoration: underline; }
+
+.pager__nav > a:active {
+  border: inset var(--dark-blue);
+  background-color: var(--dark-blue);
+}
+
+/* ================================================================== */
+
+.post {
+  background-color: var(--light-warm-gray);
+  border: outset var(--light-warm-gray);
+  overflow-wrap: anywhere;
+}
+
+.post__title {
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--teal);
+  margin: 0;
+  padding: 0.25em 0.5em 0.25em 0.75em;
+  align-items: center;
+  border: inset var(--dark-warm-gray);
+}
+
+.post__id {
+  border: outset var(--true-gray);
+  padding: 0.25em;
+  background-color: var(--true-gray);
+  text-decoration: none;
+  white-space: nowrap;
+  color: black;
+}
+
+.post__id:link::first-letter { text-decoration: underline; }
+
+.post__id:active { border: inset var(--true-gray); }
+
+.post__date, .post__author, .post__body {
+  margin: 1em 0.5em;
+  padding: 0.25em 0.5em;
+}
+
+.post__body {
+    background-color: var(--dark-warm-gray);
+    border: inset var(--dark-warm-gray);
+}
+
+.post__nav {
+  display: flex;
+  justify-content: flex-end;
+  flex-flow: row wrap;
+  padding: 0 1em 0.5em 1em;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.post__nav > .click {
+  flex: 1 0;
+  text-align: center;
+  padding: 0.25em 0;
+}
diff --git a/assets/css/post_text.css b/assets/css/post_text.css
deleted file mode 100644
index 16c8673..0000000
--- a/assets/css/post_text.css
+++ /dev/null
@@ -1,258 +0,0 @@
-/*
- * Tags
- */
-
-:root {
-    --light-warm-gray: #C2B3A9;
-    --dark-warm-gray: #A59990;
-    --teal: #5B90A4;
-    --light-blue: #8C97A8;
-    --dark-blue: #696F80;
-    --true-gray: #999999;
-    --highlight-green: green;
-    --highlight-red: red;
-    --transparent: #FFFFFFDD;
-
-    box-sizing: border-box;
-    font-size: calc(8px + 1vmin);
-}
-
-*, ::before, ::after { box-sizing: inherit; }
-
-body {
-    background-image: url('/images/background2.gif');
-    width: 95vmin;
-    margin: 0 auto;
-}
-
-code {
-    background-color: black;
-    color: lime;
-    font-size: 0.75rem; /* Why tho?? */
-}
-
-pre > code {
-    white-space: pre-wrap;
-    padding: 0.5em 1em;
-    display: inline-block;
-    width: 100%;
-}
-
-/*
- * Simple classes
- */
-
-.click {
-    color: black;
-    text-decoration: none;
-    border: outset var(--light-blue);
-    background-color: var(--light-blue);
-    white-space: nowrap; /* Prevent the button from going multi-line */
-}
-
-.click::first-letter { text-decoration: underline; }
-
-.click:active {
-    border: inset var(--dark-blue);
-    background-color: var(--dark-blue);
-}
-
-.site-header {
-    display: flex;
-    flex-flow: column;
-    gap: 1em;
-}
-
-.site-title {
-  text-align: center;
-  border: outset var(--light-warm-gray);
-  background-color: var(--light-warm-gray);
-  padding: 0.5em 0;
-  margin-bottom: 0.15em;
-  overflow-wrap: anywhere;
-}
-
-.site-nav {
-  display: flex;
-  flex-flow: row wrap;
-  gap: 0.25em;
-  border: outset var(--light-warm-gray);
-  padding: 0.5em 0.25em;
-  background-color: var(--light-warm-gray);
-}
-
-.site-nav > .click {
-    flex: 1;
-    padding: 0 0.5em 0 0.5em;
-}
-
-.site-footer {
-  text-align: center;
-  border: outset var(--light-warm-gray);
-  background-color: var(--light-warm-gray);
-  padding: 0;
-  margin: 1.25em 0;
-}
-
-.page-title {
-  text-align: center;
-  border: inset var(--dark-warm-gray);
-  padding: 0.5em 0;
-  margin: 0.75em 0;
-  background-color: var(--dark-warm-gray);
-}
-
-.page-body {
-  background-color: var(--light-warm-gray);
-  border: outset var(--light-warm-gray);
-  padding: 0.5em 1em;
-}
-
-.form-body {
-  background-color: var(--light-warm-gray);
-  border: outset var(--light-warm-gray);
-  padding: 0.5em 1em;
-  display: flex;
-  flex-flow: column;
-  gap: 1em;
-}
-
-.form-field {
-    display: flex;
-    flex-flow: column;
-}
-
-.form-field > textarea {
-    overflow: scroll;
-    resize: vertical;
-}
-
-.form-button {
-    border: outset var(--light-blue);
-    background-color: var(--light-blue);
-    padding: 0.5em 1.5em;
-    text-align: left;
-}
-
-.form-button::first-letter { text-decoration: underline; }
-
-.form-button:active {
-    border: inset var(--dark-blue);
-    background-color: var(--dark-blue);
-}
-
-.field-with-info {
-    border: dashed var(--highlight-green) 0.5em;
-    padding: 1em;
-    background-color: var(--transparent);
-}
-
-.field-with-error {
-    border: dashed var(--highlight-red) 0.5em;
-    padding: 1em;
-    background-color: var(--transparent);
-}
-
-/*
- * Nested/layered classes
- */
-
-.pager {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25em;
-  padding: 0;
-}
-
-.pager__nav {
-  display: flex;
-  flex-flow: row wrap;
-  border: inset var(--dark-warm-gray);
-  background-color: var(--dark-warm-gray);
-  padding: 0.5em 0.25em;
-  gap: 0.25em;
-}
-
-/* ================================================================== */
-
-/*
- * Can't really add a class to these nav elements with
- * Mojolicious::Plugin::TagHelpers::Pagination...
- */
-
-.pager__nav > a {
-  border: outset var(--light-blue);
-  flex: 1;
-  text-align: center;
-  background-color: var(--light-blue);
-  text-decoration: none;
-  color: black;
-}
-
-.pager__nav > a[rel="self"] {
-  border: inset var(--dark-blue);
-  background-color: var(--dark-blue);
-}
-
-.pager__nav > a:link::first-letter { text-decoration: underline; }
-
-.pager__nav > a:active {
-  border: inset var(--dark-blue);
-  background-color: var(--dark-blue);
-}
-
-/* ================================================================== */
-
-.post {
-  background-color: var(--light-warm-gray);
-  border: outset var(--light-warm-gray);
-  overflow-wrap: anywhere;
-}
-
-.post__title {
-  display: flex;
-  justify-content: space-between;
-  background-color: var(--teal);
-  margin: 0;
-  padding: 0.25em 0.5em 0.25em 0.75em;
-  align-items: center;
-  border: inset var(--dark-warm-gray);
-}
-
-.post__id {
-  border: outset var(--true-gray);
-  padding: 0.25em;
-  background-color: var(--true-gray);
-  text-decoration: none;
-  white-space: nowrap;
-  color: black;
-}
-
-.post__id:link::first-letter { text-decoration: underline; }
-
-.post__id:active { border: inset var(--true-gray); }
-
-.post__date, .post__author, .post__body {
-  margin: 1em 0.5em;
-  padding: 0.25em 0.5em;
-}
-
-.post__body {
-    background-color: var(--dark-warm-gray);
-    border: inset var(--dark-warm-gray);
-}
-
-.post__nav {
-  display: flex;
-  justify-content: flex-end;
-  flex-flow: row wrap;
-  padding: 0 1em 0.5em 1em;
-  gap: 0.5em;
-  align-items: center;
-}
-
-.post__nav > .click {
-  flex: 1 0;
-  text-align: center;
-  padding: 0.25em 0;
-}
diff --git a/assets/css/simple.css b/assets/css/simple.css
new file mode 100644
index 0000000..307a02c
--- /dev/null
+++ b/assets/css/simple.css
@@ -0,0 +1,110 @@
+.click {
+    color: black;
+    text-decoration: none;
+    border: outset var(--light-blue);
+    background-color: var(--light-blue);
+    white-space: nowrap; /* Prevent the button from going multi-line */
+}
+
+.click::first-letter { text-decoration: underline; }
+
+.click:active {
+    border: inset var(--dark-blue);
+    background-color: var(--dark-blue);
+}
+
+.site-header {
+    display: flex;
+    flex-flow: column;
+    gap: 1em;
+}
+
+.site-title {
+  text-align: center;
+  border: outset var(--light-warm-gray);
+  background-color: var(--light-warm-gray);
+  padding: 0.5em 0;
+  margin-bottom: 0.15em;
+  overflow-wrap: anywhere;
+}
+
+.site-nav {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0.25em;
+  border: outset var(--light-warm-gray);
+  padding: 0.5em 0.25em;
+  background-color: var(--light-warm-gray);
+}
+
+.site-nav > .click {
+    flex: 1;
+    padding: 0 0.5em 0 0.5em;
+}
+
+.site-footer {
+  text-align: center;
+  border: outset var(--light-warm-gray);
+  background-color: var(--light-warm-gray);
+  padding: 0;
+  margin: 1.25em 0;
+}
+
+.page-title {
+  text-align: center;
+  border: inset var(--dark-warm-gray);
+  padding: 0.5em 0;
+  margin: 0.75em 0;
+  background-color: var(--dark-warm-gray);
+}
+
+.page-body {
+  background-color: var(--light-warm-gray);
+  border: outset var(--light-warm-gray);
+  padding: 0.5em 1em;
+}
+
+.form-body {
+  background-color: var(--light-warm-gray);
+  border: outset var(--light-warm-gray);
+  padding: 0.5em 1em;
+  display: flex;
+  flex-flow: column;
+  gap: 1em;
+}
+
+.form-field {
+    display: flex;
+    flex-flow: column;
+}
+
+.form-field > textarea {
+    overflow: scroll;
+    resize: vertical;
+}
+
+.form-button {
+    border: outset var(--light-blue);
+    background-color: var(--light-blue);
+    padding: 0.5em 1.5em;
+    text-align: left;
+}
+
+.form-button::first-letter { text-decoration: underline; }
+
+.form-button:active {
+    border: inset var(--dark-blue);
+    background-color: var(--dark-blue);
+}
+
+.field-with-info {
+    border: dashed var(--highlight-green) 0.5em;
+    padding: 1em;
+    background-color: var(--transparent);
+}
+
+.field-with-error {
+    border: dashed var(--highlight-red) 0.5em;
+    padding: 1em;
+    background-color: var(--transparent);
+}