Add final touches

src/framework/container-page.ts

@@ -1,5 +1,5 @@
 import { PageElement } from './page-element';
-import { PageEventType } from './page-event';
+import { PageEventType } from './events/page-event';
 
 export class ContainerPage extends PageElement {
   public constructor(rootElement: HTMLElement, children: Array<PageElement>) {

src/framework/framework.scss

@@ -0,0 +1 @@
+@forward "styles/index";

src/framework/helper/create-element.ts

@@ -1,4 +1,4 @@
-import { html } from '../../model/misc';
+import { html } from '../model/misc';
 
 export const createElement = (from: html): HTMLElement => {
   // won't work for all elements, eg.: <td>

src/framework/index.scss

@@ -1,2 +0,0 @@
-@import 'primitives/primitives';
-@import 'helper/animations/animations';

src/framework/model/misc.ts

@@ -0,0 +1,16 @@
+export type url = string;
+
+export type html = string;
+
+export type ResponsiveImage = {
+  srcSet: string;
+  src: url;
+  placeholder: string;
+  width: number;
+  height: number;
+  images: Array<{
+    path: url;
+    width: number;
+    height: number;
+  }>;
+};

src/framework/page-element.ts

@@ -1,5 +1,5 @@
-import { PageEvent, PageEventType } from './page-event';
-import { EventBroadcaster } from './event-broadcaster';
+import { PageEvent, PageEventType } from './events/page-event';
+import { EventBroadcaster } from './events/event-broadcaster';
 
 export abstract class PageElement implements EventBroadcaster {
   protected eventBroadcaster: EventBroadcaster;

src/framework/primitives/implementations/anchor.ts

@@ -1,5 +1,5 @@
 import { Primitive } from '../primitive';
-import { html, url } from '../../../model/misc';
+import { html, url } from '../../model/misc';
 
 export class Anchor implements Primitive {
   public constructor(
@@ -8,10 +8,12 @@ export class Anchor implements Primitive {
   ) {}
 
   public toHTML(): html {
-    return `<a class="primitive-anchor" 
-               href="${this.href}"
-               rel="noreferrer"
-               target="_blank"
-            >${this.text}</a>`;
+    return `
+        <a class="primitive-anchor" 
+           href="${this.href}"
+           rel="noreferrer"
+           target="_blank"
+        >${this.text}</a>
+    `;
   }
 }

src/framework/primitives/implementations/image.ts

@@ -1,5 +1,5 @@
 import { Primitive } from '../primitive';
-import { html, ResponsiveImage } from '../../../model/misc';
+import { html, ResponsiveImage } from '../../model/misc';
 import { last } from '../../helper/last';
 
 export class Image implements Primitive {
@@ -11,7 +11,7 @@ export class Image implements Primitive {
   public toHTML(disableInnerShadow = false): html {
     return `
         ${!disableInnerShadow ? `<div class="figure-container">` : ''}
-            <img 
+            <img tabindex="0"
                 srcset="${this.image.srcSet}" 
                 src="${last(this.image.images)?.path}" 
                 alt="${this.alt}"

src/framework/primitives/implementations/text.ts

@@ -1,5 +1,5 @@
 import { Primitive } from '../primitive';
-import { html } from '../../../model/misc';
+import { html } from '../../model/misc';
 
 export class Text implements Primitive {
   public constructor(private readonly text: string) {}

src/framework/primitives/implementations/video.ts

@@ -1,5 +1,5 @@
 import { Primitive } from '../primitive';
-import { url } from '../../../model/misc';
+import { url } from '../../model/misc';
 
 export class Video implements Primitive {
   public constructor(
@@ -11,7 +11,9 @@ export class Video implements Primitive {
   public toHTML(disableInnerShadow = false): string {
     return `
         ${!disableInnerShadow ? `<div class="figure-container">` : ''}
-          <video ${this.options} poster="${this.poster}">
+          <video ${this.options} ${
+      this.poster ? `poster="${this.poster}` : ''
+    }" >
               <source src="${this.webm}" type="video/webm"/>
               <source src="${this.mp4}" type="video/mp4"/>
           </video>

src/framework/primitives/primitive.ts

@@ -1,6 +1,4 @@
-import { html } from '../../model/misc';
-
-import './primitives.scss';
+import { html } from '../model/misc';
 
 export interface Primitive {
   toHTML(): html;

src/framework/primitives/primitives.scss

@@ -1,27 +0,0 @@
-@import '../../style/vars';
-@import '../../style/mixins';
-
-@include responsive() using ($vars) {
-  .figure-container {
-    font-size: 0;
-    box-shadow: inset map_get($vars, $shadow1), inset map_get($vars, $shadow2);
-    pointer-events: none;
-    cursor: pointer;
-
-    * {
-      pointer-events: all;
-      position: relative;
-      z-index: -2;
-    }
-  }
-
-  .primitive-text,
-  .primitive-anchor,
-  .figure-container {
-    margin-top: map_get($vars, $line-height);
-  }
-
-  .primitive-text {
-    text-align: left;
-  }
-}

src/framework/styles/dark-mode/dark-mode.scss

@@ -0,0 +1,5 @@
+@mixin in-dark-mode() {
+  &[theme='dark'] {
+    @content;
+  }
+}

src/framework/styles/index.scss

@@ -0,0 +1,3 @@
+@forward 'animations/animations';
+@forward 'dark-mode/dark-mode';
+@forward 'wrapper';

src/framework/styles/wrapper.scss

@@ -0,0 +1,38 @@
+@use 'dark-mode/dark-mode' as *;
+
+$breakpoint-width: 925px !default;
+$small-screen-light-theme-variables: () !default;
+$small-screen-dark-theme-variables: () !default;
+$large-screen-light-theme-variables: () !default;
+$large-screen-dark-theme-variables: () !default;
+
+@mixin on-small-screen() {
+  @media (max-width: $breakpoint-width) {
+    @content;
+  }
+}
+
+@mixin on-large-screen() {
+  @media (min-width: $breakpoint-width) {
+    @content;
+  }
+}
+
+@mixin responsive() {
+  html {
+    @include on-small-screen {
+      @content ($small-screen-light-theme-variables);
+      @include in-dark-mode {
+        @content ($small-screen-dark-theme-variables);
+      }
+    }
+  }
+  @include on-large-screen {
+    html {
+      @content ($large-screen-light-theme-variables);
+      @include in-dark-mode {
+        @content ($large-screen-dark-theme-variables);
+      }
+    }
+  }
+}