quicksave

src/page/about/about.html.ts

@@ -7,10 +7,6 @@ export const generate = (
   aPictureOf: string
 ): html => `
     <section id="about">
-        <div class="container">
-            <header>
-                <img alt="${aPictureOf} ${name}" src="${picture}"/>
-                <h1>${name}</h1>
-            </header>
-        </div>
+        <img alt="${aPictureOf} ${name}" src="${picture}"/>
+        <h1>${name}</h1>
     </section>`;

src/page/about/about.scss

@@ -2,42 +2,33 @@
 @import "../../style/vars";
 
 #about {
-  width: 100%;
-  backdrop-filter: blur($blur-radius);
-  padding: $normal-margin;
+  width: $body-width;
+  margin-top: $normal-margin;
 
-  .container {
-    width: $body-width;
-    margin: auto;
+  h1,
+  img {
+    @include title-font();
+  }
 
-    header {
-      @include center-children();
+  img {
+    @include square(4ch);
+    border-radius: 100%;
+    margin-right: 1.5ex;
+    cursor: pointer;
+    float: left;
+  }
 
-      h1,
-      img {
-        @include title-font();
-      }
-
-      img {
-        @include square(4ch);
-        border-radius: 100%;
-        margin-right: 1.5ex;
-        cursor: pointer;
-      }
-
-      @media (max-width: $breakpoint-width) {
-        flex-direction: column;
-        img {
-          margin: 0 0 $small-margin 0;
-        }
-        h1 {
-          text-align: center;
-        }
-      }
+  @media (max-width: $breakpoint-width) {
+    flex-direction: column;
+    img {
+      margin: 0 0 $small-margin 0;
     }
-
-    * {
-      text-align: justify;
+    h1 {
+      text-align: center;
     }
   }
+
+  * {
+    @include main-font();
+  }
 }

src/page/about/about.ts

@@ -12,6 +12,6 @@ export class PageHeader extends PageElement {
 
     super([content]);
     this.setElement(root);
-    this.query(".container").appendChild(content.getElement());
+    root.appendChild(content.getElement());
   }
 }