WIP React > Svelte

Put most of the developed design into Svelte
2020-02-11 15:09:32 +01:00
parent 61e45cb171
commit 9b0c154f61
95 changed files with 3627 additions and 9464 deletions
--- a/src/style/pages/_explore.scss
+++ b/src/style/pages/_explore.scss
@@ -0,0 +1,70 @@
+.explore {
+    background-color: $color-primary;
+    overflow-x: hidden;
+    
+    // Explore section on the Homepage 
+    &--homepage {
+        margin-top: 15.5vw;
+
+        .browse {
+            margin-top: 0;
+        }
+    }
+
+    // Top part
+    &__top {
+        margin-top: 96px;
+        margin-bottom: 56px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        
+        @include breakpoint (sm) {
+            margin-top: 120px;
+            margin-bottom: 96px;
+        }
+
+        a {
+            position: absolute;
+            top: -64px;
+            
+            @include breakpoint (sm){
+                top: 50%;
+                left: 0;
+                transform: translateY(-50%);
+            }
+        }
+    }
+
+    // Homepage: Of text
+    .of {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 14vw;
+        font-family: $font-serif-extra;
+        font-size: 15.5vw;
+        line-height: 1;
+        color: $color-lightpurple;
+        text-transform: uppercase;
+    }
+
+    // Description
+    .description {
+        max-width: 312px;
+        margin: 0 auto;
+        margin-bottom: 72px;
+        color: $color-tertiary;
+        
+        @include breakpoint (sm) {
+            max-width: 472px;
+            margin-bottom: 120px;
+        }
+    }
+
+    // Massive title
+    .title-massive {
+        margin-top: -22vw;
+        margin-left: -60px;
+    }
+}