Skip to content

Commit f8a7d36

Browse files
wyndchymewyndchyme
committed
Completed home page
1 parent afb4c21 commit f8a7d36

File tree

9 files changed

+198
-68
lines changed

9 files changed

+198
-68
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎404.html‎

Lines changed: 25 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link href="style.css" rel="stylesheet">
77
<link rel="icon" type="image/x-icon" href="/img/favicon.ico?">
8-
<title>Minecraft 3DS Community &#8226 Home</title>
8+
<link rel="stylesheet" href="plugins/flickity/flickity.css" media="screen">
9+
<script src="plugins/flickity/flickity.pkgd.js"></script>
10+
<title>Home &#8226 Minecraft 3DS Community</title>
911
<style>
1012
.header {
1113
overflow: visible;
@@ -20,57 +22,9 @@
2022
</style>
2123
</head>
2224
<body>
23-
<script>
24-
function generateVines() {
25-
const vinesContainer = document.getElementById('vines');
26-
vinesContainer.innerHTML = "";
27-
28-
const vineWidth = 32;
29-
const gap = 64;
30-
const spacing = vineWidth + gap;
31-
const maxHeight = 5;
32-
const minLeft = 360;
33-
34-
const header = document.querySelector('.header');
35-
const headerWidth = header.offsetWidth;
36-
vinesContainer.style.width = headerWidth + 'px';
37-
38-
const availableWidth = headerWidth - minLeft;
39-
const totalColumns = Math.floor(availableWidth / spacing);
40-
41-
for (let i = 0; i < totalColumns; i++) {
42-
if (i % 4 === 0) continue;
43-
const vineHeight = Math.floor(Math.random() * maxHeight) + 1;
44-
const left = minLeft + i * spacing;
45-
46-
for (let j = 0; j < vineHeight; j++) {
47-
const vine = document.createElement('img');
48-
vine.src = 'img/bg/vine.png';
49-
vine.style.width = vineWidth + 'px';
50-
vine.style.position = 'absolute';
51-
vine.style.left = `${left}px`;
52-
vine.style.top = `${j * vineWidth}px`;
53-
vine.style.display = 'block';
54-
vinesContainer.appendChild(vine);
55-
}
56-
}
57-
}
58-
59-
window.addEventListener('DOMContentLoaded', generateVines);
60-
61-
let resizeTimeout;
62-
window.addEventListener('resize', () => {
63-
clearTimeout(resizeTimeout);
64-
resizeTimeout = setTimeout(() => {
65-
location.reload();
66-
}, 250);
67-
});
68-
</script>
69-
70-
7125
<div style="position: absolute; top: 0; left: 0; width: 100vw; height: 3.5em; display: flex; align-items: center;" class="header">
7226
<a href="index.html" style="text-indent: 1rem;">
73-
<span style="color: white; font-size: 20pt; filter: drop-shadow(0 3px 3px black); margin-left: 20px;">
27+
<span style="color: white; font-size: 20pt; filter: drop-shadow(0 3px 3px black); margin-left: 45px;" class="logo">
7428
<img src="img/New_Nintendo_3DS_Edition.webp" style="width: 180px; vertical-align: middle; position: relative; bottom: 3px; image-rendering: auto;">
7529
<span style="position: absolute; display: inline-block; color: yellow; transform-origin: left; transform: translateX(-100px) translateY(25px) scale(0.65) rotate(-15deg); animation: scaleText 2s ease-in-out infinite;">
7630
Community
@@ -80,6 +34,12 @@
8034

8135
<div id="vines" class="vines">
8236
</div>
37+
38+
<div class="vines" id="leftVines">
39+
<img src="img/bg/vine.png" style="width: 32px; position: absolute; left: 32px; top: 0;">
40+
<img src="img/bg/vine.png" style="width: 32px; position: absolute; left: 32px; top: 32px;">
41+
</div>
42+
<!--wyndchyme was here. These left vines will only appear on smaller video widths.-->
8343
</div>
8444

8545

@@ -91,7 +51,7 @@
9151
<img src="img/gui/expfull.png" class="expImage" data-full="img/gui/expfull.png" alt="Expand">
9252
</span>
9353
<img src="img/gui/exp.png" style="position: absolute;">
94-
<span class="dropDownItems" onclick="window.location.href='index.html';">
54+
<span class="dropDownItems" onclick="window.location.href='404.html';">
9555
<img src="img/gui/unistore.png" style="position: relative; bottom: 1px;">Unistore
9656
<img src="img/gui/expfull.png" class="expImage" data-full="img/gui/expfull.png">
9757
</span>
@@ -116,25 +76,25 @@
11676
<img src="img/gui/expfull.png" class="expImage" data-full="img/gui/expfull.png">
11777
</span>
11878
<img src="img/gui/exp.png" style="position: absolute;">
119-
<img src="img/gui/config.png" style="position: absolute; right: 10px; bottom: 20px; width: 30px;">
79+
<div class="dropDownLinks">
80+
<img src="img/links/github.png" style="position: absolute; right: 12px; bottom: 196px; width: 24px;" onclick="window.location.href='https://github.com/Minecraft-3DS-Community';">
81+
<img src="img/links/speedrun.png" style="position: absolute; right: 10px; bottom: 160px; width: 28px;" onclick="window.location.href='https://www.speedrun.com/mc3ds';">
82+
<img src="img/links/twitter.png" style="position: absolute; right: 12px; bottom: 130px; width: 23px;" onclick="window.location.href='https://x.com/minecraft3ds_';">
83+
<img src="img/links/reddit.png" style="position: absolute; right: 13px; bottom: 93px; width: 23px;" onclick="window.location.href='https://www.reddit.com/r/Minecraft3DS/';">
84+
<img src="img/links/discord.png" style="position: absolute; right: 10px; bottom: 55px; width: 30px;" onclick="window.location.href='https://discord.com/invite/PcfekvmjSw';">
85+
<img src="img/links/dev.png" style="position: absolute; right: 12px; bottom: 26px; width: 25px;" onclick="window.location.href='404.html';">
86+
</div>
12087
</div>
12188
</div>
12289
<div class="dropDownButton" id="dropDownToggle">
12390
<img src="img/gui/arrow.png" style="width: 32px;" id="dropDownArrow">
12491
</div>
12592
</div>
126-
12793

128-
<script>
129-
document.getElementById("dropDownToggle").addEventListener("click", function () {
130-
const container = document.querySelector(".dropDownContainer");
131-
const arrow = document.getElementById("dropDownArrow");
94+
<script src="scripts/main/dropdown.js"></script>
95+
<script src="scripts/main/nodetails.js"></script>
96+
<script src="scripts/main/vines.js"></script>
97+
<script src="scripts/main/sidebarfit.js"></script>
13298

133-
container.classList.toggle("closed");
134-
arrow.classList.toggle("flipped");
135-
});
136-
</script>
137-
138-
139-
</body>
140-
</html>
99+
</body>
100+
</html>

‎img/bg/end_stone.png‎

206 Bytes
Loading

‎img/bg/nether_bricks.png‎

190 Bytes
Loading

‎img/bg/netherrack.png‎

213 Bytes
Loading

‎img/news/featured/halloween.jpg‎

598 KB
Loading

‎index.html‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
<img src="img/bg/vine.png" style="width: 32px; position: absolute; left: 32px; top: 0;">
4040
<img src="img/bg/vine.png" style="width: 32px; position: absolute; left: 32px; top: 32px;">
4141
</div>
42+
<!--wyndchyme was here. These left vines will only appear on smaller video widths.-->
4243
</div>
4344

4445

@@ -96,14 +97,15 @@
9697
<br>
9798
<br>
9899
<br>
100+
<!--wyndchyme was here. Please try to keep this down to nine slides.-->
99101
<div class="gallery js-flickity" data-flickity-options='{"autoPlay": 3500, "wrapAround": true}' style="filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));">
100102
<div class="gallery-cell" style="background-color: rgb(74, 110, 157);">
101103
<img src="img/logos/unistore.png" style="width:200px; position: relative; filter: drop-shadow(0 1px 1px black);" onclick="window.location.href='https://github.com/Minecraft-3DS-Community/Minecraft-3ds-unistore';" class="logoCell">
102104
</div>
103105
<div class="gallery-cell">
104-
<img src="img/news/entry5-0.webp" style="width: 500px; position: relative;">
106+
<img src="img/news/featured/halloween.jpg" style="width: 500px; position: relative;">
105107
<div style="background-color: rgba(21, 40, 70, 0.5); position: absolute; padding-left: 300px; padding-bottom: 20px; bottom: 0;">IO</div>
106-
<gallerysubtitle><a href="https://github.com/Cracko298/mc3ds-creaking" style="color: white;">The Creaking</a></gallerysubtitle>
108+
<gallerysubtitle><a href="https://github.com/nawrek/mc3ds-halloween-port" style="color: white;">Halloween Mash-Up</a></gallerysubtitle>
107109
</div>
108110
<div class="gallery-cell">
109111
<img src="img/news/featured/autumnal.png" style="width: 500px; position: relative;">
@@ -141,6 +143,25 @@
141143
</div>
142144
<br>
143145

146+
<div class="homeBody">
147+
<div style="background-color: rgba(255, 255, 255, 0.3); padding-left: 20px; padding-right: 20px; padding-top: 15px;">
148+
Welcome to the official Minecraft 3DS Community website. From mods and tools, all the way to tutorials and FAQs - it's all here in one place.<br>&nbsp;
149+
</div>
150+
<br>
151+
<br>
152+
<div class="didYouKnow" style="margin-top: -35px;">
153+
<div class="didYouKnowHeader">Did you know?</div>
154+
<div class="didYouKnowBody">
155+
<i>Minecraft: New Nintendo 3DS Edition</i> was announced and released on the same day - September 13th, 2017, during a Nintendo Direct.
156+
</div>
157+
</div>
158+
<div style="position: relative; bottom: 35px; width: calc(70% - 15px); padding-top: 3px;" class="featuredVideo">
159+
Featured Video<br>
160+
<iframe src="https://www.youtube.com/embed/qqUPaUAleYs?si=glkFwQhPKF6vMVot" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
161+
</div>
162+
<br>
163+
</div>
164+
144165
</div>
145166
<div class="sidebar">
146167
<div class="newsHeader">Latest News</div>
@@ -364,6 +385,10 @@ <h2 id="entry-1-23-10-2024-">Entry 1 (23-10-2024)</h2>
364385
<script src="scripts/main/dropdown.js"></script>
365386
<script src="scripts/main/nodetails.js"></script>
366387
<script src="scripts/main/vines.js"></script>
388+
<script src="scripts/main/sidebarfit.js"></script>
367389

368390
</body>
391+
<div class="copyrightDiv" style="position: fixed; bottom: 0; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url(img/bg/dirt.png); background-size: 32px; image-rendering: pixelated; width: 100%; left: 0; text-align: center; z-index: 100; font-family: 'Minecraft Regular'; font-size: 11pt; color: rgba(255, 255, 255, 0.9);">
392+
© 2024-2025 Minecraft 3DS Community. All Rights Reserved.
393+
</div>
369394
</html>

‎scripts/main/sidebarfit.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
window.addEventListener('load', setSidebarMinHeight);
2+
window.addEventListener('resize', setSidebarMinHeight);
3+
4+
function setSidebarMinHeight() {
5+
const sidebar = document.querySelector('.sidebar');
6+
const didYouKnow = document.querySelector('.didYouKnow');
7+
8+
if (window.innerWidth > 768) {
9+
if (sidebar && didYouKnow) {
10+
const didYouKnowBottom = didYouKnow.getBoundingClientRect().bottom;
11+
12+
sidebar.style.minHeight = `${didYouKnowBottom}px`;
13+
}
14+
} else {
15+
sidebar.style.minHeight = '';
16+
}
17+
}
18+
19+
window.addEventListener('load', function() {
20+
var didYouKnow = document.querySelector('.didYouKnow');
21+
var featuredVideo = document.querySelector('.featuredVideo');
22+
// wyndchyme was here. This should have been flexbox. I'm really sorry.
23+
if (window.innerWidth > 550) {
24+
var didYouKnowHeight = didYouKnow.offsetHeight;
25+
26+
featuredVideo.style.height = didYouKnowHeight + 'px';
27+
}
28+
});

‎style.css‎

Lines changed: 117 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ html, body {
1212
}
1313

1414
body {
15-
background-color: #515151;
15+
background-color: rgb(43, 64, 43);
1616
}
1717

1818
.header {
@@ -199,7 +199,80 @@ body {
199199
min-width: 250px;
200200
margin-left: 15px;
201201
margin-right: 15px;
202+
height: 100%;
203+
}
204+
205+
.homeBody {
206+
position: relative;
207+
top: 30px;
208+
font-family: 'Minecraft Regular';
209+
color: white;
210+
font-size: 16pt;
211+
line-height: 1.4;
212+
text-indent: 1.5em;
213+
}
214+
215+
.homeBody iframe {
216+
width: calc(100% - 20px);
217+
height: 75%;
218+
margin-left: 10px;
219+
margin-right: 10px;
220+
position: relative;
221+
top: 5px;
222+
border: 10px solid rgba(0, 0, 0, 0.3); box-sizing: border-box;
223+
}
224+
225+
.didYouKnow {
226+
width: 30%;
227+
background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5)), url(img/bg/netherrack.png);
228+
background-size: 32px;
229+
position: absolute;
230+
right: 0;
231+
color: white;
232+
box-sizing: border-box;
233+
display: flex;
234+
flex-direction: column;
235+
filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.5));
236+
min-height: 275px;
237+
height: 330px
238+
}
239+
240+
.didYouKnowHeader {
241+
color: rgb(255, 214, 202);
242+
padding-top: 3px;
243+
padding-bottom: 3px;
244+
background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1)), url(img/bg/nether_bricks.png);
245+
background-size: 32px;
246+
image-rendering: pixelated;
247+
font-size: 16pt;
248+
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.75);
249+
}
250+
251+
@media (max-width: 1000px) {
252+
.didYouKnowHeader {
253+
font-size: 11pt;
254+
}
255+
.didYouKnowBody {
256+
font-size: 12pt !important;
257+
}
258+
}
259+
260+
.didYouKnowBody {
261+
padding-left: 15px;
262+
padding-right: 15px;
263+
padding-bottom: 20px;
264+
padding-top: 5px;
265+
text-indent: 1em;
266+
flex: 1;
267+
font-size: 15pt;
268+
}
269+
270+
.featuredVideo {
271+
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4)), url(img/bg/stone_bricks.png);;
272+
background-size: 32px;
273+
filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.5));
202274
}
275+
203276

