Skip to content

Commit c96bc9d

Browse files
sarmsteadsarmstead
committed
refactor(variables.css): prefix colors with "color"
* Replace all changed variable name instances * Alphabetize variables
1 parent 1d79c9a commit c96bc9d

File tree

11 files changed

+51
-54
lines changed

11 files changed

+51
-54
lines changed

‎src/css/base/typography.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
33

44
body {
5-
color: var(--text);
5+
color: var(--color-text);
66
font-family: 'Inter', sans-serif;
77
font-size: 1rem;
88
line-height: 1.5rem;
@@ -43,15 +43,15 @@ h6 {
4343
}
4444

4545
a {
46-
box-shadow: inset 0 -2px 0 var(--yellow);
46+
box-shadow: inset 0 -2px 0 var(--color-yellow);
4747
color: inherit;
4848
padding-bottom: 1px;
4949
text-decoration: none;
5050
transition: all 0.15s ease-in-out;
5151
}
5252

5353
a:hover {
54-
box-shadow: inset 0 -2px 0 var(--red);
54+
box-shadow: inset 0 -2px 0 var(--color-red);
5555
}
5656

5757
@media (min-width: 834px) {

‎src/css/base/variables.css‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
:root {
2-
/* Colors */
3-
--red: #e14943;
4-
--darkred: #cf2821;
5-
--purple: #755384;
6-
--blue: #6288bc;
7-
--green: #71c09e;
8-
--yellow: #ffd065;
9-
--white: #fffdf9;
10-
--text: #3b3e44;
11-
--lightblue: #eff4f8;
12-
--navy: #292e37;
13-
--mutednavy: #444d5c;
14-
--divider: #f6f3f0;
15-
16-
/* Layout */
2+
--color-blue: #6288bc;
3+
--color-darkred: #cf2821;
4+
--color-divider: #f6f3f0;
5+
--color-green: #71c09e;
6+
--color-lightblue: #eff4f8;
7+
--color-mutednavy: #444d5c;
8+
--color-navy: #292e37;
9+
--color-purple: #755384;
10+
--color-red: #e14943;
11+
--color-text: #3b3e44;
12+
--color-white: #fffdf9;
13+
--color-yellow: #ffd065;
1714
--layout-inner-max-width: 1135px;
1815
}

‎src/css/components/divider.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
hr {
2-
border: 3px solid var(--yellow);
2+
border: 3px solid var(--color-yellow);
33
width: 70px;
44
margin: 0 0 30px;
55
}

‎src/css/components/get-involved.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
h2,
77
p,
88
a {
9-
color: var(--navy);
9+
color: var(--color-navy);
1010
}
1111

1212
hr {
@@ -23,7 +23,7 @@
2323
}
2424

2525
.error span[data-members-error] {
26-
color: var(--darkred);
26+
color: var(--color-darkred);
2727
display: block;
2828
}
2929

@@ -71,7 +71,7 @@
7171
border: 1px solid rgba(220, 233, 250, 1);
7272
border-radius: 8px;
7373
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.07);
74-
color: var(--navy);
74+
color: var(--color-navy);
7575
min-height: 50px;
7676
font-size: 1rem;
7777
padding: 12px 20px;

‎src/css/components/profile-image.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.profile-image {
2-
border: 2px solid var(--white);
2+
border: 2px solid var(--color-white);
33
border-radius: 100%;
44
box-shadow: 0 6px 14px rgb(39 41 45 / 26%);
55
display: block;

‎src/css/components/sponsors.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
margin: 30px 0;
77

88
.sponsors__title {
9-
background-color: var(--red);
9+
background-color: var(--color-red);
1010
border-radius: 12px 12px 0 0;
1111
color: white;
1212
margin: 0;

‎src/css/components/static-content.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
}
99

1010
.static-content h3 {
11-
color: var(--red);
11+
color: var(--color-red);
1212
}
1313

1414
.static-content ul {

‎src/css/modern.css‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
right: 0;
2525
bottom: 0;
2626
height: 3px;
27-
background-color: var(--yellow);
27+
background-color: var(--color-yellow);
2828
width: 70px;
2929
}
3030
}
@@ -48,15 +48,15 @@
4848
}
4949

5050
.program-support {
51-
background-color: var(--lightblue);
51+
background-color: var(--color-lightblue);
5252
margin-bottom: 2.5rem;
5353
margin-top: 2.5rem;
5454
border-radius: 0.5rem;
5555
padding: 20px;
5656
}
5757

