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)
const { params } = $page
const hasIllustration = location.illustration_desktop && location.illustration_desktop_2x && location.illustration_mobile
let introEl: HTMLElement
let photosListEl: HTMLElement
@@ -39,6 +38,7 @@
$: latestPhoto = photos[0]
$: currentPhotosAmount = photos.length
$: ended = currentPhotosAmount === totalPhotos
$: hasIllustration = location.illustration_desktop && location.illustration_desktop_2x && location.illustration_mobile
/**
@@ -197,7 +197,7 @@
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<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">
<strong class="word">Houses</strong>
<span class="of">of</span>
@@ -249,7 +249,7 @@
</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;">
<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')}>

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

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