PC styles nearly done

src/page/about/about.scss

@@ -2,7 +2,8 @@
 @import "../../style/vars";
 
 #about {
-  margin-top: $normal-margin;
+  margin-top: $normal-margin - $small-margin;
+  padding: $small-margin;
 
   header {
     @include center-children();

src/page/background/background.scss

@@ -14,6 +14,6 @@
     position: absolute;
     left: 0;
     top: 0;
-    width: 100px;
+    width: 160px;
   }
 }

src/page/background/background.ts

@@ -62,9 +62,9 @@ export class PageBackground extends PageElement {
         generate(
           count,
           () => choose(this.colors, random),
-          () => randomInInterval(150, 750, random),
+          () => randomInInterval(160, 750, random),
           () => {
-            const z = randomInInterval(-5, -15, random);
+            const z = randomInInterval(-12, -25, random);
             return `
               translateX(${randomWithKnownZ(-z, width)}px)
               translateY(${randomWithKnownZ(-z, height)}px)

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)));
   }
 }

src/page/image-viewer/image-viewer.html.ts

@@ -3,7 +3,7 @@ import cancel from "../../static/icons/cancel.svg";
 import "./image-viewer.scss";
 
 export const generate = (): html => `
-    <section class="photo-viewer">
+    <section id="image-viewer">
         <img id="photo" alt="currently opened photo"/>
         <img id="cancel" src="${cancel}" alt="cancel"/>
     </section>

src/page/image-viewer/image-viewer.scss

@@ -1,7 +1,7 @@
 @import "../../style/vars";
 @import "../../style/mixins";
 
-.photo-viewer {
+#image-viewer {
   @include center-children();
   display: none;
 

src/page/index.ts

@@ -14,7 +14,7 @@ export const create = ({ config, header, timeline, footer }: Portfolio) => {
       new PageBackground(),
       new PageHeader(header, config.aPictureOf),
       new PageTimeline(timeline, config.showMore, config.showLess),
-      new PageFooter(footer, config.cvName),
+      new PageFooter(footer),
       new PageImageViewer()
     ],
     document.body.querySelector("main")

src/page/timeline/timeline-element/timeline-element.ts

@@ -44,7 +44,7 @@ export class PageTimelineElement extends PageElement {
     }
 
     this.isOpen = !this.isOpen;
-    this.eventGenerator?.giveEvent({
+    this.eventBroadcaster?.broadcastEvent({
       type: PageEventType.onBodyDimensionsChanged
     });
   }