Improve image handling & fix shadows

src/page/header/header.html.ts

@@ -4,15 +4,13 @@ import './header.scss';
 export const generate = ({
   name,
   about,
-  photo,
 }: {
   name: string;
   about: Array<string>;
-  photo: html;
 }): html => `
   <header id="about">
-    <div class="photo-container">
-      ${photo}
+    <div class="profile-picture">
+      <img/>
       <div class="placeholder"></div>
     </div>
 

src/page/header/header.scss

@@ -12,8 +12,9 @@
     }
 
     $img-size: 125px;
-    > .photo-container > .image {
+    > .profile-picture {
       @include square($img-size);
+      margin: auto;
     }
 
     > h1 {
@@ -30,11 +31,10 @@
       auto;
     border-radius: var(--border-radius);
 
-    > .photo-container {
-      position: relative;
-
-      > .image {
+    > .profile-picture {
+      > .figure-container {
         @include square($img-size);
+
         position: absolute;
         left: calc(#{math.div(-$img-size, 3)} - var(--normal-margin));
         top: calc(#{math.div(-$img-size, 3)} - var(--normal-margin));
@@ -55,15 +55,19 @@
   }
 
   > h1,
-  > .photo-container > .placeholder {
+  > .profile-picture > .placeholder {
     @include title-font();
   }
 
-  > .photo-container {
-    > .image {
-      border-radius: 100%;
-      box-shadow: var(--shadow);
-      margin: auto;
+  > .profile-picture {
+    position: relative;
+    z-index: 1;
+
+    .figure-container {
+      &,
+      > .image {
+        border-radius: 100%;
+      }
     }
   }
 

src/page/header/header.ts

@@ -1,5 +1,6 @@
 import { ResponsiveImage } from '../../types/responsive-image';
-import { Image } from '../image-viewer/image/image.html';
+import { BorderedImage } from '../figure/bordered-image/bordered-image';
+import { ImageViewer } from '../image-viewer/image-viewer';
 import { PageElement } from '../page-element';
 import { generate } from './header.html';
 import { ThemeSwitcher } from './theme-switcher/theme-switcher';
@@ -10,22 +11,31 @@ export class Header extends PageElement {
     image,
     imageAltText,
     about,
+    imageViewer,
   }: {
     name: string;
     image: ResponsiveImage;
     imageAltText: string;
     about: Array<string>;
+    imageViewer?: ImageViewer;
   }) {
     super(
       generate({
         name,
         about,
-        photo: Image({
+      })
+    );
+
+    this.attachElementByReplacing(
+      'img',
+      new BorderedImage(
+        {
           image,
           alt: imageAltText,
           sizes: '(max-width: 924px) 125px, 190px',
-        }),
-      })
+        },
+        imageViewer
+      )
     );
     this.attachElement(new ThemeSwitcher());
   }