Skip to content

Commit 9578e97

Browse files
CSFelixCSFelix
authored
📦 Updates
1 parent 9661ad2 commit 9578e97

File tree

7 files changed

+181
-47
lines changed

7 files changed

+181
-47
lines changed

‎assets/css/styles/404.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
left: 0;
1313
width: 100vw;
1414
height: 100vh;
15-
background-color: aliceblue;
15+
background-color: var(--background-color-1);
1616
}
1717

1818
/* don't show video controls on FullScreen */
@@ -34,7 +34,7 @@
3434
#container404 h2 {
3535
text-align: center;
3636
font-size: 30px;
37-
text-shadow: 2px 2px #7159c1;
37+
text-shadow: 2px 2px var(--text-shadow-color);
3838
}
3939

4040
#container404 #stickersContainer404 {

‎assets/css/styles/footer.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ footer {
66
font-size: 12px;
77
padding: 5px;
88

9-
background-color: #f8f8ff;
9+
background-color: var(--background-color-3);
1010
}
1111

1212
footer img { width: 18px; height: auto; }

‎assets/css/styles/global.css‎

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
1+
/*
2+
***********
3+
** Fonts **
4+
***********
5+
*/
16
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
27
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
38

4-
/* Reset */
9+
/*
10+
***********
11+
** Reset **
12+
***********
13+
*/
514
* {
615
margin: 0;
716
padding: 0;
@@ -13,17 +22,40 @@
1322
vertical-align: baseline;
1423
}
1524

16-
/* Variables */
17-
:root { }
25+
/*
26+
***************
27+
** Variables **
28+
***************
29+
*/
30+
:root {
31+
--background-color-1: aliceblue;
32+
--background-color-2: #ededed;
33+
--background-color-3: #f8f8ff; /* footer */
34+
--background-color-4: #c6c6c6; /* mobile menu options on hover */
1835

19-
/* Body */
36+
--color-1: #707070;
37+
--color-2: ghostwhite;
38+
--color-3: #c3c3c3;
39+
40+
--text-shadow-color: #7159c1; /* header */
41+
42+
--font-1: Roboto Mono;
43+
--font-2: Roboto;
44+
--font-3: sans-serif;
45+
}
46+
47+
/*
48+
**************
49+
** Defaults **
50+
**************
51+
*/
2052
body {
2153
overflow-x: hidden;
22-
font: 400 18px Roboto Mono, sans-serif;
54+
font: 400 18px var(--font-1), var(--font-3);
2355

24-
background: aliceblue;
56+
background: var(--background-color-1);
2557
-webkit-font-smoothing: antialiased;
2658
}
2759

28-
a { color: ghostwhite; }
29-
button { font: 400 14px Roboto, sans-serif; }
60+
a { color: var(--color-2); }
61+
button { font: 400 14px var(--font-2), var(--font-3); }

‎assets/css/styles/header.css‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@
44
**********************
55
*/
66

7-
header #headerImg {
8-
width: 100vw;
9-
height: auto;
10-
}
7+
header #headerImg { width: 100vw; height: auto; }
118

129
header nav {
1310
width: 100vw;
@@ -24,7 +21,7 @@ header nav {
2421
top: 8px;
2522
left: 16px;
2623

27-
color: ghostwhite;
24+
color: var(--color-2);
2825
}
2926

3027
header nav #gitHubProfile { transition: all 0.3s ease; }
@@ -35,10 +32,7 @@ header nav #gitHubProfile:hover {
3532
-webkit-filter: brightness(87%);
3633
}
3734

38-
header nav #desktopMenu {
39-
display: flex;
40-
justify-content: center;
41-
}
35+
header nav #desktopMenu { display: flex; justify-content: center; }
4236

4337
header nav #desktopMenu > li {
4438
margin-right: 50px;
@@ -75,11 +69,11 @@ header nav #sponsorThemeBtn #themeBtn:hover
7569
position: absolute;
7670
top: 100px;
7771

78-
color: #c3c3c3;
72+
color: var(--color-3);
7973
font-weight: bold;
8074
text-align: center;
8175

82-
text-shadow: 2px 2px #7159c1;
76+
text-shadow: 2px 2px var(--text-shadow-color);
8377
}
8478

8579
#titleAndSubtitle span { font-size: 20px; }
@@ -107,7 +101,7 @@ header nav #sponsorThemeBtn #themeBtn:hover
107101
#bar1, #bar2, #bar3 {
108102
width: 35px;
109103
height: 5px;
110-
background-color: ghostwhite;
104+
background-color: var(--color-2);
111105
margin: 6px 0;
112106
transition: 0.4s;
113107
}
@@ -125,8 +119,8 @@ header nav #sponsorThemeBtn #themeBtn:hover
125119
top: 75px;
126120
right: -150px;
127121

128-
background-color: ghostwhite;
129-
color: #707070;
122+
background-color: var(--color-2);
123+
color: var(--color-1);
130124
border-radius: 5px;
131125

132126
transition: all 0.7s ease;
@@ -139,10 +133,9 @@ header nav #sponsorThemeBtn #themeBtn:hover
139133
transition: all 0.3s ease;
140134
}
141135

142-
#mobileMenu li:hover {
143-
background-color: #c6c6c6;
144-
color: ghostwhite;
145-
}
136+
#mobileMenu a { color: var(--color-1); }
137+
138+
#mobileMenu li:hover { background-color: var(--background-color-4); color: var(--color-2); }
146139

