Skip to content

Commit 4930072

Browse files
moehreagmoehreag
authored
Merge pull request #3 from xlingyy/new_website
Animations for reasons, Dark theme switcher, Some
2 parents 0106487 + 55b7f47 commit 4930072

File tree

7 files changed

+160
-35
lines changed

7 files changed

+160
-35
lines changed

‎images/light-bg.webp‎

270 KB
Loading

‎images/moon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎images/screenshot_settings.png‎

-24 KB
Binary file not shown.

‎images/sun.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎index.html‎

Lines changed: 10 additions & 9 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">
@@ -12,10 +13,13 @@
1213
</head>
1314

1415
<div class="navbar">
15-
<img src="images/icon.png" alt="Logo">
16-
<a href="https://modrinth.com/mod/axolotlclient">Modrinth</a>
17-
<a href="https://github.com/AxolotlClient/">GitHub</a>
18-
<a href="https://discord.gg/9Q3brQVQZN">Discord</a>
16+
<div class="navbar-left">
17+
<img src="images/icon.png" alt="Logo">
18+
<a href="https://modrinth.com/mod/axolotlclient">Modrinth</a>
19+
<a href="https://github.com/AxolotlClient/">GitHub</a>
20+
<a href="https://discord.gg/9Q3brQVQZN">Discord</a>
21+
</div>
22+
<div class="navbar-right"><img src="images/moon.svg" alt="" id="switcher"></div>
1923
</div>
2024

2125
<body>
@@ -76,9 +80,6 @@ <h5 class="warning">NOT AN OFFICIAL MINECRAFT PRODUCT. NOT APPROVED BY OR ASSOCI
7680
Website by xlingy
7781
</h5>
7882
</div>
79-
80-
81-
8283
</body>
8384

8485
</html>

‎script.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
document.getElementById("switcher").src = "images/sun.svg";
21+
} else {
22+
rootElem.setAttribute("data-theme", "light");
23+
document.getElementById("switcher").src = "images/moon.svg";
24+
}
25+
26+
const switchTheme = () => {
27+
let dataTheme = rootElem.getAttribute("data-theme"),
28+
newtheme;
29+
newTheme = dataTheme === "dark" ? "light" : "dark";
30+
switchIcon = document.getElementById("switcher");
31+
rootElem.setAttribute("data-theme", newTheme);
32+
if (dataTheme === "dark") {
33+
switcher.src = "images/moon.svg";
34+
} else {
35+
switcher.src = "images/sun.svg";
36+
}
37+
};
38+
39+
document.querySelector("#switcher").addEventListener("click", switchTheme);

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

Lines changed: 109 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,46 @@
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+
--switcher-color: invert(6%) sepia(1%) saturate(751%) hue-rotate(314deg)
35+
brightness(101%) contrast(71%);
36+
}
37+
38+
:root {
39+
--default-transition: color 0.3s ease-in-out,
40+
background-color 0.4s ease-in-out, border-color 0.3s ease-in-out,
41+
fill 0.3s ease-in-out, transform 0.3s ease-in-out;
42+
}
43+
144
html {
245
scroll-behavior: smooth;
346
}
@@ -7,19 +50,21 @@ html {
750
}
851

952
::-webkit-scrollbar-track {
10-
background: #3d3d3d;
53+
background: var(--scrollbar-track);
1154
}
1255

1356
::-webkit-scrollbar-thumb {
14-
background: #717171;
57+
background: var(--scrollbar-thumb);
1558
}
1659

1760
body {
61+
transition: var(--default-transition);
1862
margin: 0px;
1963
font-family: "Fira Sans", sans-serif;
2064
}
2165

