aboutsummaryrefslogtreecommitdiffhomepage
path: root/public/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/style.css')
-rw-r--r--public/style.css357
1 files changed, 213 insertions, 144 deletions
diff --git a/public/style.css b/public/style.css
index 3067b57..4221819 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3,200 +3,269 @@
}
:root {
- --theme-color: #015B24;
- --secondary-color: #00953A;
+ --main-color: #228427;
+}
- --max-width: 760px;
+html {
+ font-family: "Lucida Grande", Lucida, Geneva, Helvetica, Arial, sans-serif;
+ padding: 0;
+ margin: 0;
+ scroll-behavior: smooth;
}
-@font-face {
- font-family: "Plex Sans";
- src: url("/public/fonts/IBMPlexSans-Regular.woff2") format("woff2");
- font-style: normal;
- font-weight: normal;
+body {
+ background-color: #f9f9f9;
+ color: #333;
+ font-size: 100%;
+ margin: 12px;
+ padding: 0;
}
-@font-face {
- font-family: "Plex Sans";
- src: url("/public/fonts/IBMPlexSans-Bold.woff2") format("woff2");
- font-style: normal;
- font-weight: bold;
+nav > ul {
+ display: flex;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ flex-wrap: wrap;
+ font-weight: bold;
+ flex-direction: row;
+ position: relative;
}
-@font-face {
- font-family: "Plex Sans";
- src: url("/public/fonts/IBMPlexSans-Italic.woff2") format("woff2");
- font-style: italic;
- font-weight: normal;
+nav > ul > li {
+ align-items: center;
+ display: inline-flex;
}
-html {
- background: beige;
+nav > ul > li > a {
+ border: 1px solid var(--main-color);
+ color: var(--main-color);
+ display: inline-block;
+ margin: 0 -1px -1px 0;
+ padding: 7px;
+ text-decoration: none;
+ white-space: nowrap;
}
-body {
- font-family: "Plex Sans", "Helvetica", sans-serif;
- line-height: 1.55;
- font-size: 20px;
- margin: 0;
- padding: 0;
+nav > ul > li > a:hover, nav > ul > li > a:active {
+ text-decoration: none;
+ background-color: var(--main-color);
+ color: #fff;
+}
+
+/*--- End Top Nav ---*/
+
+main {
+ display: block;
+ width: 100%;
+ margin: 0;
+ padding: 1px 0 20px 0;
+ border: 1px solid var(--main-color);
+ background-color: #fff;
+}
+
+main > p > em {
+ font-weight: normal;
+ font-style: italic;
+}
+
+main ul, main ol {
+ padding-right: 10px;
+}
+
+/*--- Begin Footer ---*/
+
+footer nav ul {
+ margin: -1px 0 0 0;
+}
+footer small {
+ display: block;
+ margin: 20px 0 0 0;
+ padding: 0 0 0 10px;
}
-a,a:visited {
- color: var(--theme-color);
+/*--- Links ---*/
+
+a {
+ color: var(--main-color);
}
-a:hover,a:focus {
- background: var(--theme-color);
- color: white;
+
+a:hover {
+ text-decoration: none;
+ color: #fff;
+ background-color: var(--main-color);
+}
+
+a:active {
+ text-decoration: none;
+ color: #fff;
+ background-color: var(--main-color);
+}
+
+a, img {
+ border: none;
}
+a:focus, img:focus {
+ outline: none;
+}
+
+/*--- Header Styles ---*/
+
h1 {
- background-color: var(--theme-color);
- color: white;
- font-size: 180%;
- margin: 0;
- padding: 1.2rem;
- position: relative;
- text-align: center;
+ font-size: 190%;
+ margin: 18px 18px 0 18px;
+}
+
+h2 {
+ font-size: 125%;
+ margin: 18px 18px 0 18px;
}
-h2,h3,h4,h5,h6 {
- font-size: 140%;
- margin: 2em 0 0;
+
+h3 {
+ font-size: 113%;
+ margin: 18px 18px 0 18px;
}
-blockquote {
- border-left: 4px solid;
- margin: 2em 0 2em 2em;
- padding: 2px 8px;
+h4 {
+ margin: 18px 18px 0 18px;
}
-blockquote p {
- font-style: italic;
- margin: 0;
- padding: 0;
+
+p {
+ margin: 12px 18px 18px 18px;
+ padding: 0;
+ line-height: 1.25em;
+}
+
+hr {
+ margin: 2rem 0;
}
+
img {
+ height: auto;
max-width: 100%;
}
+
pre {
- border: 1px solid;
+ background: #eee;
+ padding: 20px;
overflow: auto;
- padding: 5px;
+}
+
+code {
+ font-size: 110%;
+}
+
+.table-container {
+ margin: 2rem 0;
+ overflow-y: scroll;
}
table {
+ border-collapse: collapse;
+ min-width: 500px;
text-align: left;
width: 100%;
}
-nav {
- padding: 10px 20px;
- margin: 0 auto;
- max-width: var(--max-width);
-}
-nav a:last-of-type {
- float: right;
+table caption {
+ background: #eee;
+ font-weight: bold;
+ font-size: 120%;
+ padding: 10px;
+ text-align: left;
}
-#menu,
-.posts {
- list-style: none;
- padding: 0;
+table tr {
+ border-bottom: 1px solid;
}
-.posts li {
- margin-bottom: 8px;
+table th, table td {
+ padding: 10px;
}
-.posts li span {
- display: block;
- font-size: 90%;
+
+blockquote {
+ background: #f2f2f2;
+ border-left: 2px solid grey;
+ padding: 6px;
}
-#menu {
- align-content: center;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
+blockquote p {
+ margin: 0;
}
-#menu li {
- display: inline-block;
- margin: 0;
- padding: 0 15px 15px 0;
+
+.footnotes {
+ font-size: 90%;
}
-main {
- margin: 0 auto;
- max-width: var(--max-width);
- padding: 0 10px 10px;
-}
-main h1 + p {
- background-color: var(--secondary-color);
- color: white;
- font-weight: bold;
- margin-bottom: 2rem;
- margin-top: 0;
- padding: 0.5rem;
- text-align: center;
-}
-main h1 + p a {
- color: white !important;
-}
-figure {
- margin: 3em 0;
-}
-figure img {
- width: 100%;
-}
-figcaption {
- font-size: 90%;
- opacity: 0.7;
-}
-footer {
- border-top: 1px solid;
- margin: 2em auto;
- max-width: var(--max-width);
- padding: 10px;
- text-align: center;
+
+/*--- List Styles ---*/
+
+ol {
+ line-height: 1.25em;
}
-.footnotes {
- font-size: 90%;
- margin-top: 2rem;
+
+ul, ol {
+ margin: 12px 0 0 36px;
+ padding: 0 0 0 24px;
+ line-height: 1.5em;
}
-code {
- background: white;
- border: 1px dotted;
- font-size: 18px;
- padding: 0.1rem;
+
+ul {
+ list-style-type: square;
}
-pre:has(code) {
- border: 1px solid;
- background: white;
- padding: 0.5rem;
+
+li ul, li ol {
+ margin-top: 0;
}
-pre code {
- border: 0;
+
+ul.posts li {
+ margin-bottom: 10px;
}
+ul.posts li span {
+ display: block;
+}
@media(max-width:600px) {
- body {
- font-size: 18px;
+ nav ul {
+ display: block;
+ margin: 0 0 -1px 0;
}
- code {
- font-size: 16px;
+ nav > ul > li {
+ width: 50%;
}
- footer {
- text-align: left;
+ nav > ul > li > a {
+ border-right: 0;
+ display: block;
+ margin: 0;
+ width: 100%;
}
- #menu {
- justify-content: flex-start;
+ nav ul li:nth-of-type(even) a {
+ border-right: 1px solid var(--main-color);
+ }
+
+ footer nav ul li {
+ margin: 0 0 -1px 0;
}
}
@media(prefers-color-scheme: dark) {
- html {
- background: #1C1B22;
- }
- a,a:visited {
- color: lightgreen;
- }
- a:hover,a:focus {
- background: var(--secondary-color);
- color: white;
- }
- code, pre:has(code) {
- background: black;
- }
+ :root {
+ --main-color: #eee8a7;
+ }
+ html, body {
+ background: black;
+ }
+ body {
+ color: white;
+ }
+ main {
+ background: #2d2d2d;
+ }
+ table caption {
+ background: black;
+ }
+ nav > ul > li > a:hover, nav > ul > li > a:active,a:hover,a:active {
+ color: black;
+ }
+ pre {
+ background: black;
+ }
+ blockquote {
+ background: black;
+ }
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-17 04:59:58 +0000