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/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -0,0 +1,119 @@
+.browse {
+    margin-top: 72px;
+    margin-bottom: 72px;
+
+    @include breakpoint (sm) {
+        margin-top: 120px;
+        margin-bottom: 52px;
+    }
+
+    // Description
+    .description {
+        margin-bottom: 32px;
+
+        @include breakpoint (sm) {
+            margin-bottom: 40px;
+        }
+    }
+
+    // Continents
+    &__continents {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        margin-bottom: 8px;
+
+        li {
+            display: block;
+            margin: 0 4px;
+
+            @include breakpoint (sm) {
+                margin: 0 8px;
+            }
+        }
+    }
+
+    // Locations
+    &__locations {
+        margin-top: 112px;
+
+        @include breakpoint (sm) {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            grid-column-gap: 120px;
+            grid-row-gap: 7.5vw;
+            justify-content: center;
+            margin-bottom: 14.5vw;
+        }
+    }
+
+    // Location
+    .location {
+        position: relative;
+        margin-bottom: 48px;
+
+        @include breakpoint (sm) {
+            margin-bottom: 0;
+        }
+
+        a {
+            position: relative;
+            z-index: 2;
+            display: flex;
+            flex-flow: column;
+            align-items: center;
+            text-decoration: none;
+        }
+
+        // Flag image
+        img {
+            display: block;
+            width: 32px;
+            height: auto;
+            margin: 0 auto;
+            border-radius: 50vh;
+        }
+
+        // City
+        &__city {
+            margin: 24px 0 16px;
+            font-family: $font-serif;
+            font-size: rem(32px);
+            color: $color-secondary;
+            transition: color 85ms ease-in-out;
+
+            @include breakpoint (sm) {
+                font-size: rem(48px);
+                margin-bottom: 24px;
+            }
+        }
+
+        // Shape on hover
+        &:after {
+            content: "";
+            pointer-events: none;
+            opacity: 0;
+            position: absolute;
+            z-index: 1;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0.94);
+            display: block;
+            width: 216px;
+            height: 216px;
+            background: rgba($color-lightpurple, .3);
+            border-radius: 50vh;
+            transition: all 85ms ease-in-out;
+        }
+        &:hover {
+            .location__city {
+                color: $color-tertiary;
+            }
+
+            &:after {
+                opacity: 1;
+                transform: translate(-50%, -50%) scale(1);
+            }
+        }
+    }
+}