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");
|
const img = document.createElement("img");
|
||||||
img.loading = "lazy";
|
img.loading = "lazy";
|
||||||
img.alt = name;
|
img.alt = name;
|
||||||
img.src = `${avatar}/${mode}/${uuid}?size=128`;
|
img.src = `${avatar}/${mode}/${uuid}?size=256`;
|
||||||
const label = document.createElement("span");
|
const label = document.createElement("span");
|
||||||
label.className = "roster-name";
|
label.className = "roster-name";
|
||||||
label.textContent = name;
|
label.textContent = name;
|
||||||
|
|||||||
@@ -183,7 +183,7 @@ export const ui: Record<Lang, UI> = {
|
|||||||
en: {
|
en: {
|
||||||
htmlLang: "en",
|
htmlLang: "en",
|
||||||
copied: "Copied!",
|
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: {
|
hero: {
|
||||||
eyebrow: "Modded LAN · NeoForge",
|
eyebrow: "Modded LAN · NeoForge",
|
||||||
tagline: "Kitchen-sink survival, built to outlast the weekend.",
|
tagline: "Kitchen-sink survival, built to outlast the weekend.",
|
||||||
@@ -365,7 +365,7 @@ export const ui: Record<Lang, UI> = {
|
|||||||
es: {
|
es: {
|
||||||
htmlLang: "es",
|
htmlLang: "es",
|
||||||
copied: "¡Copiado!",
|
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: {
|
hero: {
|
||||||
eyebrow: "LAN con mods · NeoForge",
|
eyebrow: "LAN con mods · NeoForge",
|
||||||
tagline: "Supervivencia todo incluido, para durar más que el finde.",
|
tagline: "Supervivencia todo incluido, para durar más que el finde.",
|
||||||
@@ -547,7 +547,7 @@ export const ui: Record<Lang, UI> = {
|
|||||||
eu: {
|
eu: {
|
||||||
htmlLang: "eu",
|
htmlLang: "eu",
|
||||||
copied: "Kopiatuta!",
|
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: {
|
hero: {
|
||||||
eyebrow: "Mod-dun LANa · NeoForge",
|
eyebrow: "Mod-dun LANa · NeoForge",
|
||||||
tagline: "Mod ugariko biziraupena, irauteko egina.",
|
tagline: "Mod ugariko biziraupena, irauteko egina.",
|
||||||
|
|||||||
@@ -75,9 +75,6 @@ const dustBits = Array.from({ length: 16 }, (_, i) => {
|
|||||||
<nav class="nav-links">
|
<nav class="nav-links">
|
||||||
<a href="#join">{t.nav.join}</a>
|
<a href="#join">{t.nav.join}</a>
|
||||||
<a href="#status">{t.nav.status}</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>
|
</nav>
|
||||||
<span class="nav-spacer"></span>
|
<span class="nav-spacer"></span>
|
||||||
<div class="lang-switch" aria-label="Language">
|
<div class="lang-switch" aria-label="Language">
|
||||||
@@ -238,6 +235,7 @@ const dustBits = Array.from({ length: 16 }, (_, i) => {
|
|||||||
<h2 class="section-title">{t.features.title}</h2>
|
<h2 class="section-title">{t.features.title}</h2>
|
||||||
<p class="lead">{t.features.lead}</p>
|
<p class="lead">{t.features.lead}</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="feat-split">
|
||||||
<div class="feat-grid">
|
<div class="feat-grid">
|
||||||
{site.features.map((f, i) => (
|
{site.features.map((f, i) => (
|
||||||
<div class="feat reveal" style={`transition-delay:${(i % 2) * 80}ms`}>
|
<div class="feat reveal" style={`transition-delay:${(i % 2) * 80}ms`}>
|
||||||
@@ -249,6 +247,10 @@ const dustBits = Array.from({ length: 16 }, (_, i) => {
|
|||||||
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -474,7 +474,7 @@ section { position: relative; z-index: 1; }
|
|||||||
============================================================ */
|
============================================================ */
|
||||||
.roster {
|
.roster {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
.roster-tile {
|
.roster-tile {
|
||||||
@@ -487,7 +487,7 @@ section { position: relative; z-index: 1; }
|
|||||||
}
|
}
|
||||||
.roster-tile img {
|
.roster-tile img {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 72px;
|
height: 230px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
}
|
}
|
||||||
@@ -505,11 +505,31 @@ section { position: relative; z-index: 1; }
|
|||||||
/* ============================================================
|
/* ============================================================
|
||||||
FEATURES
|
FEATURES
|
||||||
============================================================ */
|
============================================================ */
|
||||||
|
.feat-split {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.2fr 1fr;
|
||||||
|
gap: 28px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
.feat-grid {
|
.feat-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: 1fr;
|
||||||
gap: 18px;
|
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 {
|
.feat {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 18px;
|
gap: 18px;
|
||||||
|
|||||||
Reference in New Issue
Block a user