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

fix: right align index and historical hero copy

Browse Source
This commit is contained in:
devRaGonSa
2026-05-26 13:50:28 +02:00
parent 2daf48b706
commit 78c4ca65e7
2 changed files with 127 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}
}

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

@@ -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;