Merge pull request #48 from Torehirth/20-scroll-to-section

changed colour mode variables to body and kind of SCSS style
Torehirth · Oct 11, 2024 · eac51b6 · eac51b6
2 parents 3a97943 + aa73aa9
commit eac51b6
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 52 deletions.
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -46,7 +46,7 @@
   font-style: italic; /* Italic style */
   font-display: swap;
 }
-:root {
+body {
   --primary-colour: #22252c;
   --accent-colour: #363d48;
   --secondary-colour: #f22c50;
@@ -56,7 +56,6 @@
   --error-colour: #d30a2e;
   --info-colour: #4d8cff;
 }
-
 body.light-mode {
   --primary-colour: #f9f9f9;
   --accent-colour: #f0e9f2;

diff --git a/src/css/styles.css.map b/src/css/styles.css.map
diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss
@@ -1,4 +1,4 @@
-:root {
+body {
   // Dark mode colours
   --primary-colour: #22252c;
   --accent-colour: #363d48;
@@ -8,65 +8,73 @@
   --warning-colour: #eb5e55;
   --error-colour: #d30a2e;
   --info-colour: #4d8cff;
-}
 
-body.light-mode {
-  // Light mode colours and styling
-  --primary-colour: #f9f9f9;
-  --accent-colour: #f0e9f2;
-  --secondary-colour: #f22c50;
-  --text-colour: #22252c;
-  --success-colour: #55d6c2;
-  --warning-colour: #eb5e55;
-  --error-colour: #d30a2e;
-  --info-colour: #4d8cff;
+  &.light-mode {
+    // Light mode colours and styling
+    --primary-colour: #f9f9f9;
+    --accent-colour: #f0e9f2;
+    --secondary-colour: #f22c50;
+    --text-colour: #22252c;
+    --success-colour: #55d6c2;
+    --warning-colour: #eb5e55;
+    --error-colour: #d30a2e;
+    --info-colour: #4d8cff;
 
-  p,
-  a,
-  li,
-  time,
-  button {
-    font-weight: 500;
-  }
+    p,
+    a,
+    li,
+    time,
+    button {
+      font-weight: 500;
+    }
 
-  .primary-btn img {
-    filter: invert(1);
-  }
-  .some-links-wrapper img {
-    filter: invert(1);
-  }
+    .primary-btn img {
+      filter: invert(1);
+    }
+    .some-links-wrapper img {
+      filter: invert(1);
+    }
 
-  .outer-header-container {
-    background-blend-mode: normal;
-  }
+    .outer-header-container {
+      background-blend-mode: normal;
+    }
 
-  .btn-down-container {
-    transform: translate(-80%, -50%);
+    .btn-down-container {
+      transform: translate(-80%, -50%);
 
-    .btn-down {
-      border: 2px solid var(--secondary-colour);
+      .btn-down {
+        border: 2px solid var(--secondary-colour);
+      }
     }
-  }
 
-  .primary-btn {
-    border: 2px solid var(--secondary-colour);
-  }
+    .primary-btn {
+      border: 2px solid var(--secondary-colour);
+    }
 
-  .skills-container::before {
-    background: linear-gradient(to right, rgba(240, 233, 242, 1), rgba(240, 233, 242, 0));
-  }
-  .skills-container::after {
-    background: linear-gradient(to left, rgba(240, 233, 242, 1), rgba(240, 233, 242, 0));
-  }
+    .skills-container::before {
+      background: linear-gradient(
+        to right,
+        rgba(240, 233, 242, 1),
+        rgba(240, 233, 242, 0)
+      );
+    }
+    .skills-container::after {
+      background: linear-gradient(
+        to left,
+        rgba(240, 233, 242, 1),
+        rgba(240, 233, 242, 0)
+      );
+    }
 
-  @media (width <= 1000px) {
-    .btn-down-container {
-      transform: translate(-50%, -50%);
+    @media (width <= 1000px) {
+      .btn-down-container {
+        transform: translate(-50%, -50%);
+      }
     }
-  }
-  @media (width <= 600px) {
-    .btn-down-container {
-      transform: translate(-50%, -80%);
+    @media (width <= 600px) {
+      .btn-down-container {
+        transform: translate(-50%, -80%);
+      }
     }
   }
 }