Skip to content

Commit 3bf5f79

Browse files
justchillinfrenjustchillinfren
committed
Animations for reasons, Dark theme switcher, Some
Improvments
1 parent 4f7d0fa commit 3bf5f79

File tree

6 files changed

+131
-30
lines changed

6 files changed

+131
-30
lines changed

‎images/light-bg.webp‎

270 KB
Loading

‎images/moon-regular.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎images/screenshot_settings.png‎

-24 KB
Binary file not shown.

‎index.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-theme="dark">
33

44
<head>
5-
<link rel="stylesheet" href="index.css">
5+
<script defer src="script.js"></script>
6+
<link rel="stylesheet" href="style.css">
67
<link rel="icon" href="images/icon.png">
78
<link href="https://fonts.bunny.net/css2?family=Fira+Sans&display=swap" rel="stylesheet">
89
<meta charset="UTF-8">
@@ -16,6 +17,7 @@
1617
<a href="https://modrinth.com/mod/axolotlclient">Modrinth</a>
1718
<a href="https://github.com/AxolotlClient/">GitHub</a>
1819
<a href="https://discord.gg/9Q3brQVQZN">Discord</a>
20+
<img src="images/moon-regular.svg" alt="" id="switcher">
1921
</div>
2022

2123
<body>
@@ -76,9 +78,6 @@ <h5 class="warning">NOT AN OFFICIAL MINECRAFT PRODUCT. NOT APPROVED BY OR ASSOCI
7678
Website by xlingy
7779
</h5>
7880
</div>
79-
80-
81-
8281
</body>
8382

8483
</html>

‎script.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const observer = new IntersectionObserver((entries) => {
2+
entries.forEach((entry) => {
3+
console.log(entry);
4+
if (entry.isIntersecting) {
5+
entry.target.classList.add("show");
6+
} else {
7+
entry.target.classList.remove("show");
8+
}
9+
});
10+
});
11+
12+
const hiddenElements = document.querySelectorAll(".reason");
13+
hiddenElements.forEach((el) => observer.observe(el));
14+
15+
const rootElem = document.documentElement;
16+
17+
const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
18+
if (darkThemeMq.matches) {
19+
rootElem.setAttribute("data-theme", 'dark');
20+
} else {
21+
rootElem.setAttribute("data-theme", 'light');
22+
}
23+
24+
const switchTheme = () => {
25+
let dataTheme = rootElem.getAttribute("data-theme"),
26+
newtheme;
27+
28+
newTheme = (dataTheme === "dark") ? "light" : "dark";
29+
30+
rootElem.setAttribute("data-theme", newTheme);
31+
};
32+
33+
document.querySelector("#switcher").addEventListener("click", switchTheme);

‎index.css‎ renamed to ‎style.css‎

Lines changed: 93 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,44 @@
1+
:root[data-theme="dark"] {
2+
--background-image: url(images/background.png);
3+
--navbar-text: #ffffff;
4+
--main-text: #f2f2f2;
5+
--muted-text: #a4a4a4;
6+
--main-bg: #121212;
7+
--reason-bg: #38384f;
8+
--navbar-bg: #00000080;
9+
--navbar-hover-bg: #ffffff90;
10+
--navbar-hover-text: #000;
11+
--scrollbar-track: #3d3d3d;
12+
--scrollbar-thumb: #717171;
13+
--about-text: var(--main-text);
14+
--about-muted: var(--muted-text);
15+
--switcher-color: invert(100%) sepia(2%) saturate(122%) hue-rotate(243deg)
16+
brightness(113%) contrast(90%);
17+
}
18+
19+
:root[data-theme="light"] {
20+
--background-image: url(images/light-bg.webp);
21+
--main-text: #fff;
22+
--muted-text: #9c9c9c;
23+
--reason-text: #fff;
24+
--navbar-text: #303030;
25+
--main-bg: #dedede;
26+
--reason-bg: #5a5a6b;
27+
--navbar-bg: #ffffff80;
28+
--navbar-hover-bg: #00000090;
29+
--navbar-hover-text: #fff;
30+
--scrollbar-track: #6c6c6c;
31+
--scrollbar-thumb: #b0b0b0;
32+
--about-text: #2a2a2a;
33+
--about-muted: #808080;
34+
}
35+
36+
:root {
37+
--default-transition: color 0.3s ease-in-out,
38+
background-color 0.4s ease-in-out, border-color 0.3s ease-in-out,
39+
fill 0.3s ease-in-out, transform 0.3s ease-in-out;
40+
}
41+
142
html {
243
scroll-behavior: smooth;
344
}
@@ -7,19 +48,21 @@ html {
748
}
849

950
::-webkit-scrollbar-track {
10-
background: #3d3d3d;
51+
background: var(--scrollbar-track);
1152
}
1253

