flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

🔥 Huge style refactoring by using SvelteKit built-in style tag

Browse Source 
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:
Félix Péault
2022-06-22 23:25:08 +02:00
parent 4f81640b61
commit cdabe6935b
89 changed files with 1779 additions and 1735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/atoms/Badge.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/atoms/badge";
</style>
<script lang="ts">
export let text: string
export let size: string = 'small'

4
src/components/atoms/BoxCTA.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/atoms/box-cta";
</style>
<script lang="ts">
import Icon from '$components/atoms/Icon.svelte'

4
src/components/atoms/Button.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/atoms/button";
</style>
<script lang="ts">
import SplitText from '$components/SplitText.svelte'

4
src/components/atoms/ButtonCart.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/atoms/button-cart";
</style>
<script lang="ts">
import { scale } from 'svelte/transition'
import { quartOut } from 'svelte/easing'

4
src/components/atoms/ButtonCircle.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/atoms/button-circle";
</style>
<script lang="ts">
export let tag: string = 'button'
export let url: string = undefined

4
src/components/atoms/DiscoverText.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/atoms/discover";
</style>
<script lang="ts">
import { getContext } from 'svelte'

4
src/components/atoms/IconArrow.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/atoms/arrow";
</style>
<script lang="ts">
export let color: string = undefined
export let flip: boolean = false

8
src/components/atoms/IconEarth.svelte
View File

@@ -1,3 +1,11 @@
<style lang="scss">
svg {
width: 24px;
height: 24px;
color: $color-gray;
}
</style>
<script lang="ts">
export let animate: boolean = false

8
src/components/atoms/ScrollingTitle.svelte
View File

@@ -1,3 +1,11 @@
<style lang="scss">
:global(.scrolling-title) {
transform: translate3d(var(--parallax-x), 0, 0);
transition: transform 1.2s var(--ease-quart);
will-change: transform;
}
</style>
<script lang="ts">
import { map } from '$utils/functions'
import { reveal, fly } from '$animations/index'

4
src/components/atoms/SiteTitle.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/atoms/site-title";
</style>
<script lang="ts">
import SplitText from '$components/SplitText.svelte'
import { reveal, fly } from '$animations/index'

4
src/components/layouts/PosterLayout.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/layouts/poster";
</style>
<script lang="ts">
import { cartId } from '$utils/stores/shop'
import { addToCart } from '$utils/functions/shop'

4
src/components/molecules/CartItem.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/molecules/cart-item";
</style>
<script lang="ts">
import { createEventDispatcher } from 'svelte'
// Components

4
src/components/molecules/EmailForm.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/molecules/newsletter-form";
</style>
<script lang="ts">
import { getContext } from 'svelte'
// Components

4
src/components/molecules/Heading.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/molecules/heading";
</style>
<script lang="ts">
import SiteTitle from '$components/atoms/SiteTitle.svelte'

4
src/components/molecules/House.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/molecules/house";
</style>
<script lang="ts">
import dayjs from 'dayjs'
// Components

