fix

Author: RadonCoding

src/style.css

@@ -5,37 +5,33 @@
     --ratio: calc(720 / 2560);
   }
 }
-
 @media (min-width: 481px) and (max-width: 767px) {
   :root {
     --ratio: calc(900 / 2560);
   }
 }
-
 @media (min-width: 768px) and (max-width: 1439px) {
   :root {
     --ratio: calc(1280 / 2560);
   }
 }
-
 @media (min-width: 1440px) and (max-width: 1919px) {
   :root {
     --ratio: calc(1440 / 2560);
   }
 }
-
 @media (min-width: 1920px) {
   :root {
     --ratio: calc(1920 / 2560);
   }
 }
-
 @media (min-width: 2560px) {
   :root {
     --ratio: 1;
   }
 }
 
+/* SIZING */
 :root {
   --size-2xs: calc(48px * var(--ratio));
   --size-xs: calc(96px * var(--ratio));
@@ -92,6 +88,13 @@
   --shadow-md: 0 1px 4px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 1px 6px rgba(0, 0, 0, 0.6);
 
+  --transition-slow: all 0.3s ease-in-out;
+  --transition-normal: all 0.2s ease-in-out;
+  --transition-fast: all 0.1s ease-in-out;
+}
+
+/* SPACING & TYPOGRAPHY */
+:root {
   --space-3xs: calc(8px * var(--ratio));
   --space-2xs: calc(12px * var(--ratio));
   --space-xs: calc(20px * var(--ratio));
@@ -115,27 +118,25 @@
   --heading-md: calc(3.2rem * var(--ratio));
   --heading-lg: calc(3.8rem * var(--ratio));
   --heading-xl: calc(4.4rem * var(--ratio));
+}
 
-  --primary-color: #222222;
-  --secondary-color: #333333;
+/* HIGHLIGHT COLORS */
+:root {
   --bad-color: #a12b2b;
   --good-color: #98d982;
+}
 
-  --base-color-invariant: #111111;
-  --dim-color-invariant: #bbbbbb;
-  --deep-color-invariant: #1a1a1a;
-  --dark-color-invariant: #0f0f0f;
-  --bright-color-invariant: #ededed;
-  --subtle-color-invariant: #5f6577;
-  --light-color-invariant: #b8b8b8;
+/* THEME */
+:root {
+  --bg-color-primary: #111111;
+  --bg-color-secondary: #0f0f0f;
 
-  --bg-color-primary: var(--base-color-invariant);
-  --bg-color-secondary: var(--dark-color-invariant);
-  --bg-color-tertiary: var(--deep-color-invariant);
-  --accent-color-primary: var(--primary-color);
-  --accent-color-secondary: var(--secondary-color);
-  --fg-color-primary: var(--bright-color-invariant);
-  --fg-color-secondary: var(--dim-color-invariant);
+  --accent-color-primary: #222222;
+  --accent-color-secondary: #333333;
+  --accent-color-tertiary: #1a1a1a;
+
+  --fg-color-primary: #ededed;
+  --fg-color-subtle: #bbbbbb;
 }
 
 * {
@@ -232,7 +233,7 @@ section {
   grid-column: 2 / 4;
   grid-row: 2;
   font-size: var(--text-2xs);
-  color: var(--fg-color-secondary);
+  color: var(--fg-color-subtle);
   white-space: pre;
 }
 
@@ -250,7 +251,7 @@ section {
   width: var(--icon-xl);
   height: var(--icon-xl);
   border-radius: 50%;
-  border: var(--line-sm) solid var(--fg-color-secondary);
+  border: var(--line-sm) solid var(--fg-color-subtle);
   color: var(--fg-color-primary);
   cursor: pointer;
   text-decoration: none;
@@ -276,7 +277,7 @@ section {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: var(--bg-color-tertiary);
+  background-color: var(--accent-color-tertiary);
   border: var(--line-sm) solid var(--accent-color-primary);
   border-radius: var(--rounded-xs);
   overflow: hidden;
@@ -380,44 +381,37 @@ section {
 }
 
 [class^="token-identifier-"] {
-  color: var(--light-color-invariant);
+  color: #b8b8b8;
 }
 
 .token-identifier-void {
   color: #7aa7cc;
 }
-
 .token-identifier-int,
 .token-identifier-long {
   color: #e67fbf;
 }
-
 .token-identifier-string {
   color: #72a7e0;
 }
-
 .token-identifier-bool {
   color: #f9c777;
 }
-
 .token-bool-literal {
   font-weight: bold;
   color: #ffd966;
 }
-
 .token-identifier-i32,
 .token-identifier-u32,
 .token-identifier-i64,
 .token-identifier-u64,
 .token-number-literal {
   color: #f7696a;
 }
-
 .token-string-literal,
 .token-string-interpolated {
   color: var(--good-color);
 }
-
 .token-not,
 .token-not-equals,
 .token-equals,
@@ -443,27 +437,23 @@ section {
 .token-colon {
   color: #ffa83a;
 }
-
 .token-struct,
 .token-function {
   font-weight: bold;
   color: #6faaff;
 }
-
 .token-return {
   font-weight: bold;
   color: #ffca69;
 }
-
 .token-if,
 .token-else,
 .token-for {
   font-weight: bold;
   color: #ff79a8;
 }
-
 .token-comment {
-  color: var(--subtle-color-invariant);
+  color: #5f6577;
   font-style: italic;
 }
 
@@ -480,7 +470,6 @@ section {
   #portfolio {
     min-height: 100vh;
   }
-
   #workspace {
     max-height: 100vh;
   }
@@ -492,15 +481,12 @@ section {
   .portfolio__profile {
     width: var(--size-4xl);
   }
-
   .portfolio__title {
     font-size: var(--heading-xl);
   }
-
   .portfolio__comment {
     font-size: var(--text-2xl);
   }
-
   .portfolio__contact {
     width: var(--thumbnail-md);
     height: var(--thumbnail-md);
@@ -509,11 +495,9 @@ section {
   .compiler__header {
     font-size: var(--text-2xl);
   }
-
   #compiler-input {
     font-size: var(--text-xl);
   }
-
   #compiler-console {
     font-size: var(--text-lg);
   }