🔥 Huge style refactoring by using SvelteKit built-in style tag
It's been tricky but got there finally! Hello `:global` - Avoid using one global CSS file containing everything - Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used
This commit is contained in:
@@ -1,7 +1,5 @@
|
||||
// Credits Page
|
||||
.credits {
|
||||
// padding: 160px 0;
|
||||
|
||||
// Intro Section
|
||||
&__heading {
|
||||
margin: 56px 0 72px;
|
||||
@@ -115,7 +113,7 @@
|
||||
display: inline-block;
|
||||
line-height: 1.7;
|
||||
|
||||
picture {
|
||||
:global(picture) {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
@@ -124,7 +122,7 @@
|
||||
vertical-align: middle;
|
||||
border-radius: 100%;
|
||||
|
||||
img {
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -143,13 +141,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.credits) {
|
||||
// Globe
|
||||
.globe {
|
||||
* {
|
||||
:global(.globe) {
|
||||
:global(*) {
|
||||
pointer-events: none;
|
||||
}
|
||||
canvas {
|
||||
:global(canvas) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,53 +1,3 @@
|
||||
// Explore Page
|
||||
.explore {
|
||||
// Intro Section
|
||||
&__intro {
|
||||
overflow: hidden;
|
||||
color: $color-tertiary;
|
||||
text-align: center;
|
||||
|
||||
// Title
|
||||
h1 {
|
||||
color: $color-secondary;
|
||||
line-height: 1;
|
||||
margin-top: 56px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 160px;
|
||||
}
|
||||
}
|
||||
// Text
|
||||
p {
|
||||
max-width: 260px;
|
||||
margin: 40px auto 0;
|
||||
font-weight: 200;
|
||||
|
||||
@include bp (sm) {
|
||||
margin: 72px auto 128px;
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.globe {
|
||||
margin-top: 72px;
|
||||
}
|
||||
|
||||
// Locations
|
||||
&__locations {
|
||||
.browse {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Modules
|
||||
.grid-modules {
|
||||
grid-column: span var(--columns);
|
||||
margin: 96px 20px 0;
|
||||
padding-bottom: 40px;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / span 22;
|
||||
margin: 200px 0 72px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .explore {
|
||||
// }
|
||||
@@ -1,43 +1,5 @@
|
||||
// Homepage
|
||||
.homepage {
|
||||
// Site title
|
||||
&__title {
|
||||
// Houses
|
||||
&--houses {
|
||||
display: inline-flex;
|
||||
margin: -28px 0 0;
|
||||
color: $color-secondary;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: calc(-1 * clamp(24px, 5vw, 104px));
|
||||
}
|
||||
|
||||
.text-split {
|
||||
margin-left: calc(-1 * clamp(24px, 5vw, 64px));
|
||||
}
|
||||
span {
|
||||
transition: none;
|
||||
letter-spacing: -0.06em;
|
||||
}
|
||||
}
|
||||
// World
|
||||
&--world {
|
||||
min-width: 100%;
|
||||
display: inline-flex;
|
||||
color: $color-primary-tertiary20;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: calc(-1 * clamp(120px, 10vw, 216px));
|
||||
}
|
||||
|
||||
span:first-child {
|
||||
margin-right: -0.075em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Intro Section
|
||||
&__intro {
|
||||
overflow: hidden;
|
||||
@@ -50,8 +12,28 @@
|
||||
padding-bottom: calc(280px + 10vw);
|
||||
}
|
||||
|
||||
// Title
|
||||
:global(.title-houses) {
|
||||
display: inline-flex;
|
||||
margin: -28px 0 0;
|
||||
color: $color-secondary;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: calc(-1 * clamp(24px, 5vw, 104px));
|
||||
}
|
||||
|
||||
:global(.text-split) {
|
||||
margin-left: calc(-1 * clamp(24px, 5vw, 64px));
|
||||
}
|
||||
:global(span) {
|
||||
transition: none;
|
||||
letter-spacing: -0.06em;
|
||||
}
|
||||
}
|
||||
|
||||
// Button
|
||||
.button {
|
||||
:global(.button) {
|
||||
$color-shadow: rgba($color-shadow-brown, 0.05);
|
||||
box-shadow:
|
||||
0 1px 1px $color-shadow,
|
||||
@@ -60,12 +42,12 @@
|
||||
0 16px 16px $color-shadow;
|
||||
margin-bottom: 40px;
|
||||
|
||||
svg {
|
||||
:global(svg) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $color-gray;
|
||||
}
|
||||
.text-split__line {
|
||||
:global(.text-split__line) {
|
||||
&:last-child {
|
||||
color: #fff;
|
||||
}
|
||||
@@ -117,18 +99,34 @@
|
||||
}
|
||||
|
||||
// List
|
||||
.list-cta {
|
||||
:global(.list-cta) {
|
||||
margin-top: 48px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// World title
|
||||
.title-world {
|
||||
color: rgba($color-tertiary, 0.3);
|
||||
margin-top: -60px;
|
||||
&__locations {
|
||||
:global(.title-world) {
|
||||
min-width: 100%;
|
||||
display: inline-flex;
|
||||
color: $color-primary-tertiary20;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: calc(-1 * clamp(120px, 10vw, 216px));
|
||||
}
|
||||
|
||||
:global(span:first-child) {
|
||||
margin-right: -0.075em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,298 +1,234 @@
|
||||
// Location Page
|
||||
.location-page {
|
||||
:global(.location-page) {
|
||||
background: #fff;
|
||||
|
||||
// Intro
|
||||
&__intro {
|
||||
position: relative;
|
||||
background: $color-primary;
|
||||
// // 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;
|
||||
// }
|
||||
// }
|
||||
// .ctas {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
|
||||
.button {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
// .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
|
||||
.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
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: auto 0;
|
||||
cursor: pointer;
|
||||
|
||||
&__progress {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: rem(88px);
|
||||
color: rgba($color-text, 0.2);
|
||||
font-family: $font-serif;
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.05em;
|
||||
transition: color 0.5s;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: clamp(80px, 16vw, #{rem(160px)});
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0 -10px;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: rgba($color-text, 0.4);
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: block;
|
||||
margin: 16px auto 0;
|
||||
text-align: center;
|
||||
font-family: $font-sans;
|
||||
text-transform: uppercase;
|
||||
color: $color-text;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 400;
|
||||
font-size: rem(14px);
|
||||
}
|
||||
&__more {
|
||||
color: $color-secondary !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Message
|
||||
&__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);
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include bp (sm) {
|
||||
// margin-top: 72px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
// Photos Page
|
||||
.photos {
|
||||
.photos-page {
|
||||
// Intro Section
|
||||
&__intro {
|
||||
margin-bottom: clamp(32px, 7.5vw, 96px);
|
||||
@@ -7,7 +7,7 @@
|
||||
text-align: center;
|
||||
|
||||
// Title
|
||||
h1 {
|
||||
:global(h1) {
|
||||
margin: -20px 0 48px;
|
||||
color: $color-secondary;
|
||||
line-height: 1;
|
||||
@@ -17,7 +17,7 @@
|
||||
}
|
||||
}
|
||||
// Text
|
||||
p {
|
||||
& > :global(p) {
|
||||
max-width: 456px;
|
||||
margin: 20px auto 56px;
|
||||
|
||||
@@ -35,219 +35,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Filter
|
||||
.filter {
|
||||
position: relative;
|
||||
max-width: 982px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
|
||||
@include bp (sm) {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
// Span
|
||||
&__label {
|
||||
display: block;
|
||||
color: rgba($color-tertiary, 0.7);
|
||||
|
||||
@include bp (sm) {
|
||||
position: absolute;
|
||||
left: 64px;
|
||||
top: 52%;
|
||||
transform: translateY(-50%);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 64px;
|
||||
margin-top: 20px;
|
||||
padding: 0 12px;
|
||||
background: $color-primary-darker;
|
||||
border-radius: 50vh;
|
||||
|
||||
@include bp (mob-lg) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
@include bp (sm) {
|
||||
height: 72px;
|
||||
margin-top: 0;
|
||||
padding: 28px 32px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
margin: 8px 2px;
|
||||
font-size: rem(14px);
|
||||
color: #fff;
|
||||
|
||||
@include bp (sm) {
|
||||
margin: 0 2px;
|
||||
font-size: rem(16px);
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
margin-right: 12px;
|
||||
color: #fff;
|
||||
border-radius: 100%;
|
||||
transition: color 0.3s;
|
||||
|
||||
@include bp (sm) {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px 8px 8px;
|
||||
font-weight: 900;
|
||||
border-radius: 100vh;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
@include bp (sm) {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
select {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 8px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
li:hover {
|
||||
.icon {
|
||||
color: $color-secondary-light;
|
||||
}
|
||||
.select {
|
||||
background-color: $color-primary-tertiary20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
|
||||
@include bp (sm) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 56px;
|
||||
transform: translateY(-50%);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: rgba(#fff, 0.6);
|
||||
font-size: rem(14px);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset link
|
||||
.reset {
|
||||
margin-right: 16px;
|
||||
padding: 0;
|
||||
color: rgba($color-tertiary, 0.6);
|
||||
font-weight: 900;
|
||||
font-size: rem(14px);
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
// Shuffle button
|
||||
.shuffle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
background-color: $color-tertiary;
|
||||
padding: 0 16px;
|
||||
border-radius: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** States
|
||||
*/
|
||||
// Fixed when scrolled pass intro
|
||||
&.is-over {
|
||||
--top: 24px;
|
||||
transform: translate3d(0, calc(-100% - var(--top)), 0);
|
||||
pointer-events: none;
|
||||
|
||||
.filter__bar {
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 10px 20px rgba(#000, 0.1);
|
||||
}
|
||||
|
||||
@include bp (sm) {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: var(--top);
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Visible when scrolling back up
|
||||
&.is-visible {
|
||||
transform: translate3d(0,0,0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// Apply transition
|
||||
&.is-transitioning {
|
||||
transition: transform 1.0s var(--ease-quart);
|
||||
}
|
||||
}
|
||||
|
||||
// Content Block
|
||||
&__content {
|
||||
--corners: 8px;
|
||||
position: relative;
|
||||
padding: 20px 0;
|
||||
padding: 20px;
|
||||
background-color: $color-tertiary;
|
||||
|
||||
@include bp (sm) {
|
||||
@@ -286,6 +78,16 @@
|
||||
transform: translate3d(var(--margin-sides), 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Modules
|
||||
:global(.grid-modules) {
|
||||
grid-column: span var(--columns);
|
||||
margin-bottom: 0;
|
||||
|
||||
@include bp (sd) {
|
||||
grid-column: 2 / span 22;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Photo Grid
|
||||
@@ -310,22 +112,16 @@
|
||||
}
|
||||
|
||||
// Photo
|
||||
.photo {
|
||||
:global(.photo) {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 96px, 0);
|
||||
transition: opacity 1.2s var(--ease-quart), transform 1.2s var(--ease-quart);
|
||||
|
||||
// Hidden state
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
a {
|
||||
:global(a) {
|
||||
display: block;
|
||||
}
|
||||
figcaption {
|
||||
:global(figcaption) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -397,9 +193,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Show postcard on hover
|
||||
&:hover {
|
||||
:global(.postcard) {
|
||||
opacity: 1;
|
||||
transform: translate3d(3%, 3%, 0) rotate(2deg);
|
||||
}
|
||||
:global(.postcard--small) {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
// Postcard
|
||||
.postcard {
|
||||
:global(.postcard) {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
@@ -408,27 +214,19 @@
|
||||
opacity: 0;
|
||||
transform: translate3d(6%, 12%, 0) rotate(-1deg);
|
||||
transition: opacity 0.5s var(--ease-quart), transform 0.9s var(--ease-quart);
|
||||
|
||||
&--small {
|
||||
border-radius: 6px 6px 0 0;
|
||||
transform: translate3d(6%, 12%, 0) rotate(-3deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Show postcard on hover
|
||||
&:hover {
|
||||
.postcard {
|
||||
opacity: 1;
|
||||
transform: translate3d(3%, 3%, 0) rotate(2deg);
|
||||
|
||||
&--small {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
:global(.postcard--small) {
|
||||
border-radius: 6px 6px 0 0;
|
||||
transform: translate3d(6%, 12%, 0) rotate(-3deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Visible photo state
|
||||
:global(.is-visible) {
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
// Message
|
||||
&__message {
|
||||
@@ -441,108 +239,297 @@
|
||||
grid-column: 3 / span 20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Controls
|
||||
*/
|
||||
.controls {
|
||||
grid-column: span var(--columns);
|
||||
display: grid;
|
||||
margin: 48px auto;
|
||||
align-items: center;
|
||||
/*
|
||||
** Filters
|
||||
*/
|
||||
.filters {
|
||||
position: relative;
|
||||
max-width: 982px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
|
||||
@include bp (sm) {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
// Bar
|
||||
&__bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 64px;
|
||||
margin-top: 20px;
|
||||
padding: 0 12px;
|
||||
background: $color-primary-darker;
|
||||
border-radius: 50vh;
|
||||
|
||||
@include bp (mob-lg) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
@include bp (sm) {
|
||||
justify-content: space-between;
|
||||
margin: clamp(56px, 4.5vw, 80px) 0;
|
||||
}
|
||||
@include bp (sd) {
|
||||
--columns: 22;
|
||||
grid-column: 2 / span var(--columns);
|
||||
height: 72px;
|
||||
margin-top: 0;
|
||||
padding: 28px 32px;
|
||||
}
|
||||
|
||||
// Updated Date
|
||||
&__date {
|
||||
grid-column: span var(--columns);
|
||||
grid-row: 2;
|
||||
font-size: rem(18px);
|
||||
color: rgba($color-gray, 0.6);
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
margin: 24px 0 48px;
|
||||
line-height: 1.35;
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
margin: 8px 2px;
|
||||
font-size: rem(14px);
|
||||
color: #fff;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: span 5;
|
||||
grid-row: 1;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
margin: 0 2px;
|
||||
font-size: rem(16px);
|
||||
}
|
||||
}
|
||||
:global(.icon) {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
margin-right: 12px;
|
||||
color: #fff;
|
||||
border-radius: 100%;
|
||||
transition: color 0.3s;
|
||||
|
||||
@include bp (sm) {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
time {
|
||||
:global(img) {
|
||||
display: block;
|
||||
|
||||
@include bp (sd) {
|
||||
display: inline;
|
||||
}
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// See More Photos
|
||||
.button {
|
||||
grid-column: span var(--columns);
|
||||
grid-row: 1;
|
||||
margin: 0 auto;
|
||||
:global(.select) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px 8px 8px;
|
||||
font-weight: 900;
|
||||
border-radius: 100vh;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 7 / span 12;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
@include bp (sd) {
|
||||
grid-column-start: 6;
|
||||
|
||||
:global(select) {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 8px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Photo Count
|
||||
&__count {
|
||||
grid-column: span var(--columns);
|
||||
grid-row: 3;
|
||||
text-align: center;
|
||||
color: rgba($color-text, 0.3);
|
||||
font-family: $font-serif;
|
||||
font-size: rem(64px);
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.05em;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 18 / span 7;
|
||||
grid-row: 1;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
// Hover
|
||||
li:hover {
|
||||
:global(.icon) {
|
||||
color: $color-secondary-light;
|
||||
}
|
||||
@include bp (sd) {
|
||||
grid-column-start: 16;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0 -6px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
:global(.select) {
|
||||
background-color: $color-primary-tertiary20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modules
|
||||
.grid-modules {
|
||||
grid-column: span var(--columns);
|
||||
margin-bottom: 0;
|
||||
// Span
|
||||
&__label {
|
||||
display: block;
|
||||
color: rgba($color-tertiary, 0.7);
|
||||
|
||||
@include bp (sm) {
|
||||
position: absolute;
|
||||
left: 64px;
|
||||
top: 52%;
|
||||
transform: translateY(-50%);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
|
||||
@include bp (sm) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 56px;
|
||||
transform: translateY(-50%);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Reset link
|
||||
.reset {
|
||||
margin-right: 16px;
|
||||
padding: 0;
|
||||
color: rgba($color-tertiary, 0.6);
|
||||
font-weight: 900;
|
||||
font-size: rem(14px);
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
// Shuffle button
|
||||
// .shuffle {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// height: 32px;
|
||||
// background-color: $color-tertiary;
|
||||
// padding: 0 16px;
|
||||
// border-radius: 50vh;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** States
|
||||
*/
|
||||
// Fixed when scrolled pass intro
|
||||
&.is-over {
|
||||
--top: 24px;
|
||||
transform: translate3d(0, calc(-100% - var(--top)), 0);
|
||||
pointer-events: none;
|
||||
|
||||
.filters__bar {
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 10px 20px rgba(#000, 0.1);
|
||||
}
|
||||
|
||||
@include bp (sm) {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: var(--top);
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Visible when scrolling back up
|
||||
&.is-visible {
|
||||
transform: translate3d(0,0,0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// Apply transition
|
||||
&.is-transitioning {
|
||||
transition: transform 1.0s var(--ease-quart);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Controls
|
||||
*/
|
||||
.controls {
|
||||
grid-column: span var(--columns);
|
||||
display: grid;
|
||||
margin: 48px auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include bp (sm) {
|
||||
justify-content: space-between;
|
||||
margin: clamp(56px, 4.5vw, 80px) 0;
|
||||
}
|
||||
@include bp (sd) {
|
||||
--columns: 22;
|
||||
grid-column: 2 / span var(--columns);
|
||||
}
|
||||
|
||||
// Updated Date
|
||||
&__date {
|
||||
grid-column: span var(--columns);
|
||||
grid-row: 2;
|
||||
font-size: rem(18px);
|
||||
color: rgba($color-gray, 0.6);
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
margin: 24px 0 48px;
|
||||
line-height: 1.35;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: span 5;
|
||||
grid-row: 1;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
time {
|
||||
display: block;
|
||||
|
||||
@include bp (sd) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// See More Photos
|
||||
:global(.button) {
|
||||
grid-column: span var(--columns);
|
||||
grid-row: 1;
|
||||
margin: 0 auto;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 7 / span 12;
|
||||
}
|
||||
@include bp (sd) {
|
||||
grid-column: 2 / span 22;
|
||||
grid-column-start: 6;
|
||||
}
|
||||
}
|
||||
|
||||
// Photo Count
|
||||
&__count {
|
||||
grid-column: span var(--columns);
|
||||
grid-row: 3;
|
||||
text-align: center;
|
||||
color: rgba($color-text, 0.3);
|
||||
font-family: $font-serif;
|
||||
font-size: rem(64px);
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.05em;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 18 / span 7;
|
||||
grid-row: 1;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
@include bp (sd) {
|
||||
grid-column-start: 16;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0 -6px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,86 +1,63 @@
|
||||
.shop-page {
|
||||
:global(.shop-page) {
|
||||
position: relative;
|
||||
|
||||
// Sections
|
||||
@import "shop/intro";
|
||||
@import "shop/posters";
|
||||
|
||||
|
||||
// Nav
|
||||
.shop-location {
|
||||
--inset: 20px;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
top: var(--inset);
|
||||
left: var(--inset);
|
||||
right: var(--inset);
|
||||
justify-content: space-between;
|
||||
transform: translate3d(0, -88px, 0);
|
||||
transition: transform 1s var(--ease-quart);
|
||||
transition-delay: 100ms;
|
||||
pointer-events: none;
|
||||
|
||||
@include bp (sm) {
|
||||
--inset: 32px;
|
||||
}
|
||||
|
||||
// Visible state
|
||||
&.is-visible {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
// Error
|
||||
&__error {
|
||||
padding: 64px 0;
|
||||
background: $color-cream;
|
||||
color: $color-text;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
padding: clamp(64px, 12vw, 160px) 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.inner {
|
||||
grid-column: 1 / span 8;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 3 / span 12;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 8px;
|
||||
color: $color-secondary;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cart
|
||||
.cart {
|
||||
// Nav
|
||||
:global(.shop-location) {
|
||||
--inset: 20px;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 101;
|
||||
top: 72px;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: calc(100vh - 72px);
|
||||
z-index: 20;
|
||||
top: var(--inset);
|
||||
left: var(--inset);
|
||||
right: var(--inset);
|
||||
justify-content: space-between;
|
||||
transform: translate3d(0, -88px, 0);
|
||||
transition: transform 1s var(--ease-quart);
|
||||
transition-delay: 100ms;
|
||||
pointer-events: none;
|
||||
|
||||
@include bp (sm) {
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
width: clamp(320px, 45vw, 500px);
|
||||
height: calc(100vh - 48px);
|
||||
max-height: 1000px;
|
||||
--inset: 32px;
|
||||
}
|
||||
}
|
||||
// Visible state
|
||||
:global(.shop-location.is-visible) {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
|
||||
// Error
|
||||
:global(.shop-page__error) {
|
||||
padding: 64px 0;
|
||||
background: $color-cream;
|
||||
color: $color-text;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
padding: clamp(64px, 12vw, 160px) 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:global(.inner) {
|
||||
grid-column: 1 / span 8;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 3 / span 12;
|
||||
}
|
||||
}
|
||||
:global(h2) {
|
||||
margin-bottom: 8px;
|
||||
color: $color-secondary;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Notifications
|
||||
.notifications {
|
||||
:global(.notifications) {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 104px;
|
||||
@@ -92,7 +69,7 @@
|
||||
right: 32px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
& > :global(*) {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -1,40 +1,25 @@
|
||||
// Subscribe Page
|
||||
.subscribe {
|
||||
// Modules
|
||||
.grid-modules {
|
||||
grid-column: span var(--columns);
|
||||
margin: 96px 20px 0;
|
||||
padding-bottom: 40px;
|
||||
&__top {
|
||||
// Email Form
|
||||
:global(.newsletter-form) {
|
||||
margin: 42px auto 70px;
|
||||
padding: 0 20px;
|
||||
max-width: max(432px, 70%);
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / span 22;
|
||||
margin: 200px 0 72px;
|
||||
}
|
||||
}
|
||||
|
||||
// Email Form
|
||||
.newsletter-form {
|
||||
margin: 42px auto 70px;
|
||||
padding: 0 20px;
|
||||
max-width: max(432px, 70%);
|
||||
|
||||
@include bp (sm) {
|
||||
max-width: 560px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
&__email {
|
||||
input {
|
||||
color: #fff;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba($color-tertiary, 0.6);
|
||||
}
|
||||
@include bp (sm) {
|
||||
max-width: 560px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
}
|
||||
&__bottom {
|
||||
p {
|
||||
:global(.newsletter-form__email) {
|
||||
:global(input) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
:global(.newsletter-form__bottom) {
|
||||
:global(p) {
|
||||
color: rgba($color-tertiary, 0.6);
|
||||
}
|
||||
}
|
||||
@@ -74,12 +59,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.globe--cropped {
|
||||
margin-top: 96px;
|
||||
// Globe
|
||||
:global(.globe--cropped) {
|
||||
margin-top: 96px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 156px;
|
||||
}
|
||||
@include bp (sm) {
|
||||
margin-top: 156px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Issue
|
||||
@import "../molecules/issue";
|
||||
@@ -1,5 +1,6 @@
|
||||
.viewer {
|
||||
:global(.photo-page) {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -7,6 +8,7 @@
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@include bp (md, max) {
|
||||
@@ -14,419 +16,425 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel
|
||||
&__carousel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
grid-column: span var(--columns);
|
||||
display: grid;
|
||||
grid-row-gap: 20px;
|
||||
width: calc(100% - 40px);
|
||||
height: 100%;
|
||||
max-width: 720px;
|
||||
position: relative;
|
||||
|
||||
@include bp (md) {
|
||||
position: relative;
|
||||
max-width: none;
|
||||
margin: auto 0;
|
||||
grid-column: 2 / span 17;
|
||||
grid-row-gap: 40px;
|
||||
transform: translate3d(-50%, 2.5%, 0);
|
||||
}
|
||||
@include bp (sd) {
|
||||
grid-column: 3 / span 16;
|
||||
}
|
||||
}
|
||||
|
||||
// Images
|
||||
&__images {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: auto auto 0;
|
||||
padding-top: 66.66%;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
&__picture {
|
||||
--opacity: 1;
|
||||
--scale: 0.6;
|
||||
--rotate: 0deg;
|
||||
--offset-x: 0%;
|
||||
--offset-y: 0%;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translateZ(0);
|
||||
will-change: transform, opacity;
|
||||
|
||||
@include bp (md) {
|
||||
--scale: 0.6;
|
||||
--rotate: 5deg;
|
||||
--offset-x: 28.5%;
|
||||
--offset-y: 0%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
|
||||
.photo {
|
||||
.photo-page {
|
||||
// Carousel
|
||||
&__carousel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
grid-column: span var(--columns);
|
||||
display: grid;
|
||||
grid-row-gap: 20px;
|
||||
width: calc(100% - 40px);
|
||||
height: 100%;
|
||||
max-width: 720px;
|
||||
position: relative;
|
||||
|
||||
@include bp (md) {
|
||||
position: relative;
|
||||
max-width: none;
|
||||
margin: auto 0;
|
||||
grid-column: 2 / span 17;
|
||||
grid-row-gap: 40px;
|
||||
transform: translate3d(-50%, 2.5%, 0);
|
||||
}
|
||||
@include bp (sd) {
|
||||
grid-column: 3 / span 16;
|
||||
}
|
||||
}
|
||||
|
||||
// Images
|
||||
&__images {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: auto auto 0;
|
||||
padding-top: 66.66%;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
&__picture {
|
||||
--opacity: 1;
|
||||
--scale: 0.6;
|
||||
--rotate: 0deg;
|
||||
--offset-x: 0%;
|
||||
--offset-y: 0%;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translate3d(var(--offset-x), var(--offset-y), 0) scale(var(--scale)) rotate(var(--rotate));
|
||||
transition: opacity 1s var(--ease-quart), transform 1s var(--ease-quart);
|
||||
will-change: transform;
|
||||
box-shadow:
|
||||
0 12px 12px rgba(#000, 0.15),
|
||||
0 20px 20px rgba(#000, 0.15),
|
||||
0 48px 48px rgba(#000, 0.15);
|
||||
transform: translateZ(0);
|
||||
will-change: transform, opacity;
|
||||
|
||||
picture {
|
||||
@include bp (md) {
|
||||
--scale: 0.6;
|
||||
--rotate: 5deg;
|
||||
--offset-x: 28.5%;
|
||||
--offset-y: 0%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
|
||||
:global(.photo) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: $color-primary;
|
||||
cursor: default;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: var(--opacity);
|
||||
transform: translateZ(0);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
transition: opacity 1s var(--ease-quart);
|
||||
transform: translate3d(var(--offset-x), var(--offset-y), 0) scale(var(--scale)) rotate(var(--rotate));
|
||||
transition: opacity 1s var(--ease-quart), transform 1s var(--ease-quart);
|
||||
will-change: transform;
|
||||
box-shadow:
|
||||
0 12px 12px rgba(#000, 0.15),
|
||||
0 20px 20px rgba(#000, 0.15),
|
||||
0 48px 48px rgba(#000, 0.15);
|
||||
|
||||
:global(picture) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: $color-primary;
|
||||
cursor: default;
|
||||
}
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: var(--opacity);
|
||||
transform: translateZ(0);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
transition: opacity 1s var(--ease-quart);
|
||||
}
|
||||
}
|
||||
|
||||
&.not-landscape {
|
||||
img {
|
||||
// Ratio is not landscape
|
||||
:global(.not-landscape) {
|
||||
:global(img) {
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden photo over
|
||||
&.is-0 {
|
||||
--scale: 1.03;
|
||||
--rotate: 0deg;
|
||||
--offset-x: 0%;
|
||||
--offset-y: -7%;
|
||||
z-index: 9;
|
||||
pointer-events: none;
|
||||
|
||||
.photo {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@include bp (md) {
|
||||
--scale: 1.075;
|
||||
--rotate: -1deg;
|
||||
--offset-x: -9%;
|
||||
--offset-y: 0%;
|
||||
}
|
||||
}
|
||||
// First visible photo
|
||||
&.is-1 {
|
||||
--scale: 1;
|
||||
--rotate: 0deg;
|
||||
--offset-y: 0%;
|
||||
|
||||
@include bp (md) {
|
||||
// Hidden photo over
|
||||
&.is-0 {
|
||||
--scale: 1.03;
|
||||
--rotate: 0deg;
|
||||
--offset-x: 0%;
|
||||
--offset-y: 0%;
|
||||
}
|
||||
}
|
||||
&.is-2 {
|
||||
--scale: 0.9;
|
||||
--opacity: 0.75;
|
||||
--offset-y: 12%;
|
||||
z-index: 7;
|
||||
--offset-y: -7%;
|
||||
z-index: 9;
|
||||
pointer-events: none;
|
||||
|
||||
@include bp (md) {
|
||||
:global(.photo) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@include bp (md) {
|
||||
--scale: 1.075;
|
||||
--rotate: -1deg;
|
||||
--offset-x: -9%;
|
||||
--offset-y: 0%;
|
||||
}
|
||||
}
|
||||
// First visible photo
|
||||
&.is-1 {
|
||||
--scale: 1;
|
||||
--rotate: 0deg;
|
||||
--offset-y: 0%;
|
||||
|
||||
@include bp (md) {
|
||||
--offset-x: 0%;
|
||||
--offset-y: 0%;
|
||||
}
|
||||
}
|
||||
&.is-2 {
|
||||
--scale: 0.9;
|
||||
--rotate: 1deg;
|
||||
--offset-x: 9.5%;
|
||||
--offset-y: 0%;
|
||||
}
|
||||
}
|
||||
&.is-3 {
|
||||
--scale: 0.83;
|
||||
--opacity: 0.55;
|
||||
--offset-y: 20%;
|
||||
z-index: 6;
|
||||
--opacity: 0.75;
|
||||
--offset-y: 12%;
|
||||
z-index: 7;
|
||||
|
||||
@include bp (md) {
|
||||
@include bp (md) {
|
||||
--scale: 0.9;
|
||||
--rotate: 1deg;
|
||||
--offset-x: 9.5%;
|
||||
--offset-y: 0%;
|
||||
}
|
||||
}
|
||||
&.is-3 {
|
||||
--scale: 0.83;
|
||||
--rotate: 2deg;
|
||||
--offset-x: 16.25%;
|
||||
--offset-y: 0%;
|
||||
}
|
||||
}
|
||||
&.is-4 {
|
||||
--scale: 0.75;
|
||||
--opacity: 0.45;
|
||||
--offset-y: 27.5%;
|
||||
z-index: 5;
|
||||
--opacity: 0.55;
|
||||
--offset-y: 20%;
|
||||
z-index: 6;
|
||||
|
||||
@include bp (md) {
|
||||
@include bp (md) {
|
||||
--scale: 0.83;
|
||||
--rotate: 2deg;
|
||||
--offset-x: 16.25%;
|
||||
--offset-y: 0%;
|
||||
}
|
||||
}
|
||||
&.is-4 {
|
||||
--scale: 0.75;
|
||||
--rotate: 3deg;
|
||||
--offset-x: 22%;
|
||||
--offset-y: 0%;
|
||||
}
|
||||
}
|
||||
&.is-5 {
|
||||
--scale: 0.68;
|
||||
--opacity: 0.25;
|
||||
--offset-y: 33%;
|
||||
z-index: 4;
|
||||
--opacity: 0.45;
|
||||
--offset-y: 27.5%;
|
||||
z-index: 5;
|
||||
|
||||
@include bp (md) {
|
||||
@include bp (md) {
|
||||
--scale: 0.75;
|
||||
--rotate: 3deg;
|
||||
--offset-x: 22%;
|
||||
--offset-y: 0%;
|
||||
}
|
||||
}
|
||||
&.is-5 {
|
||||
--scale: 0.68;
|
||||
--rotate: 4deg;
|
||||
--offset-x: 27%;
|
||||
--offset-y: 0%;
|
||||
--opacity: 0.25;
|
||||
--offset-y: 33%;
|
||||
z-index: 4;
|
||||
|
||||
@include bp (md) {
|
||||
--scale: 0.68;
|
||||
--rotate: 4deg;
|
||||
--offset-x: 27%;
|
||||
--offset-y: 0%;
|
||||
}
|
||||
}
|
||||
&.is-6 {
|
||||
--opacity: 0.25;
|
||||
z-index: 3;
|
||||
|
||||
:global(.photo) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&.is-7 {
|
||||
:global(.photo) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-6 {
|
||||
--opacity: 0.25;
|
||||
z-index: 3;
|
||||
|
||||
.photo {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&.is-7 {
|
||||
.photo {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Infos
|
||||
&__info {
|
||||
bottom: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: 40px;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
|
||||
@include bp (md) {
|
||||
position: static;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
@include bp (lg) {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $color-secondary;
|
||||
font-size: clamp(#{rem(18px)}, 5.5vw, #{rem(28px)});
|
||||
line-height: 1.1;
|
||||
// Infos
|
||||
&__info {
|
||||
bottom: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: 40px;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
|
||||
@include bp (md) {
|
||||
font-size: rem(32px);
|
||||
position: static;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Details
|
||||
.detail {
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
color: rgba($color-tertiary, 0.7);
|
||||
line-height: 1.5;
|
||||
|
||||
@include bp (lg) {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
padding-left: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
h1 {
|
||||
color: $color-secondary;
|
||||
font-size: clamp(#{rem(18px)}, 5.5vw, #{rem(28px)});
|
||||
line-height: 1.1;
|
||||
|
||||
&:hover {
|
||||
color: $color-tertiary;
|
||||
@include bp (md) {
|
||||
font-size: rem(32px);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
.icon {
|
||||
// Details
|
||||
.detail {
|
||||
display: inline-block;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
margin-top: -5px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
// Separator
|
||||
.sep {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
color: rgba($color-tertiary, 0.7);
|
||||
line-height: 1.5;
|
||||
|
||||
@include bp (lg) {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
:global(.icon) {
|
||||
display: inline-block;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
margin-top: -5px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
// Separator
|
||||
.sep {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Index
|
||||
&__index {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
bottom: calc(91% + 1vw);
|
||||
display: block;
|
||||
line-height: 1;
|
||||
color: rgba($color-tertiary, 0.4);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
|
||||
@include bp (md, max) {
|
||||
font-size: clamp(#{rem(80px)}, 24vw, #{rem(120px)});
|
||||
}
|
||||
@include bp (md) {
|
||||
top: 50%;
|
||||
left: auto;
|
||||
right: calc(-1 * min(30vw, 400px));
|
||||
width: 350px;
|
||||
text-align: center;
|
||||
bottom: auto;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
@include bp (lg) {
|
||||
right: calc(-1 * min(25vw, 460px));
|
||||
}
|
||||
}
|
||||
|
||||
// Controls
|
||||
&__controls {
|
||||
display: none;
|
||||
|
||||
@include bp (md) {
|
||||
// Index
|
||||
&__index {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
left: -28px;
|
||||
right: -28px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
justify-content: space-between;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
bottom: calc(91% + 1vw);
|
||||
display: block;
|
||||
line-height: 1;
|
||||
color: rgba($color-tertiary, 0.4);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
|
||||
@include bp (md, max) {
|
||||
font-size: clamp(#{rem(80px)}, 24vw, #{rem(120px)});
|
||||
}
|
||||
@include bp (md) {
|
||||
top: 50%;
|
||||
left: auto;
|
||||
right: calc(-1 * min(30vw, 400px));
|
||||
width: 350px;
|
||||
text-align: center;
|
||||
bottom: auto;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
@include bp (lg) {
|
||||
right: calc(-1 * min(25vw, 460px));
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
pointer-events: auto;
|
||||
// Controls
|
||||
&__controls {
|
||||
display: none;
|
||||
|
||||
// Prev button
|
||||
&:first-child {
|
||||
& > *:nth-child(2) {
|
||||
transform: translate3d(100%, -50%, 0) rotate(180deg);
|
||||
@include bp (md) {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
left: -28px;
|
||||
right: -28px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:global(button) {
|
||||
pointer-events: auto;
|
||||
|
||||
// Prev button
|
||||
&:first-child {
|
||||
& > :global(*:nth-child(2)) {
|
||||
transform: translate3d(100%, -50%, 0) rotate(180deg);
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:not([disabled]):hover {
|
||||
& > :global(*:nth-child(1)) {
|
||||
transform: translate3d(-20%, 0, 0) rotate(180deg);
|
||||
}
|
||||
& > :global(*:nth-child(2)) {
|
||||
transform: translate3d(-50%, -50%, 0) rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:not([disabled]):hover {
|
||||
& > *:nth-child(1) {
|
||||
transform: translate3d(-20%, 0, 0) rotate(180deg);
|
||||
}
|
||||
& > *:nth-child(2) {
|
||||
transform: translate3d(-50%, -50%, 0) rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:not([disabled]):hover {
|
||||
background-color: $color-secondary;
|
||||
color: #fff;
|
||||
|
||||
svg:nth-child(2) {
|
||||
background-color: $color-secondary;
|
||||
color: #fff;
|
||||
|
||||
:global(svg:nth-child(2)) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fullscreen viewer
|
||||
&__fullscreen {
|
||||
position: absolute;
|
||||
z-index: 102;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $color-primary-darker;
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
picture {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
.close {
|
||||
$color-shadow: rgba(#000, 0.15);
|
||||
// Fullscreen viewer
|
||||
&__fullscreen {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow:
|
||||
0 6px 6px $color-shadow,
|
||||
0 12px 12px $color-shadow,
|
||||
0 24px 24px $color-shadow;
|
||||
z-index: 102;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $color-primary-darker;
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Photo
|
||||
:global(picture) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
cursor: pointer;
|
||||
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Close
|
||||
:global(.close) {
|
||||
$color-shadow: rgba(#000, 0.15);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow:
|
||||
0 6px 6px $color-shadow,
|
||||
0 12px 12px $color-shadow,
|
||||
0 24px 24px $color-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Notice
|
||||
&__notice {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 20px;
|
||||
line-height: 44px;
|
||||
color: rgba($color-tertiary, 0.5);
|
||||
// Notice
|
||||
&__notice {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 20px;
|
||||
line-height: 44px;
|
||||
color: rgba($color-tertiary, 0.5);
|
||||
|
||||
@include bp (md) {
|
||||
display: none;
|
||||
@include bp (md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close button
|
||||
&__close {
|
||||
:global(.close) {
|
||||
--offset: 16px;
|
||||
position: fixed !important;
|
||||
z-index: 2;
|
||||
@@ -437,7 +445,7 @@
|
||||
--offset: clamp(20px, 3vw, 40px);
|
||||
}
|
||||
|
||||
svg {
|
||||
:global(svg) {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
|
||||
@@ -449,7 +457,7 @@
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
svg {
|
||||
:global(svg) {
|
||||
transform: rotate3d(0, 0, 1, 90deg) !important;
|
||||
transition-duration: 1.2s;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
** Shop: Intro
|
||||
*/
|
||||
&__intro {
|
||||
.shop-page__intro {
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
height: 30vw;
|
||||
@@ -60,7 +60,7 @@
|
||||
}
|
||||
}
|
||||
// Shop
|
||||
.shop-title {
|
||||
:global(.shop-title) {
|
||||
font-size: rem(14px);
|
||||
color: $color-cream;
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
}
|
||||
|
||||
// Site Title
|
||||
h1 {
|
||||
:global(h1) {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
@@ -91,16 +91,16 @@
|
||||
transform: none;
|
||||
}
|
||||
|
||||
span, strong {
|
||||
:global(span), :global(strong) {
|
||||
color: #fff;
|
||||
}
|
||||
span {
|
||||
:global(span) {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
// Background Image
|
||||
picture {
|
||||
:global(picture) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@@ -110,7 +110,7 @@
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
img {
|
||||
:global(img) {
|
||||
opacity: 0.55;
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -134,7 +134,7 @@
|
||||
}
|
||||
|
||||
// Intro: Navigation
|
||||
&__nav {
|
||||
.shop-page__nav {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
bottom: 0;
|
||||
@@ -208,11 +208,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cart button
|
||||
.button-cart {
|
||||
@include bp (sm, max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
** Shop: Posters
|
||||
*/
|
||||
&__posters {
|
||||
.shop-page__posters {
|
||||
background-color: $color-primary-darker;
|
||||
padding: clamp(56px, 10vw, 120px) 20px 72px;
|
||||
border-bottom: solid 1px $color-primary-tertiary20 ;
|
||||
@@ -49,10 +49,6 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.is-dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
margin: 0 -8px;
|
||||
@@ -72,8 +68,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
:global(.is-dragging) {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
// Poster
|
||||
.poster {
|
||||
:global(.poster) {
|
||||
position: relative;
|
||||
flex: 0 0 100%;
|
||||
margin: 0 12px;
|
||||
@@ -180,21 +180,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
:global(.newsletter-form) {
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
|
||||
@include bp (sm) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__email {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&__bottom {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.newsletter-form__email) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
:global(.newsletter-form__bottom) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user