Split up CSS into separate files
This commit is contained in:
parent
5635d73d89
commit
f273eb61f9
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
35
assets/css/elements.css
Normal file
35
assets/css/elements.css
Normal file
|
|
@ -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%;
|
||||
}
|
||||
99
assets/css/nested.css
Normal file
99
assets/css/nested.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
110
assets/css/simple.css
Normal file
110
assets/css/simple.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
Loading…
Reference in a new issue