tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(store-header): adjust padding, margin, and font styles for improved layout and readability

Browse Source
This commit is contained in:
ncoronel
2026-09-23 10:39:00 -03:00
parent 36fda9f7ea
commit e8602cca13
2 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
View File

@@ -17,7 +17,7 @@
z-index: 1;
min-width: 0;
padding-top: clamp(1.75rem, 4vw, 2.5rem);
padding-bottom: clamp(2rem, 4vw, 3rem);
padding-bottom: clamp(1rem, 2vw, 1.5rem);
}
.immersive-header__backdrop {
@@ -135,11 +135,13 @@
.immersive-header__title {
margin: -0.15rem 0 0;
font-size: 140px;
line-height: 1.05;
line-height: 0.7;
}
.immersive-header__description {
margin: 1.15rem 0 0;
font-size: clamp(0.75rem, 1.4vw, 0.95rem);
margin: 30px 0 0;
font-family: 'Gotham Book', sans-serif;
font-size: 18px;
font-weight: 300;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}
.immersive-header__timer {
@@ -202,7 +204,7 @@
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
padding: 1.25rem 0 clamp(2rem, 8vw, 3rem);
padding: 1.25rem 0 clamp(1rem, 4vw, 1.5rem);
}
// Keep one search form while placing it below the hero copy on mobile.
@@ -244,12 +246,12 @@
.immersive-header__title {
font-size: clamp(42px, 13vw, 64px);
line-height: 0.95;
line-height: 0.7;
}
.immersive-header__description {
margin-top: 2rem;
font-size: clamp(11px, 3vw, 14px);
margin-top: 30px;
font-size: 18px;
}
.immersive-header__search {

8
src/app/core/layout/store-layout/store-header/store-header.component.scss
View File

@@ -36,23 +36,23 @@ app-immersive-store-header {
position: relative;
z-index: 1;
width: 100%;
margin-top: clamp(2rem, 5vw, 4rem);
margin-top: clamp(5rem, 11vw, 9rem);
padding: 0.375rem 1rem;
background: transparent;
color: #666;
font-size: 15px;
font-weight: 700;
--horizontal-carousel-gap: clamp(1rem, 3vw, 2.5rem);
--horizontal-carousel-gap: 90px;
--horizontal-carousel-text-transform: uppercase;
}
@media (max-width: 767.98px) {
.immersive-categories {
margin-top: 2rem;
margin-top: 5rem;
padding: 1rem 0.25rem 0;
font-size: clamp(10px, 2.8vw, 12px);
--horizontal-carousel-visible-items: 3;
--horizontal-carousel-gap: 0.5rem;
--horizontal-carousel-gap: 90px;
--horizontal-carousel-item-width: calc((100cqw - 2 * var(--horizontal-carousel-gap)) / 3);
--horizontal-carousel-white-space: normal;
--horizontal-carousel-snap: x mandatory;