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

Center Location name for now

Browse Source
This commit is contained in:
Félix Péault
2021-11-25 23:30:59 +01:00
parent 4a6e0d3758
commit 305272ea7c
2 changed files with 13 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,7 +24,6 @@
dayjs.extend(relativeTime) dayjs.extend(relativeTime)
const { params } = $page const { params } = $page
const hasIllustration = location.illustration_desktop && location.illustration_desktop_2x && location.illustration_mobile
let introEl: HTMLElement let introEl: HTMLElement
let photosListEl: HTMLElement let photosListEl: HTMLElement
@@ -39,6 +38,7 @@
$: latestPhoto = photos[0] $: latestPhoto = photos[0]
$: currentPhotosAmount = photos.length $: currentPhotosAmount = photos.length
$: ended = currentPhotosAmount === totalPhotos $: ended = currentPhotosAmount === totalPhotos
$: hasIllustration = location.illustration_desktop && location.illustration_desktop_2x && location.illustration_mobile
/** /**
@@ -197,7 +197,7 @@
out:fade={{ duration: DURATION.PAGE_OUT }} out:fade={{ duration: DURATION.PAGE_OUT }}
> >
<section class="location-page__intro grid" bind:this={introEl}> <section class="location-page__intro grid" bind:this={introEl}>
<h1 class="title"> <h1 class="title" class:is-short={location.name.length <= 4}>
<span class="housesof mask"> <span class="housesof mask">
<strong class="word">Houses</strong> <strong class="word">Houses</strong>
<span class="of">of</span> <span class="of">of</span>
@@ -249,7 +249,7 @@
</div> </div>
</div> </div>
{#if location.illustration_mobile && location.illustration_desktop && location.illustration_desktop_2x} {#if hasIllustration}
<picture class="location-page__illustration" style="--parallax-y: {illustrationOffsetY}px;"> <picture class="location-page__illustration" style="--parallax-y: {illustrationOffsetY}px;">
<source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}> <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
<source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}> <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>

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

@@ -25,7 +25,7 @@
line-height: 1; line-height: 1;
text-transform: uppercase; text-transform: uppercase;
color: $color-lightpurple; color: $color-lightpurple;
font-size: rem(52px); font-size: clamp(48px, 12vw, 160px);
text-align: center; text-align: center;
margin: min(360px, 60vw) auto; margin: min(360px, 60vw) auto;
@@ -33,16 +33,14 @@
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-items: baseline; align-items: baseline;
justify-content: flex-start; justify-content: center;
max-width: clamp(300px, 80vw, 1120px); max-width: clamp(300px, 80vw, 1120px);
margin: 0 auto; margin: 0 auto;
font-size: rem(56px); padding: 0;
text-align: left;
} }
strong { strong {
display: block; display: block;
font-size: clamp(48px, 12vw, 160px);
color: $color-secondary; color: $color-secondary;
font-weight: 300; font-weight: 300;
text-transform: none; text-transform: none;
@@ -54,27 +52,28 @@
@include bp (sm) { @include bp (sm) {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
// margin-right: auto;
// margin-left: -15vw;
} }
span { span {
display: block; display: block;
font-size: rem(24px); font-size: 0.35em;
margin-top: 8px; margin-top: 8px;
@include bp (sm) { @include bp (sm) {
display: inline; display: inline;
font-size: rem(56px);
margin: 0 24px; margin: 0 24px;
} }
} }
} }
.city { .city {
text-align: center; text-align: center;
margin-left: auto;
@include bp (md) { @include bp (sm) {
margin-right: auto; // margin-left: 15vw;
padding-left: min(400px, 16vw); // width: 80%;
// padding-left: min(400px, 16vw);
} }
} }
} }