fix fonts (finally maybe)

3 files changed, 48 insertions, 25 deletions

diff --git a/src/public/styles.css b/src/public/styles.css
index 76f70b5..cd7d6b1 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
-
 :root {
   /* Light mode colors */
   --bg-color: white;
@@ -7,8 +5,12 @@
   --text-color: black;
   --text-color-muted: #999;
   --blockquote-color: green;
-  --link-color: blue;
-  --link-visited-color: purple;
+  --link-color: #29BC9B;
+  --link-visited-color: #999;
+
+  font-family: Inter, sans-serif;
+  font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'tnum' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1;
+
 }
 
 @media (prefers-color-scheme: dark) {
@@ -18,14 +20,16 @@
     --text-color: white;
     --text-color-muted: #999;
     --blockquote-color: lightgreen;
-    --link-color: lightblue;
-    --link-visited-color: violet;
+    --link-color: #79ffe1;
+    --link-visited-color: #999;
   }
 }
 
+@supports (font-variation-settings: normal) {
+  :root { font-family: InterVariable, sans-serif; }
+}
 
 body {
-  font-family: 'Inter', sans-serif;
   overflow-x: hidden;
   background-color: var(--bg-color);
   color: var(--text-color);
@@ -38,9 +42,16 @@ main {
   align-items: center;
 }
 
+.header a,
+.sub-title a,
+.info-container a,
+.comment-info-container a,
+.sort-opts a {
+  text-decoration: none;
+}
+
 a {
   color: var(--link-color);
-  text-decoration: none;
 }
 
 a:hover {
@@ -111,7 +122,7 @@ nav {
 .info-container,
 .comment-info-container,
 .more,
-summary.expand-comments::before,
+summary::before,
 hr {
   color: var(--text-color-muted)
 }
@@ -121,6 +132,10 @@ hr {
   display: flex;
 }
 
+summary::before {
+  font-size: 0.7rem;
+}
+
 .comment-info-container {
   display: inline-flex;
   align-items: center;
@@ -170,10 +185,13 @@ hr {
   .comments-container {
     font-size: 1.3rem;
   }
-  .info-container, .comment-info-container, .more, summary.expand-comments::before
+  .info-container, .comment-info-container, .more
   {
     font-size: 1rem;
   }
+  summary::before {
+    font-size: 0.8rem;
+  }
   .domain {
     font-size: 1rem;
   }
@@ -202,9 +220,12 @@ hr {
   .comments-container {
     font-size: 1.3rem;
   }
-  .info-container, .comment-info-container, .more, summary.expand-comments::before {
+  .info-container, .comment-info-container, .more {
     font-size: 1rem;
   }
+  summary::before {
+    font-size: 0.8rem;
+  }
   .domain {
     font-size: 1rem;
   }
@@ -293,7 +314,9 @@ hr {
   color: var(--text-color-muted)
 }
 
-.header a {
+.header a,
+.sort-opts a,
+.sub-title a {
   color: var(--text-color);
 }
 
@@ -334,21 +357,19 @@ summary.expand-post {
   display: none;
 }
 
-summary.expand-comments {
+summary {
   list-style: none;
   cursor: pointer;
 }
 
-summary.expand-comments::before {
-  content: "[+] ";
-}
-
-details[open] summary.expand-comments::before {
-  content: "[-] ";
+details[open] summary::before {
+  content: "";
+  padding-right: 10px;
 }
 
-details:not([open]) summary.expand-comments::before {
-  content: "[+] ";
+details:not([open]) summary::before {
+  content: "";
+  padding-right: 10px;
 }
 
 .comment-body {
diff --git a/src/views/comments.pug b/src/views/comments.pug
index d9c96e9..9210d96 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -22,8 +22,8 @@ html
     main#content
       +header()
       div.hero
-        h3
-          a(href=`/r/${post.subreddit}`) r/#{post.subreddit}
+        h3.sub-title
+          a(href=`/r/${post.subreddit}`) ← r/#{post.subreddit}
 
         h2 #{post.title}
 
diff --git a/src/views/index.pug b/src/views/index.pug
index f506c09..5367b41 100644
--- a/src/views/index.pug
+++ b/src/views/index.pug
@@ -9,7 +9,9 @@ html
     meta(name="viewport" content="width=device-width, initial-scale=1.0")
     meta(charset='UTF-8')
     title reddit
-    link(rel='stylesheet', href='/styles.css')
+    link(rel="stylesheet", href="/styles.css")
+    link(rel="preconnect" href="https://rsms.me/")
+    link(rel="stylesheet" href="https://rsms.me/inter/inter.css")
     script(src="https://cdn.dashjs.org/latest/dash.all.min.js")
 
   +subMgmt()
@@ -71,4 +73,4 @@ html
           div.footer
             div.footer-item
               - var newQuery = {...query, after: posts.after}
-              a(href=`/r/${subreddit}?${encodeQueryParams(newQuery)}`) next ���
+              a(href=`/r/${subreddit}?${encodeQueryParams(newQuery)}`) next ���