8
src/components/molecules/Location.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/molecules/location";
</style>
<script lang="ts">
import { getContext } from 'svelte'
import { spring } from 'svelte/motion'
@@ -66,7 +70,7 @@
tabindex="0"
>
<Image
class="location__flag"
class="flag"
id={location.country.flag.id}
sizeKey="square-small"
width={32} height={32}
@@ -92,7 +96,7 @@
{#each location.photos as { image }, index}
{#if image}
<Image
class={index === photoIndex ? 'is-visible' : null}
class={`location__photo ${index === photoIndex ? 'is-visible' : ''}`}
id={image.id}
sizeKey="photo-thumbnail"
width={340} height={226}

4
src/components/molecules/NotificationCart.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/molecules/notification-cart";
</style>
<script lang="ts">
import { fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing'

23
src/components/molecules/Pagination.svelte Normal file
View File

@@ -0,0 +1,23 @@
<style lang="scss">
@import "../../style/molecules/pagination";
</style>
<script lang="ts">
export let ended: boolean = false
export let current: number
export let total: number
</script>
<div class="pagination" role="button" tabindex="0"
disabled={ended ? ended : undefined}
on:click
on:keydown
>
<div class="pagination__progress">
<span class="current">{current}</span>
<span>/</span>
<span class="total">{total}</span>
<slot />
</div>
</div>

4
src/components/molecules/PhotoCard.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/molecules/photo-card";
</style>
<script lang="ts">
import { createEventDispatcher } from 'svelte'
import Image from '$components/atoms/Image.svelte'

4
src/components/molecules/PostCard.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/organisms/postcard";
</style>
<script lang="ts">
import Image from '$components/atoms/Image.svelte'

4
src/components/molecules/Poster.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/molecules/poster";
</style>
<script lang="ts">
import { cartId } from '$utils/stores/shop'
import { addToCart } from '$utils/functions/shop'

4
src/components/molecules/ShopLocationSwitcher.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/molecules/shop-locationswitcher";
</style>
<script lang="ts">
import { goto } from '$app/navigation'
import { getContext } from 'svelte'

4
src/components/molecules/Switcher.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/molecules/switcher";
</style>
<script lang="ts">
import { page } from '$app/stores'
import { getContext } from 'svelte'

4
src/components/organisms/Carousel.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/organisms/carousel";
</style>
<script lang="ts">
import { onMount } from 'svelte'
import { writable } from 'svelte/store'

4
src/components/organisms/Cart.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/organisms/cart";
</style>
<script lang="ts">
import { onMount } from 'svelte'
import { fade, fly } from 'svelte/transition'

4
src/components/organisms/Collage.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/organisms/collage";
</style>
<script lang="ts">
import PhotoCard from '$components/molecules/PhotoCard.svelte'

4
src/components/organisms/Footer.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/organisms/footer";
</style>
<script lang="ts">
import { getContext } from 'svelte'
// Components

6
src/components/organisms/InteractiveGlobe.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/modules/globe";
</style>
<script lang="ts">
import { onMount, onDestroy, getContext } from 'svelte'
import { getPosition, getRandomItem } from '$utils/functions'
@@ -123,7 +127,7 @@
<section id="globe">
{#if type === 'cropped'}
<div class="globe--cropped">
<div class="globe-cropped">
<div class="globe" bind:this={globeEl} />
</div>
{:else}

20
src/components/organisms/ListCTAs.svelte Normal file
View File

@@ -0,0 +1,20 @@
<style lang="scss">
.list-cta {
@include bp (sm) {
display: flex;
justify-content: center;
}
& > :global(*) {
margin: 20px auto 0;
@include bp (sm) {
margin: 0 16px;
}
}
}
</style>
<ul class="list-cta">
<slot />
</ul>

4
src/components/organisms/Locations.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/organisms/locations";
</style>
<script lang="ts">
import { getContext } from 'svelte'
import { flip } from 'svelte/animate'

4
src/components/organisms/NewsletterModule.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/organisms/newsletter";
</style>
<script lang="ts">
import { getContext } from 'svelte'
// Components

4
src/components/organisms/PostersGrid.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/pages/shop/posters";
</style>
<script lang="ts">
import { getContext, onMount } from 'svelte'
import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel'

4
src/components/organisms/ShopHeader.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/pages/shop/intro";
</style>
<script lang="ts">
import { getContext, onMount } from 'svelte'
import anime, { type AnimeTimelineInstance } from 'animejs'

4
src/components/organisms/ShopModule.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/organisms/shop";
</style>
<script lang="ts">
import { getContext, onMount } from 'svelte'
// Components

44
src/routes/[country]/[location]/[photo].svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../../style/pages/viewer";
</style>
<script lang="ts">
import { browser } from '$app/env'
import { page } from '$app/stores'
@@ -223,24 +227,24 @@
autoplay: false,
})
anime.set('.viewer__picture', {
anime.set('.photo-page__picture', {
opacity: 0,
})
anime.set('.viewer__picture.is-1', {
anime.set('.photo-page__picture.is-1', {
translateY: 24,
})
// Photos
timeline.add({
targets: '.viewer__picture.is-1',
targets: '.photo-page__picture.is-1',
opacity: 1,
translateY: 0,
duration: 900,
}, 250)
timeline.add({
targets: '.viewer__picture:not(.is-1)',
targets: '.photo-page__picture:not(.is-1)',
opacity: 1,
translateX (element: HTMLElement, index: number) {
translateX (element: HTMLElement) {
const x = getComputedStyle(element).getPropertyValue('--offset-x').trim()
return [`-${x}`, 0]
},
@@ -249,7 +253,7 @@
// Prev/Next buttons
timeline.add({
targets: '.viewer__controls button',
targets: '.photo-page__controls button',
translateX (item: HTMLElement) {
let direction = item.classList.contains('prev') ? -1 : 1
return [16 * direction, 0]
@@ -260,25 +264,25 @@
// Infos
timeline.add({
targets: '.viewer__info > *',
targets: '.photo-page__info > *',
translateY: [24, 0],
opacity: [0, 1],
delay: anime.stagger(200)
}, 400)
anime.set('.viewer__index', {
anime.set('.photo-page__index', {
opacity: 0
})
// Index
timeline.add({
targets: '.viewer__index',
targets: '.photo-page__index',
opacity: 1,
duration: 900,
}, 600)
// Fly each number
timeline.add({
targets: '.viewer__index .char',
targets: '.photo-page__index .char',
translateY: ['100%', 0],
delay: anime.stagger(200),
duration: 1000,
@@ -303,25 +307,25 @@
{/if}
<PageTransition name="viewer">
<PageTransition name="photo-page">
<div class="container grid">
<p class="viewer__notice text-label">Tap for fullscreen</p>
<p class="photo-page__notice text-label">Tap for fullscreen</p>
<ButtonCircle
tag="a"
url={previousUrl}
color="purple"
class="viewer__close shadow-box-dark"
class="close shadow-box-dark"
>
<svg width="12" height="12">
<use xlink:href="#cross">
</svg>
</ButtonCircle>
<div class="viewer__carousel">
<div class="viewer__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
<div class="photo-page__carousel">
<div class="photo-page__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
{#each visiblePhotos as { id, image, title }, index (id)}
<div class="viewer__picture is-{currentIndex === 0 ? index + 1 : index}">
<div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
<Image
class="photo {image.width / image.height < 1.475 ? 'not-landscape' : ''}"
id={image.id}
@@ -337,7 +341,7 @@
</div>
{/each}
<div class="viewer__controls">
<div class="photo-page__controls">
<ButtonCircle class="prev shadow-box-dark" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
<IconArrow color="pink" flip={true} />
</ButtonCircle>
@@ -347,12 +351,12 @@
</div>
<div class="viewer__index title-index">
<div class="photo-page__index title-index">
<SplitText text="{(currentPhotoIndex < 10) ? '0' : ''}{currentPhotoIndex}" mode="chars" />
</div>
</div>
<div class="viewer__info">
<div class="photo-page__info">
<h1 class="title-medium">{currentPhoto.title}</h1>
<div class="detail text-info">
@@ -376,7 +380,7 @@
</div>
{#if isFullscreen}
<div class="viewer__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
<div class="photo-page__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
in:fade={{ easing: quartOut, duration: 1000 }}
out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
>

33
src/routes/[country]/[location]/index.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../../style/pages/location";
</style>
<script lang="ts">
import { navigating, page } from '$app/stores'
import { onMount } from 'svelte'
@@ -14,6 +18,7 @@
import Button from '$components/atoms/Button.svelte'
import IconEarth from '$components/atoms/IconEarth.svelte'
import House from '$components/molecules/House.svelte'
import Pagination from '$components/molecules/Pagination.svelte'
import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
export let location: any
@@ -279,23 +284,19 @@
<section class="location-page__next">
<div class="container">
<div class="pagination" role="button"
on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}
<Pagination
ended={ended}
current={currentPhotosAmount}
total={totalPhotos}
on:click={!ended && loadMorePhotos}
on:keydown={({ key, target }) => key === 'Enter' && target.click()}
tabindex="0"
>
<div class="pagination__progress">
<span class="current">{currentPhotosAmount}</span>
<span>/</span>
<span class="total">{totalPhotos}</span>
{#if !ended}
<p class="pagination__more">See more photos</p>
{:else}
<p class="pagination__message">You've seen it all!</p>
{/if}
</div>
</div>
>
{#if !ended}
<p class="more">See more photos</p>
{:else}
<p class="message">You've seen it all!</p>
{/if}
</Pagination>
{#if ended}
<NewsletterModule theme="light" />

9
src/routes/__error.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../style/pages/shop";
</style>
<script lang="ts">
import { getContext } from 'svelte'
// Components
@@ -7,6 +11,7 @@
import BoxCTA from '$components/atoms/BoxCTA.svelte'
import Heading from '$components/molecules/Heading.svelte'
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
import ListCTAs from '$components/organisms/ListCTAs.svelte'
import Locations from '$components/organisms/Locations.svelte'
import ShopModule from '$components/organisms/ShopModule.svelte'
import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
@@ -37,7 +42,7 @@
text="{errors[status].message} {defaultMessage}"
/>
<div class="list-cta">
<ListCTAs>
<BoxCTA
url="{$page.url.pathname}#locations"
icon="globe"
@@ -56,7 +61,7 @@
label="Shop our products"
alt="Shopping bag"
/>
</div>
</ListCTAs>
</div>
<InteractiveGlobe />

3
src/routes/__layout.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import '../style/style.scss'
import '../style/global.scss'
import { navigating, page } from '$app/stores'
import { beforeNavigate } from '$app/navigation'
import { onMount, setContext } from 'svelte'

4
src/routes/credits.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../style/pages/credits";
</style>
<script lang="ts">
import { onMount } from 'svelte'
import anime, { type AnimeTimelineInstance } from 'animejs'

55
src/routes/index.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../style/pages/homepage";
</style>
<script lang="ts">
import { page } from '$app/stores'
import { getContext, onMount } from 'svelte'
@@ -17,6 +21,7 @@
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
import Collage from '$components/organisms/Collage.svelte'
import Locations from '$components/organisms/Locations.svelte'
import ListCTAs from '$components/organisms/ListCTAs.svelte'
import ShopModule from '$components/organisms/ShopModule.svelte'
import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
@@ -77,7 +82,7 @@
>
<ScrollingTitle
tag="h1"
class="homepage__title--houses"
class="title-houses"
label="Houses of the World"
offsetStart={-300}
offsetEnd={400}
@@ -103,32 +108,38 @@
<div class="homepage__ctas" id="ctas">
<DiscoverText />
<div class="list-cta">
<BoxCTA
url="{$page.url.pathname}#locations"
icon="globe"
label="Discover locations"
alt="Globe"
/>
<BoxCTA
url="/photos"
icon="photos"
label="Browse all photos"
alt="Photos"
/>
<BoxCTA
url="/shop"
icon="bag"
label="Shop our products"
alt="Shopping bag"
/>
</div>
<ListCTAs>
<li>
<BoxCTA
url="{$page.url.pathname}#locations"
icon="globe"
label="Discover locations"
alt="Globe"
/>
</li>
<li>
<BoxCTA
url="/photos"
icon="photos"
label="Browse all photos"
alt="Photos"
/>
</li>
<li>
<BoxCTA
url="/shop"
icon="bag"
label="Shop our products"
alt="Shopping bag"
/>
</li>
</ListCTAs>
</div>
<section class="homepage__locations">
<InteractiveGlobe />
<ScrollingTitle tag="p" class="homepage__title--world mask">
<ScrollingTitle tag="p" class="title-world mask">
<SplitText text="World" mode="chars" />
</ScrollingTitle>

4
src/routes/locations.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../style/pages/explore";
</style>
<script lang="ts">
import { getContext } from 'svelte'
// Components

26
src/routes/photos.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../style/pages/photos";
</style>
<script lang="ts">
import { page } from '$app/stores'
import { goto } from '$app/navigation'
@@ -290,14 +294,14 @@
// Reveal text
timeline.add({
targets: '.photos__intro .discover',
targets: '.photos-page__intro .discover',
translateY: [16, 0],
opacity: [0, 1],
}, 900)
// Filters
timeline.add({
targets: '.photos__intro .filter',
targets: '.photos-page__intro .filter',
translateY: [16, 0],
opacity: [0, 1],
complete ({ animatables }) {
@@ -332,8 +336,8 @@
/>
<PageTransition name="photos">
<section class="photos__intro"
<PageTransition name="photos-page">
<section class="photos-page__intro"
class:is-passed={scrolledPastIntro}
>
<ScrollingTitle tag="h1" text="Houses">
@@ -342,14 +346,14 @@
<DiscoverText />
<div class="filter"
<div class="filters"
class:is-over={filtersOver}
class:is-transitioning={filtersTransitioning}
class:is-visible={filtersVisible}
>
<span class="text-label filter__label">Filter photos</span>
<span class="text-label filters__label">Filter photos</span>
<div class="filter__bar">
<div class="filters__bar">
<ul>
<li>
<Select
@@ -410,7 +414,7 @@
</ul>
</div>
<div class="filter__actions">
<div class="filters__actions">
{#if filtered}
<button class="reset button-link"
on:click={resetFiltered}
@@ -423,10 +427,10 @@
</div>
</section>
<section class="photos__content" style="--margin-sides: {sideMargins}px;" bind:this={photosContentEl}>
<section class="photos-page__content" style="--margin-sides: {sideMargins}px;" bind:this={photosContentEl}>
<div class="grid container">
{#if photos}
<div class="photos__grid" bind:this={photosGridEl}>
<div class="photos-page__grid" bind:this={photosGridEl}>
{#each photos as { id, image, slug, location, title, city }, index (id)}
<figure class="photo shadow-photo">
<a href="/{location.country.slug}/{location.slug}/{slug}" sveltekit:prefetch sveltekit:noscroll tabindex="0">
@@ -476,7 +480,7 @@
</div>
</div>
{:else if !filteredCountryExists}
<div class="photos__message">
<div class="photos-page__message">
<p>
<strong>{$page.url.searchParams.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())}</strong> is not available… yet 👀
</p>

4
src/routes/shop/__layout.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../../style/pages/shop";
</style>
<script lang="ts">
import { setContext } from 'svelte'
import { cartNotifications } from '$utils/stores/shop'

4
src/routes/subscribe.svelte
View File

@@ -1,3 +1,7 @@
<style lang="scss">
@import "../style/pages/subscribe";
</style>
<script lang="ts">
import { onMount } from 'svelte'
import dayjs from 'dayjs'

14
src/style/_animations.scss
View File

@@ -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
*/

2
src/style/_base.scss
View File

@@ -52,7 +52,7 @@ button {
border: none;
cursor: pointer;
&[disabled] {
&:global([disabled]) {
cursor: not-allowed;
}
}

4
src/style/atoms/_box-cta.scss
View File

@@ -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%;

4
src/style/atoms/_button-cart.scss
View File

@@ -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);

10
src/style/atoms/_button-circle.scss
View File

@@ -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;

10
src/style/atoms/_button.scss
View File

@@ -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;
}

8
src/style/atoms/_icon.scss
View File

@@ -1,8 +0,0 @@
.icon {
// Earth icon
&-earth {
width: 24px;
height: 24px;
color: $color-gray;
}
}

5
src/style/atoms/_scrolling-title.scss
View File

@@ -1,5 +0,0 @@
.scrolling-title {
transform: translate3d(var(--parallax-x), 0, 0);
transition: transform 1.2s var(--ease-quart);
will-change: transform;
}

14
src/style/atoms/_site-title.scss
View File

@@ -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
View 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
View File

@@ -0,0 +1,4 @@
// Tools
@import "variables";
@import "tools/mixins";
@import "tools/functions";

73
src/style/layouts/_poster.scss
View File

@@ -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;
}
}

288
src/style/modules/_globe.scss
View File

@@ -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);
}
}

10
src/style/molecules/_cart-item.scss
View File

@@ -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;

5
src/style/molecules/_heading.scss
View File

@@ -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;

40
src/style/molecules/_house.scss
View File

@@ -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);
}
}
}

2
src/style/molecules/_issue.scss
View File

@@ -12,7 +12,7 @@
text-decoration: none;
}
// Image
img {
:global(img) {
$shadow-color: rgba(#936B47, 0.06);
display: block;
width: 80px;

14
src/style/molecules/_list-cta.scss
View File

@@ -1,14 +0,0 @@
.list-cta {
@include bp (sm) {
display: flex;
justify-content: center;
}
& > * {
margin: 20px auto 0;
@include bp (sm) {
margin: 0 16px;
}
}
}

59
src/style/molecules/_location.scss
View File

@@ -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;

13
src/style/molecules/_newsletter-form.scss
View File

@@ -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
View 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);
}
}
}

28
src/style/molecules/_photo-card.scss
View File

@@ -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;
}
}

6
src/style/molecules/_poster.scss
View File

@@ -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;

2
src/style/molecules/_switcher.scss
View File

@@ -51,7 +51,7 @@
background: rgba($color-tertiary, 0.2);
}
}
.icon {
:global(.icon) {
display: block;
width: 32px;
height: 32px;

4
src/style/organisms/_carousel.scss
View File

@@ -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%;

31
src/style/organisms/_cart.scss
View File

@@ -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);
}
}

15
src/style/organisms/_collage.scss
View File

@@ -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;
}
}
}

19
src/style/organisms/_footer.scss
View File

@@ -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;

3
src/style/organisms/_locations.scss
View File

@@ -83,7 +83,8 @@
margin-bottom: 24px;
}
@include bp (sd) {
margin: 0 22px 56px;
margin-left: 22px;
margin-right: 22px;
}
}
}

22
src/style/organisms/_newsletter.scss
View File

@@ -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;
}
}

8
src/style/modules/_postcard.scss → src/style/organisms/_postcard.scss
View File

@@ -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;
}

20
src/style/organisms/_shop.scss
View File

@@ -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;
}
}

14
src/style/pages/_credits.scss
View File

@@ -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;
}
}

54
src/style/pages/_explore.scss
View File

@@ -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 {
// }

88
src/style/pages/_homepage.scss
View File

@@ -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;
}
}
}
}

464
src/style/pages/_location.scss
View File

@@ -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;
// }
// }
// }
}

613
src/style/pages/_photos.scss
View File

@@ -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;
}
}
}
}

125
src/style/pages/_shop.scss
View File

@@ -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;
}

66
src/style/pages/_subscribe.scss
View File

@@ -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";

710
src/style/pages/_viewer.scss
View File

@@ -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;
}

23
src/style/pages/shop/_intro.scss
View File

@@ -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;
}
}
}

28
src/style/pages/shop/_posters.scss
View File

@@ -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;
}
}
}

79
src/style/style.scss
View File

@@ -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";

24
src/style/tools/_helpers.scss
View File

@@ -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 {
}
}