Redesign with both light and dark themes

1 files changed, 29 insertions, 32 deletions

diff --git a/static/main.css b/static/main.css
index f73c997..62f4d73 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,42 +1,39 @@
 body {
-	background-color:#282c34;
-	color:#abb2bf;
+	background-color: #fcfcfc;
+	color: #232629;
 	max-width:72ch;
 	text-align:justify;
 	margin:auto;
-	padding:2ch;
+	padding:1em 0;
+	font-family: sans-serif;
 }
 
-a {
-	text-decoration:none;
-	color:#61afef;
-}
+.content { min-height: calc(100vh - 20ch); }
 
-h1 {
-	font-size:2rem;
-	text-align:center;
-}
-h2 {
-	font-size:1.5rem;
-	text-align:center;
-}
-h3 {
-	font-size:1rem;
-	text-align:center;
-}
+a {text-decoration:none;color:#1d99f3;}
 
-.content { min-height: calc(100vh - 20ch); }
+h1 {text-align:center;font-size:2rem;}
+h2 {text-align:center;font-size:1.5rem;}
+h3 {text-align:center;font-size:1rem;}
+
+.nav a:link   {color:#232629;}
+.nav a:visited{color:#232629;}
+.nav a:hover  {color:#1d99f3;}
+.nav a:focus  {color:#1d99f3;}
+.nav a:active {color:#1d99f3;}
+
+.nav {height:2rem;font-size:2rem;}
+.navl {width:30%;float:left;text-align:left;}
+.navr {width:70%;float:left;text-align:right;}
 
-.navbar a:link    { color:#abb2bf; }
-.navbar a:visited { color:#abb2bf; }
-.navbar a:focus   { color:#61afef; }
-.navbar a:hover   { color:#61afef; }
-.navbar a:active  { color:#61afef; }
-.navbar {
-	display:flex;
-	flex-direction:row;
-	font-size:24px;
-	text-align:right;
+@media (prefers-color-scheme: dark) {
+body {
+	background-color: #232629;
+	color: #fcfcfc;
+}
+.nav a:link   {color:#fcfcfc;}
+.nav a:visited{color:#fcfcfc;}
+.nav a:hover  {color:#1d99f3;}
+.nav a:focus  {color:#1d99f3;}
+.nav a:active {color:#1d99f3;}
 }
-.navitem { flex:1; }
-.navhome { text-align:left; }