From 87d026c348c3d984918052f7cfdf67a130a28ce2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 6 Mar 2020 11:17:50 +0100
Subject: [PATCH] Location: Change markup of the place's name

---
 src/routes/location/[country]/[location].svelte | 11 ++++++++---
 src/style/pages/_place.scss                     | 15 +++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/routes/location/[country]/[location].svelte b/src/routes/location/[country]/[location].svelte
index 4371af8..ee3e5a0 100644
--- a/src/routes/location/[country]/[location].svelte
+++ b/src/routes/location/[country]/[location].svelte
@@ -104,9 +104,14 @@
 
 <section class="place">
     <div class="place__title">
-        <h1 class="title-location title-location--big">
-            <span class="top">Houses <em>of</em></span>
-            <span class="bottom">{location.name}</span>
+        <h1 class="title-location title-location--big" aria-label="Houses of {location.name}">
+            <span class="place__top anim-mask">
+                <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>
 
         <a href="/choose" class="button-control button-control--big button-control--dashed">
diff --git a/src/style/pages/_place.scss b/src/style/pages/_place.scss
index ac8b85e..cbc5ab6 100644
--- a/src/style/pages/_place.scss
+++ b/src/style/pages/_place.scss
@@ -8,6 +8,8 @@
 
     // Title
     &__title {
+        position: relative;
+        z-index: 2;
         padding: pxVW(400) 0 pxVW(400);
         display: flex;
         justify-content: center;
@@ -27,15 +29,16 @@
             text-align: left;
             pointer-events: none;
 
-            span {
-                display: block;
-            }
-            .bottom {
-                text-align: right;
-                margin-left: pxVW(128);
+            .anim-translate {
+                display: inline-block;
             }
         }
 
+        &_bottom {
+            text-align: right;
+            margin-left: pxVW(128);
+        }
+
         // Switcher button
         .button-control--dashed {
             z-index: 1;