Add World title on Homepage and fix some styling

- Fix photos collage positioning
- Remove Houses title centering

src/routes/index.svelte

@@ -27,9 +27,11 @@
 
 <main class="homepage">
     <section class="homepage__intro">
-        <h1 class="title-huge">Houses</h1>
+        <h1 style="display: none;">Houses Of The World</h1>
-
+        <p class="homepage__title--houses title-huge">Houses</p>
-        <p class="text-medium">{settings.description}</p>
+        <p class="homepage__description text-medium">
+            {settings.description}
+        </p>
 
         <Button text="Explore locations" url="{path}#locations">
             <IconEarth animate={true} />
@@ -71,6 +73,7 @@
 
     <section class="homepage__locations" id="locations">
         <InteractiveGlobe />
+        <p class="homepage__title--world title-huge">World</p>
 
         <Locations
             locations={location}

src/style/_typography.scss

@@ -8,6 +8,8 @@
     font-weight: 200;
     letter-spacing: -0.04em;
     line-height: 1;
+    user-select: none;
+    pointer-events: none;
 }
 
 // House Name

src/style/pages/_homepage.scss

@@ -1,5 +1,25 @@
 // Homepage
 .homepage {
+    // Site title
+    &__title {
+        &--houses {
+            margin: -20px 0 0;
+            color: $color-secondary;
+            text-align: center;
+
+            @include bp (sm) {
+                margin-top: -100px;
+            }
+        }
+        &--world {
+            color: $color-primary-tertiary20;
+            text-align: center;
+
+            @include bp (sm) {
+                margin-top: calc(-1 * clamp(120px, 10vw, 216px));
+            }
+        }
+    }
 
     // Intro Section
     &__intro {
@@ -9,18 +29,14 @@
         overflow: hidden;
         padding-bottom: clamp(250px, 27vw, 600px);
 
-        // Title
+        // Button
-        h1 {
+        .button {
-            color: $color-secondary;
+            box-shadow: 0 1px 1px rgba($color-shadow-brown, 0.05), 0 2px 2px rgba($color-shadow-brown, 0.05), 0 4px 4px rgba($color-shadow-brown, 0.05), 0 16px 16px rgba($color-shadow-brown, 0.05);
-            line-height: 1;
+            margin-bottom: 40px;
-            margin-top: -20px;
-
-            @include bp (sm) {
-                margin-top: -100px;
-            }
         }
+    }
         // Text
-        p {
+        &__description {
             max-width: 350px;
             margin: 100px auto 32px;
 
@@ -29,12 +45,6 @@
                 max-width: 524px;
             }
         }
-        // Button
-        .button {
-            box-shadow: 0 1px 1px rgba($color-shadow-brown, 0.05), 0 2px 2px rgba($color-shadow-brown, 0.05), 0 4px 4px rgba($color-shadow-brown, 0.05), 0 16px 16px rgba($color-shadow-brown, 0.05);
-            margin-bottom: 40px;
-        }
-    }
 
     // Photos Collage
     &__photos {
@@ -96,29 +106,29 @@
                 top: clamp(16px, 3vw, 48px);
             }
             &:nth-child(5) {
-                display: none;
                 --rotation: 10.5deg;
+                display: none;
                 z-index: 1;
                 grid-column-start: 24;
                 grid-row: 1;
                 top: clamp(24px, 8vw, 128px);
 
                 @include bp (sm) {
-                    display:block;
+                    display: block;
                 }
             }
 
             // Second row
             &:nth-child(6) {
-                display: none;
                 --rotation: -5.5deg;
+                display: none;
                 z-index: 10;
                 grid-column-start: 1;
                 grid-row: 2;
                 top: clamp(24px, 5.5vw, 132px);
 
                 @include bp (sm) {
-                    display:block
+                    display: block;
                 }
             }
             &:nth-child(7) {
@@ -126,10 +136,9 @@
                 grid-column-start: 5;
                 z-index: 9;
                 grid-row: 1;
-                top: clamp(24px, 5.5vw, 132px);
 
                 @include bp (sm) {
-                    display:block;
+                    display: block;
                     grid-row: 2;
                 }
             }
@@ -148,19 +157,19 @@
                 top: calc(-1 * clamp(20px, 3vw, 48px));
             }
             &:nth-child(10) {
-                display: none;
                 --rotation: 8deg;
+                display: none;
                 z-index: 3;
                 grid-column-start: 21;
                 grid-row: 2;
 
                 @include bp (sm) {
-                    display:block
+                    display: block;
                 }
             }
             &:nth-child(11) {
-                display: none;
                 --rotation: 5.5deg;
+                display: none;
                 z-index: 2;
                 grid-column-start: 25;
                 grid-row: 2;
@@ -168,7 +177,7 @@
                 margin-right: 0;
 
                 @include bp (sm) {
-                    display:block
+                    display: block;
                 }
             }
         }