Simplify and fix cards

src/helper/title-to-fragment.ts

@@ -0,0 +1,2 @@
+export const titleToFragment = (title: string): string =>
+  encodeURIComponent(title.toLocaleLowerCase().replace(/\W+/g, '-'));

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

@@ -2,14 +2,13 @@ import info from '../../../../static/icons/info.svg';
 import './timeline-element.scss';
 import { html } from '../../../types/html';
 import { TimelineElementParameters } from './timeline-element';
+import { titleToFragment } from '../../../helper/title-to-fragment';
 
 export const generate = (
-  { date, title, more }: TimelineElementParameters,
+  { date, title, description, more }: TimelineElementParameters,
   showMore: string
-): html => {
+): html => `
-  const id = titleToFragment(title);
+  <section id="${titleToFragment(title)}" class="timeline-element">
-  return `
-  <section id="${id}" class="timeline-element">
     <div class="line-container">
       <div class="line"></div>
       <p class="date">${date}</p>
@@ -17,25 +16,24 @@ export const generate = (
     <div class="card">
       <div class="figure"></div>
       <div class="lower">
-        <h2><a href="#${id}">${title}</a></h2>
+        <h2>
-        <p class="description"></p>
+          <a href="#${titleToFragment(title)}">${title}</a>
+        </h2>
+
+        <p class="description">${description}</p>
+
         ${more ? '<div class="more"></div>' : ''}
+
         <div class="buttons">
         ${
-          more
+          more &&
-            ? `
+          `<div tabindex=0 class="info-button">
-            <div tabindex=0 class="info-button">
               <div class="svgContainer">${info}</div>
               <p>${showMore}</p>
             </div>`
-            : ''
         }
         </div>
       </div>
     </div>
   </section>
 `;
-};
-
-const titleToFragment = (title: string): string =>
-  encodeURIComponent(title.toLocaleLowerCase().replace(/\W+/g, '-'));

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

@@ -34,7 +34,6 @@ export class PageTimelineElement extends PageElement {
 
     this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this));
     this.attachElementByReplacing('.figure', timelineElement.figure);
-    this.query('.description').innerText = timelineElement.description;
     timelineElement.links.forEach((l) => this.attachElementAsChildOf('.buttons', l));
 
     this.isOpen = false;
@@ -53,17 +52,17 @@ export class PageTimelineElement extends PageElement {
   }
 
   private openMore() {
-    const deltaHeight = this.more!.scrollHeight;
+    const deltaHeight = this.more.scrollHeight;
-    this.more!.style.height = `${deltaHeight.toString()}px`;
+    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);
     }
   }