PC styles done

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

@@ -14,7 +14,9 @@ export const generate = (
         <div class="card">
             <h2>${title}</h2>
             <p class="date-narrow-screen">${date}</p>
-            <img src="${picture}" alt="${picture}"/>
+            <div class="image-container">
+                <img src="${picture}" alt="${picture}"/>
+            </div>
             <p class="description">${description}</p>
             ${
               more

src/page/timeline/timeline-element/timeline-element.scss

@@ -9,6 +9,10 @@
     @include insignificant-font();
   }
 
+  .date-wide-screen {
+    color: $accent-color;
+  }
+
   .line {
     @media (max-width: $breakpoint-width) {
       display: none;
@@ -16,7 +20,7 @@
 
     position: relative;
     margin: 0 $small-margin 0 $icon-size / 2;
-    border-left: $line-width solid $normal-text-color;
+    border-left: $line-width solid $accent-color;
 
     &:before {
       content: "";
@@ -24,7 +28,7 @@
       position: absolute;
       top: 33%;
       left: calc(-0.5 * #{$icon-size} - (1.5 * #{$line-width}));
-      border: $line-width solid $normal-text-color;
+      border: $line-width solid $accent-color;
       border-radius: 100%;
       background: $background;
     }
@@ -63,8 +67,16 @@
       color: $light-text-color;
     }
 
-    img {
-      cursor: pointer;
+    .image-container {
+      font-size: 0;
+      box-shadow: inset $shadow;
+      pointer-events: none;
+      img {
+        pointer-events: all;
+        cursor: pointer;
+        position: relative;
+        z-index: -2;
+      }
     }
 
     .description {

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

@@ -34,27 +34,23 @@ export class PageTimelineElement extends PageElement {
     const showMore = this.query("#show-more") as HTMLElement;
     const showLess = this.query("#show-less") as HTMLElement;
     if (this.isOpen) {
-      this.more.style.height = "0";
       PageTimelineElement.show(showMore);
       PageTimelineElement.hide(showLess);
-      this.notifyOfHeightChange();
+      this.closeMore();
     } else {
       PageTimelineElement.hide(showMore);
       PageTimelineElement.show(showLess);
-      this.openMoreToFullHeight();
+      this.openMore();
     }
 
     this.isOpen = !this.isOpen;
   }
 
-  private notifyOfHeightChange(change: number = null) {
-    const notify = () =>
-      this.eventBroadcaster?.broadcastEvent({
-        type: PageEventType.onBodyDimensionsChanged,
-        data: change
-      });
-    notify();
-    setTimeout(notify, 350);
+  private notifyOfHeightChange(deltaHeight: number = undefined) {
+    this.eventBroadcaster?.broadcastEvent({
+      type: PageEventType.onBodyDimensionsChanged,
+      data: { deltaHeight }
+    });
   }
 
   private static hide(element: HTMLElement) {
@@ -69,15 +65,22 @@ export class PageTimelineElement extends PageElement {
     element.style.opacity = "1";
   }
 
-  private openMoreToFullHeight() {
-    this.more.style.height = `${this.more.scrollHeight.toString()}px`;
-    this.notifyOfHeightChange();
+  private openMore() {
+    const deltaHeight = this.more.scrollHeight;
+    this.more.style.height = `${deltaHeight.toString()}px`;
+    this.notifyOfHeightChange(deltaHeight);
+  }
+
+  private closeMore() {
+    const deltaHeight = this.more.scrollHeight;
+    this.more.style.height = "0";
+    this.notifyOfHeightChange(-deltaHeight);
   }
 
   private handleResize() {
     if (this.isOpen) {
       this.more.style.height = "auto";
-      setTimeout(this.openMoreToFullHeight.bind(this), 200);
+      setTimeout(this.openMore.bind(this), 200);
     }
   }
 }