Add a credit page and make style reusable

src/style/_base.scss

@@ -6,6 +6,7 @@ html {
 body {
     @include font-smooth;
     background: $color-primary;
+    color: #fff;
     cursor: default;
     overflow-x: hidden;
 }
@@ -67,6 +68,15 @@ button {
     }
 }
 
+
+// Title: Category
+.title-category {
+    font-family: $font-serif;
+    font-size: rem(28px);
+    line-height: 1;
+    color: $color-secondary;
+}
+
 // Title: Locations
 .title-location {
     font-family: $font-serif;
@@ -150,25 +160,40 @@ button {
 /* Text Styles
 ========================================================================== */
 .style-location {
+    font-family: $font-serif;
+    font-size: rem(24px);
+    color: #fff;
+    line-height: 1;
     text-align: center;
 
+    a {
+        color: #fff;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    @include breakpoint (sm) {
+        font-size: rem(28px);
+    }
+
     .street {
         margin-bottom: 8px;
-        font-family: $font-serif;
-        font-size: rem(24px);
-
-        @include breakpoint (sm) {
-            font-size: rem(28px);
-        }
     }
 }
 
 .style-caps {
+    font-family: $font-sans;
     font-size: rem(14px);
     color: $color-tertiary;
     text-transform: uppercase;
     letter-spacing: 1px;
 }
+.style-caps--transparent {
+    color: rgba($color-tertiary, 0.5);
+}
 
 .style-description {
     color: $color-tertiary;

src/style/layouts/_explore.scss

@@ -0,0 +1,13 @@
+.explore {
+    // Description
+    &__description {
+        max-width: 312px;
+        margin: 0 auto;
+        margin-bottom: 72px;
+
+        @include breakpoint (sm) {
+            max-width: 472px;
+            margin-bottom: 120px;
+        }
+    }
+}

src/style/molecules/_footer.scss

@@ -33,36 +33,56 @@
     // Right part
     &__right {
         font-size: 14px;
+        text-align: center;
 
         @include breakpoint (sm) {
             display: flex;
-            align-items: center;
+            align-items: baseline;
+        }
+
+        li {
+            display: block;
+            text-align: center;
+
+            & > ul {
+                display: flex;
+                justify-content: center;
+                margin-bottom: 32px;
+
+                @include breakpoint (sm) {
+                    margin-bottom: 0;
+                    margin-right: 24px;
+                }
+
+                li {
+                    margin: 0 20px;
+                }
+            }
+        }
+        a {
+            text-decoration: none;
+            color: #fff;
+
+            img {
+                margin-right: 16px;
+            }
         }
 
         // Instagram
         .instagram {
-            margin-bottom: 32px;
-
-            @include breakpoint (sm) {
-                margin: 0 40px 0 0;
-            }
-
             a {
-                display: flex;
+                display: inline-flex;
                 align-items: center;
                 justify-content: center;
-                text-decoration: none;
-                color: #fff;
-
-                span {
-                    margin-left: 16px;
-                }
+            }
+            img {
+                display: inline-block;
             }
         }
 
         // Collective
         .cetrucflotte {
-            display: flex;
+            display: inline-flex;
             align-items: center;
             justify-content: center;
 

src/style/pages/_page.scss

@@ -1,5 +1,4 @@
-.explore {
-    background-color: $color-primary;
+.page {
     overflow-x: hidden;
 
     // Top part
@@ -40,4 +39,27 @@
             margin-bottom: 120px;
         }
     }
+
+    // List
+    &__list {
+        // Category
+        &--category {
+            margin-bottom: 96px;
+            text-align: center;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            h2 {
+                margin-bottom: 56px;
+            }
+            dl {
+                margin-bottom: 40px;
+            }
+            dt {
+                margin-bottom: 8px;
+            }
+        }
+    }
 }

src/style/style.scss

@@ -32,11 +32,14 @@
 @import "organisms/carousel";
 @import "organisms/photos";
 
+// Layouts
+@import "layouts/explore";
+
 // Pages
+@import "pages/page";
 @import "pages/homepage";
 @import "pages/viewer";
 @import "pages/place";
-@import "pages/explore";
 
 // Animations
 @import "animations";