Add dark mode

src/page/content/content.html.ts

@@ -0,0 +1,10 @@
+import { Content } from '../../model/portfolio';
+import { html } from '../../model/misc';
+
+import './content.scss';
+
+export const generate = (content: Content): html => `
+    <div class="content">
+        ${content.map(element => element.toHTML()).join('\n')}
+    </div>
+`;

src/page/content/content.scss

@@ -1,5 +1,8 @@
 @import '../../style/vars';
+@import '../../style/mixins';
 
-.content {
-  margin-top: $small-margin;
+@include responsive() using ($vars) {
+  .content {
+    margin-top: map_get($vars, $small-margin);
+  }
 }

src/page/content/content.ts

@@ -1,16 +1,10 @@
-import './content.scss';
 import { PageElement } from '../../framework/page-element';
 import { createElement } from '../../framework/helper/create-element';
 import { Content } from '../../model/portfolio';
+import { generate } from './content.html';
 
 export class PageContent extends PageElement {
   public constructor(content: Content) {
-    super(
-      createElement(`
-        <div class="content">
-            ${content.map(element => element.toHTML()).join('\n')}
-        </div>
-      `)
-    );
+    super(createElement(generate(content)));
   }
 }