initial commit

assets/css/layout/_footer.scss

@@ -0,0 +1,20 @@
+.site-footer {
+  grid-area: footer;
+  display: block;
+  width: 99%; /* Overflows right of viewport otherwise */
+  position: fixed;
+  bottom: 0;
+
+  & p {
+    width: fit-content;
+    margin: auto;
+    background: $light;
+    border: 2px solid black;
+    padding: 0.4em;
+    border-bottom: none;
+    font-size: 0.6em;
+    @include mq('desktop') {
+      font-size: 1em;
+    }
+  }
+}

assets/css/layout/_header.scss

@@ -0,0 +1,88 @@
+.site-header {
+  display: grid;
+  grid-area: header;
+  grid-gap: 0;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto auto auto;
+  grid-template-areas: "header-title" "header-tagline" "header-icons" "header-nav";
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  z-index: 1;
+  
+  &__title,
+  &__tagline,
+  &__icons,
+  &__nav {
+    background-color: $light;
+    margin: 0;
+  }
+
+  &__title,
+  &__tagline,
+  &__icons {
+    padding: 5px 0;
+  }
+
+  &__title {
+    font-weight: normal;
+    grid-area: header-title;
+  }
+
+  &__tagline {
+    grid-area: header-tagline;
+  }
+
+  &__icons {
+    grid-area: header-icons;
+    border-bottom: 2px solid $dark;
+    margin-bottom: 0;
+  }
+
+  &__nav {
+    grid-area: header-nav;
+    margin: auto;
+    width: 100%;
+    @include mq('desktop') {
+      width: 60%;
+    }
+
+    & ul {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    & li {
+      width: calc(100% / 4);
+      display: block;
+      float: left;
+      border-bottom: 2px solid black;
+      border-left: 1px solid black;
+      border-right: 1px solid black;
+      padding: 0.4em;
+      background-color: inherit;
+    }
+
+    & a:first-child li {
+      border-left: 2px solid black;
+    }
+
+    & a:last-child li {
+      border-right: 2px solid black;
+    }
+
+    & li {
+      &:hover {
+        background-color: #ffffd0;
+      }
+
+      & a {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+  }
+}

assets/css/layout/_main.scss

@@ -0,0 +1,8 @@
+.site-content {
+  grid-area: page-container;
+  margin-left: 1em;
+  margin-right: 1em;
+  @include mq('desktop') {
+    margin: 2em;
+  }
+}