Refactor and fix

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

@@ -16,7 +16,7 @@
   }
 }
 
-section.timeline-element {
+.timeline-element {
   display: flex;
   width: var(--body-width);
   margin: auto;
@@ -85,14 +85,14 @@ section.timeline-element {
   }
 
   .card {
-    @include card-base();
+    text-align: center;
+    box-shadow: var(--shadow);
     border-radius: var(--border-radius);
 
     background-color: var(--blurred-card-color);
-    backdrop-filter: blur(var(--blur-radius));
-    @supports not (backdrop-filter: blur(var(--blur-radius))) {
-      background-color: var(--card-color);
-    }
+    transition: background-color var(--transition-time);
+
+    @include blurred-background();
 
     img,
     video,
@@ -131,12 +131,15 @@ section.timeline-element {
         display: flex;
         justify-content: center;
         border-top: $border-width solid var(--normal-text-color);
+        transition: border-color var(--transition-time);
+
         margin: 0;
         padding: 0;
         margin-top: var(--small-margin);
 
         .info-button {
           @include image-button(var(--icon-size));
+          @include main-font();
 
           .svgContainer {
             position: relative;
@@ -145,10 +148,12 @@ section.timeline-element {
 
             svg {
               stroke: var(--normal-text-color);
+              transition: stroke var(--transition-time);
             }
           }
 
           p {
+            @include main-font();
             padding-bottom: var(--small-margin);
             font-size: 0.9rem;
             font-style: italic;
@@ -162,6 +167,7 @@ section.timeline-element {
           padding-top: var(--small-margin);
           &:not(:last-child) {
             border-right: $border-width solid var(--normal-text-color);
+            transition: border-color var(--transition-time);
           }
         }
       }

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

@@ -6,7 +6,7 @@ import { createElement } from '../../../helper/create-element';
 
 export class PageTimelineElement extends PageElement {
   private isOpen: boolean;
-  private more: HTMLElement;
+  private more?: HTMLElement;
   private showMore: string;
   private showLess: string;
 
@@ -22,7 +22,7 @@ export class PageTimelineElement extends PageElement {
       super(root);
       this.children = [content];
       this.isOpen = false;
-      this.more = root.querySelector('.more');
+      this.more = this.query('.more');
       this.more.appendChild(content.htmlRoot);
       addEventListener('resize', this.handleResize.bind(this));
 
@@ -35,6 +35,7 @@ export class PageTimelineElement extends PageElement {
 
     this.showMore = showMore;
     this.showLess = showLess;
+    this.isOpen = false;
   }
 
   private toggleOpen() {
@@ -50,17 +51,17 @@ export class PageTimelineElement extends PageElement {
   }
 
   private openMore() {
-    const deltaHeight = this.more.scrollHeight;
-    this.more.style.height = `${deltaHeight.toString()}px`;
+    const deltaHeight = this.more!.scrollHeight;
+    this.more!.style.height = `${deltaHeight.toString()}px`;
   }
 
   private closeMore() {
-    this.more.style.height = '0';
+    this.more!.style.height = '0';
   }
 
   private handleResize() {
     if (this.isOpen) {
-      this.more.style.height = 'auto';
+      this.more!.style.height = 'auto';
       this.openMore.bind(this);
     }
   }

src/page/timeline/timeline.scss

@@ -1,7 +1,7 @@
 @use '../../style/mixins' as *;
 
 @include on-large-screen {
-  div#timeline > :first-child {
+  #timeline > :first-child {
     margin-top: var(--large-margin);
   }
 }