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