204277
.sidebar {
205278
flex: 1 1 30%;
@@ -222,6 +295,7 @@ body {
222295

223296
.news h1 {
224297
color: rgb(255, 255, 184);
298+
font-weight: normal !important;
225299
}
226300

227301
.news h2 {
@@ -231,6 +305,7 @@ body {
231305
background-color: rgba(255, 255, 255, 0.2);
232306
padding-bottom: 5px;
233307
padding-left: 5px;
308+
font-weight: normal !important;
234309
}
235310

236311
.news a {
@@ -249,6 +324,9 @@ body {
249324
.sidebar {
250325
border-left: none;
251326
max-height: 300px;
327+
margin-left: 15px;
328+
margin-right: 15px;
329+
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
252330
}
253331
.newsHeader {
254332
position: relative;
@@ -270,6 +348,38 @@ body {
270348
#vines {
271349
margin-left: -400px !important;
272350
}
351+
.homeBody {
352+
position: absolute;
353+
top: 615px;
354+
margin-left: 25px !important;
355+
margin-right: 25px !important;
356+
font-size: 15pt;
357+
}
358+
.homeIntro {
359+
position: relative;
360+
right: 15px;
361+
}
362+
.didYouKnow {
363+
width: 40vw;
364+
}
365+
.featuredVideo {
366+
width: 50vw !important;
367+
}
368+
.didYouKnowHeader {
369+
font-size: 14pt !important;
370+
}
371+
.didYouKnowBody {
372+
font-size: 13pt !important;
373+
}
374+
}
375+
376+
@media (max-width: 550px) {
377+
.didYouKnow {
378+
display: none;
379+
}
380+
.featuredVideo {
381+
width: 100% !important;
382+
}
273383
}
274384

275385
.newsHeader {
@@ -351,4 +461,10 @@ gallerysubtitle a {
351461
font-style: normal;
352462
font-weight: normal;
353463
src: local('Minecraft Regular'), url('/plugins/font/1_MinecraftRegular1.woff') format('woff');
464+
}
465+
466+
@media (max-width: 450px) {
467+
.copyrightDiv {
468+
font-size: 9pt !important;
469+
}
354470
}

0 commit comments

Comments
 (0)