Fiddle the color palette a bit

[styx.blog] / core / templates / core / style.css

diff --git a/core/templates/core/style.css b/core/templates/core/style.css
index d208566..3e7ea09 100644 (file)
--- a/core/templates/core/style.css
+++ b/core/templates/core/style.css
@@ -1,4 +1,22 @@
-html { height: 100%; font-family: "Lucida Grande", Verdana, Arial, sans-serif;
+{% with dark_background='#121212' dark_foreground='#dfdede' light_background='#ddddd7' light_foreground='#444444' %}
+html {
+  height: 100%;
+  font-family: "Lucida Grande", Verdana, Arial, sans-serif;
+}
+
+html,
+a,
+a:link,
+a:hover,
+a:visited,
+a:active {
+  color: {{ light_foreground }};
+  background: {{ light_background }};
+}
+
+header, main, footer, p {
+  margin: 0;
+  padding: 0;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -33,13 +51,21 @@ body > header {
 }
 
 body > header > h1 {
+  font-family: Geneva, sans-serif;
+  font-weight: 100;
   font-size: 5rem;
 }
 
 body > nav {
+  display: flex;
+  align-items: center;
   margin-bottom: 4rem;
 }
 
+body > nav a:not(:first-child) {
+  margin-left: 1.5rem;
+}
+
 body > main {
   width: calc(100% - 4rem);
   max-width: 40rem;
@@ -77,38 +103,61 @@ article {
   display: flex;
   flex-direction: column;
 
-  margin: 2.5rem 0;
+  margin-top: 2.75rem;
 }
 
-article h1 a,
-article h1 a:visited {
+article:first-of-type {
+  margin-top: 0;
+}
+
+article:not(:first-of-type) {
+  border-top: 1px solid {{ light_foreground }};
+  padding-top: 2rem;
+}
+
+article > header h1 a,
+article > header h1 a:visited {
   text-decoration: none;
 }
 
-article h1 a:hover,
-article h1 a:active{
+article > header h1 a:hover,
+article > header h1 a:active{
   text-decoration: underline;
 }
 
-article h1 {
+article > header h1 {
   font-size: 2rem;
 }
 
-article a.read-more {
-  margin-top: 1rem;
+article > main {
+  margin: 1.6rem 0;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color: #dfdede;
-    background: #121212;
-  }
+article > main:last-child {
+  margin-bottom: 0;
+}
 
-  a {
-    color: #dfdede;
+nav.pagination:first-child {
+  margin-bottom: 3rem;
+}
+
+nav.pagination:last-child {
+  margin-top: 3rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  html,
+  a,
+  a:link,
+  a:hover,
+  a:visited,
+  a:active {
+    color: {{ dark_foreground }};
+    background: {{ dark_background }};
   }
 
-  article.teaser:not(:first-of-type) {
-    border-top: 1px solid #dfdddd;
+  article:not(:first-of-type) {
+    border-top: 1px solid {{ dark_foreground }};
   }
 }
+{% endwith %}