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

Merge branch 'v2' of https://git.server.flayks.com/cetrucflotte/housesof into v2

Browse Source
This commit is contained in:
Félix Péault
2021-10-12 22:41:59 +02:00
parent db8f984739 ef9bda3708
commit 2193d95c5c
13 changed files with 382 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/molecules/Heading.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts">
import SiteTitle from '$components/atoms/SiteTitle.svelte';
export let text: string
</script>
<section class="heading">
<SiteTitle variant="inline" />
<p class="text-medium">{text}</p>
</section>

1
src/components/organisms/Shop.svelte
View File

@@ -14,7 +14,6 @@
<div class="shop shadow-box-dark">
<div class="content">
<div class="shop__image">
<img src="/images/poster-display.jpg" alt="">
<Image id={shop.module_image.id} alt={shop.module_image.title} width={800} height={800} />
</div>

9
src/routes/locations.svelte
View File

@@ -6,7 +6,7 @@
import Locations from '$components/organisms/Locations.svelte'
import Shop from '$components/organisms/Shop.svelte'
import Newsletter from '$components/organisms/Newsletter.svelte'
import SiteTitle from '$components/atoms/SiteTitle.svelte'
import Heading from '$components/molecules/Heading.svelte'
export let photos: any
@@ -20,10 +20,9 @@
/>
<main class="explore">
<section class="explore__intro">
<SiteTitle variant="inline" />
<p class="text-medium">Explore the globe to discover unique locations across the world</p>
</section>
<Heading
text="Explore the globe to discover unique locations across the world"
/>
<section class="explore__locations" id="locations">
<InteractiveGlobe />

97
src/routes/subscribe.svelte
View File

@@ -1 +1,96 @@
<h1>Subscribe</h1>
<script lang="ts">
// Components
import Metas from '$components/Metas.svelte'
import Heading from '$components/molecules/Heading.svelte'
import Shop from '$components/organisms/Shop.svelte'
import Newsletter from '$components/organisms/Newsletter.svelte'
export let photos: any
</script>
<Metas
title="Subscribe"
description=""
image=""
/>
<main class="subscribe">
<Heading
text="If you wish to be pinged when new photos are added to and limited prints become available on our shop, sign up below."
/>
<section class="subscribe__issues">
<h2 class="title-small">Past Issues</h2>
<ul>
<li class="issue">
<a href="#">
<img src="/images/issue-1.jpg" alt="">
<dl>
<dt>Issue #3</dt>
<dd>
<p>Adding Occitanie region to the mix!</p>
<time>24/08/2020</time>
</dd>
</dl>
</a>
</li>
<li class="issue">
<a href="#">
<img src="/images/issue-1.jpg" alt="">
<dl>
<dt>Issue #3</dt>
<dd>
<p>Adding Occitanie region to the mix!</p>
<time>24/08/2020</time>
</dd>
</dl>
</a>
</li>
<li class="issue">
<a href="#">
<img src="/images/issue-1.jpg" alt="">
<dl>
<dt>Issue #3</dt>
<dd>
<p>Adding Occitanie region to the mix!</p>
<time>24/08/2020</time>
</dd>
</dl>
</a>
</li>
</ul>
</section>
<section class="grid-modules grid">
<div class="wrap">
<Shop />
<Newsletter />
</div>
</section>
</main>
<script context="module" lang="ts">
import { fetchAPI } from '$utils/api'
export async function load ({ page, fetch, session, stuff }) {
const res = await fetchAPI(`
query {
photo (limit: 11, sort: ["-date_created"]) {
image {
id
title
}
}
}
`)
const { data } = res
return {
props: {
photos: data.photo,
}
}
}
</script>

32
src/style/_typography.scss
View File

