Create Credits page

src/routes/credits.svelte

@@ -15,14 +15,15 @@
 
 <main class="credits">
     <section class="credits__heading">
-        <SiteTitle />
+        <SiteTitle variant="large" />
         <p>{data.credits.text}</p>
     </section>
 
     <section class="credits__list">
+        <div class="grid container">
             {#each data.credits.list as { title, credits }}
-            <div class="credits__category">
-                <h2>{title}</h2>
+                <div class="credits__category grid">
+                    <h2 class="title-small">{title}</h2>
                     <ul>
                         {#each credits as { name, role, website }}
                         <li>
@@ -46,8 +47,8 @@
                 </div>
             {/each}
 
-        <div class="credits__category">
-            <h2>Photography</h2>
+            <div class="credits__category grid">
+                <h2 class="title-small">Photography</h2>
                 <ul>
                     {#each data.credit as { name, website, location }}
                     <li>
@@ -62,15 +63,21 @@
                                 {/if}
                             </dt>
                             <dd>
+                                <ul>
                                     {#each location as { location_id: { name, slug: slugLocation, country: { slug: slugCountry }}}, index}
-                                <a href="/{slugCountry}/{slugLocation}">{name}</a>{#if location.length > index + 1},&nbsp;{/if}
+                                        <li>
+                                            <a href="/{slugCountry}/{slugLocation}">{name}</a>
+                                        </li>
                                     {/each}
+                                </ul>
                             </dd>
                         </dl>
                     </li>
                     {/each}
                 </ul>
             </div>
+        </div>
+
     </section>
 </main>
 

src/style/pages/_credits.scss

@@ -0,0 +1,90 @@
+// Credits Page
+.credits {
+    padding: 160px 0;
+
+    // Intro Section
+    &__heading {
+        overflow: hidden;
+        margin-bottom: 72px;
+        color: $color-tertiary;
+        text-align: center;
+
+        // Text
+        p {
+            max-width: 350px;
+            margin: 20px auto 56px;
+            font-weight: 300;
+
+            @include bp (sm) {
+                margin: 72px auto 0;
+                max-width: 450px;
+            }
+        }
+    }
+
+    // List
+    &__list {
+        margin-top: 160px;
+    }
+
+    &__category {
+        --columns: 18;
+        grid-column: 4 / span var(--columns);
+        border-top: 1px solid $color-tertiary;
+        padding-top: 48px;
+
+        h2 {
+            grid-column: 1 / span 8;
+        }
+        ul {
+            grid-column: 11 / span 8;
+            margin-bottom: 72px;
+        }
+        li {
+            display: block;
+        }
+        a {
+            color: $color-tertiary;
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+        h3 {
+            font-size: rem(28px);
+            font-family: $font-serif;
+        }
+
+        dl {
+            margin-bottom: 32px;
+        }
+        dt {
+            a:hover {
+                color: $color-secondary;
+            }
+        }
+        dd {
+            margin-top: 6px;
+            font-size: rem(16px);
+
+            &, a {
+                color: rgba($color-tertiary, 0.6);
+            }
+            a:hover {
+                color: #fff;
+            }
+            li {
+                display: inline-block;
+                line-height: 1.5;
+
+                &:after {
+                    display: inline-block;
+                    content: "•";
+                    margin: 0 0.35em 0 0.15em;
+                }
+
+                &:last-child:after {
+                    display: none;
+                }
+            }
+        }
+    }
+}

src/style/style.scss

@@ -23,6 +23,7 @@
 @import "pages/homepage";
 @import "pages/photos";
 @import "pages/explore";
+@import "pages/credits";
 
 // Modules
 @import "modules/globe";