Inline mvp and custom override CSS when rendering RSS posts

2024-08-05 15:47:31 -07:00
parent 359e798cfa
commit 530bd8e350
5 changed files with 315 additions and 274 deletions
--- a/web/index.html
+++ b/web/index.html
@@ -22,6 +22,48 @@
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --active-brightness: 0.85;
+      --border-radius: 5px;
+      --box-shadow: 2px 2px 10px;
+      --color-accent: #118bee15;
+      --color-bg: #fff;
+      --color-bg-secondary: #e9e9e9;
+      --color-link: #118bee;
+      --color-secondary: #920de9;
+      --color-secondary-accent: #920de90b;
+      --color-shadow: #f4f4f4;
+      --color-table: #118bee;
+      --color-text: #000;
+      --color-text-secondary: #999;
+      --color-scrollbar: #cacae8;
+      --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+      --hover-brightness: 1.2;
+      --justify-important: center;
+      --justify-normal: left;
+      --line-height: 1.5;
+      --width-card: 285px;
+      --width-card-medium: 460px;
+      --width-card-wide: 800px;
+      --width-content: 1080px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root[color-mode="user"] {
+        --color-accent: #0097fc4f;
+        --color-bg: #333;
+        --color-bg-secondary: #555;
+        --color-link: #0097fc;
+        --color-secondary: #e20de9;
+        --color-secondary-accent: #e20de94f;
+        --color-shadow: #bbbbbb20;
+        --color-table: #0097fc;
+        --color-text: #f7f7f7;
+        --color-text-secondary: #aaa;
+      }
+    }
+  </style>
 </head>

 <body>