147140
/*
148141
**************************

‎assets/css/styles/modal.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/*
2+
**********************
3+
** Modal Background **
4+
**********************
5+
*/
6+
.modal {
7+
display: none;
8+
position: fixed;
9+
z-index: 10;
10+
padding-top: 100px;
11+
left: 0;
12+
top: 0;
13+
width: 100vw;
14+
height: 100vh;
15+
overflow: auto;
16+
background-color: rgb(0,0,0);
17+
background-color: rgba(0,0,0,0.4);
18+
}
19+
20+
/*
21+
*******************
22+
** Modal Content **
23+
*******************
24+
*/
25+
.modalContent {
26+
background-color: var(--background-color-1);
27+
color: var(--color-1);
28+
margin: auto;
29+
padding: 20px;
30+
border: 1px solid #888;
31+
width: 80%;
32+
border-radius: 15px;
33+
}
34+
35+
/*
36+
*****************
37+
** Modal Title **
38+
*****************
39+
*/
40+
.modalContent .modalTitle {
41+
display: flex;
42+
align-items: center;
43+
justify-content: center;
44+
flex-wrap: wrap;
45+
}
46+
47+
.modalContent .modalTitle img { width: 60px; height: auto; }
48+
.modalContent .modalTitle span { font-size: 25px; }
49+
50+
/*
51+
*****************
52+
** Modal Items **
53+
*****************
54+
*/
55+
.modalContent .modalItems {
56+
display: flex;
57+
align-items: center;
58+
justify-content: center;
59+
flex-wrap: wrap;
60+
}
61+
62+
.modalContent .modalItems .themeGroup {
63+
display: flex;
64+
align-items: center;
65+
justify-content: center;
66+
flex-wrap: wrap;
67+
}
68+
69+
.modalContent .modalItems .themeGroup img { width: 125px; height: auto; }
70+
.modalContent .modalItems .themeGroup span { font-size: 20px; }
71+
.modalContent .modalItems img { width: 200px; height: auto; }
72+
73+
.modalContent .sponsorGroup {
74+
display: flex;
75+
align-items: center;
76+
justify-content: center;
77+
flex-direction: column;
78+
gap: 30px;
79+
}
80+
81+
.modalContent .sponsorGroup a button {
82+
width: 116px;
83+
height: 35px;
84+
border: 0;
85+
border-radius: 5px;
86+
cursor: pointer;
87+
transition: -webkit-filter 0.3s ease;
88+
}
89+
90+
.modalContent .sponsorGroup a button:hover { -webkit-filter: brightness(80%); }
91+
92+
/*
93+
******************
94+
** Close Button **
95+
******************
96+
*/
97+
.close { color: var(--color-1); float: right; font-size: 28px; font-weight: bold; }
98+
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }

‎assets/css/styles/scrollbar.css‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,41 @@
1+
/*
2+
****************
3+
** Scroll Bar **
4+
****************
5+
*/
16
::-webkit-scrollbar { width: 7px; }
27

3-
/* Track */
8+
/*
9+
***********
10+
** Track **
11+
***********
12+
*/
413
::-webkit-scrollbar-track {
514
background-color: #05031c;
615
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
716
-webkit-border-radius: 10px;
817
border-radius: 10px;
918
}
1019

11-
/* Handle */
20+
/*
21+
************
22+
** Handle **
23+
************
24+
*/
1225
::-webkit-scrollbar-thumb {
1326
background-color: #7159c1;
1427
-webkit-border-radius: 10px;
1528
border-radius: 10px;
1629
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
1730
}
1831

19-
::-webkit-scrollbar-thumb:window-inactive {
20-
background-color: #7159c1;
21-
}
32+
::-webkit-scrollbar-thumb:window-inactive { background-color: #7159c1; }
2233

34+
/*
35+
************
36+
** Mobile **
37+
************
38+
*/
2339
@media only screen and (max-width: 850px) {
2440
::-webkit-scrollbar { width: 0px; }
2541
}

‎assets/css/styles/sections.css‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
** All Containers **
44
********************
55
*/
6-
.container { width: 100vw; padding: 20px; color: #707070; }
7-
#skillsContainer, #reachMeContainer { background-color: #ededed; }
6+
.container { width: 100vw; padding: 20px; color: var(--color-1); }
7+
#skillsContainer, #reachMeContainer { background-color: var(--background-color-2); }
88
.containerTitle { text-align: center; font-size: 30px; }
99
.containerTitleText { text-decoration: underline; text-decoration-style: dashed; }
1010

@@ -31,7 +31,7 @@
3131
margin-bottom: 15px;
3232
}
3333

34-
.skillsSubContainer .skillsInfoContainer a { color: #707070; cursor: pointer; }
34+
.skillsSubContainer .skillsInfoContainer a { color: var(--color-1); cursor: pointer; }
3535

3636
.skillsSubContainer .skillsInfoContainer a span {
3737
font-size: 25px;
@@ -79,9 +79,9 @@
7979
padding: 20px;
8080
width: 200px;
8181

82-
background-color: #ededed;
82+
background-color: var(--background-color-2);
8383
border-radius: 5px;
84-
border: 2px solid #707070;
84+
border: 2px solid var(--color-1);
8585

8686
transition: all 0.3s ease;
8787
}
@@ -91,9 +91,7 @@
9191
transform: translateY(-5px);
9292
}
9393

94-
#projectsSubContainer .projectBtn img {
95-
width: 60px; height: auto;
96-
}
94+
#projectsSubContainer .projectBtn img { width: 60px; height: auto; }
9795

9896
/*
9997
***********************
@@ -107,13 +105,10 @@
107105
gap: 15px;
108106
}
109107

110-
.reachMeSubContainer img {
111-
width: 50px;
112-
height: auto;
113-
}
108+
.reachMeSubContainer img { width: 50px; height: auto; }
114109

115110
.reachMeSubContainer a {
116-
color: #707070;
111+
color: var(--color-1);
117112
font-weight: bold;
118113
transition: all 0.3s ease;
119114
}

0 commit comments

Comments
 (0)