Revert and fix location page styling (woops)
Forgot that one! 🫢
This commit is contained in:
@@ -53,20 +53,7 @@
|
||||
|
||||
// More button
|
||||
:global(.more) {
|
||||
color: $color-secondary !important;
|
||||
}
|
||||
|
||||
// Message
|
||||
:global(.message) {
|
||||
padding: clamp(96px, 24vw, 360px) 0 clamp(96px, 16vw, 280px);
|
||||
text-align: center;
|
||||
color: $color-text;
|
||||
font-size: rem(24px);
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(28px);
|
||||
}
|
||||
color: $color-secondary;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@@ -1,234 +1,236 @@
|
||||
// Location Page
|
||||
:global(.location-page) {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
// // Intro
|
||||
// &__intro {
|
||||
// position: relative;
|
||||
// background: $color-primary;
|
||||
// Location Page
|
||||
.location-page {
|
||||
// Intro
|
||||
&__intro {
|
||||
position: relative;
|
||||
background: $color-primary;
|
||||
|
||||
// @include bp (sm) {
|
||||
// padding-top: clamp(40px, 14vw, 320px);
|
||||
// }
|
||||
// @include bp (lg) {
|
||||
// padding-top: clamp(40px, 18vw, 320px);
|
||||
// }
|
||||
@include bp (sm) {
|
||||
padding-top: clamp(40px, 14vw, 320px);
|
||||
}
|
||||
@include bp (lg) {
|
||||
padding-top: clamp(40px, 18vw, 320px);
|
||||
}
|
||||
|
||||
// // Houses Of Title
|
||||
// .title {
|
||||
// position: relative;
|
||||
// z-index: 2;
|
||||
// grid-column: 1 / span var(--columns);
|
||||
// margin: 0 auto;
|
||||
// padding: 0 32px;
|
||||
// font-family: $font-serif;
|
||||
// line-height: 1;
|
||||
// text-transform: uppercase;
|
||||
// color: $color-lightpurple;
|
||||
// font-size: clamp(48px, 12vw, 160px);
|
||||
// text-align: center;
|
||||
// margin: min(360px, 60vw) auto;
|
||||
// Houses Of Title
|
||||
.title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
grid-column: 1 / span var(--columns);
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
font-family: $font-serif;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
color: $color-lightpurple;
|
||||
font-size: clamp(48px, 12vw, 160px);
|
||||
text-align: center;
|
||||
margin: min(360px, 60vw) auto;
|
||||
|
||||
// @include bp (sm) {
|
||||
// display: flex;
|
||||
// flex-flow: row wrap;
|
||||
// align-items: baseline;
|
||||
// justify-content: center;
|
||||
// max-width: clamp(300px, 80vw, 1120px);
|
||||
// margin: 0 auto;
|
||||
// padding: 0;
|
||||
// }
|
||||
@include bp (sm) {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
max-width: clamp(300px, 80vw, 1120px);
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// strong {
|
||||
// display: block;
|
||||
// color: $color-secondary;
|
||||
// font-weight: 300;
|
||||
// text-transform: none;
|
||||
// }
|
||||
strong {
|
||||
display: block;
|
||||
color: $color-secondary;
|
||||
font-weight: 300;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// .housesof {
|
||||
// grid-column: span var(--columns);
|
||||
.housesof {
|
||||
grid-column: span var(--columns);
|
||||
|
||||
// @include bp (sm) {
|
||||
// display: flex;
|
||||
// align-items: baseline;
|
||||
// // margin-right: auto;
|
||||
// // margin-left: -15vw;
|
||||
// }
|
||||
@include bp (sm) {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
// margin-right: auto;
|
||||
// margin-left: -15vw;
|
||||
}
|
||||
|
||||
// span {
|
||||
// display: block;
|
||||
// font-size: 0.35em;
|
||||
// margin-top: 8px;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 0.35em;
|
||||
margin-top: 8px;
|
||||
|
||||
// @include bp (sm) {
|
||||
// display: inline;
|
||||
// margin: 0 24px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .city {
|
||||
// text-align: center;
|
||||
@include bp (sm) {
|
||||
display: inline;
|
||||
margin: 0 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.city {
|
||||
text-align: center;
|
||||
|
||||
// @include bp (sm) {
|
||||
// // margin-left: 15vw;
|
||||
// // width: 80%;
|
||||
// // padding-left: min(400px, 16vw);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@include bp (sm) {
|
||||
// margin-left: 15vw;
|
||||
// width: 80%;
|
||||
// padding-left: min(400px, 16vw);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// // Description
|
||||
// &__description {
|
||||
// grid-column: span var(--columns);
|
||||
// position: relative;
|
||||
// z-index: 2;
|
||||
// margin-bottom: -8px;
|
||||
// background-color: $color-tertiary;
|
||||
// color: $color-text;
|
||||
// border-radius: 8px;
|
||||
// Description
|
||||
&__description {
|
||||
grid-column: span var(--columns);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: -8px;
|
||||
background-color: $color-tertiary;
|
||||
color: $color-text;
|
||||
border-radius: 8px;
|
||||
|
||||
// @include bp (sm) {
|
||||
// --columns: 19;
|
||||
// grid-column: 4 / span 21;
|
||||
// margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px));
|
||||
// border-radius: 8px 0 0 8px;
|
||||
// }
|
||||
// @include bp (md) {
|
||||
// grid-column: 6 / span 19;
|
||||
// }
|
||||
@include bp (sm) {
|
||||
--columns: 19;
|
||||
grid-column: 4 / span 21;
|
||||
margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px));
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
@include bp (md) {
|
||||
grid-column: 6 / span 19;
|
||||
}
|
||||
|
||||
// .wrap {
|
||||
// grid-column: 2 / span 6;
|
||||
// max-width: 800px;
|
||||
// padding: 50px 0;
|
||||
.wrap {
|
||||
grid-column: 2 / span 6;
|
||||
max-width: 800px;
|
||||
padding: 50px 0;
|
||||
|
||||
// @include bp (sm) {
|
||||
// grid-column: 3 / span 13;
|
||||
// padding: 72px 0;
|
||||
// }
|
||||
// @include bp (md) {
|
||||
// padding: 128px 0;
|
||||
// }
|
||||
// }
|
||||
@include bp (sm) {
|
||||
grid-column: 3 / span 13;
|
||||
padding: 72px 0;
|
||||
}
|
||||
@include bp (md) {
|
||||
padding: 128px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// .info {
|
||||
// $text-color: rgba($color-text, 0.5);
|
||||
// margin: 32px 0 40px;
|
||||
// color: $text-color;
|
||||
// line-height: 0.8;
|
||||
.info {
|
||||
$text-color: rgba($color-text, 0.5);
|
||||
margin: 32px 0 40px;
|
||||
color: $text-color;
|
||||
line-height: 0.8;
|
||||
|
||||
// @include bp (sm) {
|
||||
// margin: 40px 0 64px;
|
||||
// line-height: 1.3;
|
||||
// }
|
||||
@include bp (sm) {
|
||||
margin: 40px 0 64px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
// a {
|
||||
// color: $text-color;
|
||||
a {
|
||||
color: $text-color;
|
||||
|
||||
// &:hover {
|
||||
// color: $color-secondary;
|
||||
// }
|
||||
// }
|
||||
&:hover {
|
||||
color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// & > * {
|
||||
// display: inline-block;
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
// }
|
||||
// .ctas {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
& > * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
:global(.ctas) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
// .button {
|
||||
// margin-right: 16px;
|
||||
// margin-bottom: 16px;
|
||||
:global(.button) {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
// @include bp (sm) {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@include bp (sm) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// // Illustration
|
||||
// &__illustration {
|
||||
// pointer-events: none;
|
||||
// position: absolute;
|
||||
// z-index: 1;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// width: clamp(320px, 100vw, 2560px);
|
||||
// height: 100%;
|
||||
// margin: 0 auto;
|
||||
// overflow: hidden;
|
||||
// transform-origin: top center;
|
||||
// Illustration
|
||||
&__illustration {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: clamp(320px, 100vw, 2560px);
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
transform-origin: top center;
|
||||
|
||||
// /* Bottom fading gradient for illustration */
|
||||
// @include bp (sm) {
|
||||
// $mask: linear-gradient(180deg,rgba(0,0,0) 0%,rgb(0,0,0) 70%,rgba(0,0,0,0) 100%);
|
||||
// -webkit-mask-image: $mask;
|
||||
// mask-image: $mask;
|
||||
// }
|
||||
/* Bottom fading gradient for illustration */
|
||||
@include bp (sm) {
|
||||
$mask: linear-gradient(180deg,rgba(0,0,0) 0%,rgb(0,0,0) 70%,rgba(0,0,0,0) 100%);
|
||||
-webkit-mask-image: $mask;
|
||||
mask-image: $mask;
|
||||
}
|
||||
|
||||
// img {
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// height: auto;
|
||||
// object-fit: contain;
|
||||
// pointer-events: none;
|
||||
// user-select: none;
|
||||
// transform: translate3d(0, var(--parallax-y), 0);
|
||||
// transition: transform 0.7s var(--ease-quart);
|
||||
// will-change: transform, opacity;
|
||||
// }
|
||||
// }
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
transform: translate3d(0, var(--parallax-y), 0);
|
||||
transition: transform 0.7s var(--ease-quart);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
}
|
||||
|
||||
// // Houses
|
||||
// &__houses {
|
||||
// background-color: #fff;
|
||||
// padding-top: 80px;
|
||||
// Houses
|
||||
&__houses {
|
||||
background-color: #fff;
|
||||
padding-top: 80px;
|
||||
|
||||
// @include bp (sm) {
|
||||
// padding-top: 240px;
|
||||
// }
|
||||
@include bp (sm) {
|
||||
padding-top: 240px;
|
||||
}
|
||||
|
||||
// // House
|
||||
// :global(.house:not(:last-child)) {
|
||||
// margin-bottom: 72px;
|
||||
// House
|
||||
:global(.house:not(:last-child)) {
|
||||
margin-bottom: 72px;
|
||||
|
||||
// @include bp (sm) {
|
||||
// margin-bottom: 88px;
|
||||
// }
|
||||
// @include bp (md) {
|
||||
// margin-bottom: 120px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@include bp (sm) {
|
||||
margin-bottom: 88px;
|
||||
}
|
||||
@include bp (md) {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// // Next photos section
|
||||
// &__next {
|
||||
// margin-top: 135px;
|
||||
// padding: 72px 0 56px;
|
||||
// background-color: $color-tertiary;
|
||||
// text-align: center;
|
||||
// Next photos section
|
||||
&__next {
|
||||
margin-top: 135px;
|
||||
padding: 72px 0 56px;
|
||||
background-color: $color-tertiary;
|
||||
text-align: center;
|
||||
|
||||
// @include bp (sm) {
|
||||
// margin-top: calc(-1 * clamp(64px, 8vw, 120px));
|
||||
// padding-top: 240px;
|
||||
// padding-bottom: 104px;
|
||||
// }
|
||||
@include bp (sm) {
|
||||
margin-top: calc(-1 * clamp(64px, 8vw, 120px));
|
||||
padding-top: 240px;
|
||||
padding-bottom: 104px;
|
||||
}
|
||||
|
||||
// // Newsletter block
|
||||
// :global(.newsletter) {
|
||||
// max-width: 600px;
|
||||
// margin: 56px auto 0;
|
||||
// Newsletter block
|
||||
:global(.newsletter) {
|
||||
max-width: 600px;
|
||||
margin: 56px auto 0;
|
||||
|
||||
// @include bp (sm) {
|
||||
// margin-top: 72px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@include bp (sm) {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user