5858
.program-support span {
59-
background-color: var(--yellow);
59+
background-color: var(--color-yellow);
6060
padding: 1rem;
6161
margin: 0 1rem 1rem 0;
6262
font-size: 1.25rem;
@@ -74,28 +74,28 @@
7474
}
7575
}
7676
.program-support span:nth-of-type(2) {
77-
background-color: var(--red);
77+
background-color: var(--color-red);
7878
color: white;
7979
}
8080
.program-support span:nth-of-type(3) {
8181
color: white;
82-
background-color: var(--blue);
82+
background-color: var(--color-blue);
8383
}
8484
.program-support span:nth-of-type(4) {
85-
background-color: var(--green);
85+
background-color: var(--color-green);
8686
}
8787
.projects {
88-
background-color: var(--darkred);
89-
color: var(--white);
88+
background-color: var(--color-darkred);
89+
color: var(--color-white);
9090
margin-bottom: 2.5rem;
9191
margin-top: 2.5rem;
9292
border-radius: 0.5rem;
9393
padding: 20px;
9494
}
9595
.project {
9696
width: 100%;
97-
background-color: var(--navy);
98-
color: var(--white);
97+
background-color: var(--color-navy);
98+
color: var(--color-white);
9999
border-radius: 0.5rem;
100100
padding: 1.5rem;
101101
padding-bottom: 2rem;
@@ -247,19 +247,19 @@
247247
}
248248
}
249249
.level.ruby .name {
250-
background-color: var(--red);
251-
color: var(--white);
250+
background-color: var(--color-red);
251+
color: var(--color-white);
252252
}
253253
.level.gold .name {
254-
background-color: var(--yellow);
254+
background-color: var(--color-yellow);
255255
}
256256
.level.silver .name {
257-
background-color: var(--blue);
258-
color: var(--white);
257+
background-color: var(--color-blue);
258+
color: var(--color-white);
259259
}
260260
.level.major .name {
261-
background-color: var(--green);
262-
color: var(--white);
261+
background-color: var(--color-green);
262+
color: var(--color-white);
263263
}
264264
.level .bucket {
265265
border-bottom-left-radius: .75rem;

‎src/css/pages/conferences.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
#rubyconf a,
33
#railsconf a,
44
.static-content a {
5-
text-shadow: 0 2px 0 var(--white), 1px 2px 0 var(--white),
6-
-1px 2px 0 var(--white), 2px 2px 0 var(--white),
7-
-2px 2px 0 var(--white);
5+
text-shadow: 0 2px 0 var(--color-white), 1px 2px 0 var(--color-white),
6+
-1px 2px 0 var(--color-white), 2px 2px 0 var(--color-white),
7+
-2px 2px 0 var(--color-white);
88
}
99
}

‎src/css/pages/home.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,23 @@
88
margin: auto;
99

1010
h1 {
11-
color: var(--red);
11+
color: var(--color-red);
1212
font-size: 2rem;
1313
font-weight: 700;
1414
line-height: normal;
1515
text-transform: uppercase;
1616
}
1717

1818
h2 {
19-
color: var(--navy);
19+
color: var(--color-navy);
2020
font-size: 1.5rem;
2121
font-weight: 500;
2222
line-height: 2.25rem;
2323
text-transform: unset;
2424
}
2525

2626
h3 {
27-
color: var(--navy);
27+
color: var(--color-navy);
2828
font-size: 0.875rem;
2929
font-weight: 400;
3030
line-height: 1.125rem;
@@ -68,7 +68,7 @@
6868
.home-template__pillars__details,
6969
.home-template__community__details {
7070
display: grid;
71-
background-color: var(--navy);
71+
background-color: var(--color-navy);
7272
border-radius: 8px;
7373
gap: 48px;
7474
grid-template-columns: 1fr;
@@ -146,7 +146,7 @@
146146

147147
.home-template__pillars__details--stats,
148148
.home-template__community__details--stats {
149-
background-color: var(--mutednavy);
149+
background-color: var(--color-mutednavy);
150150
border-radius: 8px;
151151
display: grid;
152152
grid-template-columns: 1fr;
@@ -194,7 +194,7 @@
194194
}
195195

196196
.home-template__open-source__content {
197-
color: var(--navy);
197+
color: var(--color-navy);
198198
display: flex;
199199
flex-direction: column;
200200
gap: 16px;
@@ -216,7 +216,7 @@
216216

217217
.home-template__open-source__stats {
218218
color: white;
219-
background-color: var(--red);
219+
background-color: var(--color-red);
220220
border-radius: 8px;
221221
display: flex;
222222
flex-direction: column;

0 commit comments

Comments
 (0)