Skip to content

Commit 2fc7f04

Browse files
authored
📦 Updates
1 parent 665bb93 commit 2fc7f04

File tree

10 files changed

+10260
-1
lines changed

10 files changed

+10260
-1
lines changed

‎assets/css/libraries/ani-collection.css‎

Lines changed: 4686 additions & 0 deletions
Large diffs are not rendered by default.

‎assets/css/styles/404.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/*
2+
***********
3+
* Desktop *
4+
***********
5+
*/
6+
7+
#container404 {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
flex-direction: column;
12+
13+
width: 100vw;
14+
height: 100vh;
15+
padding: 10px;
16+
}
17+
18+
#container404 h2 {
19+
text-align: center;
20+
font-size: 30px;
21+
text-shadow: 2px 2px #7159c1;
22+
}
23+
24+
#container404 #stickersContainer404 {
25+
display: flex;
26+
justify-content: center;
27+
align-items: center;
28+
flex-wrap: wrap;
29+
}
30+
31+
.sticker404 { width: 150px; height: auto; }
32+
33+
#container404 #btnContainer404 {
34+
width: 35vw;
35+
display: flex;
36+
justify-content: space-evenly;
37+
align-items: center;
38+
flex-wrap: wrap;
39+
gap: 20px;
40+
}
41+
42+
#container404 #btnContainer404 button {
43+
width: 145px;
44+
height: 35px;
45+
46+
font-size: 15px;
47+
48+
border: 0;
49+
border-radius: 5px;
50+
cursor: pointer;
51+
transition: -webkit-filter 0.3s ease;
52+
53+
border: 2px solid black;
54+
}
55+
56+
#container404 #btnContainer404 button:hover { -webkit-filter: brightness(80%); }
57+
58+
/*
59+
**********
60+
* Mobile *
61+
**********
62+
*/
63+
@media only screen and (max-width: 625px) {
64+
#errorContainer h2 { font-size: 25px; }
65+
.sticker404 { width: 100px; }
66+
}
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
3+
4+
/* Reset */
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
outline: none;
9+
list-style: none;
10+
box-sizing: border-box;
11+
text-decoration: none;
12+
scroll-behavior: smooth;
13+
vertical-align: baseline;
14+
}
15+
16+
/* Variables */
17+
:root { }
18+
19+
/* Body */
20+
body {
21+
overflow-x: hidden;
22+
font: 400 18px Roboto Mono, sans-serif;
23+
24+
background: aliceblue;
25+
-webkit-font-smoothing: antialiased;
26+
}
27+
28+
a { color: ghostwhite; }
29+
button { font: 400 14px Roboto, sans-serif; }
Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
/*
2+
**********************
3+
** Header - Desktop **
4+
**********************
5+
*/
6+
7+
header #headerImg {
8+
width: 100vw;
9+
height: auto;
10+
}
11+
12+
header nav {
13+
width: 100vw;
14+
15+
display: flex;
16+
justify-content: space-between;
17+
align-items: center;
18+
19+
padding-top: 1%;
20+
padding-left: 2%;
21+
padding-right: 2%;
22+
23+
position: absolute;
24+
top: 8px;
25+
left: 16px;
26+
27+
color: ghostwhite;
28+
}
29+
30+
header nav #gitHubProfile { transition: all 0.3s ease; }
31+
32+
header nav #gitHubProfile:hover {
33+
border-bottom-style: dashed;
34+
border-bottom-width: 3.1px;
35+
-webkit-filter: brightness(87%);
36+
}
37+
38+
header nav #desktopMenu {
39+
display: flex;
40+
justify-content: center;
41+
}
42+
43+
header nav #desktopMenu > li {
44+
margin-right: 50px;
45+
cursor: pointer;
46+
47+
border-bottom-style: dashed;
48+
border-bottom-width: 3.1px;
49+
50+
transition: all 0.3s ease;
51+
}
52+
53+
header nav #desktopMenu > li:hover {
54+
-webkit-filter: brightness(87%);
55+
border-bottom-style: solid;
56+
}
57+
58+
header nav #sponsorThemeBtn a #sponsorBtn, header nav #sponsorThemeBtn #themeBtn {
59+
height: 35px;
60+
border: 0;
61+
border-radius: 5px;
62+
cursor: pointer;
63+
transition: -webkit-filter 0.3s ease;
64+
}
65+
66+
header nav #sponsorThemeBtn a #sponsorBtn { width: 116px; }
67+
header nav #sponsorThemeBtn #themeBtn { width: 50px; }
68+
69+
header nav #sponsorThemeBtn a #sponsorBtn:hover,
70+
header nav #sponsorThemeBtn #themeBtn:hover
71+
{ -webkit-filter: brightness(80%); }
72+
73+
#titleAndSubtitle {
74+
width: 100vw;
75+
position: absolute;
76+
top: 100px;
77+
78+
color: #c3c3c3;
79+
font-weight: bold;
80+
text-align: center;
81+
82+
text-shadow: 2px 2px #7159c1;
83+
}
84+
85+
#titleAndSubtitle span { font-size: 20px; }
86+
87+
/*
88+
*********************
89+
** Header - Mobile **
90+
*********************
91+
*/
92+
93+
#mobileMenuToggle {
94+
width: auto;
95+
96+
display: none;
97+
position: absolute;
98+
top: 15px;
99+
right: 15px;
100+
101+
border-radius: 5px;
102+
padding: 5px;
103+
cursor: pointer;
104+
z-index: 999;
105+
}
106+
107+
#bar1, #bar2, #bar3 {
108+
width: 35px;
109+
height: 5px;
110+
background-color: ghostwhite;
111+
margin: 6px 0;
112+
transition: 0.4s;
113+
}
114+
115+
.change #bar1 { transform: translate(0, 11px) rotate(-45deg); }
116+
.change #bar2 {opacity: 0;}
117+
.change #bar3 { transform: translate(0, -11px) rotate(45deg); }
118+
119+
#mobileMenu {
120+
width: auto;
121+
122+
display: none;
123+
position: absolute;
124+
125+
top: 75px;
126+
right: -150px;
127+
128+
background-color: ghostwhite;
129+
color: #707070;
130+
border-radius: 5px;
131+
132+
transition: all 0.7s ease;
133+
z-index: 999;
134+
}
135+
136+
#mobileMenu li {
137+
padding: 10px;
138+
cursor: pointer;
139+
transition: all 0.3s ease;
140+
}
141+
142+
#mobileMenu li:hover {
143+
background-color: #c6c6c6;
144+
color: ghostwhite;
145+
}
146+
147+
/*
148+
**************************
149+
** Screen - Controllers **
150+
**************************
151+
*/
152+
153+
@media only screen and (max-width: 850px) {
154+
header nav #sponsorThemeBtn,
155+
header nav #desktopMenu
156+
{ display: none; }
157+
158+
#mobileMenuToggle { display: inline-block; }
159+
#mobileMenu { display: inline-block; }
160+
}
161+
162+
@media only screen and (max-width: 625px) {
163+
header nav #gitHubProfile { display: none; }
164+
#titleAndSubtitle { display: none; }
165+
#headerImg { content:url("../../images/header-mobile.jpg"); }
166+
}
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
::-webkit-scrollbar { width: 7px; }
2+
3+
/* Track */
4+
::-webkit-scrollbar-track {
5+
background-color: #05031c;
6+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
7+
-webkit-border-radius: 10px;
8+
border-radius: 10px;
9+
}
10+
11+
/* Handle */
12+
::-webkit-scrollbar-thumb {
13+
background-color: #7159c1;
14+
-webkit-border-radius: 10px;
15+
border-radius: 10px;
16+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
17+
}
18+
19+
::-webkit-scrollbar-thumb:window-inactive {
20+
background-color: #7159c1;
21+
}
22+
23+
@media only screen and (max-width: 850px) {
24+
::-webkit-scrollbar { width: 0px; }
25+
}
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.container {
2+
width: 100vw;
3+
margin-bottom: 5px;
4+
background-color: #efefef;
5+
color: #707070;
6+
}
7+
8+
.containerTitle {
9+
text-align: center;
10+
font-size: 30px;
11+
}
12+
13+
.containerTitle .containerTitleText {
14+
text-decoration: underline;
15+
text-decoration-style: dashed;
16+
}
17+
18+
.sticker {
19+
width: 200px;
20+
height: auto;
21+
}

0 commit comments

Comments
 (0)