From 2daf48b706cb943521d789172a70874025698aa9 Mon Sep 17 00:00:00 2001 From: devRaGonSa Date: Tue, 26 May 2026 13:38:54 +0200 Subject: [PATCH 1/3] fix: align historical hero content --- frontend/assets/css/historico.css | 18 ++++++++++++++++++ frontend/historico.html | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/frontend/assets/css/historico.css b/frontend/assets/css/historico.css index a3b08ba..edd5b0d 100644 --- a/frontend/assets/css/historico.css +++ b/frontend/assets/css/historico.css @@ -32,6 +32,11 @@ gap: 32px; } +.historical-hero__layout--registry { + grid-template-columns: minmax(220px, 330px) minmax(0, 1fr); + column-gap: clamp(72px, 7vw, 140px); +} + .historical-hero__layout > * { min-width: 0; } @@ -45,6 +50,14 @@ max-width: 12ch; } +.historical-hero__layout--registry .historical-hero__copy { + max-width: min(100%, 760px); +} + +.historical-hero__layout--registry .historical-hero__title { + max-width: 18ch; +} + .historical-hero__text { max-width: 60ch; overflow-wrap: anywhere; @@ -1051,6 +1064,11 @@ max-width: 100%; } + .historical-hero__layout--registry .historical-hero__copy, + .historical-hero__layout--registry .historical-hero__title { + max-width: 100%; + } + .historical-map-hero { width: 100%; min-height: 190px; diff --git a/frontend/historico.html b/frontend/historico.html index 901e440..74127d2 100644 --- a/frontend/historico.html +++ b/frontend/historico.html @@ -22,7 +22,7 @@

Historico propio

-
+
Date: Tue, 26 May 2026 13:50:28 +0200 Subject: [PATCH 2/3] fix: right align index and historical hero copy --- frontend/assets/css/hero-header-compact.css | 52 ++++++++++--- frontend/assets/css/historico.css | 86 +++++++++++++++++++++ 2 files changed, 127 insertions(+), 11 deletions(-) diff --git a/frontend/assets/css/hero-header-compact.css b/frontend/assets/css/hero-header-compact.css index fc3b05f..ff96bc4 100644 --- a/frontend/assets/css/hero-header-compact.css +++ b/frontend/assets/css/hero-header-compact.css @@ -1,29 +1,37 @@ @media (min-width: 1121px) { .hero:not(.historical-hero) .hero__content { padding-block: 54px 60px; - padding-inline: clamp(48px, 5vw, 88px); + padding-inline: clamp(64px, 5.5vw, 104px); } .hero:not(.historical-hero) .hero__brand { - grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); - column-gap: clamp(150px, 14vw, 260px); + 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); + align-items: center; } .hero:not(.historical-hero) .logo-frame { - width: min(370px, 100%); - min-height: 300px; - padding: 26px 30px; + justify-self: start; + width: min(440px, 100%); + min-height: 340px; + padding: 28px 32px; } .hero:not(.historical-hero) .logo-frame__image { - max-height: 292px; + max-height: 322px; } .hero:not(.historical-hero) .hero__copy { - max-width: 980px; + justify-self: end; + width: min(860px, 100%); + max-width: 860px; align-content: center; + justify-items: start; + text-align: left; transform: none; } @@ -43,16 +51,38 @@ } @media (min-width: 1121px) and (max-width: 1380px) { + .hero:not(.historical-hero) .hero__content { + padding-inline: clamp(48px, 4.5vw, 72px); + } + .hero:not(.historical-hero) .hero__brand { - grid-template-columns: minmax(260px, 310px) minmax(0, 1fr); - column-gap: clamp(112px, 9vw, 150px); + grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); + column-gap: clamp(54px, 5vw, 86px); + } + + .hero:not(.historical-hero) .logo-frame { + width: min(380px, 100%); + min-height: 306px; + } + + .hero:not(.historical-hero) .logo-frame__image { + max-height: 288px; } .hero:not(.historical-hero) .hero__copy { + width: min(760px, 100%); + max-width: 760px; + justify-self: end; transform: none; } .hero:not(.historical-hero) .hero__title { - font-size: clamp(3.6rem, 5.5vw, 5.1rem); + font-size: clamp(3.7rem, 5.35vw, 5.15rem); + } +} + +@media (max-width: 1120px) { + .hero:not(.historical-hero) .hero__copy { + transform: none; } } diff --git a/frontend/assets/css/historico.css b/frontend/assets/css/historico.css index edd5b0d..a7f4ab1 100644 --- a/frontend/assets/css/historico.css +++ b/frontend/assets/css/historico.css @@ -63,6 +63,92 @@ overflow-wrap: anywhere; } +@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); + align-items: center; + } + + .historical-hero__layout--registry .historical-logo-frame { + justify-self: start; + width: min(440px, 100%); + min-height: 340px; + padding: 28px 32px; + } + + .historical-hero__layout--registry .logo-frame__image { + max-height: 322px; + } + + .historical-hero__layout--registry .historical-hero__copy { + justify-self: end; + width: min(860px, 100%); + max-width: 860px; + align-content: center; + justify-items: start; + text-align: left; + } + + .historical-hero__layout--registry .historical-hero__title { + max-width: none; + font-size: clamp(4.2rem, 5.2vw, 6.35rem); + line-height: 1.02; + } + + .historical-hero__layout--registry .historical-hero__text { + max-width: 68ch; + } + + .historical-hero__layout--registry .historical-selector { + max-width: 760px; + } +} + +@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); + } + + .historical-hero__layout--registry .historical-logo-frame { + width: min(380px, 100%); + min-height: 306px; + } + + .historical-hero__layout--registry .logo-frame__image { + max-height: 288px; + } + + .historical-hero__layout--registry .historical-hero__copy { + width: min(760px, 100%); + max-width: 760px; + justify-self: end; + } + + .historical-hero__layout--registry .historical-hero__title { + font-size: clamp(3.7rem, 5.35vw, 5.15rem); + } +} + +@media (max-width: 1120px) { + .historical-hero__layout--registry { + max-width: none; + } + + .historical-hero__layout--registry .historical-hero__copy, + .historical-hero__layout--registry .historical-hero__title, + .historical-hero__layout--registry .historical-hero__text { + width: auto; + max-width: none; + justify-self: stretch; + } +} + .historical-map-hero { position: relative; overflow: hidden; From 5eefd38f1ea3f06b0dd38a5f5e05b32a53a85e4b Mon Sep 17 00:00:00 2001 From: devRaGonSa Date: Thu, 28 May 2026 10:03:06 +0200 Subject: [PATCH 3/3] fix: align hero headers and normalize clan description --- frontend/assets/css/hero-header-compact.css | 38 ++++++++++++--------- frontend/assets/css/historico.css | 37 +++++++++++--------- frontend/assets/js/main.js | 4 +-- 3 files changed, 44 insertions(+), 35 deletions(-) diff --git a/frontend/assets/css/hero-header-compact.css b/frontend/assets/css/hero-header-compact.css index ff96bc4..a4febdd 100644 --- a/frontend/assets/css/hero-header-compact.css +++ b/frontend/assets/css/hero-header-compact.css @@ -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; } -} +} \ No newline at end of file diff --git a/frontend/assets/css/historico.css b/frontend/assets/css/historico.css index a7f4ab1..bb12464 100644 --- a/frontend/assets/css/historico.css +++ b/frontend/assets/css/historico.css @@ -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; } @@ -1344,4 +1349,4 @@ The internal detail page can still show its own scoreboard button. */ #recent-matches-list .historical-match-card__link--scoreboard { display: none; -} +} \ No newline at end of file diff --git a/frontend/assets/js/main.js b/frontend/assets/js/main.js index 3400fdb..48598c2 100644 --- a/frontend/assets/js/main.js +++ b/frontend/assets/js/main.js @@ -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: "",