Skip to content

Commit f685f47

Browse files
wyndchymewyndchyme
authored
Added Featured section
1 parent 167b50d commit f685f47

File tree

15 files changed

+4934
-108
lines changed

15 files changed

+4934
-108
lines changed

‎img/logos/megapack.png‎

40.3 KB
Loading

‎img/logos/unistore.png‎

163 KB
Loading

‎img/news/featured/autumnal.png‎

180 KB
Loading

‎img/news/featured/endermanyk.png‎

56.3 KB
Loading

‎img/news/featured/faithless.webp‎

409 KB
Loading

‎img/news/featured/grimes.png‎

87.3 KB
Loading

‎img/news/featured/mobvariations.webp‎

54 KB
Loading

‎img/news/featured/sinkdontswim.webp‎

50.1 KB
Loading

‎index.html‎

Lines changed: 54 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
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+
<link rel="stylesheet" href="plugins/flickity/flickity.css" media="screen">
9+
<script src="plugins/flickity/flickity.pkgd.js"></script>
810
<title>Minecraft 3DS Community &#8226 Home</title>
911
<style>
1012
.header {
@@ -20,54 +22,6 @@
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 = 2;
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;">
7327
<span style="color: white; font-size: 20pt; filter: drop-shadow(0 3px 3px black); margin-left: 45px;">
@@ -98,7 +52,7 @@
9852
<img src="img/gui/expfull.png" class="expImage" data-full="img/gui/expfull.png" alt="Expand">
9953
</span>
10054
<img src="img/gui/exp.png" style="position: absolute;">
101-
<span class="dropDownItems" onclick="window.location.href='index.html';">
55+
<span class="dropDownItems" onclick="window.location.href='404.html';">
10256
<img src="img/gui/unistore.png" style="position: relative; bottom: 1px;">Unistore
10357
<img src="img/gui/expfull.png" class="expImage" data-full="img/gui/expfull.png">
10458
</span>
@@ -138,45 +92,58 @@
13892
</div>
13993
</div>
14094

141-
142-
<script>
143-
document.getElementById("dropDownToggle").addEventListener("click", function () {
144-
const container = document.querySelector(".dropDownContainer");
145-
const arrow = document.getElementById("dropDownArrow");
146-
147-
container.classList.toggle("closed");
148-
arrow.classList.toggle("flipped");
149-
});
150-
</script>
151-
152-
<script>
153-
document.addEventListener('click', function(event) {
154-
const dropDownContainer = document.querySelector('.dropDownContainer');
155-
const dropDownButton = document.querySelector('.dropDownButton');
156-
const dropDownArrow = document.querySelector('#dropDownArrow');
157-
158-
if (!dropDownContainer.contains(event.target) && !dropDownButton.contains(event.target)) {
159-
dropDownContainer.classList.add('closed');
160-
dropDownArrow.classList.remove('flipped');
161-
}
162-
});
163-
164-
dropDownButton.addEventListener('click', function(event) {
165-
event.stopPropagation();
166-
167-
dropDownContainer.classList.toggle('closed');
168-
169-
dropDownArrow.classList.toggle('flipped');
170-
});
171-
172-
</script>
173-
17495
<div class="text-container">
17596
<div class="main-text">
97+
17698
<br>
17799
<br>
178-
<h1>Home</h1>
179-
<i>This page is under construction. Come back soon!</i>
100+
<br>
101+
<!--wyndchyme was here. Do not remove the Unistore cell, please.-->
102+
<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));">
103+
<div class="gallery-cell" style="background-color: rgb(74, 110, 157);">
104+
<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">
105+
</div>
106+
<div class="gallery-cell">
107+
<img src="img/news/entry5-0.webp" style="width: 500px; position: relative;">
108+
<div style="background-color: rgba(21, 40, 70, 0.5); position: absolute; padding-left: 300px; padding-bottom: 20px; bottom: 0;">IO</div>
109+
<gallerysubtitle><a href="https://github.com/Cracko298/mc3ds-creaking" style="color: white;">The Creaking</a></gallerysubtitle>
110+
</div>
111+
<div class="gallery-cell">
112+
<img src="img/news/featured/autumnal.png" style="width: 500px; position: relative;">
113+
<div style="background-color: rgba(21, 40, 70, 0.5); position: absolute; padding-left: 300px; padding-bottom: 20px; bottom: 0;">IO</div>
114+
<gallerysubtitle><a href="https://github.com/wyndchyme/mc3ds-autumnal" style="color: white;">Autumnal</a></gallerysubtitle>
115+
</div>
116+
<div class="gallery-cell">
117+
<img src="img/news/featured/endermanyk.png" style="width: 300px; position: relative;">
118+
<div style="background-color: rgba(21, 40, 70, 0.5); position: absolute; padding-left: 300px; padding-bottom: 20px; bottom: 0;">IO</div>
119+
<gallerysubtitle><a href="https://github.com/Minecraft-3DS-Community/Minecraft-3ds-unistore" style="color: white;">ENDERMANYK's Shaders</a></gallerysubtitle>
120+
</div>
121+
<div class="gallery-cell" style="background-color: rgb(200, 156, 69);">
122+
<img src="img/logos/megapack.png" style="width:195px; position: relative; filter: drop-shadow(0 1px 1px black);" onclick="window.location.href='https://github.com/wyndchyme/mc3ds-modern';" class="logoCell">
123+
</div>
124+
<div class="gallery-cell">
125+
<img src="img/news/featured/mobvariations.webp" style="width: 500px; position: relative;">
126+
<div style="background-color: rgba(21, 40, 70, 0.5); position: absolute; padding-left: 300px; padding-bottom: 20px; bottom: 0;">IO</div>
127+
<gallerysubtitle><a href="https://github.com/pizza-beep/MC3DS-mob-variations" style="color: white;">Mob Variations</a></gallerysubtitle>
128+
</div>
129+
<div class="gallery-cell">
130+
<img src="img/news/featured/grimes.png" style="width: 300px; position: relative;">
131+
<div style="background-color: rgba(21, 40, 70, 0.5); position: absolute; padding-left: 300px; padding-bottom: 20px; bottom: 0;">IO</div>
132+
<gallerysubtitle><a href="https://github.com/sewene/mc3ds-grimes" style="color: white;">mc3ds-grimes</a></gallerysubtitle>
133+
</div>
134+
<div class="gallery-cell">
135+
<img src="img/news/featured/sinkdontswim.webp" style="width: 300px; position: relative;">
136+
<div style="background-color: rgba(21, 40, 70, 0.5); position: absolute; padding-left: 300px; padding-bottom: 20px; bottom: 0;">IO</div>
137+
<gallerysubtitle><a href="https://github.com/Minecraft-3DS-Community/Minecraft-3ds-unistore" style="color: white;">Sink, Don't Swim!</a></gallerysubtitle>
138+
</div>
139+
<div class="gallery-cell">
140+
<img src="img/news/featured/faithless.webp" style="width: 300px; position: relative;">
141+
<div style="background-color: rgba(21, 40, 70, 0.5); position: absolute; padding-left: 300px; padding-bottom: 20px; bottom: 0;">IO</div>
142+
<gallerysubtitle><a href="https://github.com/Minecraft-3DS-Community/Minecraft-3ds-unistore" style="color: white;">Faithless</a></gallerysubtitle>
143+
</div>
144+
</div>
145+
<br>
146+
180147
</div>
181148
<div class="sidebar">
182149
<div class="newsHeader">Latest News</div>
@@ -397,28 +364,9 @@ <h2 id="entry-1-23-10-2024-">Entry 1 (23-10-2024)</h2>
397364
</div>
398365
</div>
399366

