Add final touches

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

@@ -1,5 +1,5 @@
 import { TimelineElement } from '../../../model/portfolio';
-import { html } from '../../../model/misc';
+import { html } from '../../../framework/model/misc';
 
 import './timeline-element.scss';
 
@@ -22,8 +22,8 @@ export const generate = (
                 ? `
                 <div class="more"></div>
                 <div class="buttons">
-                    <a class="show-more">${showMore}</a>
-                    <a class="show-less">${showLess}</a>
+                    <a tabindex="0" class="show-more">${showMore}</a>
+                    <a tabindex="0" class="show-less">${showLess}</a>
                 </div>
                 `
                 : ''

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

@@ -1,5 +1,4 @@
-@import '../../../style/mixins';
-@import '../../../style/vars';
+@use '../../../style/include' as *;
 
 @mixin q-dependent-line-container($vars, $q) {
   .line {
@@ -18,7 +17,7 @@
 }
 
 @include responsive() using ($vars) {
-  .timeline-element {
+  section.timeline-element {
     display: flex;
     width: map_get($vars, $body-width);
     margin: auto;
@@ -32,9 +31,13 @@
         border-left: map_get($vars, $line-width) solid
           map_get($vars, $accent-color);
 
-        &:before {
+        &:before,
+        &:after {
           content: '';
           position: absolute;
+        }
+
+        &:before {
           left: 0;
           bottom: 0;
           border-left: map_get($vars, $line-width) solid
@@ -42,12 +45,10 @@
         }
 
         &:after {
-          content: '';
           @include square(map_get($vars, $icon-size));
           border-radius: 1000px;
           border: map_get($vars, $line-width) solid
             map_get($vars, $accent-color);
-          position: absolute;
           left: -1 * map_get($vars, $icon-size) / 2 +
             map_get($vars, $line-width) / 2;
         }
@@ -88,18 +89,19 @@
 
     .card {
       @include card-base($vars);
-
       border-radius: map_get($vars, $border-radius);
       background-color: map_get($vars, $card-color);
 
-      overflow: hidden;
-
       & > *:not(:first-child) {
         margin-top: map_get($vars, $line-height);
       }
 
+      .content {
+        margin-top: 0;
+      }
+
       h2 {
-        @include sub-title-font();
+        @include sub-title-font($vars);
       }
 
       & > p {
@@ -110,16 +112,16 @@
       .more {
         overflow: hidden;
         height: 0;
-        margin-top: 0;
-        transition: height map_get($vars, $long-transition-time);
+        transition: height map_get($vars, $transition-time);
       }
 
       .buttons {
         position: relative;
-        margin-top: map_get($vars, $small-margin);
+        margin-top: map_get($vars, $line-height);
 
-        * {
-          transition: opacity map_get($vars, $long-transition-time);
+        .show-more,
+        .show-less {
+          transition: opacity map_get($vars, $transition-time);
         }
 
         .show-more {
@@ -127,9 +129,9 @@
         }
 
         .show-less {
+          @include absolute-center();
           opacity: 0;
           visibility: hidden;
-          @include absolute-center();
         }
       }
     }

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

@@ -2,11 +2,11 @@ import { TimelineElement } from '../../../model/portfolio';
 import { PageContent } from '../../content/content';
 import { PageElement } from '../../../framework/page-element';
 import { generate } from './timeline-element.html';
-import { PageEventType } from '../../../framework/page-event';
+import { PageEventType } from '../../../framework/events/page-event';
 import { createElement } from '../../../framework/helper/create-element';
 
 export class PageTimelineElement extends PageElement {
-  private isOpen;
+  private isOpen: boolean;
   private more: HTMLElement;
 
   public constructor(
@@ -56,7 +56,7 @@ export class PageTimelineElement extends PageElement {
         this.eventBroadcaster?.broadcastEvent({
           type: PageEventType.onBodyDimensionsChanged,
         }),
-      350
+      250
     );
   }
 
@@ -64,7 +64,7 @@ export class PageTimelineElement extends PageElement {
     element.style.opacity = '0';
     setTimeout(() => {
       element.style.visibility = 'hidden';
-    }, 350);
+    }, 250);
   }
 
   private static show(element: HTMLElement) {

src/page/timeline/timeline.html.ts

@@ -1,5 +1,5 @@
-import { html } from "../../model/misc";
-import "./timeline.scss";
+import { html } from '../../framework/model/misc';
+import './timeline.scss';
 
 export const generate = (): html => `
     <main id="timeline"></main>

src/page/timeline/timeline.scss

@@ -1,8 +1,7 @@
-@import '../../style/vars';
-@import '../../style/mixins';
+@use '../../style/include' as *;
 
 @include responsive() using ($vars) {
-  #timeline {
+  main#timeline {
     @include on-large-screen {
       // workaround for IE
       & > :first-child {

src/page/timeline/timeline.ts

@@ -1,5 +1,4 @@
 import { Timeline } from '../../model/portfolio';
-import { PageElement } from '../../framework/page-element';
 import { PageTimelineElement } from './timeline-element/timeline-element';
 import { generate } from './timeline.html';
 import { createElement } from '../../framework/helper/create-element';