a bit of stuff

routes/styles.css

@@ -80,20 +80,26 @@ h6 {
 
 body {
   display: grid;
+  color: var(--main-color);
   grid-template-rows: auto 1fr auto;
   min-height: 100vh;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 18px;
   margin: 0 auto;
-  --brand-color: rebeccapurple;
+
+  --brand-bg-color: darkslateblue;
+  --brand-color: lavenderblush;
+
+  background-color: lavenderblush;
+  --main-color: #222;
 }
 
 header {
-  background-color: var(--brand-color);
-  color: whitesmoke;
+  background-color: var(--brand-bg-color);
+  color: var(--brand-color);
   font-weight: bold;
   font-size: 50px;
-  padding: 1.5em 1em 1em 1em;
+  /* padding: 1.5em 0em 0em 1em; */
 }
 
 main {
@@ -101,14 +107,15 @@ main {
 }
 
 footer {
-  background-color: var(--brand-color);
-  color: whitesmoke;
-  padding: 2em 1em;
+  background-color: var(--brand-bg-color);
+  color: var(--brand-color);
+  padding: 1em;
   margin-top: 3em;
 }
 
 p {
   line-height: 1.3;
+  margin-bottom: 1em;
 }
 
 header > div,
@@ -119,11 +126,30 @@ footer > div {
   margin: 0 auto;
 }
 
-header > a,
-a:visited {
-  color: white;
+header a,
+footer a,
+header a:visited,
+footer a:visited {
+  color: var(--brand-color);
+}
+
+a {
+  color: var(--main-color);
 }
 
 a:hover {
   text-decoration-line: none;
 }
+
+.post-list {
+  display: flex;
+  flex-direction: column;
+}
+
+h2 {
+  padding-bottom: 0.5rem;
+}
+
+@view-transition {
+  navigation: auto;
+}