blog

My blog at www.shimmy1996.com

git clone git://git.shimmy1996.com/blog.git
commit 08b7667a01b2278b588960475d3ea294007be78a
parent 7cb761019a1e618c1e95ce76264589dc580ade96
Author: Shimmy Xu <shimmy.xu@shimmy1996.com>
Date:   Sun,  5 Jan 2020 18:35:04 -0600

Rearrange and adjust the CSS

Diffstat:
Mlayouts/partials/css/color.css | 33++++++++++++++++++++-------------
Mlayouts/partials/css/custom.css | 59+++++++++++++++++++++++++++++++++--------------------------
2 files changed, 53 insertions(+), 39 deletions(-)
diff --git a/layouts/partials/css/color.css b/layouts/partials/css/color.css
@@ -1,14 +1,21 @@
-:root {
-    --background-color: #dcc;
-    --alt-background-color: #baa;
-    --accent-color: #455;
-    --text-color: #233;
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background-color: #233;
-        --alt-background-color: #455;
-        --accent-color: #baa;
-        --text-color: #dcc;
-    }
+body {
+    background: var(--background-color);
+    color: var(--text-color);
+}
+a {
+    color: var(--accent-color);
+}
+thead, tfoot, tr:nth-child(even), pre, code, kbd {
+    background: var(--alt-background-color);
+}
+a:focus, a:hover {
+    background: var(--accent-color);
+    color: var(--background-color);
+}
+input, textarea {
+    background: var(--alt-background-color);
+    color: var(--text-color);
+}
+::placeholder {
+    color: var(--text-color);
 }
diff --git a/layouts/partials/css/custom.css b/layouts/partials/css/custom.css
@@ -1,36 +1,43 @@
 body {
     font-family: sans-serif;
 }
-
-a:focus, a:hover {
-    background: var(--accent-color);
-    color: var(--background-color);
-}
-
 input, textarea {
-    color: var(--text-color);
-    background: var(--alt-background-color);
     border: 0;
     padding: 5px;
     border-radius: 0;
+    margin: 0.5em 0 0.5em 0;
 }
-
 textarea {
-    resize:vertical;
-    min-height:4em;
-    width:100%;
-    box-sizing:border-box;
-}
-
-::placeholder {
-    color: var(--text-color);
-}
-
-#comments div {
-    margin: 1em 0 1em 0;
-}
-
-hr {
-    border: none;
-    border-top: 1px solid var(--alt-background-color);
+    resize: vertical;
+    min-height: 4em;
+    width: 100%;
+    box-sizing: border-box;
+}
+header h1, header h3 {
+    margin-bottom: 0.1em;
+}
+header nav {
+    font-size: 90%;
+}
+header {
+    margin-bottom: 1em;
+}
+article article {
+    border-top: 1px solid;
+    margin-bottom: 1em;
+}
+{{ partial "css/color.css" . | safeCSS }}
+:root {
+    --background-color: #dcc;
+    --alt-background-color: #baa;
+    --accent-color: #455;
+    --text-color: #233;
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #233;
+        --alt-background-color: #455;
+        --accent-color: #baa;
+        --text-color: #dcc;
+    }
 }