PostText/assets/css/post_text.css
2023-05-24 23:51:35 -04:00

258 lines
4.8 KiB
CSS

/*
* 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;
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: 1em 0;
}
.page-title {
text-align: center;
border: inset var(--dark-warm-gray);
padding: 0.5em 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: 1em;
padding: 0.5em 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(--teal);
}
.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;
}