🔥 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,17 +1,3 @@
|
||||
/*
|
||||
** Globe
|
||||
*/
|
||||
// Marker
|
||||
@keyframes globeMarkerPulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba($color-secondary, 1);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 32px rgba(#fff, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Earth icon
|
||||
*/
|
||||
|
||||
@@ -52,7 +52,7 @@ button {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&[disabled] {
|
||||
&:global([disabled]) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
:global(.icon) {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: #fff;
|
||||
@@ -31,7 +31,7 @@
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
svg {
|
||||
:global(svg) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -7,12 +7,12 @@
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
:global(button) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Icon
|
||||
svg {
|
||||
:global(svg) {
|
||||
display: block;
|
||||
width: min(65%, 27px);
|
||||
height: min(65%, 27px);
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
& > :global(*) {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
object-fit: contain;
|
||||
@@ -41,7 +41,7 @@
|
||||
*/
|
||||
// Hover
|
||||
&.has-clone:not([disabled]):hover {
|
||||
& > * {
|
||||
& > :global(*) {
|
||||
&:first-child {
|
||||
opacity: 0;
|
||||
transform: scale(0.75) translate3d(20%, 0, 0);
|
||||
@@ -59,7 +59,7 @@
|
||||
background: $color-primary;
|
||||
border: 3px solid rgba(#fff, 0.2);
|
||||
|
||||
svg {
|
||||
:global(svg) {
|
||||
color: $color-primary-tertiary20;
|
||||
}
|
||||
}
|
||||
@@ -73,7 +73,7 @@
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
img, svg {
|
||||
:global(img), :global(svg) {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
object-fit: contain;
|
||||
@@ -85,7 +85,7 @@
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
img, svg {
|
||||
:global(img), :global(svg) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
object-fit: contain;
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
// Icon
|
||||
img, svg {
|
||||
:global(img), :global(svg) {
|
||||
display: block;
|
||||
margin-right: 12px;
|
||||
color: $color-gray;
|
||||
@@ -30,11 +30,11 @@
|
||||
&:not([disabled]):hover {
|
||||
background: $color-secondary;
|
||||
|
||||
svg {
|
||||
:global(svg) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.text-split__line {
|
||||
:global(.text-split__line) {
|
||||
&:last-child {
|
||||
--offset-y: 65%;
|
||||
color: #fff;
|
||||
@@ -95,7 +95,7 @@
|
||||
color: #fff;
|
||||
background: $color-secondary;
|
||||
}
|
||||
.text-split__line {
|
||||
:global(.text-split__line) {
|
||||
&:last-child {
|
||||
color: #fff;
|
||||
}
|
||||
@@ -126,7 +126,7 @@
|
||||
}
|
||||
|
||||
// Hover
|
||||
.text-split__line {
|
||||
:global(.text-split__line) {
|
||||
&:last-child {
|
||||
color: $color-primary-tertiary20;
|
||||
}
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
.icon {
|
||||
// Earth icon
|
||||
&-earth {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
.scrolling-title {
|
||||
transform: translate3d(var(--parallax-x), 0, 0);
|
||||
transition: transform 1.2s var(--ease-quart);
|
||||
will-change: transform;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
.site-title {
|
||||
font-family: $font-serif;
|
||||
|
||||
.middle {
|
||||
:global(.middle) {
|
||||
position: relative;
|
||||
top: -4px;
|
||||
font-weight: 600;
|
||||
@@ -23,19 +23,19 @@
|
||||
font-size: clamp(#{rem(20px)}, 2.5vw, #{rem(30px)});
|
||||
}
|
||||
|
||||
.word-1 {
|
||||
:global(.word-1) {
|
||||
display: block;
|
||||
color: $color-lilas-bright;
|
||||
}
|
||||
.word-2 {
|
||||
:global(.word-2) {
|
||||
font-size: 0.45em;
|
||||
}
|
||||
.word-3 {
|
||||
:global(.word-3) {
|
||||
display: inline-block;
|
||||
margin-left: -0.023em;
|
||||
color: $color-secondary;
|
||||
}
|
||||
span {
|
||||
:global(span) {
|
||||
transition: color 0.25s;
|
||||
}
|
||||
}
|
||||
@@ -57,7 +57,7 @@
|
||||
font-size: rem(96px);
|
||||
}
|
||||
|
||||
.middle {
|
||||
:global(.middle) {
|
||||
top: 0;
|
||||
margin: 10px 0;
|
||||
font-size: 0.3125em;
|
||||
@@ -67,7 +67,7 @@
|
||||
margin: 0 10px 0 20px;
|
||||
}
|
||||
}
|
||||
.char {
|
||||
:global(.char) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
24
src/style/global.scss
Normal file
24
src/style/global.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Dependencies
|
||||
@import "sanitize.css/sanitize";
|
||||
|
||||
// Tools
|
||||
@import "tools/helpers";
|
||||
|
||||
// Base
|
||||
@import "base";
|
||||
@import "fonts";
|
||||
@import "typography";
|
||||
@import "effects";
|
||||
|
||||
// Layout
|
||||
@import "layout/grid";
|
||||
@import "layout/modules";
|
||||
|
||||
// Misc
|
||||
@import "animations";
|
||||
|
||||
// Components (Atomic Design System)
|
||||
// Atoms
|
||||
@import "atoms/photo";
|
||||
4
src/style/imports.scss
Normal file
4
src/style/imports.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
// Tools
|
||||
@import "variables";
|
||||
@import "tools/mixins";
|
||||
@import "tools/functions";
|
||||
@@ -17,7 +17,7 @@
|
||||
margin: clamp(112px, 10vw, 200px) 0 clamp(88px, 10vw, 120px);
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
:global(h2) {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 16px;
|
||||
@@ -102,11 +102,13 @@
|
||||
grid-column: 14 / span var(--columns);
|
||||
}
|
||||
}
|
||||
.image {
|
||||
|
||||
// Image
|
||||
:global(.image) {
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
|
||||
img {
|
||||
:global(img) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -122,47 +124,46 @@
|
||||
width: 100%;
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
}
|
||||
:global(.image--1) {
|
||||
grid-column: 1 / span 7;
|
||||
|
||||
&--1 {
|
||||
@include bp (sm) {
|
||||
grid-column: 1 / span 7;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 1 / span 7;
|
||||
}
|
||||
}
|
||||
&--2 {
|
||||
}
|
||||
:global(.image--2) {
|
||||
grid-column: 2 / span 7;
|
||||
margin: 32px 0;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / span 7;
|
||||
margin: 32px 0;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / span 7;
|
||||
margin: 48px 0;
|
||||
}
|
||||
margin: 48px 0;
|
||||
}
|
||||
&--3 {
|
||||
grid-column: 1 / span 6;
|
||||
z-index: 10;
|
||||
margin-bottom: -64px;
|
||||
}
|
||||
:global(.image--3) {
|
||||
grid-column: 1 / span 6;
|
||||
z-index: 10;
|
||||
margin-bottom: -64px;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 5 / span 8;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
padding-bottom: 128%;
|
||||
}
|
||||
@include bp (sm) {
|
||||
grid-column: 5 / span 8;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&--4 {
|
||||
grid-column: 1 / span 8;
|
||||
margin: -56px 20px 20px;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 5 / span 15;
|
||||
margin-bottom: 120px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
&:after {
|
||||
padding-bottom: 128%;
|
||||
}
|
||||
}
|
||||
:global(.image--4) {
|
||||
grid-column: 1 / span 8;
|
||||
margin: -56px 20px 20px;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 5 / span 15;
|
||||
margin-bottom: 120px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
|
||||
@include bp (sm) {
|
||||
// height: 130vw;
|
||||
}
|
||||
@include bp (md) {
|
||||
// height: 112vw;
|
||||
}
|
||||
@include bp (xl) {
|
||||
// height: 100vw;
|
||||
}
|
||||
// @include bp (sm) {
|
||||
// height: 130vw;
|
||||
// }
|
||||
// @include bp (md) {
|
||||
// height: 112vw;
|
||||
// }
|
||||
// @include bp (xl) {
|
||||
// height: 100vw;
|
||||
// }
|
||||
|
||||
// DEBUG //
|
||||
// background: rgba(red, 0.2);
|
||||
@@ -40,154 +40,160 @@
|
||||
** States and Variants
|
||||
*/
|
||||
// When dragging
|
||||
&.is-grabbing {
|
||||
&:global(.is-grabbing) {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
// Cropped globe
|
||||
&--cropped {
|
||||
&-cropped {
|
||||
overflow: hidden;
|
||||
height: clamp(300px, 30vw, 500px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Markers
|
||||
*/
|
||||
&__markers {
|
||||
/*
|
||||
** Markers
|
||||
*/
|
||||
:global(.globe__markers) {
|
||||
z-index: 2;
|
||||
|
||||
// Marker
|
||||
:global(.marker) {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
padding: 4px;
|
||||
opacity: 1;
|
||||
will-change: transform;
|
||||
|
||||
// Marker
|
||||
.marker {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
// Dot
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: $color-secondary;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover glow effect
|
||||
:global(.hover) {
|
||||
&:before {
|
||||
animation: markerPulse 1s;
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
:global(.marker__label) {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 0px;
|
||||
color: transparent;
|
||||
pointer-events: none;
|
||||
transition: color 0.4s var(--ease-quart), opacity 0.3s var(--ease-quart), transform 0.3s var(--ease-quart);
|
||||
}
|
||||
// Location city
|
||||
:global(.marker__city) {
|
||||
font-family: $font-serif;
|
||||
font-size: rem(18px);
|
||||
line-height: 1;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(24px);
|
||||
}
|
||||
}
|
||||
// Location country
|
||||
:global(.marker__country) {
|
||||
display: block;
|
||||
opacity: 0.8;
|
||||
font-family: $font-sans;
|
||||
font-size: rem(8px);
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(10px);
|
||||
}
|
||||
}
|
||||
|
||||
// Active
|
||||
:global(.is-active) {
|
||||
opacity: 1;
|
||||
|
||||
:global(span) {
|
||||
opacity: 1;
|
||||
will-change: transform;
|
||||
}
|
||||
:global(.marker__city) {
|
||||
color: $color-secondary;
|
||||
}
|
||||
:global(.marker__country) {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
|
||||
// Dot
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: $color-secondary;
|
||||
border-radius: 100%;
|
||||
// Is light
|
||||
:global(.is-light) {
|
||||
:global(.is-active) {
|
||||
:global(.marker__city) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span {
|
||||
transition: color 0.4s var(--ease-quart), opacity 0.3s var(--ease-inout);
|
||||
}
|
||||
|
||||
// Hover glow effect
|
||||
&.hover {
|
||||
&:before {
|
||||
animation: globeMarkerPulse 1s;
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
&__label {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 0px;
|
||||
color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
// Location city
|
||||
&__city {
|
||||
font-family: $font-serif;
|
||||
font-size: rem(18px);
|
||||
line-height: 1;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(24px);
|
||||
}
|
||||
}
|
||||
// Location country
|
||||
&__country {
|
||||
display: block;
|
||||
opacity: 0.8;
|
||||
font-family: $font-sans;
|
||||
font-size: rem(8px);
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(10px);
|
||||
}
|
||||
}
|
||||
|
||||
// Active
|
||||
&.is-active {
|
||||
&, span {
|
||||
opacity: 1;
|
||||
}
|
||||
.marker {
|
||||
&__city {
|
||||
color: $color-secondary;
|
||||
}
|
||||
&__country {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Is light
|
||||
&.is-light {
|
||||
&.is-active {
|
||||
.marker {
|
||||
&__city {
|
||||
color: #fff;
|
||||
}
|
||||
&__country {
|
||||
color: #d2b7e4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Left positioned
|
||||
&.is-left {
|
||||
.marker {
|
||||
&__label {
|
||||
left: auto;
|
||||
right: 32px;
|
||||
}
|
||||
&__country {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Marker is close to another one
|
||||
// Show the marker infos only on hover
|
||||
&.is-close {
|
||||
// Dot
|
||||
&:before {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
// Label
|
||||
.marker__label {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Show labels on hover
|
||||
&:hover {
|
||||
.marker__label {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
:global(.marker__country) {
|
||||
color: #d2b7e4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Left positioned
|
||||
:global(.is-left) {
|
||||
:global(.marker__city) {
|
||||
left: auto;
|
||||
right: 32px;
|
||||
}
|
||||
:global(.marker__country) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Marker is close to another one
|
||||
// Show the marker infos only on hover
|
||||
:global(.is-close) {
|
||||
// Dot
|
||||
&:before {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
// Label
|
||||
:global(.marker__label) {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 4px, 0);
|
||||
}
|
||||
|
||||
// Show labels on hover
|
||||
&:hover {
|
||||
:global(.marker__label) {
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Pulse animation
|
||||
@keyframes markerPulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba($color-secondary, 1);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 32px rgba(#fff, 0);
|
||||
}
|
||||
}
|
||||
@@ -63,7 +63,7 @@
|
||||
}
|
||||
}
|
||||
// Select
|
||||
.select {
|
||||
:global(.select) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -75,16 +75,16 @@
|
||||
cursor: pointer;
|
||||
transition: border-color 0.4s var(--ease-quart);
|
||||
|
||||
span {
|
||||
:global(span) {
|
||||
display: block;
|
||||
font-size: rem(12px);
|
||||
color: $color-text;
|
||||
|
||||
& + span {
|
||||
& + :global(span) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
select {
|
||||
:global(select) {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
@@ -114,7 +114,7 @@
|
||||
}
|
||||
|
||||
// Remove Icon
|
||||
.remove {
|
||||
:global(.remove) {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
}
|
||||
|
||||
// Title
|
||||
h1 {
|
||||
:global(h1) {
|
||||
margin-top: 56px;
|
||||
line-height: 1;
|
||||
color: $color-secondary;
|
||||
@@ -17,8 +17,9 @@
|
||||
margin-top: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
// Text
|
||||
p {
|
||||
:global(p) {
|
||||
max-width: 300px;
|
||||
margin: 40px auto 0;
|
||||
font-weight: 200;
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
& > * {
|
||||
display: inline-block;
|
||||
}
|
||||
svg {
|
||||
:global(svg) {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 0.4em;
|
||||
@@ -77,7 +77,7 @@
|
||||
opacity: 0;
|
||||
transition: opacity 2s var(--ease-quart);
|
||||
|
||||
figure {
|
||||
:global(figure) {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
@@ -98,7 +98,7 @@
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
picture {
|
||||
:global(picture) {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
|
||||
@@ -112,7 +112,7 @@
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
img {
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -132,7 +132,7 @@
|
||||
// Scale down image on hover
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
img {
|
||||
:global(img) {
|
||||
opacity: 0.7;
|
||||
transform: scale3d(1.03, 1.03, 1.03) !important;
|
||||
transition-duration: 1.2s;
|
||||
@@ -187,24 +187,24 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Visible state
|
||||
&.is-visible {
|
||||
.house__info {
|
||||
h2 {
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
.info {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.house__photo {
|
||||
// Visible state
|
||||
:global(.is-visible) {
|
||||
.house__info {
|
||||
h2 {
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
.info {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.house__photo {
|
||||
opacity: 1;
|
||||
|
||||
img {
|
||||
transform: scale3d(1.01, 1.01, 1.01);
|
||||
}
|
||||
:global(img) {
|
||||
transform: scale3d(1.01, 1.01, 1.01);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -12,7 +12,7 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
// Image
|
||||
img {
|
||||
:global(img) {
|
||||
$shadow-color: rgba(#936B47, 0.06);
|
||||
display: block;
|
||||
width: 80px;
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
.list-cta {
|
||||
@include bp (sm) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin: 20px auto 0;
|
||||
|
||||
@include bp (sm) {
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -41,9 +41,6 @@
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
strong {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
@@ -52,17 +49,15 @@
|
||||
}
|
||||
|
||||
// Flag
|
||||
&__flag {
|
||||
img {
|
||||
display: block;
|
||||
margin: 2px auto 0;
|
||||
border-radius: 100%;
|
||||
margin-right: 24px;
|
||||
:global(.flag img) {
|
||||
display: block;
|
||||
margin: 2px auto 0;
|
||||
border-radius: 100% !important;
|
||||
margin-right: 24px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
@include bp (sm) {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,7 +88,7 @@
|
||||
}
|
||||
|
||||
// Badge
|
||||
.badge {
|
||||
:global(.badge) {
|
||||
display: inline-flex;
|
||||
|
||||
@include bp (sm) {
|
||||
@@ -125,29 +120,31 @@
|
||||
@include bp (sm) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
picture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
// Photo
|
||||
:global(.location__photo) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.is-visible) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
.location__photos {
|
||||
opacity: 1;
|
||||
|
||||
@@ -30,14 +30,13 @@
|
||||
@include bp (sm) {
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
button {
|
||||
position: absolute;
|
||||
:global(input::placeholder) {
|
||||
color: rgba($color-tertiary, 0.6);
|
||||
opacity: 1;
|
||||
}
|
||||
:global(button) {
|
||||
position: absolute !important;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
72
src/style/molecules/_pagination.scss
Normal file
72
src/style/molecules/_pagination.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
// Pagination
|
||||
.pagination {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: auto 0;
|
||||
cursor: pointer;
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Progress
|
||||
&__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
|
||||
&:not([disabled]):hover {
|
||||
.pagination__progress {
|
||||
color: rgba($color-text, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
:global(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 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,4 @@
|
||||
.photo-card {
|
||||
picture {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $color-primary-tertiary20;
|
||||
}
|
||||
& > * {
|
||||
border-radius: 8px;
|
||||
}
|
||||
@@ -15,7 +10,12 @@
|
||||
transition: transform 0.7s var(--ease-quart);
|
||||
will-change: transform;
|
||||
}
|
||||
img {
|
||||
:global(picture) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $color-primary-tertiary20;
|
||||
}
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 2px);
|
||||
@@ -41,7 +41,7 @@
|
||||
font-size: clamp(#{rem(12px)}, 1.2vw, #{rem(14px)});
|
||||
}
|
||||
|
||||
picture {
|
||||
:global(picture) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 12px;
|
||||
@@ -54,18 +54,18 @@
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
img {
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
p {
|
||||
:global(p) {
|
||||
max-width: min(80%, 300px);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
& > * {
|
||||
& > :global(*) {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 8px, 0);
|
||||
transition: opacity 0.7s var(--ease-quart), transform 0.8s var(--ease-quart);
|
||||
@@ -97,15 +97,15 @@
|
||||
a:hover {
|
||||
transform: scale(1.0375) rotate(2deg) translateZ(0);
|
||||
|
||||
.photo-card__info {
|
||||
& > * {
|
||||
:global(.photo-card__info) {
|
||||
:global(*) {
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
picture {
|
||||
:global(picture) {
|
||||
transition-delay: 100ms;
|
||||
}
|
||||
p {
|
||||
:global(p) {
|
||||
transition-delay: 180ms;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
// Poster image
|
||||
img {
|
||||
:global(img) {
|
||||
pointer-events: auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -49,7 +49,7 @@
|
||||
transition: transform 0.8s var(--ease-quart);
|
||||
}
|
||||
|
||||
& > * {
|
||||
& > :global(*) {
|
||||
background: none;
|
||||
font-size: rem(14px);
|
||||
font-weight: 300;
|
||||
@@ -88,7 +88,7 @@
|
||||
|
||||
// Hover effect
|
||||
&:hover {
|
||||
img {
|
||||
:global(img) {
|
||||
@include bp (md) {
|
||||
transform: scale(0.8) translate3d(0, -5%, 0);
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
background: rgba($color-tertiary, 0.2);
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
:global(.icon) {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
@@ -8,13 +8,13 @@
|
||||
&__slides {
|
||||
display: flex;
|
||||
}
|
||||
&__slide {
|
||||
& :global(picture) {
|
||||
position: relative;
|
||||
flex: 0 0 100%;
|
||||
color: $color-text;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
& :global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -162,7 +162,7 @@
|
||||
}
|
||||
|
||||
// Icon
|
||||
.icon {
|
||||
:global(.icon) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -173,7 +173,7 @@
|
||||
background: $color-cream;
|
||||
border-radius: 100%;
|
||||
|
||||
svg {
|
||||
:global(svg) {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 50%;
|
||||
@@ -200,20 +200,6 @@
|
||||
transform: translate3d(0, -8px, 0);
|
||||
}
|
||||
|
||||
|
||||
// Updating state
|
||||
&.is-updating {
|
||||
.cart-item {
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
.cart__update {
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
// Location switcher
|
||||
&-switcher {
|
||||
position: fixed;
|
||||
@@ -240,3 +226,16 @@
|
||||
cursor: w-resize;
|
||||
}
|
||||
}
|
||||
|
||||
// Updating state
|
||||
:global(.is-updating) {
|
||||
:global(.cart-item) {
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
:global(.cart__update) {
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
@@ -12,7 +12,7 @@
|
||||
height: clamp(400px, 40vw, 800px);
|
||||
}
|
||||
|
||||
.photo-card {
|
||||
:global(.photo-card) {
|
||||
--rotation: 0deg;
|
||||
position: relative;
|
||||
display: block;
|
||||
@@ -189,20 +189,19 @@
|
||||
&:hover {
|
||||
z-index: 13;
|
||||
}
|
||||
}
|
||||
|
||||
// Not hovered
|
||||
&.is-hovered {
|
||||
img {
|
||||
opacity: 1.0 !important;
|
||||
}
|
||||
// Not hovered
|
||||
:global(.is-hovered) {
|
||||
:global(img) {
|
||||
opacity: 1.0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Mouse over collage
|
||||
&.is-hovering {
|
||||
.photo-card img {
|
||||
:global(.photo-card img) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.container {
|
||||
:global(.container) {
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
@@ -31,14 +31,14 @@
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
:global(.site-title) {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
strong, span {
|
||||
color: #fff;
|
||||
}
|
||||
// Hover
|
||||
&:hover {
|
||||
:global(strong), :global(span) {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -100,10 +100,7 @@
|
||||
|
||||
// Instagram link
|
||||
.instagram {
|
||||
&__text {
|
||||
position: relative;
|
||||
}
|
||||
svg {
|
||||
:global(svg) {
|
||||
width: 1.2em;
|
||||
height: auto;
|
||||
transition: color 0.35s;
|
||||
|
||||
@@ -83,7 +83,8 @@
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@include bp (sd) {
|
||||
margin: 0 22px 56px;
|
||||
margin-left: 22px;
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,14 +36,12 @@
|
||||
}
|
||||
|
||||
// Form
|
||||
.past-issues {
|
||||
&:hover {
|
||||
&, span {
|
||||
color: $color-secondary;
|
||||
}
|
||||
span {
|
||||
border-color: $color-secondary;
|
||||
}
|
||||
:global(.past-issues:hover) {
|
||||
color: $color-secondary;
|
||||
|
||||
:global(span) {
|
||||
color: $color-secondary;
|
||||
border-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -56,15 +54,19 @@
|
||||
&--default {
|
||||
background: $color-tertiary 50% 0 / cover url(#{$dir-img}/newsletter-beige.jpg) no-repeat;
|
||||
|
||||
.newsletter-form__email {
|
||||
:global(.newsletter-form__email) {
|
||||
background: $color-tertiary;
|
||||
|
||||
:global(input::placeholder) {
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Light
|
||||
&--light {
|
||||
background: $color-cream 50% 0 / cover url(#{$dir-img}/newsletter-cream.jpg) no-repeat;
|
||||
|
||||
.newsletter-form__email {
|
||||
:global(.newsletter-form__email) {
|
||||
background: $color-cream;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
img {
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@@ -68,7 +68,7 @@
|
||||
.frame {
|
||||
width: 32px;
|
||||
}
|
||||
.flag {
|
||||
:global(.flag) {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: -8px;
|
||||
@@ -79,7 +79,7 @@
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
:global(img) {
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
@@ -154,7 +154,7 @@
|
||||
&__right {
|
||||
position: static;
|
||||
|
||||
.flag {
|
||||
:global(.flag) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
@@ -21,8 +21,9 @@
|
||||
&__images {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 256px;
|
||||
|
||||
picture {
|
||||
:global(picture) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -31,16 +32,17 @@
|
||||
opacity: 0;
|
||||
transform: scale3d(1.075, 1.075, 1.075);
|
||||
transition: opacity 0.8s, transform 1.6s var(--ease-quart);
|
||||
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
transform: scale3d(1,1,1);
|
||||
}
|
||||
}
|
||||
img {
|
||||
|
||||
:global(.is-visible) {
|
||||
opacity: 1;
|
||||
transform: scale3d(1,1,1);
|
||||
}
|
||||
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 216px;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
|
||||
@include bp (sm) {
|
||||
@@ -65,7 +67,7 @@
|
||||
padding: clamp(40px, 4.5vw, 64px) clamp(48px, 4.5vw, 72px) clamp(24px, 4.5vw, 40px) clamp(40px, 4.5vw, 64px);
|
||||
}
|
||||
|
||||
.button {
|
||||
:global(.button) {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Dependencies
|
||||
@import "sanitize.css/sanitize";
|
||||
|
||||
// Tools
|
||||
@import "variables";
|
||||
@import "tools/mixins";
|
||||
@import "tools/functions";
|
||||
@import "tools/helpers";
|
||||
|
||||
// Base
|
||||
@import "base";
|
||||
@import "fonts";
|
||||
@import "typography";
|
||||
@import "effects";
|
||||
|
||||
// Layout
|
||||
@import "layout/grid";
|
||||
@import "layout/modules";
|
||||
|
||||
// Pages
|
||||
@import "pages/homepage";
|
||||
@import "pages/photos";
|
||||
@import "pages/explore";
|
||||
@import "pages/credits";
|
||||
@import "pages/subscribe";
|
||||
@import "pages/location";
|
||||
@import "pages/viewer";
|
||||
@import "pages/shop";
|
||||
@import "pages/error";
|
||||
|
||||
// Modules
|
||||
@import "modules/globe";
|
||||
@import "modules/postcard";
|
||||
|
||||
|
||||
// Atomic Design System
|
||||
// Atoms
|
||||
@import "atoms/button";
|
||||
@import "atoms/button-circle";
|
||||
@import "atoms/button-cart";
|
||||
@import "atoms/icon";
|
||||
@import "atoms/badge";
|
||||
@import "atoms/arrow";
|
||||
@import "atoms/discover";
|
||||
@import "atoms/box-cta";
|
||||
@import "atoms/site-title";
|
||||
@import "atoms/scrolling-title";
|
||||
@import "atoms/photo";
|
||||
|
||||
// Molecules
|
||||
@import "molecules/photo-card";
|
||||
@import "molecules/location";
|
||||
@import "molecules/switcher";
|
||||
@import "molecules/heading";
|
||||
@import "molecules/list-cta";
|
||||
@import "molecules/house";
|
||||
@import "molecules/issue";
|
||||
@import "molecules/newsletter-form";
|
||||
@import "molecules/poster";
|
||||
@import "molecules/notification-cart";
|
||||
@import "molecules/cart-item";
|
||||
@import "molecules/shop-locationswitcher";
|
||||
|
||||
// Organisms
|
||||
@import "organisms/collage";
|
||||
@import "organisms/locations";
|
||||
@import "organisms/newsletter";
|
||||
@import "organisms/carousel";
|
||||
@import "organisms/shop";
|
||||
@import "organisms/cart";
|
||||
@import "organisms/footer";
|
||||
|
||||
// Layouts
|
||||
@import "layouts/poster";
|
||||
|
||||
// Misc
|
||||
@import "animations";
|
||||
@@ -1,27 +1,14 @@
|
||||
/* Classes
|
||||
========================================================================== */
|
||||
.clear {
|
||||
:global(.clear) {
|
||||
@extend %clearfix;
|
||||
}
|
||||
%center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
%trbl {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
%full-size {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Containers
|
||||
========================================================================== */
|
||||
// Wrap (global)
|
||||
.container {
|
||||
:global(.container) {
|
||||
width: 100%;
|
||||
max-width: var(--container-width);
|
||||
margin: 0 auto;
|
||||
@@ -30,9 +17,4 @@
|
||||
@include bp (sm) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper (inside and more spaced)
|
||||
.wrapper {
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user