PC styles done

src/page/about/about.html.ts

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

src/page/about/about.scss

@@ -2,33 +2,48 @@
 @import "../../style/vars";
 
 #about {
+  @include important-card();
+
+  $img-size: 190px;
+
+  position: relative;
   width: $body-width;
-  margin-top: $normal-margin;
+  margin-top: calc(#{$normal-margin} + #{$img-size} * 1 / 3);
+
+  h1 {
+    text-align: left;
+  }
 
   h1,
-  img {
+  img,
+  .placeholder,
+  & {
     @include title-font();
   }
 
-  img {
-    @include square(4ch);
-    border-radius: 100%;
-    margin-right: 1.5ex;
-    cursor: pointer;
+  .placeholder {
+    @include square(calc(#{$img-size} * 2 / 3 - #{$normal-margin}));
+    box-sizing: content-box;
     float: left;
+    margin: 0 0.75ex 0.75ex 0;
+  }
+
+  img {
+    @include square($img-size);
+    position: absolute;
+    left: 0;
+    top: 0;
+    transform: translateY(-$img-size * 1/3) translateX(-$img-size * 1/3);
+    border-radius: 100%;
+    cursor: pointer;
   }
 
   @media (max-width: $breakpoint-width) {
-    flex-direction: column;
-    img {
-      margin: 0 0 $small-margin 0;
-    }
-    h1 {
-      text-align: center;
-    }
   }
 
-  * {
+  p {
     @include main-font();
+    text-align: justify;
+    margin-top: $small-margin;
   }
 }