Resolve Dark-Theme Color Mismatches, Variable Cleanup, and Main Eleme…

…nt Padding (#158)
codesupport · Oct 23, 2024 · 079c5d7 · 079c5d7
1 parent b5d6c60
commit 079c5d7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 27 deletions.
diff --git a/src/components/molecules/HomeHero.tsx b/src/components/molecules/HomeHero.tsx
@@ -53,6 +53,10 @@ const Hero = styled("header")`
 		height:125px;
 		width: 100%;
 		filter: drop-shadow( 0 -65px 16px hsl(214.72deg 79.9% 39.02% / 0.02));
+
+		@media (prefers-color-scheme: dark) {
+			filter: unset;
+		}
 	}
 `;
 

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -95,6 +95,8 @@ body {
 
 main{
     background-color: var(--foreground);
+    padding-left: calc(var(--spacer) * 1);
+    padding-right: calc(var(--spacer) * 1);
 }
 
 @media (max-width: 1200px){
@@ -183,31 +185,37 @@ h6, .markdown-content h5 {
 
 .lang-typescript {
     background-color: var(--lang-typescript);
+    color: var(--lang-typescript-text);
 }
 
 .lang-json {
     background-color: var(--lang-json);
+    color: var(--lang-json-text);
 }
 
 .lang-javascript {
     background-color: var(--lang-javascript);
-    color: var(--text);
+    color: var(--lang-javascript-text);
 }
 
 .lang-java {
     background-color: var(--lang-java);
+    color: var(--lang-java-text);
 }
 
 .lang-python {
     background-color: var(--lang-python);
+    color: var(--lang-python-text);
 }
 
 .lang-html {
     background-color: var(--lang-html);
+    color: var(--lang-html-text);
 }
 
 .lang-css {
     background-color: var(--lang-css);
+    color: var(--lang-css-text);
 }
 
 p {
@@ -239,6 +247,7 @@ hr {
     border: none;
     border-top: 1px solid var(--text-light);
 }
+
 /**
     Form controls
 */
@@ -282,50 +291,33 @@ select{
         --error: #FF6B6B; 
 
         --lang-typescript: hsl(204.92deg 67.51% 60%);
+        --lang-typescript-text: var(--foreground);
         --lang-json: #D1D1D1; 
+        --lang-json-text: var(--foreground);
         --lang-javascript: #F5E774;
+        --lang-javascript-text: var(--foreground);
         --lang-java: #D58E54;
+        --lang-java-text: var(--foreground);
         --lang-python: #8AB4F8;
+        --lang-python-text: var(--foreground);
         --lang-html: #FF715B;
+        --lang-html-text: var(--foreground);
         --lang-css: #A279C4;
+        --lang-css-text: var(--foreground);
         --lang-ui: #B1B3BD;
+        --lang-ui-text: var(--foreground);
 
-        --spacer: 1rem;
-        --spacer-increment: 0.5rem;
-
-        --container-max-width: 1200px;
-        --article-max-width: 900px;
-        --navigation-height: 75px;
-
-        --body-font-size: 1rem;
         --body-text-color: hsl(0deg 0% 85%);
 
-        --article-body-font-size: 1rem;
-        --article-body-font-weight: 400;
         --article-meta-text-color: hsl(0deg 0% 70%); 
         --article-body-text-color: hsl(0deg 0% 80%);
 
-        --font-size-increment: 0.15rem;
-
-        --fs-1: calc(var(--body-font-size) + calc(var(--font-size-increment) * 10));
-        --fs-2: calc(var(--body-font-size) + calc(var(--font-size-increment) * 8));
-        --fs-3: calc(var(--body-font-size) + calc(var(--font-size-increment) * 6));
-        --fs-4: calc(var(--body-font-size) + calc(var(--font-size-increment) * 4));
-        --fs-5: calc(var(--body-font-size) + calc(var(--font-size-increment) * 2));
-        --fs-6: calc(var(--body-font-size) + var(--font-size-increment));
-
         --box-shadow: 0 0 1rem 0 rgb(0 0 0 / 30%);
         --box-shadow-card-hover: 0 0 1rem 0 hsl(211.06deg 100% 50% / 50%);
-        --border-radius: 0.425rem;
 
-        --input-text-color: hsl(0 0% 85%); 
+        --input-text-color: hsl(0 0% 30%); 
         --input-border-color: hsl(0 0% 30%);
         --input-focus-box-shadow: 0 0 0rem 0.1rem hsl(214.72deg 79.9% 55% / 0.4);
-
-        --breakpoint-xl: 1480px;
-        --breakpoint-lg: 1200px;
-        --breakpoint-md: 1000px;
-        --breakpoint-sm: 680px;
     }
 
 }