diff --git a/frontend/assets/css/hero-header-compact.css b/frontend/assets/css/hero-header-compact.css index fc3b05f..a4febdd 100644 --- a/frontend/assets/css/hero-header-compact.css +++ b/frontend/assets/css/hero-header-compact.css @@ -1,29 +1,39 @@ @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(400px, 470px) minmax(48px, 1fr) minmax(640px, 820px); + column-gap: clamp(28px, 3vw, 56px); + align-items: center; } .hero:not(.historical-hero) .logo-frame { - width: min(370px, 100%); - min-height: 300px; - padding: 26px 30px; + grid-column: 1; + justify-self: start; + width: min(470px, 100%); + min-height: 360px; + padding: 30px 34px; } .hero:not(.historical-hero) .logo-frame__image { - max-height: 292px; + max-height: 340px; } .hero:not(.historical-hero) .hero__copy { - max-width: 980px; + grid-column: 3; + justify-self: end; + width: 100%; + max-width: 820px; align-content: center; + justify-items: start; + text-align: left; transform: none; } @@ -43,16 +53,40 @@ } @media (min-width: 1121px) and (max-width: 1380px) { + .hero:not(.historical-hero) .hero__content { + padding-inline: clamp(44px, 4vw, 64px); + } + .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, 390px) minmax(28px, 1fr) minmax(560px, 720px); + column-gap: clamp(20px, 2.5vw, 40px); + } + + .hero:not(.historical-hero) .logo-frame { + width: min(390px, 100%); + min-height: 316px; + } + + .hero:not(.historical-hero) .logo-frame__image { + max-height: 298px; } .hero:not(.historical-hero) .hero__copy { + grid-column: 3; + justify-self: end; + width: 100%; + max-width: 720px; 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 { + 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 a3b08ba..bb12464 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,11 +50,110 @@ 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; } +/* 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(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(470px, 100%); + min-height: 360px; + padding: 30px 34px; + } + + .historical-hero__layout--registry .logo-frame__image { + max-height: 340px; + } + + .historical-hero__layout--registry .historical-hero__copy { + grid-column: 3; + justify-self: end; + width: 100%; + max-width: 820px; + 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, 390px) minmax(28px, 1fr) minmax(560px, 720px); + column-gap: clamp(20px, 2.5vw, 40px); + } + + .historical-hero__layout--registry .historical-logo-frame { + grid-column: 1; + width: min(390px, 100%); + min-height: 316px; + } + + .historical-hero__layout--registry .logo-frame__image { + max-height: 298px; + } + + .historical-hero__layout--registry .historical-hero__copy { + grid-column: 3; + width: 100%; + max-width: 720px; + 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; @@ -1051,6 +1155,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; @@ -1240,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: "", 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
-