Skip to content

Commit 3d5c0c0

Browse files
CosmeValeraCosmeValera
committed
Rename color variables
1 parent d4429fc commit 3d5c0c0

12 files changed

+68
-66
lines changed

‎sass/_base.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
html,
22
body {
3-
color: $color-fg;
3+
color: $text-color;
44
margin: 2rem 1rem 0.5rem 1rem;
55
padding: 0;
66
max-width: 100vw;
@@ -14,12 +14,12 @@ html {
1414
}
1515

1616
body {
17-
background-color: $color-bg;
17+
background-color: $primary-bg;
1818
}
1919

2020
a {
2121
@include transition(color .2s ease-out);
22-
color: $color-fg;
22+
color: $text-color;
2323
text-decoration: none;
2424
}
2525

@@ -79,8 +79,8 @@ h1.page-title {
7979
justify-content: center;
8080
gap: 0.75rem;
8181
opacity: 0.9;
82-
background-color: black;
83-
color: white;
82+
background-color: $menu-item-bg;
83+
color: $text-color;
8484
padding: 10px 20px;
8585
border-radius: 50px;
8686
transition: all 0.3s ease;
@@ -106,12 +106,12 @@ h1.page-title {
106106
width: 60px;
107107
height: 60px;
108108
opacity: 0.85;
109-
background-color: black;
109+
background-color: $menu-item-bg;
110110
border-radius: 50%;
111111
display: flex;
112112
justify-content: center;
113113
align-items: center;
114-
color: white;
114+
color: $text-color;
115115
font-size: 30px;
116116
z-index: 1000;
117117
cursor: pointer;

‎sass/_helpers.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,6 @@
2121
}
2222

2323
::-webkit-scrollbar-thumb:hover { /* Handle on hover */
24-
background-color: $color-fg-secondary;
24+
background-color: $accent-color;
2525
}
2626
/* END: SCROLLBAR */

‎sass/_layout.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ footer {
2929
font-size: 0.75rem;
3030
text-align: center;
3131
a {
32-
color: $color-fg-secondary;
32+
color: $accent-color;
3333

3434
&:hover {
3535
text-decoration: underline;

‎sass/_mixins.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
padding: 12px 30px;
44
border: 3px solid $color-font-and-border;
55
color: $color-font-and-border;
6-
background-color: $color-bg;
6+
background-color: $primary-bg;
77
font-weight: bold;
88
text-decoration: none;
99

1010
&:hover {
11-
color: $color-bg;
11+
color: $primary-bg;
1212
background-color: $hover-background-color;
1313
}
1414

@@ -40,7 +40,7 @@
4040
width: 0;
4141
height: 1px;
4242
display: block;
43-
background: $color-fg;
43+
background: $text-color;
4444
transition: 0.25s;
4545
bottom: $bottom;
4646
}
@@ -52,10 +52,10 @@
5252
}
5353

5454
@mixin card-a-colors-dark {
55-
background-color: $color-bg-secondary;
56-
border: 4px solid $color-fg-secondary;
55+
background-color: $secondary-bg;
56+
border: 4px solid $accent-color;
5757
}
5858
@mixin card-b-colors-dark {
59-
background-color: $color-bg-secondary-2;
60-
border: 1px solid $color-fg-secondary;
59+
background-color: $tertiary-bg;
60+
border: 1px solid $accent-color;
6161
}

‎sass/_responsive.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ body {
2626
display: flex;
2727
align-items: center;
2828
justify-content: flex-end;
29-
background-color: black;
30-
color: white;
29+
background-color: $menu-item-bg;
30+
color: $text-color;
3131
padding: 10px;
3232
border-radius: 50%;
3333
overflow: hidden;
@@ -147,7 +147,7 @@ body {
147147
.filter-dropdown {
148148
display: none; // Initially hide filter options on mobile
149149
flex-direction: column;
150-
background: darken($color-fg-secondary, 47%);
150+
background: darken($accent-color, 47%);
151151
padding: 10px;
152152
margin: 0.4rem 0;
153153
border-radius: 8px;
@@ -161,8 +161,8 @@ body {
161161
border-radius: 5px;
162162

163163
&:not(.selected-filter) { // Disable hover effect on mobile
164-
background-color: darken($color-fg-secondary, 33%)!important;
165-
color: $color-bg!important;
164+
background-color: darken($accent-color, 33%)!important;
165+
color: $primary-bg!important;
166166
}
167167
}
168168
}

‎sass/_shared-components.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ nav.nav-shared {
1414
list-style-type: none;
1515
a {
1616
&.menu-item {
17-
@include styled-button($color-fg, $color-fg);
17+
@include styled-button($text-color, $text-color);
1818
font-size: 2.5rem;
1919
}
2020

2121
img.portrait-menu-item {
2222
box-sizing: border-box;
2323
object-fit: cover;
2424
border-radius: 50%;
25-
border: 4px solid $color-fg;
25+
border: 4px solid $text-color;
2626
width: 100%;
2727
height: auto;
2828
max-width: 80px;

‎sass/_variables.scss

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
// Variables
2-
$color-bg: #006060;
3-
$color-bg-secondary: #0e3c3c;
4-
$color-fg: #ffffff;
5-
$color-fg-secondary: #4ff5f5;
2+
$primary-bg: #006060;
3+
$secondary-bg: #0e3c3c;
4+
$tertiary-bg: #185146;
5+
$menu-item-bg: #000000;
6+
7+
$text-color: #ffffff;
8+
$accent-color: #4ff5f5;
69

7-
$color-bg-secondary-2: #185146;
810

911
// Fonts
1012
$sans-serif: Montserrat, 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;

‎sass/blog-post.scss

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,27 @@
99
margin-bottom: 2rem;
1010
margin-top: 0;
1111
text-wrap: balance;
12-
color: white;
12+
color: $text-color;
1313
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
1414
}
1515

1616
.presentation-text {
1717
text-align: center;
1818
margin-bottom: 2rem;
1919
text-wrap: balance;
20-
color: $color-fg-secondary;
20+
color: $accent-color;
2121
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
2222
}
2323
.link-text {
2424
text-align: center;
2525
margin-bottom: 2rem;
2626
text-wrap: balance;
27-
color: $color-fg-secondary;
27+
color: $accent-color;
2828
border-bottom: 2px solid transparent;
2929
transition: border-bottom 0.2s ease;
3030

3131
&:hover {
32-
border-bottom: 1px solid $color-fg-secondary;
32+
border-bottom: 1px solid $accent-color;
3333
}
3434
}
3535

@@ -50,7 +50,7 @@
5050

5151
// Styling for inline code, is what will be shown when using: ``
5252
code {
53-
color: $color-fg-secondary;
53+
color: $accent-color;
5454
background-color: rgba(255, 255, 255, 0.1);
5555
padding: 0.2rem 0.4rem;
5656
border-radius: 0.25rem;
@@ -63,13 +63,13 @@
6363

6464
// Reusable class for code blocks
6565
.code-block {
66-
border: 1px solid $color-bg-secondary-2;
66+
border: 1px solid $tertiary-bg;
6767
font-style: italic;
6868
border-radius: 1rem;
6969
padding: 0.5rem;
7070
margin: 10px 0;
71-
background-color: rgba($color-bg-secondary-2, 0.8);
72-
color: $color-fg;
71+
background-color: rgba($tertiary-bg, 0.8);
72+
color: $text-color;
7373
overflow-x: auto;
7474

7575
pre {
@@ -79,7 +79,7 @@
7979
}
8080

8181
blockquote {
82-
border-left: 6px solid $color-fg-secondary;
82+
border-left: 6px solid $accent-color;
8383
padding-left: 1rem;
8484
font-style: italic;
8585
opacity: 0.9;
@@ -107,7 +107,7 @@
107107
}
108108
a {
109109
max-width: 20vw;
110-
color: $color-fg-secondary;
110+
color: $accent-color;
111111
text-wrap: balance;
112112
}
113113
}
@@ -120,13 +120,13 @@
120120

121121
&.footer-rule {
122122
margin-top: 4rem;
123-
background-color: $color-bg-secondary-2;
124-
border: 2px $color-fg-secondary dashed;
123+
background-color: $tertiary-bg;
124+
border: 2px $accent-color dashed;
125125
opacity: 0.35;
126126
}
127127
&.footer-rule-2 {
128-
background-color: $color-bg-secondary-2;
129-
border: 2px $color-fg-secondary dashed;
128+
background-color: $tertiary-bg;
129+
border: 2px $accent-color dashed;
130130
opacity: 0.35;
131131
}
132132
}

‎sass/blog.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
a.blog-card {
99
display: block;
10-
background-color: $color-bg-secondary;
10+
background-color: $secondary-bg;
1111
padding: 1rem;
1212
border-radius: 8px;
1313
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -20,7 +20,7 @@
2020
}
2121

2222
.blog-title {
23-
color: $color-fg-secondary;
23+
color: $accent-color;
2424
font-family: Andika;
2525
font-size: clamp(1.2rem, 3.8vw, 1.7rem);
2626
margin-bottom: 1rem;
@@ -32,14 +32,14 @@
3232
gap: clamp(1rem, 4.4vw, 2rem);
3333

3434
.card-description {
35-
color: $color-fg;
35+
color: $text-color;
3636
opacity: 0.9;
3737
font-weight: light;
3838
font-size: clamp(0.7rem, 2.2vw, 1rem);
3939
}
4040

4141
.card-date {
42-
color: $color-fg-secondary;
42+
color: $accent-color;
4343
min-width: fit-content;
4444
font-family: Andika;
4545
font-size: clamp(0.6rem, 2vw, 0.9rem);;

‎sass/index.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
box-sizing: border-box;
66
object-fit: cover;
77
border-radius: 50%;
8-
border: 10px solid $color-fg;
8+
border: 10px solid $text-color;
99
margin: 2em 3em;
1010
width: 100%;
1111
height: auto;
@@ -42,7 +42,7 @@
4242
a {
4343
font-family: Andika;
4444

45-
@include underline-effect(absolute, 0px, $color-fg);
45+
@include underline-effect(absolute, 0px, $text-color);
4646
}
4747
}
4848
}

0 commit comments

Comments
 (0)