Create Location page

src/routes/[country]/[location]/index.svelte

@@ -11,7 +11,17 @@
 </script>
 
 <main class="location">
-    <h1>Hello {data.name}</h1>
+    <h1 class="location__title">
+        <span class="housesof">
+            <strong>Houses</strong>
+            <span>of</span>
+        </span>
+        <strong class="city">
+            <!-- {data.name} -->
+            Melbourne
+        </strong>
+    </h1>
+
     <div class="location__description" bind:this={descriptionEl}>
         {@html data.description}
     </div>

src/style/pages/_location.scss

@@ -0,0 +1,38 @@
+// Location Page
+.location {
+    // Houses Of Title
+    &__title {
+        max-width: 1164px;
+        margin: 0 auto;
+        padding: 0 32px;
+        font-family: $font-serif;
+        line-height: 1;
+        text-transform: uppercase;
+        color: $color-lightpurple;
+        font-size: rem(56px);
+
+        strong {
+            display: block;
+            font-size: clamp(48px, 16vw, 160px);
+            color: $color-secondary;
+            font-weight: 300;
+            text-transform: none;
+        }
+
+        .housesof {
+            grid-column: span var(--columns);
+            display: flex;
+            align-items: baseline;
+            // margin-left: -10vw;
+
+            span {
+                margin-left: 24px;
+            }
+        }
+        .city {
+            grid-row: 2;
+            // grid-column: 4 / span 13;
+            text-align: center;
+        }
+    }
+}

src/style/style.scss

@@ -24,6 +24,7 @@
 @import "pages/photos";
 @import "pages/explore";
 @import "pages/credits";
+@import "pages/location";
 
 // Modules
 @import "modules/globe";