convert into Hugo module theme

assets/css/layout/_footer.scss

@@ -0,0 +1,23 @@
+.site-footer {
+  grid-area: footer;
+  display: block;
+  inline-size: 100%;; /* Overflows right of viewport otherwise */
+  position: fixed;
+  inset-block-end: 0;
+
+  & p {
+    text-align: center;
+    background: $light;
+    padding: 0.4em;
+    margin-block-end: unset;
+    border-block-end: none;
+    font-size: 1em;
+    border-block-start: 2px solid black;
+
+    @include mq("medium") {
+      inline-size: fit-content;
+      margin: auto;
+      border-inline: 2px solid black;
+    }
+  }
+}

assets/css/layout/_grid.scss

@@ -0,0 +1,42 @@
+.site-container {
+  display: grid;
+  grid-template-columns: 2.5% 1fr 2.5%;
+  grid-template-rows: auto 1fr 2.5%;
+  grid-template-areas:
+    "header header header"
+    "page-container page-container page-container"
+    "footer footer footer";
+  min-block-size: calc(100vh - 4em);
+  border-block-start: 0;
+
+  @include mq("large") {
+    margin-block-end: 2em;
+    grid-template-areas:
+      "header header header"
+      ". page-container ."
+      "footer footer footer";
+    border: 2px solid black;
+    margin-inline: 2em;
+  }
+
+  &--homepage {
+    align-items: center;
+    grid-template-rows: auto 2.5%;
+    grid-template-areas:
+      "page-container page-container page-container"
+      "footer footer footer";
+    margin: 2em;
+
+    @include mq("large") {
+      border: 2px solid black;
+      grid-template-areas:
+        ". page-container ."
+        "footer footer footer";
+    }
+  }
+
+  &--list,
+  &--section {
+    align-items: center;
+  }
+}

assets/css/layout/_header.scss

@@ -0,0 +1,89 @@
+.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";
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  text-align: center;
+  z-index: 1;
+
+  &__title,
+  &__tagline,
+  &__icons,
+  &__nav {
+    background-color: $light;
+    margin: 0;
+  }
+
+  &__title,
+  &__tagline,
+  &__icons {
+    padding-block: 5px;
+    padding-inline: 0;
+  }
+
+  &__title {
+    font-weight: normal;
+    grid-area: header-title;
+  }
+
+  &__tagline {
+    grid-area: header-tagline;
+  }
+
+  &__icons {
+    grid-area: header-icons;
+    border-block-end: 2px solid $dark;
+    margin-block-end: 0;
+  }
+
+  &__nav {
+    grid-area: header-nav;
+    margin: auto;
+    inline-size: 100%;
+
+    @include mq("large") {
+      inline-size: 60%;
+    }
+
+    & ul {
+      margin-block: 0;
+
+      & li {
+        inline-size: calc(100% / 3);
+        display: block;
+        float: inline-start;
+        border-block-end: 2px solid black;
+        border-inline: 1px solid black;
+        padding: 0.4em;
+        background-color: inherit;
+
+        &:hover {
+          background-color: #ffffd0;
+        }
+
+        & a {
+          inline-size: 100%;
+          block-size: 100%;
+          display: block;
+        }
+      }
+
+      & a:first-child li {
+        border-inline-start: 2px solid black;
+      }
+
+      & a:last-child li {
+        border-inline-start: 2px solid black;
+      }
+    }
+  }
+}

assets/css/layout/_main.scss

@@ -0,0 +1,7 @@
+.site-content {
+  grid-area: page-container;
+
+  @include mq("large") {
+    margin: 2em;
+  }
+}