1354
::-webkit-scrollbar-thumb {
14-
background: #717171;
55+
background: var(--scrollbar-thumb);
1556
}
1657

1758
body {
59+
transition: var(--default-transition);
1860
margin: 0px;
1961
font-family: "Fira Sans", sans-serif;
2062
}
2163

2264
.main {
65+
background: var(--background-image);
2366
position: relative;
2467
align-items: center;
2568
display: flex;
@@ -28,7 +71,6 @@ body {
2871
text-align: center;
2972
display: flex;
3073
flex-direction: column;
31-
background-image: url(images/background.png);
3274
background-repeat: no-repeat;
3375
background-position: center;
3476
background-size: cover;
@@ -39,11 +81,11 @@ body {
3981
}
4082

4183
.main h1 {
42-
color: rgb(224, 224, 224);
84+
color: var(--main-text);
4385
}
4486

4587
.main h3 {
46-
color: #a4a4a4;
88+
color: var(--muted-text);
4789
}
4890

4991
.main button {
@@ -57,7 +99,7 @@ body {
5799
margin: 5px;
58100
border-style: none;
59101
box-sizing: border-box;
60-
color: #ffffff;
102+
color: var(--main-text);
61103
cursor: pointer;
62104
flex-shrink: 0;
63105
font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont,
@@ -90,20 +132,16 @@ body {
90132
}
91133
}
92134

93-
94-
.main button:hover {
95-
background-color: #35353f;
96-
}
97-
98135
.main img {
99136
width: 10vh;
100137
}
101138

102139
.next__slide {
140+
transition: var(--default-transition);
103141
padding: 20px;
104142
text-align: center;
105-
color: white;
106-
background-color: #121212;
143+
color: var(--about-text);
144+
background-color: var(--main-bg);
107145
min-height: 60vh;
108146
}
109147

@@ -114,8 +152,7 @@ body {
114152
justify-content: space-between;
115153
justify-content: center;
116154
text-align: center;
117-
background-color: #121212;
118-
color: white;
155+
color: var(--reason-text);
119156
}
120157

121158
.reason {
@@ -125,11 +162,33 @@ body {
125162
height: 270px;
126163
border: 2px solid;
127164
border-color: #22ff88;
128-
background-color: #38384f;
165+
background-color: var(--reason-bg);
129166
border-radius: 10px;
130167
padding: 20px;
131168
transition-duration: 0.5s;
132169
font-size: 16px;
170+
opacity: 0;
171+
transition: all 1s;
172+
transform: translateX(-100%);
173+
}
174+
175+
.reason p {
176+
color: #d5d5d5;
177+
}
178+
179+
@media (orientation: landscape) {
180+
.reason:nth-child(2) {
181+
transition-delay: 100ms;
182+
}
183+
184+
.reason:nth-child(3) {
185+
transition-delay: 200ms;
186+
}
187+
}
188+
189+
.show {
190+
opacity: 1;
191+
transform: translateX(0);
133192
}
134193

135194
.reason:hover {
@@ -144,10 +203,11 @@ body {
144203
}
145204

146205
.navbar {
206+
transition: var(--default-transition);
147207
backdrop-filter: blur(5px);
148208
z-index: 1;
149209
overflow: hidden;
150-
background-color: #00000080;
210+
background-color: var(--navbar-bg);
151211
position: fixed;
152212
top: 0;
153213
width: 100%;
@@ -157,7 +217,7 @@ body {
157217
transition: 1s 5ms;
158218
float: left;
159219
display: block;
160-
color: #f2f2f2;
220+
color: var(--navbar-text);
161221
text-align: center;
162222
padding: 20px;
163223
text-decoration: none;
@@ -170,32 +230,40 @@ body {
170230
}
171231

172232
.navbar a:hover {
173-
background: #ffffff90;
174-
color: black;
233+
background: var(--navbar-hover-bg);
234+
color: var(--navbar-hover-text);
235+
}
236+
237+
#switcher {
238+
transition: .3s 5ms;
239+
filter: var(--switcher-color);
240+
float: right;
241+
width: 25px;
242+
cursor: pointer;
175243
}
176244

177245
.about {
178-
background-color: #121212;
179-
color: #ffffff;
246+
transition: var(--default-transition);
247+
background-color: var(--main-bg);
248+
color: var(--about-text);
180249
padding: 1px;
181250
text-align: center;
182251
}
183252

184253
.about p {
185-
color: #9f9f9f;
254+
color: var(--about-muted);
186255
margin-left: 20vh;
187256
margin-right: 20vh;
188257
}
189258

190259
@media (max-width: 1000px) {
191260
.about p {
192-
color: #9f9f9f;
193261
margin-left: 5vh;
194262
margin-right: 5vh;
195263
}
196264
}
197265

198266
.warning {
199-
color: #ffffff;
267+
color: var(--about-text);
200268
padding-top: 30px;
201269
}

0 commit comments

Comments
 (0)