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

[wip] ✨ Rework About page layout (desktop)

Browse Source
This commit is contained in:
Félix Péault
2022-09-08 23:57:04 +02:00
parent cc69978c47
commit 5ea7e26e20
3 changed files with 101 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/routes/about/+page.server.ts
View File

@@ -19,10 +19,11 @@ export const load: PageServerLoad = async () => {
about { about {
description description
intro_title
intro_heading
intro_text
intro_firstphoto { id, title } intro_firstphoto { id, title }
intro_firstphoto_caption intro_firstphoto_caption
intro_portraits { id, title }
intro_text
intro_firstlocation { intro_firstlocation {
slug slug
name name
@@ -30,12 +31,21 @@ export const load: PageServerLoad = async () => {
flag { id, title } flag { id, title }
slug slug
} }
illustration_desktop { id }
illustration_desktop_2x { id }
illustration_mobile { id }
} }
purpose_text creation_title
creation_heading
creation_text
creation_portrait { id, title }
creation_portrait_caption
present_image { id, title }
present_title
present_heading
present_text
present_conclusion
image_showcase { id, title }
process_title process_title
process_subtitle process_subtitle
@@ -51,7 +61,6 @@ export const load: PageServerLoad = async () => {
video_mp4 { id } video_mp4 { id }
video_webm { id } video_webm { id }
} }
process_intention
contact_title contact_title
contact_blocks contact_blocks

82
src/routes/about/+page.svelte
View File

@@ -35,14 +35,6 @@
? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34] ? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34]
: [1, 4, 5, 7, 11, 14, 17, 20, 24, 27, 30, 33, 34, 36, 40, 43] : [1, 4, 5, 7, 11, 14, 17, 20, 24, 27, 30, 33, 34, 36, 40, 43]
const introText = about.intro_text
.replace('<strong>',
`<a href="/${about.intro_firstlocation.country.slug}/${about.intro_firstlocation.slug}" data-sveltekit-noscroll data-sveltekit-prefetch>
<img src="${getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')}" width="32" height="32" alt="${about.intro_firstlocation.country.flag.title}">
<strong>
`)
.replace('</strong>', '</strong></a>')
onMount(() => { onMount(() => {
/** /**
@@ -133,11 +125,13 @@
<section class="about__introduction"> <section class="about__introduction">
<div class="container grid"> <div class="container grid">
<h2 class="title-small">Meet the makers</h2> <h2 class="title-small">{about.intro_title}</h2>
<p class="heading text-big">We are a French and Australian couple that found each other through our mutual <strong>passion for travel, photography and design</strong>.</p> <div class="heading text-big">
{@html about.intro_heading}
</div>
<div class="text text-small"> <div class="text text-small">
<p>With a strong desire to create, we’re award winning in our own fields with <a href="">Félix</a> as a Digital Designer and Art Director and <a href="">Shelby</a> as a Front-End Developer.</p> {@html about.intro_text}
</div> </div>
</div> </div>
</section> </section>
@@ -167,25 +161,28 @@
</figcaption> </figcaption>
</figure> </figure>
<h2 class="title-small">The creation of Houses Of</h2> <h2 class="title-small">{about.creation_title}</h2>
<p class="heading text-huge">Often separated on different sides of the world, we started a <strong>photography project</strong> of <strong>collecting charismatic houses</strong> from the places we visited together.</p> <div class="heading text-huge">
{@html about.creation_heading}
</div>
<div class="text text-small"> <div class="text text-small">
<p>A few years later and reunited in the South of France, this little collection has evolved into a rather large passion project along with the success of our web launch back in 2020.</p> {@html about.creation_text}
</div> </div>
<figure class="portrait-photo"> <figure class="portrait-photo">
<Image <Image
class="shadow-box-dark" class="shadow-box-dark"
id={about.intro_portraits.id} id={about.creation_portrait.id}
alt={about.intro_portraits.title} alt={about.creation_portrait.title}
sizeKey="photo-list" sizeKey="photo-list"
sizes={{ sizes={{
small: { width: 250 } small: { width: 400 },
medium: { width: 750 },
}} }}
ratio={1} ratio={1.425}
/> />
<figcaption class="text-info"> <figcaption class="text-info">
Whatever I want {about.creation_portrait_caption}
</figcaption> </figcaption>
</figure> </figure>
</div> </div>
@@ -195,38 +192,47 @@
<div class="container grid"> <div class="container grid">
<Image <Image
class="shadow-box-dark" class="shadow-box-dark"
id="bba45d9d-8380-45a1-99ee-eb52dde0a6fb" id={about.present_image.id}
alt={about.intro_portraits.title} alt={about.present_image.title}
sizeKey="photo-list" sizeKey="photo-list"
sizes={{ sizes={{
small: { width: 1060 } small: { width: 400 },
medium: { width: 600 },
large: { width: 800 },
}} }}
ratio={1.5} ratio={1.5}
/> />
<h2 class="title-small">Where are we now</h2> <h2 class="title-small">{about.present_title}</h2>
<div class="text text-small"> <div class="text text-small">
<p>Since then we've been travelling more and adding new locations to the Houses Of site, however we always wanted to create something more tangible for the travel and design lovers like us.</p> <p>{about.present_text}</p>
</div> </div>
<p class="heading text-big">We decided to use our expertise to create the Houses Of graphic posters, for those wanting to bring art into their homes, but are unsatisfied with typical tourism prints.</p> <div class="heading text-big">
<div class="text text-small"> {@html about.present_heading}
<p>We hope that you will join us on this journey and that our art can also spark memories in your own home.</p> </div>
<div class="conclusion text-small">
<p>{about.present_conclusion}</p>
</div> </div>
<Image
class="shadow-box-dark"
id="bba45d9d-8380-45a1-99ee-eb52dde0a6fb"
alt={about.intro_portraits.title}
sizeKey="photo-list"
sizes={{
small: { width: 1060 }
}}
ratio={1.5}
/>
</div> </div>
</section> </section>
{#if about.image_showcase}
<div class="about__showcase container grid">
<Image
id={about.image_showcase.id}
alt={about.image_showcase.title}
sizeKey="showcase"
sizes={{
small: { width: 400 },
medium: { width: 1000 },
large: { width: 1800 },
}}
ratio={1.2}
/>
</div>
{/if}
<section class="about__process"> <section class="about__process">
<div class="container grid"> <div class="container grid">
<aside> <aside>

62
src/style/pages/_about.scss
View File

@@ -27,7 +27,7 @@
max-width: 788px; max-width: 788px;
} }
strong { :global(strong) {
color: $color-secondary-light; color: $color-secondary-light;
font-weight: inherit; font-weight: inherit;
} }
@@ -43,8 +43,11 @@
align-self: baseline; align-self: baseline;
} }
a { :global(a) {
display: inline-block;
color: currentColor; color: currentColor;
text-decoration: none;
border-bottom: 1px solid rgba($color-tertiary, 0.3);
transition: color 0.3s; transition: color 0.3s;
&:hover { &:hover {
@@ -92,7 +95,7 @@
@include bp (sm) { @include bp (sm) {
grid-column: 8 / -2; grid-column: 8 / -2;
margin: -10vw 0 70px; margin: -10vw 0 clamp(48px, 7vw, 88px);
// margin: -10vw 0 clamp(80px, 10vw, 128px); // margin: -10vw 0 clamp(80px, 10vw, 128px);
} }
@@ -139,7 +142,7 @@
color: $color-primary-tertiary20; color: $color-primary-tertiary20;
margin-bottom: 112px; margin-bottom: 112px;
strong { :global(strong) {
color: $color-lilas-bright; color: $color-lilas-bright;
font-weight: inherit; font-weight: inherit;
} }
@@ -166,35 +169,26 @@
} }
} }
/* /*
** Present ** Present
*/ */
&__present { &__present {
background-color: $color-cream; background-color: $color-cream;
.text {
color: $color-gray;
}
// Poster image // Poster image
:global(picture) { :global(picture) {
height: auto; height: auto;
overflow: hidden;
border-radius: 12px;
grid-column: 3 / -6;
margin-top: -100px;
:global(img) { :global(img) {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
} }
&:first-of-type {
overflow: hidden;
border-radius: 12px;
grid-column: 3 /-6;
margin-top: -100px;
}
&:last-of-type {
grid-column: 1 / -1;
}
} }
h2 { h2 {
@@ -202,13 +196,18 @@
line-height: 1; line-height: 1;
margin-top: 88px; margin-top: 88px;
} }
:global(p) {
color: $color-text;
}
.text { .text {
&:first-of-type { @include bp (sm) {
grid-column: 3 / span 6; grid-column: 3 / span 6;
align-self: baseline; align-self: baseline;
margin-top: 24px; margin-top: 24px;
} }
&:last-of-type { }
.conclusion {
@include bp (sm) {
grid-column: 11 / span 8; grid-column: 11 / span 8;
margin: 96px 0 144px; margin: 96px 0 144px;
} }
@@ -216,12 +215,28 @@
.heading { .heading {
grid-column: 11 / -2; grid-column: 11 / -2;
color: $color-primary-tertiary20;
align-self: baseline; align-self: baseline;
:global(p) {
max-width: 800px;
color: $color-primary-tertiary20;
}
} }
} }
// Showcase image
&__showcase {
:global(picture) {
grid-column: 1 / -1;
}
:global(img) {
display: block;
width: 100%;
height: auto;
}
}
/* /*
** Process ** Process
@@ -328,6 +343,11 @@
&__photos { &__photos {
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: clamp(48px, 10vw, 80px);
@include bp (sm) {
margin-bottom: clamp(80px, 10vw, 128px);
}
// margin-top: -64px; // margin-top: -64px;
@include bp (sm) { @include bp (sm) {