dark theme, icon, title

slamp · Dec 17, 2022 · e2541e5 · e2541e5
1 parent 5e84010
commit e2541e5
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 206 deletions.
diff --git a/render/icon.png b/render/icon.png
diff --git a/render/style.css b/render/style.css
@@ -1,131 +1,160 @@
+:root {
+    --background: #f9f9f9;
+    --text: #3e3d41;
+    --post-background: #fff;
+    --post-border: #E6E3E1;
+    --link: #5d4f84;
+    --link-hover: #4d54d1;
+    --mastodon-links: #e9e9f5
+}
+
+@media (prefers-color-scheme:dark) {
+    :root {
+	--background: #1c1c1c;
+	--text: #ffffff;
+	--post-background: #282c37;
+	--post-border: #282c37;
+    --link-hover: #c2c3ff;
+    --link: #8c8dff;
+    --mastodon-links: #1b1f3d;
+    }
+}
+
 body {
-  background-color: #f9f9f9;
-  color: #3e3d41;
-  text-align: left;
-  display: flex;
-  justify-content: center;
+    background-color: var(--background);
+    color: var(--text);
+    text-align: left;
+    display: flex;
+    justify-content: center;
 }
 
 #render-description, #scorer, #threshold {
-  opacity: .7;
-  font-size: .9em;
+    opacity: .7;
+    font-size: .9em;
 }
 
 #render-description span, #scorer span, #threshold span {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 
 #container {
-  width: 100%;
-  max-width: 900px;
-  flex-direction: column;
-  margin: 10px;
-  line-height: 1.6;
+    width: 100%;
+    max-width: 900px;
+    flex-direction: column;
+    margin: 10px;
+    line-height: 1.6;
 }
 
 .post {
-  background-color: #fff;
-  padding: 18px 20px;
-  border: 1px solid #E6E3E1;
-  border-radius: 10px;
-  display: flex;
-  flex-start: left;
-  margin: 15px;
-  box-shadow: 0.2px 0.4px 0.8px -10px rgba(0,0,0,0.03), 0.4px 0.9px 2px -10px rgba(0,0,0,0.030), 0.8px 1.8px 3.8px -10px rgba(0,0,0,0.038), 1.3px 3.1px 6.7px -10px rgba(0,0,0,0.045), 2.5px 5.8px 12.5px -10px rgba(0,0,0,0.06), 6px 14px 30px -10px rgba(0,0,0,0.08);
+    background-color: var(--post-background);
+    padding: 18px 20px;
+    border: 1px solid var(--post-border);
+    border-radius: 10px;
+    display: flex;
+    margin: 15px 0px;
+    box-shadow: 0.2px 0.4px 0.8px -10px rgba(0,0,0,0.03), 0.4px 0.9px 2px -10px rgba(0,0,0,0.030), 0.8px 1.8px 3.8px -10px rgba(0,0,0,0.038), 1.3px 3.1px 6.7px -10px rgba(0,0,0,0.045), 2.5px 5.8px 12.5px -10px rgba(0,0,0,0.06), 6px 14px 30px -10px rgba(0,0,0,0.08);
 }
 
 .post a {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 .avatar {
-  max-width: 64px;
-  min-width: 64px;
-  height: 64px;
+    max-width: 56px;
+    min-width: 56px;
+    height: 56px;
 }
+
 .avatar img {
-  max-width: 100%;
-  border-radius: 50%;
-  border: 1px solid #E6E3E1;
+    max-width: 100%;
+    border-radius: 50%;
+    border: 1px solid var(--post-border);
 }
 
 .status {
-  margin-left: 20px;
+    margin-left: 20px;
 }
 
 .user a {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column
 }
 
 .username {
+    font-size: .85em;
 }
 
 .displayname {
-  font-weight: bold;
-  font-size: 1.2em;
+    font-weight: bold;
+    font-size: 1.2em;
 }
 
 .displayname img {
-  height: 16px;
-  width: 16px;
-  vertical-align: middle;
-  object-fit: contain;
+    height: 16px;
+    width: 16px;
+    vertical-align: middle;
+    object-fit: contain;
 }
 
 .content {
-  color: #3e3d41;
-  font-size: 14px;
-  padding: 15px 15px 15px 0px;
+    color: var(--text);
+    font-size: 14px;
+    padding: 15px 15px 15px 0px;
+    overflow-wrap: break-word;
+    word-break: break-word;
 }
 
 .media {
-  padding-bottom: 15px;
+    padding-bottom: 15px;
 }
 
 .content p {
-  max-width: none;
-  margin: 15px 0px;
+    max-width: none;
+    margin: 15px 0px;
 }
 .post a {
-  color: #5d4f84;
+    color: var(--link);
 }
-.content a:hover {
-  color: #4d54d1;
+.content a:hover, .footer a:hover, .user a:hover {
+    color: var(--link-hover);
 }
 
+.ellipsis::after {
+    content: "…";
+}
+
+
 .content .invisible {
-  opacity: .7;
+    display: none;
 }
 
 .status a:not(.hashtag):not(.mention) span:not(.invisible){
-  font-weight: bold
+    font-weight: bold
 }
 
 .home-link, .original-link, a.hashtag, a.mention, .footer .links a {
-  text-decoration: none;
-  opacity: .8;
-  background-color: #e9e9f5;
-  padding: 0 5px;
-  border-radius: 5px;
+    text-decoration: none;
+    opacity: .8;
+    background-color: var(--mastodon-links);
+    padding: 0 5px;
+    border-radius: 5px;
 }
 
 .media img, .media video {
-  max-width: 100%;
-  max-height: 300px;
+    max-width: 100%;
+    max-height: 300px;
 }
 
 .footer {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  font-size: .8em;
-  opacity: .7;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    font-size: .8em;
+    opacity: .7;
 }
 
 .footer div {
-  padding-right: 10px;
+    padding-right: 10px;
 }
-
diff --git a/templates/digest.html.jinja b/templates/digest.html.jinja
@@ -3,7 +3,9 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    {% include "style.html.jinja" %}
+    <title>Mastodon Digest</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="icon" href="icon.png">
   </head>
   <body>
     <div id="container">

diff --git a/templates/style.html.jinja b/templates/style.html.jinja