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

author: James Barnett <noreply@jamesbarnett.xyz> 2020-07-05 19:29:49 +0100
committer: James Barnett <noreply@jamesbarnett.xyz> 2020-07-05 19:29:49 +0100
commit: 66e4782c5c422b4f99a4763212bdc974efffc65b (patch)
tree: 0c7f4c62a21c297808a9fd89339c117767453609 /src/main/resources
parent: 6f52bbd15bd7026b99433dfd30f5c74164b36b9d (diff)
download: reddit-lite-66e4782c5c422b4f99a4763212bdc974efffc65b.tar.xz
reddit-lite-66e4782c5c422b4f99a4763212bdc974efffc65b.zip
5 files changed, 126 insertions, 32 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
diff --git a/src/main/resources/templates/error/404.ftlh b/src/main/resources/templates/error/404.ftlh
new file mode 100644
index 0000000..3237d4d
--- /dev/null
+++ b/src/main/resources/templates/error/404.ftlh
@@ -0,0 +1,12 @@
+<html>
+  <head>
+    <title>404</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="/stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    You step in the stream<br/>
+    But the water has moved on<br/>
+    This page was not found
+  </body>
+</html>
diff --git a/src/main/resources/templates/error/500.ftlh b/src/main/resources/templates/error/500.ftlh
new file mode 100644
index 0000000..a8d7693
--- /dev/null
+++ b/src/main/resources/templates/error/500.ftlh
@@ -0,0 +1,12 @@
+<html>
+  <head>
+    <title>500</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="/stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    To have no errors<br/>
+    Would be life without meaning<br/>
+    No struggle, no joy
+  </body>
+</html>
diff --git a/src/main/resources/templates/lib.ftlh b/src/main/resources/templates/lib.ftlh
index 9b9e96b..ee013a4 100644
--- a/src/main/resources/templates/lib.ftlh
+++ b/src/main/resources/templates/lib.ftlh
@@ -13,7 +13,15 @@
 
 <#macro header subreddit>
   <div class="header">
-    <a class="subreddit-title" href="/r/${subreddit}">/r/${subreddit}</a>
+    <a class="subreddit-title" href="/r/${subreddit}">
+      <#if subreddit?contains("+")>
+        <#list subreddit?split("+") as multiRedditName>
+          <#if multiRedditName?is_first>/r/<#else>+</#if>${multiRedditName}
+        </#list>
+      <#else>
+        /r/${subreddit}
+      </#if>
+    </a>
     <span class="header-links">
       <#nested>
     </span>
diff --git a/src/main/resources/templates/postDetail.ftlh b/src/main/resources/templates/postDetail.ftlh
index 576e6e1..13d2ee5 100644
--- a/src/main/resources/templates/postDetail.ftlh
+++ b/src/main/resources/templates/postDetail.ftlh
@@ -7,7 +7,9 @@
     <@postSummary postDetail.post/>
   </div>
 
-  ${(postDetail.selftextHtmlUnescaped?no_esc)!""}
+  <div class="post-selftext">
+    ${(postDetail.selftextHtmlUnescaped?no_esc)!""}
+  </div>
 
   <div class="comment-heading"><@pluralise postDetail.commentCount, "comment"/></div>
   <div class="comments">
author	James Barnett <noreply@jamesbarnett.xyz>	2020-07-05 19:29:49 +0100
committer	James Barnett <noreply@jamesbarnett.xyz>	2020-07-05 19:29:49 +0100
commit	66e4782c5c422b4f99a4763212bdc974efffc65b (patch)
tree	0c7f4c62a21c297808a9fd89339c117767453609 /src/main/resources
parent	6f52bbd15bd7026b99433dfd30f5c74164b36b9d (diff)
download	reddit-lite-66e4782c5c422b4f99a4763212bdc974efffc65b.tar.xz reddit-lite-66e4782c5c422b4f99a4763212bdc974efffc65b.zip