Create Credits page

src/routes/credits.svelte

@@ -15,16 +15,42 @@
 
 <main class="credits">
     <section class="credits__heading">
-        <SiteTitle />
+        <SiteTitle variant="large" />
         <p>{data.credits.text}</p>
     </section>
 
     <section class="credits__list">
-        {#each data.credits.list as { title, credits }}
+        <div class="grid container">
-            <div class="credits__category">
+            {#each data.credits.list as { title, credits }}
-                <h2>{title}</h2>
+                <div class="credits__category grid">
+                    <h2 class="title-small">{title}</h2>
+                    <ul>
+                        {#each credits as { name, role, website }}
+                        <li>
+                            <dl>
+                                <dt>
+                                    {#if website}
+                                        <h3>
+                                            <a href={website} rel="noopener external" target="_blank">{name}</a>
+                                        </h3>
+                                    {:else}
+                                        <h3>{name}</h3>
+                                    {/if}
+                                </dt>
+                                <dd>
+                                    {role}
+                                </dd>
+                            </dl>
+                        </li>
+                        {/each}
+                    </ul>
+                </div>
+            {/each}
+
+            <div class="credits__category grid">
+                <h2 class="title-small">Photography</h2>
                 <ul>
-                    {#each credits as { name, role, website }}
+                    {#each data.credit as { name, website, location }}
                     <li>
                         <dl>
                             <dt>
@@ -37,40 +63,21 @@
                                 {/if}
                             </dt>
                             <dd>
-                                {role}
+                                <ul>
+                                    {#each location as { location_id: { name, slug: slugLocation, country: { slug: slugCountry }}}, index}
+                                        <li>
+                                            <a href="/{slugCountry}/{slugLocation}">{name}</a>
+                                        </li>
+                                    {/each}
+                                </ul>
                             </dd>
                         </dl>
                     </li>
                     {/each}
                 </ul>
             </div>
-        {/each}
-
-        <div class="credits__category">
-            <h2>Photography</h2>
-            <ul>
-                {#each data.credit as { name, website, location }}
-                <li>
-                    <dl>
-                        <dt>
-                            {#if website}
-                                <h3>
-                                    <a href={website} rel="noopener external" target="_blank">{name}</a>
-                                </h3>
-                            {:else}
-                                <h3>{name}</h3>
-                            {/if}
-                        </dt>
-                        <dd>
-                            {#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}
-                            {/each}
-                        </dd>
-                    </dl>
-                </li>
-                {/each}
-            </ul>
         </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";