Rename color variables

CosmeValera · Nov 23, 2024 · 3d5c0c0 · 3d5c0c0
1 parent d4429fc
commit 3d5c0c0
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 66 deletions.
diff --git a/sass/_base.scss b/sass/_base.scss
@@ -1,6 +1,6 @@
 html,
 body {
-    color: $color-fg;
+    color: $text-color;
     margin: 2rem 1rem 0.5rem 1rem;
     padding: 0;
     max-width: 100vw;
@@ -14,12 +14,12 @@ html {
 }
 
 body {
-    background-color: $color-bg;
+    background-color: $primary-bg;
 }
 
 a {
     @include transition(color .2s ease-out);    
-    color: $color-fg;
+    color: $text-color;
     text-decoration: none;
 }
 
@@ -79,8 +79,8 @@ h1.page-title {
             justify-content: center;
             gap: 0.75rem;
             opacity: 0.9;
-            background-color: black;
-            color: white;
+            background-color: $menu-item-bg;
+            color: $text-color;
             padding: 10px 20px;
             border-radius: 50px;
             transition: all 0.3s ease;
@@ -106,12 +106,12 @@ h1.page-title {
     width: 60px;
     height: 60px;
     opacity: 0.85;
-    background-color: black;
+    background-color: $menu-item-bg;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: white;
+    color: $text-color;
     font-size: 30px;
     z-index: 1000;
     cursor: pointer;

diff --git a/sass/_helpers.scss b/sass/_helpers.scss
@@ -21,6 +21,6 @@
 }
 
 ::-webkit-scrollbar-thumb:hover { /* Handle on hover */
-    background-color: $color-fg-secondary;
+    background-color: $accent-color;
 }
 /* END: SCROLLBAR */
diff --git a/sass/_layout.scss b/sass/_layout.scss
@@ -29,7 +29,7 @@ footer {
     font-size: 0.75rem;
     text-align: center;
     a {
-        color: $color-fg-secondary;
+        color: $accent-color;
 
         &:hover {
             text-decoration: underline;

diff --git a/sass/_mixins.scss b/sass/_mixins.scss
@@ -3,12 +3,12 @@
     padding: 12px 30px;
     border: 3px solid $color-font-and-border;
     color: $color-font-and-border;
-    background-color: $color-bg;
+    background-color: $primary-bg;
     font-weight: bold;
     text-decoration: none;
 
     &:hover {
-        color: $color-bg;
+        color: $primary-bg;
         background-color: $hover-background-color;
     }
 
@@ -40,7 +40,7 @@
         width: 0;
         height: 1px;
         display: block;
-        background: $color-fg;
+        background: $text-color;
         transition: 0.25s;
         bottom: $bottom;
     }
@@ -52,10 +52,10 @@
 }
 
 @mixin card-a-colors-dark {
-    background-color: $color-bg-secondary;
-    border: 4px solid $color-fg-secondary;
+    background-color: $secondary-bg;
+    border: 4px solid $accent-color;
 }
 @mixin card-b-colors-dark {
-    background-color: $color-bg-secondary-2;
-    border: 1px solid $color-fg-secondary;
+    background-color: $tertiary-bg;
+    border: 1px solid $accent-color;
 } 
diff --git a/sass/_responsive.scss b/sass/_responsive.scss
@@ -26,8 +26,8 @@ body {
                     display: flex;
                     align-items: center;
                     justify-content: flex-end;
-                    background-color: black;
-                    color: white;
+                    background-color: $menu-item-bg;
+                    color: $text-color;
                     padding: 10px;
                     border-radius: 50%;
                     overflow: hidden;
@@ -147,7 +147,7 @@ body {
                 .filter-dropdown {
                     display: none; // Initially hide filter options on mobile
                     flex-direction: column;
-                    background: darken($color-fg-secondary, 47%);
+                    background: darken($accent-color, 47%);
                     padding: 10px;
                     margin: 0.4rem 0;
                     border-radius: 8px;
@@ -161,8 +161,8 @@ body {
                         border-radius: 5px;
 
                         &:not(.selected-filter) { // Disable hover effect on mobile
-                            background-color: darken($color-fg-secondary, 33%)!important;
-                            color: $color-bg!important;
+                            background-color: darken($accent-color, 33%)!important;
+                            color: $primary-bg!important;
                         }
                     }
                 }

diff --git a/sass/_shared-components.scss b/sass/_shared-components.scss
@@ -14,15 +14,15 @@ nav.nav-shared {
             list-style-type: none;
             a {
                 &.menu-item {
-                    @include styled-button($color-fg, $color-fg);
+                    @include styled-button($text-color, $text-color);
                     font-size: 2.5rem;
                 }
 
                 img.portrait-menu-item {
                     box-sizing: border-box;
                     object-fit: cover;
                     border-radius: 50%;
-                    border: 4px solid $color-fg;
+                    border: 4px solid $text-color;
                     width: 100%;
                     height: auto;
                     max-width: 80px;

diff --git a/sass/_variables.scss b/sass/_variables.scss
@@ -1,10 +1,12 @@
 // Variables
-$color-bg: #006060;
-$color-bg-secondary: #0e3c3c;
-$color-fg: #ffffff;
-$color-fg-secondary: #4ff5f5;
+$primary-bg: #006060;
+$secondary-bg: #0e3c3c;
+$tertiary-bg: #185146;
+$menu-item-bg: #000000;
+
+$text-color: #ffffff;
+$accent-color: #4ff5f5;
 
-$color-bg-secondary-2: #185146;
 
 // Fonts
 $sans-serif: Montserrat, 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;

diff --git a/sass/blog-post.scss b/sass/blog-post.scss
@@ -9,27 +9,27 @@
         margin-bottom: 2rem;
         margin-top: 0;
         text-wrap: balance;
-        color: white;
+        color: $text-color;
         text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
     }
 
     .presentation-text {
         text-align: center;
         margin-bottom: 2rem;
         text-wrap: balance;
-        color: $color-fg-secondary;
+        color: $accent-color;
         text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
     }
     .link-text {
         text-align: center;
         margin-bottom: 2rem;
         text-wrap: balance;
-        color: $color-fg-secondary;
+        color: $accent-color;
         border-bottom: 2px solid transparent;
         transition: border-bottom 0.2s ease;
 
         &:hover {
-            border-bottom: 1px solid $color-fg-secondary;
+            border-bottom: 1px solid $accent-color;
         }
     }
 
@@ -50,7 +50,7 @@
 
     // Styling for inline code, is what will be shown when using: ``
     code {
-        color: $color-fg-secondary;
+        color: $accent-color;
         background-color: rgba(255, 255, 255, 0.1);
         padding: 0.2rem 0.4rem;
         border-radius: 0.25rem;
@@ -63,13 +63,13 @@
 
     // Reusable class for code blocks
     .code-block {
-        border: 1px solid $color-bg-secondary-2;
+        border: 1px solid $tertiary-bg;
         font-style: italic;
         border-radius: 1rem;
         padding: 0.5rem;
         margin: 10px 0;
-        background-color: rgba($color-bg-secondary-2, 0.8);
-        color: $color-fg;
+        background-color: rgba($tertiary-bg, 0.8);
+        color: $text-color;
         overflow-x: auto;
 
         pre {
@@ -79,7 +79,7 @@
     }
 
     blockquote {
-        border-left: 6px solid $color-fg-secondary;
+        border-left: 6px solid $accent-color;
         padding-left: 1rem;
         font-style: italic;
         opacity: 0.9;
@@ -107,7 +107,7 @@
             }
             a {
                 max-width: 20vw;
-                color: $color-fg-secondary;  
+                color: $accent-color;  
                 text-wrap: balance;
             }
         }
@@ -120,13 +120,13 @@
 
         &.footer-rule {
             margin-top: 4rem;
-            background-color: $color-bg-secondary-2;
-            border: 2px $color-fg-secondary dashed;
+            background-color: $tertiary-bg;
+            border: 2px $accent-color dashed;
             opacity: 0.35;
         }
         &.footer-rule-2 {
-            background-color: $color-bg-secondary-2;
-            border: 2px $color-fg-secondary dashed;
+            background-color: $tertiary-bg;
+            border: 2px $accent-color dashed;
             opacity: 0.35;
         }
     }

diff --git a/sass/blog.scss b/sass/blog.scss
@@ -7,7 +7,7 @@
 
     a.blog-card {
         display: block;
-        background-color: $color-bg-secondary;
+        background-color: $secondary-bg;
         padding: 1rem;
         border-radius: 8px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -20,7 +20,7 @@
         }
 
         .blog-title {
-            color: $color-fg-secondary;
+            color: $accent-color;
             font-family: Andika;
             font-size: clamp(1.2rem, 3.8vw, 1.7rem);
             margin-bottom: 1rem;
@@ -32,14 +32,14 @@
             gap: clamp(1rem, 4.4vw, 2rem);
 
             .card-description {
-                color: $color-fg;
+                color: $text-color;
                 opacity: 0.9;
                 font-weight: light;
                 font-size: clamp(0.7rem, 2.2vw, 1rem);
             }
 
             .card-date {
-                color: $color-fg-secondary;
+                color: $accent-color;
                 min-width: fit-content;
                 font-family: Andika;
                 font-size: clamp(0.6rem, 2vw, 0.9rem);;

diff --git a/sass/index.scss b/sass/index.scss
@@ -5,7 +5,7 @@
         box-sizing: border-box;
         object-fit: cover;
         border-radius: 50%;
-        border: 10px solid $color-fg;
+        border: 10px solid $text-color;
         margin: 2em 3em;
         width: 100%;
         height: auto;
@@ -42,7 +42,7 @@
         a {
             font-family: Andika;
 
-            @include underline-effect(absolute, 0px, $color-fg);
+            @include underline-effect(absolute, 0px, $text-color);
         }
     }
 }