@@ -14,21 +14,29 @@
// House Name
.title-image {
font-size: rem(88px);
font-size: rem(40px);
font-family: $font-serif;
line-height: 1;
color: $color-secondary;
@include bp (sm) {
font-size: clamp(#{rem(40px)}, 7vw, #{rem(88px)});
}
}
// House Number
.title-index {
font-size: rem(280px);
font-size: rem(80px);
font-family: $font-serif;
letter-spacing: -0.05em;
font-weight: 200;
line-height: 1;
color: rgba($color-tertiary, 0.6);
@include bp (sm) {
font-size: clamp(#{rem(80px)}, 24vw, #{rem(280px)});
}
}
// Medium
@@ -46,10 +54,14 @@
// Small
.title-small {
color: $color-secondary;
font-size: rem(28px);
font-size: rem(24px);
font-weight: 400;
line-height: 1.5;
font-family: $font-serif;
@include bp (sm) {
font-size: rem(28px);
}
}
@@ -73,9 +85,12 @@
line-height: 1.4;
@include bp (sm) {
font-size: rem(28px);
font-size: rem(24px);
line-height: 1.5;
}
@include bp (md) {
font-size: rem(28px);
}
}
// Normal
@@ -94,8 +109,13 @@
// Photo date
.text-date {
font-size: rem(16px);
line-height: 1.4;
font-size: rem(14px);
line-height: 1.3;
@include bp (sm) {
font-size: rem(16px);
line-height: 1.4;
}
}
// Label

2
src/style/_variables.scss
View File

@@ -46,7 +46,7 @@ $font-serif: "Magnolia", #{$replacement-serif};
$base-width: 1600 !default;
// Grid
$cols-m: 12 !default;
$cols-m: 8 !default;
$cols-d: 24 !default;

27
src/style/molecules/_heading.scss Normal file
View File

@@ -0,0 +1,27 @@
.heading {
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 130px;
max-width: 600px;
}
}
}

36
src/style/molecules/_issue.scss Normal file
View File

@@ -0,0 +1,36 @@
.issue {
display: flex;
background-color: #fff;
border-radius: 6px;
a {
display: flex;
padding: 20px;
text-decoration: none;
}
// Image
img {
display: block;
width: 80px;
height: 56px;
margin-right: 16px;
}
// Title
dt {
color: $color-secondary;
font-size: rem(20px);
margin-bottom: 8px;
font-family: $font-serif;
font-weight: 400;
}
// Description
dd {
font-size: rem(16px);
color: $color-gray;
}
// Date
time {
opacity: 0.6;
font-size: rem(12px);
}
}

54
src/style/organisms/_house.scss
View File

