Create Credits page

2021-10-04 22:04:38 +02:00
parent 944871ae62
commit 7f5c74086f
3 changed files with 130 additions and 32 deletions
--- a/src/style/pages/_credits.scss
+++ b/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;
+                }
+            }
+        }
+    }
+}