400-
<script>
401-
document.querySelectorAll('details').forEach(details => {
402-
details.open = true; // Force it open
403-
404-
// Remove the <summary> if present
405-
const summary = details.querySelector('summary');
406-
if (summary) {
407-
summary.remove();
408-
}
409-
410-
// Move the rest of the content out of <details>
411-
const parent = details.parentNode;
412-
while (details.firstChild) {
413-
parent.insertBefore(details.firstChild, details);
414-
}
415-
416-
// Remove the <details> tag itself
417-
parent.removeChild(details);
418-
});
419-
420-
</script>
421-
367+
<script src="scripts/main/dropdown.js"></script>
368+
<script src="scripts/main/nodetails.js"></script>
369+
<script src="scripts/main/vines.js"></script>
422370

423371
</body>
424372
</html>

‎plugins/flickity/flickity.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
/*! Flickity v2.3.0
2+
https://flickity.metafizzy.co
3+
---------------------------------------------- */
4+
5+
.flickity-enabled {
6+
position: relative;
7+
}
8+
9+
.flickity-enabled:focus { outline: none; }
10+
11+
.flickity-viewport {
12+
overflow: hidden;
13+
position: relative;
14+
height: 100%;
15+
}
16+
17+
.flickity-slider {
18+
position: absolute;
19+
width: 100%;
20+
height: 100%;
21+
}
22+
23+
/* draggable */
24+
25+
.flickity-enabled.is-draggable {
26+
-webkit-tap-highlight-color: transparent;
27+
-webkit-user-select: none;
28+
-moz-user-select: none;
29+
-ms-user-select: none;
30+
user-select: none;
31+
}
32+
33+
.flickity-enabled.is-draggable .flickity-viewport {
34+
cursor: move;
35+
cursor: -webkit-grab;
36+
cursor: grab;
37+
}
38+
39+
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
40+
cursor: -webkit-grabbing;
41+
cursor: grabbing;
42+
}
43+
44+
/* ---- flickity-button ---- */
45+
46+
.flickity-button {
47+
position: absolute;
48+
background: hsla(0, 0%, 100%, 0.75);
49+
border: none;
50+
color: #333;
51+
}
52+
53+
.flickity-button:hover {
54+
background: white;
55+
cursor: pointer;
56+
}
57+
58+
.flickity-button:focus {
59+
outline: none;
60+
box-shadow: 0 0 0 5px #19F;
61+
}
62+
63+
.flickity-button:active {
64+
opacity: 0.6;
65+
}
66+
67+
.flickity-button:disabled {
68+
opacity: 0.3;
69+
cursor: auto;
70+
/* prevent disabled button from capturing pointer up event. #716 */
71+
pointer-events: none;
72+
}
73+
74+
.flickity-button-icon {
75+
fill: currentColor;
76+
}
77+
78+
/* ---- previous/next buttons ---- */
79+
80+
.flickity-prev-next-button {
81+
top: 50%;
82+
width: 44px;
83+
height: 44px;
84+
border-radius: 50%;
85+
/* vertically center */
86+
transform: translateY(-50%);
87+
}
88+
89+
.flickity-prev-next-button.previous { left: 10px; }
90+
.flickity-prev-next-button.next { right: 10px; }
91+
/* right to left */
92+
.flickity-rtl .flickity-prev-next-button.previous {
93+
left: auto;
94+
right: 10px;
95+
}
96+
.flickity-rtl .flickity-prev-next-button.next {
97+
right: auto;
98+
left: 10px;
99+
}
100+
101+
.flickity-prev-next-button .flickity-button-icon {
102+
position: absolute;
103+
left: 20%;
104+
top: 20%;
105+
width: 60%;
106+
height: 60%;
107+
}
108+
109+
/* ---- page dots ---- */
110+
111+
.flickity-page-dots {
112+
position: absolute;
113+
width: 100%;
114+
bottom: -25px;
115+
padding: 0;
116+
margin: 0;
117+
list-style: none;
118+
text-align: center;
119+
line-height: 1;
120+
}
121+
122+
.flickity-rtl .flickity-page-dots { direction: rtl; }
123+
124+
.flickity-page-dots .dot {
125+
display: inline-block;
126+
width: 10px;
127+
height: 10px;
128+
margin: 0 8px;
129+
background: #333;
130+
border-radius: 50%;
131+
opacity: 0.25;
132+
cursor: pointer;
133+
}
134+
135+
.flickity-page-dots .dot.is-selected {
136+
opacity: 1;
137+
}

0 commit comments

Comments
 (0)