Add dark theme. Improve display of multi-reddits. Add NetPositive inspired error pages

1 files changed, 90 insertions, 30 deletions

diff --git a/src/main/resources/static/stylesheets/style.css b/src/main/resources/static/stylesheets/style.css
index c561bb7..d9cc3fa 100644
--- a/src/main/resources/static/stylesheets/style.css
+++ b/src/main/resources/static/stylesheets/style.css
@@ -4,33 +4,33 @@ html {
 
 body {
   font-family: Verdana, Geneva, sans-serif;
-  font-size: 10pt;
+  font-size: 13px;
 }
 
 p {
-  margin: 5pt 0pt;
+  margin: 5px 0px;
 }
 
 .header {
   background-color: #c0c0c0;
-  display: table;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .subreddit-title {
   font-weight: bold;
-  font-size: 15pt;
-  padding: 4pt 10pt;
-  display: table-cell;
-  vertical-align: middle;
+  font-size: 15px;
+  padding: 4px 10px;
   text-decoration: none;
   color: #000000;
-  white-space: nowrap;
+  white-space: normal;px;
+}
+  word-break: normal;
 }
 
 .header-links {
-  display: table-cell;
-  vertical-align: middle;
-  width: 100%;
+  padding-right: 10px;
 }
 
 .header-links a {
@@ -39,12 +39,13 @@ p {
 
 .post-list {
   display: table;
-  border-spacing: 5pt;
+  border-spacing: 5px;
 }
 
 .no-list-style {
   list-style-type: none;
   padding: 0;
+  padding-bottom: 10px;
   margin: 0;
 }
 
@@ -71,11 +72,11 @@ p {
 }
 
 .post-domain {
-  font-size: 8pt;
+  font-size: 11px;
 }
 
 .post-info {
-  font-size: 7pt;
+  font-size: 10px;
 }
 
 .nowrap {
@@ -83,11 +84,12 @@ p {
 }
 
 .next-page-link {
-  padding: 10pt;
+  padding: 20px 10px;
+  font-size: 15px;
 }
 
 .post-summary {
-  padding: 10pt 5pt;
+  padding: 10px 5px;
 }
 
 .subreddit-link {
@@ -95,49 +97,107 @@ p {
 }
 
 .post-selftext {
-  padding: 0pt 15pt;
+  padding: 0px 15px;
 }
 
 .comments {
-  padding: 10pt 5pt;
+  padding: 10px 5px;
 }
 
 .comment-heading {
-  padding-left: 5pt;
+  padding-left: 5px;
 }
 
 .comment {
-  margin-bottom: 10pt;
+  margin-bottom: 10px;
 }
 
 .comment.child {
-  margin-left: 10pt;
+  margin-left: 10px;
 }
 
 .comment-details {
-  font-size: 8pt;
+  font-size: 10px;
   color: #828282;
 }
 
 summary {
   outline: none;
-  margin-bottom: -5pt;
+  margin-bottom: -5px;
 }
 
 blockquote {
   background: #f9f9f9;
-  border-left: 5pt solid #ccc;
-  margin: 10pt 10pt 5pt;
-  padding: 2pt 10pt;
+  border-left: 5px solid #ccc;
+  margin: 10px 10px 5px;
+  padding: 2px 10px;
 }
 
 pre {
   background: #f9f9f9;
-  font-size: 8pt;
-  padding: 2pt 10pt;
+  font-size: 8px;
+  padding: 2px 10px;
 }
 
 .landing-desc {
-  padding: 10pt 5pt;
-  font-size: 10pt;
+  padding: 10px 5px;
+  font-size: 10px;
+}
+
+@media (prefers-color-scheme: dark) {
+
+  body {
+    color: #fff;
+    background-color: #121212;
+  }
+
+  .header {
+    background-color: #bb86fc;
+  }
+
+  .post-title {
+    color: #fff;
+    opacity: 0.87
+  }
+
+  .post-domain {
+    color: #fff;
+    opacity: 0.6
+  }
+
+  .post-info {
+    color: #fff;
+    opacity: 0.6
+  }
+
+  .post-selftext {
+    opacity:0.87;
+  }
+
+  .subreddit-link {
+    color: #03dac6;
+  }
+
+  .comment-heading {
+    opacity: 0.87;
+  }
+
+  .comment-text {
+    opacity: 0.87;
+  }
+
+  a {
+    color: #03dac6;
+  }
+
+  blockquote {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.16);
+  }
+
+  pre {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.16);
+  }
+
 }
\ No newline at end of file