PC styles nearly done

src/page/footer/footer.html.ts

@@ -1,10 +1,34 @@
 import { Footer } from "../../model/portfolio";
-import { html } from "../../model/misc";
-import "./footer.scss";
+import { html, url } from "../../model/misc";
 
-export const generate = ({ email, cv }: Footer, cvName: string): html => `
+import "./footer.scss";
+import cvIcon from "../../static/icons/cv.svg";
+import emailIcon from "../../static/icons/at.svg";
+
+export const generate = ({
+  title,
+  email,
+  cv,
+  cvName,
+  lastEditName,
+  lastEdit,
+  githubLinkName,
+  githubLink
+}: Footer): html => `
     <footer id="page-footer">
-        <a id="email" href="mailto:${email}">${email}</a>
-        <a id="cv" href="mailto:${cv}">${cvName}</a>
+        <h2>${title}</h2>
+        <ul>
+            <li>
+                <img src="${cvIcon}" alt="CV" />
+                <a id="cv" target="_blank">${cvName}</a>
+            </li>
+            <li>
+                <img src="${emailIcon}" alt="email" />
+                <a id="email" href="mailto:${email}">${email}</a>
+            </li>
+        </ul>
+        <aside class="other">
+           <h6>${lastEditName} ${lastEdit.toLocaleDateString()}</h6>
+        </aside>
     </footer>
 `;

src/page/footer/footer.scss

@@ -2,7 +2,50 @@
 @import "../../style/vars";
 
 footer#page-footer {
-  @include card();
-  @include center-children();
-  margin: $normal-margin auto;
+  text-align: center;
+
+  margin: $small-margin auto 0 auto;
+  padding: $normal-margin $normal-margin $line-height $normal-margin;
+  width: 100%;
+  backdrop-filter: blur(5px);
+
+  h2 {
+    @include title-font();
+  }
+
+  ul {
+    list-style: none;
+    display: inline-block;
+    margin-top: $normal-margin;
+    text-align: left;
+
+    li {
+      @include center-children();
+      justify-content: flex-start;
+
+      &:not(:first-child) {
+        padding-top: $line-height;
+      }
+
+      img {
+        @include max-square($icon-size);
+        margin-right: $small-margin;
+      }
+
+      a {
+        font-size: 1.4rem;
+      }
+    }
+  }
+
+  aside.other {
+    @include center-children();
+    margin: $normal-margin auto 0 auto;
+    width: $body-width;
+
+    h6 {
+      @include insignificant-font();
+      opacity: 0.4;
+    }
+  }
 }

src/page/footer/footer.ts

@@ -5,8 +5,8 @@ import { generate } from "./footer.html";
 import { createElement } from "../../framework/helper";
 
 export class PageFooter extends PageElement {
-  constructor(footer: Footer, cvName: string) {
+  constructor(footer: Footer) {
     super();
-    this.setElement(createElement(generate(footer, cvName)));
+    this.setElement(createElement(generate(footer)));
   }
 }