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

Location: Change markup of the place's name

Browse Source
This commit is contained in:
Félix Péault
2020-03-06 11:17:50 +01:00
parent ebafb359ae
commit 87d026c348
2 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/routes/location/[country]/[location].svelte
View File

@@ -104,9 +104,14 @@
<section class="place"> <section class="place">
<div class="place__title"> <div class="place__title">
<h1 class="title-location title-location--big"> <h1 class="title-location title-location--big" aria-label="Houses of {location.name}">
<span class="top">Houses <em>of</em></span> <span class="place__top anim-mask">
<span class="bottom">{location.name}</span> <span class="place__title_houses">Houses</span>
<em class="place__title_of">of</em>
</span>
<span class="place__title_bottom anim-mask">
<span class="place__title_name">{location.name}</span>
</span>
</h1> </h1>
<a href="/choose" class="button-control button-control--big button-control--dashed"> <a href="/choose" class="button-control button-control--big button-control--dashed">

15
src/style/pages/_place.scss
View File

@@ -8,6 +8,8 @@
// Title // Title
&__title { &__title {
position: relative;
z-index: 2;
padding: pxVW(400) 0 pxVW(400); padding: pxVW(400) 0 pxVW(400);
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -27,15 +29,16 @@
text-align: left; text-align: left;
pointer-events: none; pointer-events: none;
span { .anim-translate {
display: block; display: inline-block;
}
.bottom {
text-align: right;
margin-left: pxVW(128);
} }
} }
&_bottom {
text-align: right;
margin-left: pxVW(128);
}
// Switcher button // Switcher button
.button-control--dashed { .button-control--dashed {
z-index: 1; z-index: 1;