Split up CSS into separate files

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)

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

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%;
+}

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;
+}

assets/css/post_text.css

@@ -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;
-}

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);
+}