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

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

@@ -20,12 +20,12 @@
// House Name
.title-image {
font-family: $font-serif;
font-size: rem(40px);
font-size: clamp(#{rem(28px)}, 9vw, #{rem(36px)});
line-height: 1;
color: $color-secondary;
@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;
background: $color-primary;
@include bp (sm) {
padding-top: clamp(40px, 14vw, 320px);
}
@include bp (lg) {
padding-top: clamp(40px, 18vw, 272px);
}
// Houses Of Title
.title {
position: relative;
@@ -37,6 +30,15 @@
max-width: clamp(300px, 80vw, 1120px);
margin: 0 auto;
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 {
@@ -52,8 +54,6 @@
@include bp (sm) {
display: flex;
align-items: baseline;
// margin-right: auto;
// margin-left: -15vw;
}
span {
@@ -69,12 +69,6 @@
}
.city {
text-align: center;
@include bp (sm) {
// margin-left: 15vw;
// width: 80%;
// padding-left: min(400px, 16vw);
}
}
}
}
@@ -92,7 +86,7 @@
@include bp (sm) {
--columns: 19;
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;
}
@include bp (md) {