From 824fcf2575777d1db4ccaf9c7c83c51e132db65d Mon Sep 17 00:00:00 2001
From: ari <ariadna@omg.lol>
Date: Mon, 21 Apr 2025 00:57:42 -0400
Subject: [PATCH] Css now uses variables for all its colors

---
 src/App.svelte                  | 15 ++++++++-------
 src/app.css                     | 26 ++++++++++++++++++--------
 src/lib/AccountComponent.svelte |  6 +++---
 src/lib/PostComponent.svelte    | 33 +++++++++++++++++----------------
 4 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 6a635b1..95912e2 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -41,8 +41,9 @@
 </main>
 
 <style>
+
   /* desktop style */
- 
+
   #Content {
     display: flex;
     /* split the screen in half, left for accounts, right for posts */
@@ -51,8 +52,8 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    background-color: #12082b;
-    color: #ffffff;
+    background-color: var(--background-color);
+    color: var(--text-color);
   }
   #Feed {
     width: 65%;
@@ -74,8 +75,8 @@
     width: 35%;
     display: flex;
     flex-direction: column; 
-    border: 1px solid #8054f0;
-    background-color: #0d0620;
+    border: 1px solid var(--border-color);
+    background-color: var(--content-background-color);
     height: 80vh;
     padding: 20px;
     margin-left: 20px;
@@ -96,8 +97,8 @@
     margin-bottom: 20px;
   }
 
-    /* mobile style */
-    @media screen and (max-width: 600px) {
+  /* mobile style */
+  @media screen and (max-width: 600px) {
     #Content {
       flex-direction: column;
       width: auto;
diff --git a/src/app.css b/src/app.css
index 05a51fd..b89ecff 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,6 +3,18 @@
   src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
 }
 
+:root {
+  --link-color: #646cff;
+  --link-hover-color: #535bf2;
+  --background-color: #12082b;
+  --header-background-color: #1f1145;
+  --content-background-color: #0d0620;
+  --text-color: white;
+  --border-color: #8054f0;
+  --indicator-inactive-color: #4a4a4a;
+  --indicator-active-color: #8054f0;
+}
+
 ::-webkit-scrollbar {
   width: 0px;
   background: transparent;
@@ -35,11 +47,11 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--link-color);
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: var(--link-hover-color);
   text-decoration: underline;
 }
 
@@ -49,11 +61,11 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
-  background-color: #12082b;
+  background-color: var(--background-color);
   font-family: 'ProggyClean', monospace;
   font-size: 24px;
-  color: white;
-  border-color: #8054f0;
+  color: var(--text-color);
+  border-color: var(--border-color);
 }
 
 h1 {
@@ -68,6 +80,4 @@ h1 {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
-}
-
-
+}
\ No newline at end of file
diff --git a/src/lib/AccountComponent.svelte b/src/lib/AccountComponent.svelte
index a6093f9..e324393 100644
--- a/src/lib/AccountComponent.svelte
+++ b/src/lib/AccountComponent.svelte
@@ -24,10 +24,10 @@
     display: flex;
     text-align: start;
     align-items: center;
-    background-color: #12082b;
+    background-color: var(--background-color);
     padding: 0px;
     margin-bottom: 15px;
-    border: 1px solid #8054f0;
+    border: 1px solid var(--border-color);
   }
   #accountName {
     margin-left: 10px;
@@ -43,6 +43,6 @@
     width: 50px;
     height: 50px;
     margin: 0px;
-    border-right: #8054f0 1px solid;
+    border-right: var(--border-color) 1px solid;
   }
 </style>
diff --git a/src/lib/PostComponent.svelte b/src/lib/PostComponent.svelte
index c33b7f8..69ea88b 100644
--- a/src/lib/PostComponent.svelte
+++ b/src/lib/PostComponent.svelte
@@ -77,8 +77,8 @@
         <a
           id="postLink"
           href="{Config.FRONTEND_URL}/profile/{post.authorDid}/post/{post.recordName}"
-          >{moment(post.timenotstamp).isBefore(moment().subtract(1, 'month'))
-            ? moment(post.timenotstamp).format('MMM D, YYYY')
+          >{moment(post.timenotstamp).isBefore(moment().subtract(1, "month"))
+            ? moment(post.timenotstamp).format("MMM D, YYYY")
             : moment(post.timenotstamp).fromNow()}</a
         >
       </p>
@@ -145,14 +145,15 @@
 </div>
 
 <style>
+
   a:hover {
     text-decoration: underline;
   }
   #postContainer {
     display: flex;
     flex-direction: column;
-    border: 1px solid #8054f0;
-    background-color: black;
+    border: 1px solid var(--border-color);
+    background-color: var(--background-color);
     margin-bottom: 15px;
     overflow-wrap: break-word;
   }
@@ -161,29 +162,29 @@
     flex-direction: row;
     align-items: center;
     justify-content: start;
-    background-color: #1f1145;
+    background-color: var(--header-background-color);
     padding: 0px 0px;
     height: fit-content;
-    border-bottom: 1px solid #8054f0;
+    border-bottom: 1px solid var(--border-color);
     font-weight: bold;
     overflow-wrap: break-word;
     height: 60px;
   }
   #displayName {
-    color: white;
+    color: var(--text-color);
     font-size: 1.2em;
     padding: 0;
     margin: 0;
   }
   #handle {
-    color: #8054f0;
+    color: var(--border-color);
     font-size: 0.8em;
     padding: 0;
     margin: 0;
   }
 
   #postLink {
-    color: #8054f0;
+    color: var(--border-color);
     font-size: 0.8em;
     padding: 0;
     margin: 0;
@@ -193,8 +194,8 @@
     text-align: start;
     flex-direction: column;
     padding: 10px;
-    background-color: #0d0620;
-    color: white;
+    background-color: var(--content-background-color);
+    color: var(--text-color);
     overflow-wrap: break-word;
   }
   #replyingText {
@@ -224,7 +225,7 @@
     height: 100%;
     margin: 0px;
     margin-left: 0px;
-    border-right: #8054f0 1px solid;
+    border-right: var(--border-color) 1px solid;
   }
   #carouselContainer {
     position: relative;
@@ -249,16 +250,16 @@
   .indicator {
     width: 8px;
     height: 8px;
-    background-color: #4a4a4a;
+    background-color: var(--indicator-inactive-color);
   }
   .indicator.active {
-    background-color: #8054f0;
+    background-color: var(--indicator-active-color);
   }
   #prevBtn,
   #nextBtn {
     background-color: rgba(31, 17, 69, 0.7);
-    color: white;
-    border: 1px solid #8054f0;
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
     width: 30px;
     height: 30px;
     cursor: pointer;