feat(landing): 230px fullbody roster, features goat column, trimmed header
- Members roster avatars render 230px tall (full body); NMSR size bumped to 256 and tiles widened to fit the portrait. - Features section is now two columns: the 4 feature cards stacked on the left, a Minecraft goat image on the right (public/Goat_JE1_BE1.webp). Stacks on narrow screens. - Header nav links trimmed to How to Join + Status; the auth CTA cluster is now Register / Account / Play (the old "Log in" button relabeled Account → Cuenta/Kontua). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
BIN
landing/public/Goat_JE1_BE1.webp
Normal file
BIN
landing/public/Goat_JE1_BE1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -78,7 +78,7 @@ const { status, avatarUrl, rosterAvatarMode } = site;
|
||||
const img = document.createElement("img");
|
||||
img.loading = "lazy";
|
||||
img.alt = name;
|
||||
img.src = `${avatar}/${mode}/${uuid}?size=128`;
|
||||
img.src = `${avatar}/${mode}/${uuid}?size=256`;
|
||||
const label = document.createElement("span");
|
||||
label.className = "roster-name";
|
||||
label.textContent = name;
|
||||
|
||||
@@ -183,7 +183,7 @@ export const ui: Record<Lang, UI> = {
|
||||
en: {
|
||||
htmlLang: "en",
|
||||
copied: "Copied!",
|
||||
nav: { status: "Status", members: "Members", features: "Features", mods: "Mods", join: "How to Join", play: "Play", register: "Register", login: "Log in" },
|
||||
nav: { status: "Status", members: "Members", features: "Features", mods: "Mods", join: "How to Join", play: "Play", register: "Register", login: "Account" },
|
||||
hero: {
|
||||
eyebrow: "Modded LAN · NeoForge",
|
||||
tagline: "Kitchen-sink survival, built to outlast the weekend.",
|
||||
@@ -365,7 +365,7 @@ export const ui: Record<Lang, UI> = {
|
||||
es: {
|
||||
htmlLang: "es",
|
||||
copied: "¡Copiado!",
|
||||
nav: { status: "Estado", members: "Miembros", features: "Características", mods: "Mods", join: "Cómo entrar", play: "Jugar", register: "Registro", login: "Entrar" },
|
||||
nav: { status: "Estado", members: "Miembros", features: "Características", mods: "Mods", join: "Cómo entrar", play: "Jugar", register: "Registro", login: "Cuenta" },
|
||||
hero: {
|
||||
eyebrow: "LAN con mods · NeoForge",
|
||||
tagline: "Supervivencia todo incluido, para durar más que el finde.",
|
||||
@@ -547,7 +547,7 @@ export const ui: Record<Lang, UI> = {
|
||||
eu: {
|
||||
htmlLang: "eu",
|
||||
copied: "Kopiatuta!",
|
||||
nav: { status: "Egoera", members: "Kideak", features: "Ezaugarriak", mods: "Mods", join: "Nola sartu", play: "Jolastu", register: "Erregistroa", login: "Sartu" },
|
||||
nav: { status: "Egoera", members: "Kideak", features: "Ezaugarriak", mods: "Mods", join: "Nola sartu", play: "Jolastu", register: "Erregistroa", login: "Kontua" },
|
||||
hero: {
|
||||
eyebrow: "Mod-dun LANa · NeoForge",
|
||||
tagline: "Mod ugariko biziraupena, irauteko egina.",
|
||||
|
||||
@@ -75,9 +75,6 @@ const dustBits = Array.from({ length: 16 }, (_, i) => {
|
||||
<nav class="nav-links">
|
||||
<a href="#join">{t.nav.join}</a>
|
||||
<a href="#status">{t.nav.status}</a>
|
||||
<a href="#members">{t.nav.members}</a>
|
||||
<a href="#mods">{t.nav.mods}</a>
|
||||
<a href="#features">{t.nav.features}</a>
|
||||
</nav>
|
||||
<span class="nav-spacer"></span>
|
||||
<div class="lang-switch" aria-label="Language">
|
||||
@@ -238,16 +235,21 @@ const dustBits = Array.from({ length: 16 }, (_, i) => {
|
||||
<h2 class="section-title">{t.features.title}</h2>
|
||||
<p class="lead">{t.features.lead}</p>
|
||||
</div>
|
||||
<div class="feat-grid">
|
||||
{site.features.map((f, i) => (
|
||||
<div class="feat reveal" style={`transition-delay:${(i % 2) * 80}ms`}>
|
||||
<PixelIcon glyph={f.glyph} gold={f.gold} />
|
||||
<div>
|
||||
<h3>{t.features.items[i].h}</h3>
|
||||
<p>{t.features.items[i].p}</p>
|
||||
<div class="feat-split">
|
||||
<div class="feat-grid">
|
||||
{site.features.map((f, i) => (
|
||||
<div class="feat reveal" style={`transition-delay:${(i % 2) * 80}ms`}>
|
||||
<PixelIcon glyph={f.glyph} gold={f.gold} />
|
||||
<div>
|
||||
<h3>{t.features.items[i].h}</h3>
|
||||
<p>{t.features.items[i].p}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
<div class="feat-aside reveal">
|
||||
<img src="/Goat_JE1_BE1.webp" alt="" width="1200" height="1200" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -474,7 +474,7 @@ section { position: relative; z-index: 1; }
|
||||
============================================================ */
|
||||
.roster {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.roster-tile {
|
||||
@@ -487,7 +487,7 @@ section { position: relative; z-index: 1; }
|
||||
}
|
||||
.roster-tile img {
|
||||
width: auto;
|
||||
height: 72px;
|
||||
height: 230px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
@@ -505,11 +505,31 @@ section { position: relative; z-index: 1; }
|
||||
/* ============================================================
|
||||
FEATURES
|
||||
============================================================ */
|
||||
.feat-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
gap: 28px;
|
||||
align-items: center;
|
||||
}
|
||||
.feat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: 1fr;
|
||||
gap: 18px;
|
||||
}
|
||||
.feat-aside {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.feat-aside img {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
height: auto;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.feat-split { grid-template-columns: 1fr; }
|
||||
}
|
||||
.feat {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
|
||||
Reference in New Issue
Block a user