2266
.main {
67+
background: var(--background-image);
2368
position: relative;
2469
align-items: center;
2570
display: flex;
@@ -28,7 +73,6 @@ body {
2873
text-align: center;
2974
display: flex;
3075
flex-direction: column;
31-
background-image: url(images/background.png);
3276
background-repeat: no-repeat;
3377
background-position: center;
3478
background-size: cover;
@@ -39,11 +83,11 @@ body {
3983
}
4084

4185
.main h1 {
42-
color: rgb(224, 224, 224);
86+
color: var(--main-text);
4387
}
4488

4589
.main h3 {
46-
color: #a4a4a4;
90+
color: var(--muted-text);
4791
}
4892

4993
.main button {
@@ -57,7 +101,7 @@ body {
57101
margin: 5px;
58102
border-style: none;
59103
box-sizing: border-box;
60-
color: #ffffff;
104+
color: var(--main-text);
61105
cursor: pointer;
62106
flex-shrink: 0;
63107
font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont,
@@ -90,20 +134,16 @@ body {
90134
}
91135
}
92136

93-
94-
.main button:hover {
95-
background-color: #35353f;
96-
}
97-
98137
.main img {
99138
width: 10vh;
100139
}
101140

102141
.next__slide {
142+
transition: var(--default-transition);
103143
padding: 20px;
104144
text-align: center;
105-
color: white;
106-
background-color: #121212;
145+
color: var(--about-text);
146+
background-color: var(--main-bg);
107147
min-height: 60vh;
108148
}
109149

@@ -114,8 +154,7 @@ body {
114154
justify-content: space-between;
115155
justify-content: center;
116156
text-align: center;
117-
background-color: #121212;
118-
color: white;
157+
color: var(--reason-text);
119158
}
120159

121160
.reason {
@@ -125,11 +164,33 @@ body {
125164
height: 270px;
126165
border: 2px solid;
127166
border-color: #22ff88;
128-
background-color: #38384f;
167+
background-color: var(--reason-bg);
129168
border-radius: 10px;
130169
padding: 20px;
131170
transition-duration: 0.5s;
132171
font-size: 16px;
172+
opacity: 0;
173+
transition: all 1s;
174+
transform: translateX(-100%);
175+
}
176+
177+
.reason p {
178+
color: #d5d5d5;
179+
}
180+
181+
@media (orientation: landscape) {
182+
.reason:nth-child(2) {
183+
transition-delay: 100ms;
184+
}
185+
186+
.reason:nth-child(3) {
187+
transition-delay: 200ms;
188+
}
189+
}
190+
191+
.show {
192+
opacity: 1;
193+
transform: translateX(0);
133194
}
134195

135196
.reason:hover {
@@ -143,11 +204,24 @@ body {
143204
margin-bottom: 10px;
144205
}
145206

207+
.navbar-left,
208+
.navbar-right {
209+
display: flex;
210+
align-items: center;
211+
justify-content: space-between;
212+
}
213+
146214
.navbar {
215+
transition: var(--default-transition);
216+
justify-content: space-between;
217+
display: flex;
218+
align-items: center;
219+
display: flex;
220+
align-items: center;
147221
backdrop-filter: blur(5px);
148222
z-index: 1;
149223
overflow: hidden;
150-
background-color: #00000080;
224+
background-color: var(--navbar-bg);
151225
position: fixed;
152226
top: 0;
153227
width: 100%;
@@ -157,45 +231,54 @@ body {
157231
transition: 1s 5ms;
158232
float: left;
159233
display: block;
160-
color: #f2f2f2;
234+
color: var(--navbar-text);
161235
text-align: center;
162236
padding: 20px;
163237
text-decoration: none;
164238
}
165239

166240
.navbar img {
167241
padding: 10px;
168-
float: left;
242+
height: 40px;
169243
width: 40px;
170244
}
171245

172246
.navbar a:hover {
173-
background: #ffffff90;
174-
color: black;
247+
background: var(--navbar-hover-bg);
248+
color: var(--navbar-hover-text);
249+
}
250+
251+
#switcher {
252+
transition: 0.3s 5ms;
253+
filter: var(--switcher-color);
254+
float: right;
255+
width: 25px;
256+
margin: 2px;
257+
cursor: pointer;
175258
}
176259

177260
.about {
178-
background-color: #121212;
179-
color: #ffffff;
261+
transition: var(--default-transition);
262+
background-color: var(--main-bg);
263+
color: var(--about-text);
180264
padding: 1px;
181265
text-align: center;
182266
}
183267

184268
.about p {
185-
color: #9f9f9f;
269+
color: var(--about-muted);
186270
margin-left: 20vh;
187271
margin-right: 20vh;
188272
}
189273

190274
@media (max-width: 1000px) {
191275
.about p {
192-
color: #9f9f9f;
193276
margin-left: 5vh;
194277
margin-right: 5vh;
195278
}
196279
}
197280

198281
.warning {
199-
color: #ffffff;
282+
color: var(--about-text);
200283
padding-top: 30px;
201284
}

0 commit comments

Comments
 (0)