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 {
description
intro_title
intro_heading
intro_text
intro_firstphoto { id, title }
intro_firstphoto_caption
intro_portraits { id, title }
intro_text
intro_firstlocation {
slug
name
@@ -30,12 +31,21 @@ export const load: PageServerLoad = async () => {
flag { id, title }
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_subtitle
@@ -51,7 +61,6 @@ export const load: PageServerLoad = async () => {
video_mp4 { id }
video_webm { id }
}
process_intention
contact_title
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]
: [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(() => {
/**
@@ -133,11 +125,13 @@
<section class="about__introduction">
<div class="container grid">
<h2 class="title-small">Meet the makers</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>
<h2 class="title-small">{about.intro_title}</h2>
<div class="heading text-big">
{@html about.intro_heading}
</div>
<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>
</section>
@@ -167,25 +161,28 @@
</figcaption>
</figure>
<h2 class="title-small">The creation of Houses Of</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>
<h2 class="title-small">{about.creation_title}</h2>
<div class="heading text-huge">
{@html about.creation_heading}
</div>
<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>
<figure class="portrait-photo">
<Image
class="shadow-box-dark"
id={about.intro_portraits.id}
alt={about.intro_portraits.title}
id={about.creation_portrait.id}
alt={about.creation_portrait.title}
sizeKey="photo-list"
sizes={{
small: { width: 250 }
small: { width: 400 },
medium: { width: 750 },
}}
ratio={1}
ratio={1.425}
/>
<figcaption class="text-info">
Whatever I want
{about.creation_portrait_caption}
</figcaption>
</figure>
</div>
@@ -195,38 +192,47 @@
<div class="container grid">
<Image
class="shadow-box-dark"
id="bba45d9d-8380-45a1-99ee-eb52dde0a6fb"
alt={about.intro_portraits.title}
id={about.present_image.id}
alt={about.present_image.title}
sizeKey="photo-list"
sizes={{
small: { width: 1060 }
small: { width: 400 },
medium: { width: 600 },
large: { width: 800 },
}}
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">
<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>
<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="text text-small">
<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 class="heading text-big">
{@html about.present_heading}
</div>
<div class="conclusion text-small">
<p>{about.present_conclusion}</p>
</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>
</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">
<div class="container grid">
<aside>