LCE-Hub/lce-hub.github.io
1
0
Fork 0
mirror of https://github.com/LCE-Hub/lce-hub.github.io.git synced 2026-07-15 21:32:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Media tab overhaul

Browse Source
This commit is contained in:
Santiago Fisela
2026-03-14 18:27:46 -03:00
parent b513664fbf
commit 79ae665c5a
2 changed files with 95 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
index.html
View File

@@ -176,24 +176,54 @@
</section>
<section class="tab-content" id="media">
<div class="home-layout">
<div class="features-row" style="flex-wrap: wrap; gap: 10px;">
<img src="/Community/image.png"
style="width: 31%; border: 2px solid #fff; aspect-ratio: 16/9; object-fit: cover;">
<img src="/Community/image2.png"
style="width: 31%; border: 2px solid #fff; aspect-ratio: 16/9; object-fit: cover;">
<img src="/Community/image3.png"
style="width: 31%; border: 2px solid #fff; aspect-ratio: 16/9; object-fit: cover;">
<img src="/Community/image4.png"
style="width: 31%; border: 2px solid #fff; aspect-ratio: 16/9; object-fit: cover;">
<img src="/Community/image5.png"
style="width: 31%; border: 2px solid #fff; aspect-ratio: 16/9; object-fit: cover;">
<img src="/Community/image6.png"
style="width: 31%; border: 2px solid #fff; aspect-ratio: 16/9; object-fit: cover;">
</div>
<div class="cta-section">
<div class="features-layout scroll-content">
<div class="overview-box" style="text-align: center;">
<h2>Community Gallery</h2>
<p>Check out more on our official Discord server.</p>
<p>A collection of moments and creations shared by the Emerald Legacy community.</p>
</div>
<div class="gallery-grid">
<div class="gallery-item">
<div class="gallery-frame">
<img src="/Community/image.png" alt="Community Shot">
</div>
</div>
<div class="gallery-item">
<div class="gallery-frame">
<img src="/Community/image2.png" alt="Community Shot">
</div>
</div>
<div class="gallery-item">
<div class="gallery-frame">
<img src="/Community/image3.png" alt="Community Shot">
</div>
</div>
<div class="gallery-item">
<div class="gallery-frame">
<img src="/Community/image4.png" alt="Community Shot">
</div>
</div>
<div class="gallery-item">
<div class="gallery-frame">
<img src="/Community/image5.png" alt="Community Shot">
</div>
</div>
<div class="gallery-item">
<div class="gallery-frame">
<img src="/Community/image6.png" alt="Community Shot">
</div>
</div>
</div>
<div class="content-footer" style="background: #3c3c3c; padding: 20px; border: 4px solid #1a1a1a;">
<div class="disclaimer-text">
<h3>Share Your Creations</h3>
<p>Join our Discord to feature your screenshots and videos on our official website!</p>
</div>
<div class="roadmap-link">
<a href="https://discord.gg/RHGRUwpmVc" class="main-btn"
style="width: 180px; height: 44px; font-size: 1rem;">JOIN DISCORD</a>
</div>
</div>
</div>
</section>

48
src/style.css
View File

@@ -853,4 +853,52 @@ body {
.os-grid {
grid-template-columns: 1fr;
}
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.gallery-item {
background: #1a1a1a;
padding: 4px;
border: 4px solid #7c7c7c;
border-right-color: #262626;
border-bottom-color: #262626;
transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.gallery-item:hover {
transform: scale(1.05);
z-index: 10;
outline: 4px solid var(--highlight-yellow);
}
.gallery-frame {
background: #000;
border: 4px solid #3c3c3c;
position: relative;
overflow: hidden;
aspect-ratio: 16/9;
}
.gallery-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 900px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.gallery-grid {
grid-template-columns: 1fr;
}
}