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: "",