@@ -1,22 +1,37 @@
.house {
--columns: 20;
grid-column-start: 3;
position: relative;
@include bp (sm) {
--columns: 20;
grid-column-start: 3;
}
a {
text-decoration: none;
}
// Information
&__info {
grid-column: 4 / span 14;
margin-bottom: 56px;
max-width: 800px;
grid-column: 2 / span var(--columns);
margin-bottom: 32px;
padding: 0 20px;
max-width: min(540px, 85vw);
@include bp (sm) {
grid-column: 4 / span 14;
margin-bottom: 56px;
padding: 0;
max-width: 800px;
}
time {
display: block;
margin-top: 24px;
margin-top: 16px;
color: $color-lightgray;
@include bp (sm) {
margin-top: 24px;
}
}
}
@@ -29,8 +44,11 @@
picture {
position: relative;
z-index: 3;
border-radius: 8px;
overflow: hidden;
@include bp (sm) {
border-radius: 8px;
}
}
img {
display: block;
@@ -42,12 +60,17 @@
// Photo number
&__index {
position: absolute;
z-index: 1;
bottom: -64px;
right: 20px;
text-align: right;
@include bp (sm) {
position: absolute;
z-index: 1;
left: 112.5%;
width: 400px;
top: 50%;
bottom: auto;
text-align: left;
transform: translate3d(-50%, -50%, 0);
}
@@ -57,13 +80,20 @@
&:nth-child(even) {
.house {
&__photo {
grid-column-start: 4;
@include bp (sm) {
grid-column-start: 4;
}
}
&__info {
margin-left: auto;
text-align: right;
@include bp (sm) {
margin-left: auto;
text-align: right;
}
}
&__index {
left: auto;
right: 20px;
@include bp (sm) {
right: auto;
left: -12%;

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

@@ -6,6 +6,7 @@
.location-page__intro {
position: relative;
background: $color-primary;
// padding-top: clamp(100px, 25vw, 400px);
@include bp (sm) {
padding-top: clamp(40px, 14vw, 320px);
@@ -16,21 +17,29 @@
// Houses Of Title
.title {
grid-column: 1 / span var(--columns);
position: relative;
z-index: 2;
display: flex;
flex-flow: row wrap;
align-items: baseline;
justify-content: flex-start;
max-width: clamp(300px, 80vw, 1120px);
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: rem(56px);
font-size: rem(52px);
text-align: center;
margin: min(360px, 60vw) auto;
@include bp (sm) {
display: flex;
flex-flow: row wrap;
align-items: baseline;
justify-content: flex-start;
max-width: clamp(300px, 80vw, 1120px);
margin: 0 auto;
font-size: rem(56px);
text-align: left;
}
strong {
display: block;
@@ -42,11 +51,22 @@
.housesof {
grid-column: span var(--columns);
display: flex;
align-items: baseline;
@include bp (sm) {
display: flex;
align-items: baseline;
}
span {
margin: 0 24px;
display: block;
font-size: rem(24px);
margin-top: 8px;
@include bp (sm) {
display: inline;
font-size: rem(56px);
margin: 0 24px;
}
}
}
.city {
@@ -58,25 +78,47 @@
// Description
&__description {
--columns: 19;
grid-column: 6 / span 19;
grid-column: span var(--columns);
position: relative;
z-index: 2;
margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px));
margin-bottom: -8px;
background-color: $color-tertiary;
color: $color-text;
border-radius: 8px 0 0 8px;
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));
}
@include bp (md) {
grid-column: 6 / span 19;
}
.wrap {
grid-column: 3 / span 13;
grid-column: 2 / span 6;
max-width: 800px;
padding: 128px 0;
padding: 50px 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: 40px 0 64px;
margin: 32px 0 40px;
color: $text-color;
line-height: 0.8;
@include bp (sm) {
margin: 40px 0 64px;
line-height: 1.3;
}
a {
color: $text-color;
@@ -97,6 +139,13 @@
.button {
margin-right: 16px;
margin-bottom: 16px;
font-size: rem(16px);
@include bp (sm) {
margin-bottom: 0;
font-size: rem(18px);
}
}
}
}
@@ -108,7 +157,7 @@
z-index: 1;
top: 0;
left: 50%;
width: clamp(320px, 100vw, 1920px);
width: clamp(320px, 100vw, 2560px);
height: 100%;
background: 0 0 var(--illus-mobile) no-repeat;
background-size: 100% auto;
@@ -126,25 +175,33 @@
// Houses
&__houses {
background-color: #fff;
padding-top: 240px;
padding-top: 80px;
@include bp (sm) {
padding-top: 240px;
}
}
// House
.house {
&:not(:last-child) {
margin-bottom: 120px;
margin-bottom: 86px;
@include bp (sm) {
margin-bottom: 120px;
}
}
}
// Next photos section
&__next {
margin-top: 80px;
padding: 64px 0 48px;
margin-top: 135px;
padding: 72px 0 56px;
background-color: $color-tertiary;
text-align: center;
@include bp (sm) {
margin-top: -120px;
margin-top: calc(-1 * clamp(64px, 8vw, 120px));
padding-top: 240px;
padding-bottom: 104px;
}
@@ -170,13 +227,17 @@
&__progress {
position: relative;
display: inline-block;
font-size: clamp(80px, 16vw, #{rem(160px)});
font-size: rem(88px);
color: rgba($color-text, 0.2);
font-family: $font-serif;
font-weight: 200;
line-height: 1;
letter-spacing: -0.05em;
@include bp (sm) {
font-size: clamp(80px, 16vw, #{rem(160px)});
}
span {
display: inline-block;
margin: 0 -10px;
@@ -216,4 +277,4 @@
font-size: rem(28px);
}
}
}
}

49
src/style/pages/_subscribe.scss Normal file
View File

@@ -0,0 +1,49 @@
// Subscribe Page
.subscribe {
// 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;
}
}
// Past Issues
&__issues {
margin: 64px auto 0;
padding: 0 20px;
@include bp (sm) {
max-width: 800px;
padding: 0;
margin-top: 0;
}
// Title
h2 {
text-align: center;
}
ul {
margin-top: 32px;
@include bp (sm) {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 16px;
}
}
li {
display: block;
margin-bottom: 16px;
@include bp (sm) {
margin-bottom: 0;
}
}
}
}

3
src/style/style.scss
View File

@@ -24,6 +24,7 @@
@import "pages/photos";
@import "pages/explore";
@import "pages/credits";
@import "pages/subscribe";
@import "pages/location";
// Modules
@@ -44,6 +45,8 @@
@import "molecules/photo-card";
@import "molecules/location";
@import "molecules/switcher";
@import "molecules/heading";
@import "molecules/issue";
// Organisms
@import "organisms/locations";