WIP React > Svelte

Put most of the developed design into Svelte

src/style/_base.scss

@@ -1,34 +1,39 @@
 html {
-    font: #{$base-font-size}/24px "$font-text";
+    font: #{$base-font-size} $font-sans;
     color: $color-text;
 }
 body {
     @include font-smooth;
-    background: #fff;
+    background: $color-primary;
     cursor: default;
+    overflow-x: hidden;
 }
 *, *:before, *:after {
     box-sizing: border-box;
 }
 strong {
-    font-family: "$font-bold";
     font-weight: normal;
 }
 em {
-    font-family: "$font-text_it";
     font-style: normal;
 }
-figure, p, dl, dt, dd, ul, li {
+figure, p, dl, dt, dd, ul, ol, li {
     margin: 0;
     padding: 0;
 }
 figure img {
     display: block;
 }
+button {
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+}
 
 // Selection
-::selection { color: #fff; background: $color-primary; }
-::-moz-selection { color: #fff; background: $color-primary; }
+::selection { color: #fff; background: $color-secondary; }
+::-moz-selection { color: #fff; background: $color-secondary; }
 
 // Images glitches fix
 // img {backface-visibility: hidden;}
@@ -42,3 +47,103 @@ figure img {
     font-weight: normal;
     font-style: normal;
 }
+
+// Title: Massive
+.title-massive {
+    font-size: 50.25vw;
+    letter-spacing: -2vw;
+    font-family: $font-serif-extra;
+    color: $color-secondary;
+    line-height: 1;
+}
+
+// Title: Locations
+.title-location {
+    font-size: rem(68px);
+    font-family: $font-serif;
+    color: $color-secondary;
+    line-height: 1;
+    text-align: center;
+
+    @include breakpoint (sm) {
+        font-size: rem(96px);
+    }
+
+    em {
+        display: block;
+        font-size: rem(18px);
+        text-transform: uppercase;
+        color: $color-lightpurple;
+        letter-spacing: 1px;
+
+        @include breakpoint (sm) {
+            display: inline-block;
+            font-size: rem(32px);
+            margin-right: -8px;
+        }
+    }
+
+    // Bigger version
+    &--big {
+        font-size: rem(56px);
+
+        @include breakpoint (sm) {
+            font-size: rem(160px);
+        }
+
+        em {
+            display: inline-block;
+            font-size: rem(20px);
+
+            @include breakpoint (sm) {
+                margin-left: -8px;
+                font-size: rem(56px);
+            }
+        }
+    }
+}
+
+// Parallax title: Translate X
+.title-parallax {
+    transform: translate3d(var(--translateX), 0, 0);
+    will-change: transform;
+    pointer-events: none;
+    user-select: none;
+}
+
+
+/* Text Styles
+========================================================================== */
+.location {
+    text-align: center;
+
+    .street {
+        font-family: $font-serif;
+        font-size: rem(24px);
+        margin-bottom: 8px;
+
+        @include breakpoint (sm) {
+            font-size: rem(28px);
+        }
+    }
+}
+
+.style-caps {
+    font-size: rem(14px);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: $color-tertiary;
+}
+
+.description {
+    font-family: $font-sans-light;
+    font-size: rem(18px);
+    line-height: 1.55;
+    text-align: center;
+
+    @include breakpoint (sm) {
+        font-size: rem(28px);
+        line-height: 1.64;
+        max-width: 572px;
+    }
+}