main.scss: change color scheme and width

1 files changed, 53 insertions, 36 deletions

diff --git a/assets/main.scss b/assets/main.scss
index 4381427..ee7f15a 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -1,65 +1,86 @@
+html {
+  font-family: sans-serif;
+}
+
 body {
   color: #212529;
   background: #fff;
-  font-family: sans-serif;
+
+  @media(prefers-color-scheme: dark) {
+   background-color: #121415;
+    color: #e1dfdc
+  }
+}
+
+main {
+  padding: 0 128px;
   max-width: 800px;
   margin: 0 auto;
-  padding: 0 0.5rem;
+
+  @media(max-width: 1000px) {
+    padding: 0;
+  }
 }
 
 a {
   color: #007bff;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #0056b3;
   text-decoration: underline;
-}
 
-header {
-  text-align: center;
-}
+  &:hover {
+    color: #0056b3;
+    text-decoration: none;
+  }
 
-footer {
-  text-align: center;
-  margin: 4rem 0;
+  @media(prefers-color-scheme: dark) {
+    color: #78bef8;
+  }
 }
 
 nav {
-	text-align: center;
-	margin-bottom: 4rem;
+  text-align: center;
+  margin-bottom: 4rem;
 }
 
 nav ul {
-	list-style: none;
-	padding-left: 0;
+  list-style: none;
+  padding-left: 0;
 }
 
 nav ul li {
-	display: inline;
+  display: inline;
 }
 
 nav ul li:not(:first-child) {
-	display: inline;
-	padding-left: 2rem;
-	@media only screen and (max-width: 600px) {
-		padding: 0.2rem;
-	}
+  display: inline;
+  padding-left: 2rem;
+
+  @media only screen and (max-width: 600px) {
+    padding: 0.2rem;
+  }
 }
 
-nav a {
-	text-decoration: underline;
+footer {
+  text-align: center;
+  margin: 4rem 0;
 }
 
-nav a:hover {
-	text-decoration: none;
+
+h1 {
+  text-align: center;
 }
 
 .post h3 {
   margin-bottom: 0;
 }
 
+h2 small {
+  font-weight: normal;
+  font-size: 1.2rem;
+  display: block;
+  border-bottom: 1px solid #555;
+  margin-top: 0.5rem;
+}
+
 dl {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -76,12 +97,8 @@ dl {
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    background: #212529;
-    color: #f8f9fa;
-  }
-  a {
-    color: #3395ff;
-  }
+blockquote {
+  border-left: 4px solid #888;
+  margin-left: 0;
+  padding-left: 1rem;
 }