rgonsal/comunidadhll
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align hero headers and normalize clan description

Browse Source
This commit is contained in:
devRaGonSa
2026-05-28 10:03:06 +02:00
parent 78c4ca65e7
commit 5eefd38f1e
3 changed files with 44 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/assets/css/hero-header-compact.css
View File

@@ -9,26 +9,28 @@
max-width: 1420px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(380px, 440px) minmax(0, 1fr);
column-gap: clamp(80px, 7vw, 132px);
grid-template-columns: minmax(400px, 470px) minmax(48px, 1fr) minmax(640px, 820px);
column-gap: clamp(28px, 3vw, 56px);
align-items: center;
}
.hero:not(.historical-hero) .logo-frame {
grid-column: 1;
justify-self: start;
width: min(440px, 100%);
min-height: 340px;
padding: 28px 32px;
width: min(470px, 100%);
min-height: 360px;
padding: 30px 34px;
}
.hero:not(.historical-hero) .logo-frame__image {
max-height: 322px;
max-height: 340px;
}
.hero:not(.historical-hero) .hero__copy {
grid-column: 3;
justify-self: end;
width: min(860px, 100%);
max-width: 860px;
width: 100%;
max-width: 820px;
align-content: center;
justify-items: start;
text-align: left;
@@ -52,27 +54,28 @@
@media (min-width: 1121px) and (max-width: 1380px) {
.hero:not(.historical-hero) .hero__content {
padding-inline: clamp(48px, 4.5vw, 72px);
padding-inline: clamp(44px, 4vw, 64px);
}
.hero:not(.historical-hero) .hero__brand {
grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
column-gap: clamp(54px, 5vw, 86px);
grid-template-columns: minmax(320px, 390px) minmax(28px, 1fr) minmax(560px, 720px);
column-gap: clamp(20px, 2.5vw, 40px);
}
.hero:not(.historical-hero) .logo-frame {
width: min(380px, 100%);
min-height: 306px;
width: min(390px, 100%);
min-height: 316px;
}
.hero:not(.historical-hero) .logo-frame__image {
max-height: 288px;
max-height: 298px;
}
.hero:not(.historical-hero) .hero__copy {
width: min(760px, 100%);
max-width: 760px;
grid-column: 3;
justify-self: end;
width: 100%;
max-width: 720px;
transform: none;
}
@@ -83,6 +86,7 @@
@media (max-width: 1120px) {
.hero:not(.historical-hero) .hero__copy {
grid-column: auto;
transform: none;
}
}

35
frontend/assets/css/historico.css
View File

@@ -63,32 +63,35 @@
overflow-wrap: anywhere;
}
/* Registry/historico hero: logo left, real flexible spacer, copy anchored right. */
@media (min-width: 1121px) {
.historical-hero__layout--registry {
width: 100%;
max-width: 1420px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(380px, 440px) minmax(0, 1fr);
column-gap: clamp(80px, 7vw, 132px);
grid-template-columns: minmax(400px, 470px) minmax(48px, 1fr) minmax(640px, 820px);
column-gap: clamp(28px, 3vw, 56px);
align-items: center;
}
.historical-hero__layout--registry .historical-logo-frame {
grid-column: 1;
justify-self: start;
width: min(440px, 100%);
min-height: 340px;
padding: 28px 32px;
width: min(470px, 100%);
min-height: 360px;
padding: 30px 34px;
}
.historical-hero__layout--registry .logo-frame__image {
max-height: 322px;
max-height: 340px;
}
.historical-hero__layout--registry .historical-hero__copy {
grid-column: 3;
justify-self: end;
width: min(860px, 100%);
max-width: 860px;
width: 100%;
max-width: 820px;
align-content: center;
justify-items: start;
text-align: left;
@@ -111,22 +114,24 @@
@media (min-width: 1121px) and (max-width: 1380px) {
.historical-hero__layout--registry {
grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
column-gap: clamp(54px, 5vw, 86px);
grid-template-columns: minmax(320px, 390px) minmax(28px, 1fr) minmax(560px, 720px);
column-gap: clamp(20px, 2.5vw, 40px);
}
.historical-hero__layout--registry .historical-logo-frame {
width: min(380px, 100%);
min-height: 306px;
grid-column: 1;
width: min(390px, 100%);
min-height: 316px;
}
.historical-hero__layout--registry .logo-frame__image {
max-height: 288px;
max-height: 298px;
}
.historical-hero__layout--registry .historical-hero__copy {
width: min(760px, 100%);
max-width: 760px;
grid-column: 3;
width: 100%;
max-width: 720px;
justify-self: end;
}

4
frontend/assets/js/main.js
View File

@@ -28,7 +28,7 @@ const COMMUNITY_CLANS = Object.freeze([
name: "La 129",
badge: "Clan CH",
description:
"Clan activo de la comunidad, con acceso directo a su discord.",
"Clan activo de la comunidad.",
logoSrc: "./assets/img/clans/la129.png",
logoAlt: "Logo de La 129",
logoClassName: "clan-card__logo--wide",
@@ -62,7 +62,7 @@ const COMMUNITY_CLANS = Object.freeze([
name: "BxB",
badge: "Clan CH",
description:
"Clan activo de la comunidad, son raretes.",
"Clan activo de la comunidad.",
logoSrc: "./assets/img/clans/bxb.png",
logoAlt: "Logo de BxB",
logoClassName: "",