flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: rework sizes and spaces on Location page

Browse Source
This commit is contained in:
Félix Péault
2024-07-25 15:44:22 +02:00
parent 317f56e454
commit 048c126986
3 changed files with 16 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/website/src/components/molecules/House/House.scss
View File

@@ -15,7 +15,7 @@
} }
@include bp (sm) { @include bp (sm) {
grid-column: 6 / span 14; grid-column: 6 / span 14;
margin-bottom: 56px; margin-bottom: 48px;
padding: 0; padding: 0;
max-width: 800px; max-width: 800px;
} }
@@ -28,7 +28,7 @@
} }
.info { .info {
display: block; display: block;
margin-top: 12px; margin-top: 8px;
color: $color-lightgray; color: $color-lightgray;
line-height: 1.5; line-height: 1.5;
opacity: 0; opacity: 0;
@@ -36,10 +36,10 @@
transition-delay: var(--delay); transition-delay: var(--delay);
@include bp (sm) { @include bp (sm) {
margin-top: 16px; margin-top: 12px;
} }
@include bp (md) { @include bp (md) {
margin-top: 24px; margin-top: 16px;
} }
& > * { & > * {

4
apps/website/src/style/_typography.scss
View File

@@ -20,12 +20,12 @@
// House Name // House Name
.title-image { .title-image {
font-family: $font-serif; font-family: $font-serif;
font-size: rem(40px); font-size: clamp(#{rem(28px)}, 9vw, #{rem(36px)});
line-height: 1; line-height: 1;
color: $color-secondary; color: $color-secondary;
@include bp (sm) { @include bp (sm) {
font-size: clamp(#{rem(40px)}, 7vw, #{rem(88px)}); font-size: clamp(#{rem(40px)}, 4.5vw, #{rem(56px)});
} }
} }

26
apps/website/src/style/pages/_location.scss
View File

@@ -7,13 +7,6 @@
position: relative; position: relative;
background: $color-primary; background: $color-primary;
@include bp (sm) {
padding-top: clamp(40px, 14vw, 320px);
}
@include bp (lg) {
padding-top: clamp(40px, 18vw, 272px);
}
// Houses Of Title // Houses Of Title
.title { .title {
position: relative; position: relative;
@@ -37,6 +30,15 @@
max-width: clamp(300px, 80vw, 1120px); max-width: clamp(300px, 80vw, 1120px);
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
@include bp (sm) {
--margin-y: clamp(40px, 14vw, 256px);
margin-top: var(--margin-y);
margin-bottom: var(--margin-y);
}
@include bp (lg) {
// --margin-y: clamp(40px, 10vw, 256px);
}
} }
strong { strong {
@@ -52,8 +54,6 @@
@include bp (sm) { @include bp (sm) {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
// margin-right: auto;
// margin-left: -15vw;
} }
span { span {
@@ -69,12 +69,6 @@
} }
.city { .city {
text-align: center; text-align: center;
@include bp (sm) {
// margin-left: 15vw;
// width: 80%;
// padding-left: min(400px, 16vw);
}
} }
} }
} }
@@ -92,7 +86,7 @@
@include bp (sm) { @include bp (sm) {
--columns: 19; --columns: 19;
grid-column: 4 / span 21; grid-column: 4 / span 21;
margin: clamp(40px, 16vw, 260px) 0 calc(-1 * clamp(60px, 6vw, 120px)); margin-bottom: calc(-1 * clamp(60px, 6vw, 120px));
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
} }
@include bp (md) { @include bp (md) {