diff --git a/apps/website/src/components/molecules/House/House.scss b/apps/website/src/components/molecules/House/House.scss index 5a775aa..f369621 100644 --- a/apps/website/src/components/molecules/House/House.scss +++ b/apps/website/src/components/molecules/House/House.scss @@ -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; } & > * { diff --git a/apps/website/src/style/_typography.scss b/apps/website/src/style/_typography.scss index 4dde40b..95fbe61 100644 --- a/apps/website/src/style/_typography.scss +++ b/apps/website/src/style/_typography.scss @@ -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)}); } } diff --git a/apps/website/src/style/pages/_location.scss b/apps/website/src/style/pages/_location.scss index 9365037..889b532 100644 --- a/apps/website/src/style/pages/_location.scss +++ b/apps/website/src/style/pages/_location.scss @@ -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) {