From 19b9bae0ee7216b272a07a31ce0d3b21ffbcb87d Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritz-ruth.de>
Date: Sun, 8 Dec 2019 17:45:22 +0100
Subject: [PATCH] Use Kiste

---
 README.md                              |   1 +
 assets/css/_mobile.scss                |  11 -
 assets/css/_variables.scss             |   9 -
 assets/css/elements/_all.scss          |   4 -
 assets/css/elements/content.scss       |  11 -
 assets/css/elements/heading.scss       |  28 --
 assets/css/elements/link.scss          |  13 -
 assets/css/elements/paragraph.scss     |   7 -
 assets/css/global.scss                 |  32 --
 assets/global.scss                     |   3 +
 assets/js/footer.js                    |   4 -
 components/AnimatedLogo.vue            |   6 +-
 components/ExternalLink.vue            |  42 --
 components/GButton.vue                 | 117 ------
 components/NavigationBar.vue           | 290 -------------
 components/pages/projects/GProject.vue |  33 +-
 layouts/default.vue                    |  53 +--
 layouts/none.vue                       |   9 +-
 nuxt.config.js                         |  31 +-
 package.json                           |   1 +
 pages/index.vue                        |  50 +--
 pages/legal-notice.vue                 | 132 +++---
 pages/privacy-policy.vue               | 548 +++++++++++++------------
 pages/projects.vue                     |  66 +--
 yarn.lock                              |  32 +-
 25 files changed, 479 insertions(+), 1054 deletions(-)
 delete mode 100644 assets/css/_mobile.scss
 delete mode 100644 assets/css/_variables.scss
 delete mode 100644 assets/css/elements/_all.scss
 delete mode 100644 assets/css/elements/content.scss
 delete mode 100644 assets/css/elements/heading.scss
 delete mode 100644 assets/css/elements/link.scss
 delete mode 100644 assets/css/elements/paragraph.scss
 delete mode 100644 assets/css/global.scss
 create mode 100644 assets/global.scss
 delete mode 100644 assets/js/footer.js
 delete mode 100644 components/ExternalLink.vue
 delete mode 100644 components/GButton.vue
 delete mode 100644 components/NavigationBar.vue

diff --git a/README.md b/README.md
index d5bb4a0..4c0bf85 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
 # moritz-ruth.de
 
+
 > The official website of Moritz Ruth
 
 ## Build Setup
diff --git a/assets/css/_mobile.scss b/assets/css/_mobile.scss
deleted file mode 100644
index 440099a..0000000
--- a/assets/css/_mobile.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@mixin mobile() {
-  @media (max-width: 800px) {
-    @content;
-  }
-}
-
-@mixin notMobile() {
-  @media (min-width: 801px) {
-    @content;
-  }
-}
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
deleted file mode 100644
index 2702cb5..0000000
--- a/assets/css/_variables.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$content-width: 1000px;
-$content-padding: 20px;
-$small-gutter: 10px;
-
-$black-brighter: #0e0e0e;
-
-$blue: #3695d8;
-$on-blue: black;
-$blue-darker: #3289c7;
diff --git a/assets/css/elements/_all.scss b/assets/css/elements/_all.scss
deleted file mode 100644
index a848541..0000000
--- a/assets/css/elements/_all.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "content";
-@import "link";
-@import "heading";
-@import "paragraph";
diff --git a/assets/css/elements/content.scss b/assets/css/elements/content.scss
deleted file mode 100644
index 2beba31..0000000
--- a/assets/css/elements/content.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import "../variables";
-
-.content {
-  width: $content-width;
-  margin: 0 auto;
-
-  @media (max-width: #{$content-width + $content-padding * 2}) {
-    width: 100%;
-    padding: 0 #{$content-padding};
-  }
-}
diff --git a/assets/css/elements/heading.scss b/assets/css/elements/heading.scss
deleted file mode 100644
index 850f405..0000000
--- a/assets/css/elements/heading.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.heading--1, .heading--2, .heading--3, .heading--4, .heading--5, .heading--6 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-.heading--1 {
-  font-size: 3.8rem;
-}
-
-.heading--2 {
-  font-size: 3rem;
-}
-
-.heading--3 {
-  font-size: 2.6rem;
-}
-
-.heading--4 {
-  font-size: 2.2rem;
-}
-
-.heading--5 {
-  font-size: 1.8rem;
-}
-
-.heading--6 {
-  font-size: 1.4rem;
-}
diff --git a/assets/css/elements/link.scss b/assets/css/elements/link.scss
deleted file mode 100644
index e71485d..0000000
--- a/assets/css/elements/link.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "../variables";
-
-.link {
-  color: $blue;
-  text-decoration: none;
-
-  transition: 100ms linear opacity;
-  opacity: 1;
-
-  &:hover {
-    opacity: 0.8;
-  }
-}
diff --git a/assets/css/elements/paragraph.scss b/assets/css/elements/paragraph.scss
deleted file mode 100644
index 8de6b89..0000000
--- a/assets/css/elements/paragraph.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.paragraph {
-  margin: 20px 0;
-
-  li {
-    margin-left: 20px;
-  }
-}
diff --git a/assets/css/global.scss b/assets/css/global.scss
deleted file mode 100644
index 75c9e83..0000000
--- a/assets/css/global.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import "elements/_all";
-
-@import "mobile";
-
-:root {
-  --navbar-height: 100px;
-
-  @include mobile {
-    --navbar-height: 80px;
-  }
-}
-
-*, ::before, ::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: "Alata", sans-serif;
-  font-size: 16px;
-}
-
-html, body, #__nuxt, #__layout, .fill-screen {
-  max-width: 100vw;
-  min-height: 100vh;
-  overflow-x: auto;
-}
-
-::selection {
-  background-color: #dddddd;
-}
diff --git a/assets/global.scss b/assets/global.scss
new file mode 100644
index 0000000..1eb2785
--- /dev/null
+++ b/assets/global.scss
@@ -0,0 +1,3 @@
+body {
+  font-family: "Alata", sans-serif;
+}
diff --git a/assets/js/footer.js b/assets/js/footer.js
deleted file mode 100644
index 9bd2ab7..0000000
--- a/assets/js/footer.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const footer = Object.freeze([
-  { label: "Legal Notice", to: "/legal-notice" },
-  { label: "Privacy Policy", to: "/privacy-policy" }
-]);
diff --git a/components/AnimatedLogo.vue b/components/AnimatedLogo.vue
index a940ca8..63cc043 100644
--- a/components/AnimatedLogo.vue
+++ b/components/AnimatedLogo.vue
@@ -7,6 +7,8 @@
 </template>
 
 <style scoped lang="scss">
+  $logo-width: 270px;
+
   .animated-logo {
     animation: logo-width 800ms 1s ease, logo-height 600ms 1.9s ease;
     animation-fill-mode: both;
@@ -27,7 +29,7 @@
     }
 
     to {
-      width: 300px;
+      width: $logo-width;
     }
   }
 
@@ -71,7 +73,7 @@
   }
 
   .animated-logo__logo {
-    width: 300px;
+    width: $logo-width;
     flex-shrink: 0;
   }
 </style>
diff --git a/components/ExternalLink.vue b/components/ExternalLink.vue
deleted file mode 100644
index 8bab975..0000000
--- a/components/ExternalLink.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <a
-    class="external-link link"
-    rel="noopener"
-    target="_blank"
-    :href="href"
-  >{{ label || href }}<ExternalIcon class="external-link__icon"/></a>
-</template>
-
-<style scoped lang="scss">
-  .external-link {
-    padding-right: 5px;
-    overflow-wrap: break-word;
-  }
-
-  .external-link__icon {
-    margin-left: 5px;
-
-    width: 15px;
-    position: relative;
-    top: 2px;
-  }
-</style>
-
-<script>
-  import ExternalIcon from "@/assets/icons/external.svg";
-
-  export default {
-    name: "ExternalLink",
-    components: { ExternalIcon },
-    props: {
-      href: {
-        type: String,
-        required: true
-      },
-      label: {
-        type: String,
-        default: null
-      }
-    }
-  };
-</script>
diff --git a/components/GButton.vue b/components/GButton.vue
deleted file mode 100644
index e9dc087..0000000
--- a/components/GButton.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<style scoped lang="scss">
-  @import "~@/assets/css/variables";
-
-  .button {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-
-    padding: 8px 15px;
-    border-radius: 4px;
-
-    height: 42px;
-
-    text-decoration: none;
-    color: $blue;
-
-    transition: 140ms ease background-color;
-    &:hover {
-      background: transparentize($blue, 0.9);
-    }
-  }
-
-  .button__text {
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: 1.2rem;
-  }
-
-  .button__prefix > * {
-    position: relative;
-    top: 2px;
-    margin-right: 6px;
-    width: 20px;
-  }
-
-  .button__suffix > * {
-    position: relative;
-    top: 2px;
-    margin-left: 6px;
-    width: 20px;
-  }
-</style>
-
-<script>
-  export default {
-    name: "GButton",
-    props: {
-      to: {
-        type: String,
-        default: ""
-      },
-      href: {
-        type: String,
-        default: ""
-      }
-    },
-    computed: {
-      isExternalLink: vm => Boolean(vm.href),
-      isInternalLink: vm => Boolean(vm.to)
-    },
-    methods: {
-      onClick(e) {
-        this.$emit("click", e);
-      }
-    },
-    render(h) {
-      const children = [
-        h("div", {
-          class: "button__prefix"
-        }, this.$slots.prefix),
-        h("div", {
-          class: "button__text"
-        }, this.$slots.default),
-        h("div", {
-          class: "button__suffix"
-        }, this.$slots.suffix)
-      ];
-
-      const baseOptions = {
-        class: "button",
-        on: {
-          click: this.onClick
-        },
-        directives: [
-          {
-            name: "ripple",
-            value: "rgba(0, 0, 0, 0.2)"
-          }
-        ]
-      };
-
-      if (this.isInternalLink) {
-        return h("nuxt-link", {
-          ...baseOptions,
-          props: {
-            to: this.to
-          }
-        }, children);
-      } else if (this.isExternalLink) {
-        return h("a", {
-          ...baseOptions,
-          attrs: {
-            href: this.href,
-            rel: "noopener"
-          }
-        }, children);
-      } else {
-        return h("div", {
-          ...baseOptions,
-          attrs: {
-            role: "button"
-          }
-        }, children);
-      }
-    }
-  };
-</script>
diff --git a/components/NavigationBar.vue b/components/NavigationBar.vue
deleted file mode 100644
index 0497c9d..0000000
--- a/components/NavigationBar.vue
+++ /dev/null
@@ -1,290 +0,0 @@
-<template>
-  <nav class="navigation-bar" :class="{ 'show-background': showBackground, open, scrolled }">
-    <div class="navigation-bar__toggle" @click="open = !open">
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-    <div class="navigation-bar__container-1 content">
-      <span class="navigation-bar__title">{{ title }}</span>
-      <div class="navigation-bar__container-2">
-        <div class="navigation-bar__links">
-          <template v-for="item in $options.navigationItems">
-            <nuxt-link
-              v-if="item.to"
-              :key="item.to"
-              :to="item.to"
-              @click.native.passive="open = false"
-            >
-              {{ item.label }}
-            </nuxt-link>
-            <a
-              v-else
-              :key="item.to"
-              rel="noopener"
-              :href="item.href"
-              @click.native.passive="open = false"
-            >
-              {{ item.label }}
-            </a>
-          </template>
-        </div>
-      </div>
-    </div>
-  </nav>
-</template>
-
-<style scoped lang="scss">
-  @import "~@/assets/css/mobile";
-  @import "~@/assets/css/variables";
-
-  .navigation-bar {
-    height: var(--navbar-height);
-
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    font-size: 1.1rem;
-    text-transform: uppercase;
-
-    background-color: transparent;
-
-    &.show-background {
-      background-color: white;
-    }
-
-    &.scrolled {
-      .navigation-bar__title {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-  }
-
-  .navigation-bar__toggle {
-    display: none;
-  }
-
-  .navigation-bar__title {
-    font-size: 1.5rem;
-    font-weight: bold;
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    flex-shrink: 0;
-    max-width: calc(100% - 10px);
-
-    transition: 200ms ease;
-    transition-property: opacity, transform;
-
-    opacity: 0;
-    transform: translateY(10px);
-
-    @include notMobile {
-      font-size: 2rem;
-    }
-  }
-
-  .navigation-bar__container-1 {
-    max-width: 100%;
-    height: 100%;
-
-    overflow: hidden;
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .navigation-bar__container-2 {
-    width: 100%;
-  }
-
-  .navigation-bar__links {
-    float: right;
-
-    a {
-      display: inline-block;
-      margin-left: 40px;
-      position: relative;
-
-      text-decoration: none;
-      color: black;
-
-      &::after {
-        content: "";
-        position: absolute;
-        top: 30px;
-        left: 0;
-        background-color: black;
-        height: 2px;
-        width: 100%;
-
-        opacity: 0;
-        transition: 200ms linear opacity;
-      }
-
-      &:hover {
-        &::after {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  @include mobile {
-    .navigation-bar__toggle {
-      display: block;
-
-      position: relative;
-      left: 30px;
-      z-index: 2;
-
-      & > span {
-        display: block;
-
-        background-color: black;
-
-        width: 30px;
-        height: 2px;
-
-        transition: 200ms linear;
-        transition-property: opacity, transform;
-
-        &:nth-child(2) {
-          margin-top: 8px;
-        }
-
-        &:nth-child(3) {
-          margin-top: 8px;
-        }
-      }
-    }
-
-    .navigation-bar__container-1 {
-      margin-left: 30px;
-    }
-
-    .navigation-bar__container-2 {
-      pointer-events: none;
-      background-color: white;
-
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      height: 100vh;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding-top: var(--navbar-height);
-
-      opacity: 0;
-      transition: 200ms ease-out opacity;
-    }
-
-    .navigation-bar__links {
-      float: none;
-
-      & > a {
-        display: block;
-        width: fit-content;
-        margin: 0 auto 20px;
-        font-size: 1.5rem;
-
-        transform: translateX(-100%);
-        opacity: 0;
-        transition: 400ms ease-out;
-        transition-property: opacity, transform;
-
-        &:after {
-          top: 35px;
-        }
-      }
-    }
-
-    .navigation-bar.open {
-      .navigation-bar__toggle > span {
-        &:nth-child(1) {
-          transform: translateY(10px) rotate(45deg);
-        }
-
-        &:nth-child(2) {
-          opacity: 0;
-        }
-
-        &:nth-child(3) {
-          transform: translateY(-10px) rotate(-45deg);
-        }
-      }
-
-      .navigation-bar__container-2 {
-        pointer-events: auto;
-        opacity: 1;
-      }
-
-      .navigation-bar__links > a {
-        transform: translateX(0);
-        opacity: 1;
-      }
-    }
-  }
-</style>
-
-<script>
-  const NAVIGATION_ITEMS = [
-    {
-      label: "Home",
-      to: "/"
-    },
-    {
-      label: "Projects",
-      to: "/projects"
-    }
-  ];
-
-  export default {
-    name: "NavigationBar",
-    navigationItems: NAVIGATION_ITEMS,
-    props: {
-      showBackground: {
-        type: Boolean,
-        default: false
-      },
-      title: {
-        type: String,
-        default: ""
-      }
-    },
-    data: () => ({
-      open: false,
-      scrollPosition: 0
-    }),
-    computed: {
-      scrolled: vm => vm.scrollPosition > 50
-    },
-    mounted() {
-      const scrollListener = () => {
-        this.scrollPosition = window.scrollY;
-      };
-
-      window.addEventListener("scroll", scrollListener, { passive: true });
-
-      this.$on("hook:beforeDestroy", () => {
-        window.removeEventListener("scroll", scrollListener);
-      });
-
-      scrollListener();
-    }
-  };
-</script>
diff --git a/components/pages/projects/GProject.vue b/components/pages/projects/GProject.vue
index 00103e2..ab86d85 100644
--- a/components/pages/projects/GProject.vue
+++ b/components/pages/projects/GProject.vue
@@ -8,32 +8,30 @@
       <slot/>
     </div>
     <hr class="project__divider"/>
-    <div class="project__buttons">
-      <GButton v-if="link" class="project__button" :href="link">
+    <div class="project__buttons flex-with-gutter">
+      <KButton v-if="link" :href="link">
         Open
         <template v-slot:suffix>
           <ArrowRightIcon/>
         </template>
-      </GButton>
-      <GButton v-if="github" class="project__button" :href="`https://github.com/${github}`">
+      </KButton>
+      <KButton v-if="github" :href="`https://github.com/${github}`">
         GitHub
         <template v-slot:prefix>
           <GitHubIcon/>
         </template>
-      </GButton>
-      <GButton v-if="npm" class="project__button" :href="`https://www.npmjs.com/package/${npm}`">
+      </KButton>
+      <KButton v-if="npm" :href="`https://www.npmjs.com/package/${npm}`">
         NPM
         <template v-slot:prefix>
           <NPMIcon style="width: 30px; top: 4px"/>
         </template>
-      </GButton>
+      </KButton>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-  @import "~@/assets/css/variables";
-
   .project__type {
     margin-top: -1rem;
     margin-bottom: 1rem;
@@ -55,30 +53,21 @@
   }
 
   .project__buttons {
-    display: flex;
-  }
-
-  .project__button {
-    &:not(:last-child) {
-      margin-right: $small-gutter;
+    & > *:not(:last-child) {
+      margin-right: 5px;
     }
   }
-
-  .project__button-icon {
-    width: 10px;
-    display: inline;
-  }
 </style>
 
 <script>
+  import KButton from "kiste/components/KButton";
   import ArrowRightIcon from "@/assets/icons/arrow_right.svg";
   import GitHubIcon from "@/assets/icons/github.svg";
   import NPMIcon from "@/assets/icons/npm.svg";
-  import GButton from "@/components/GButton";
 
   export default {
     name: "GProject",
-    components: { GButton, ArrowRightIcon, GitHubIcon, NPMIcon },
+    components: { KButton, ArrowRightIcon, GitHubIcon, NPMIcon },
     props: {
       title: {
         type: String,
diff --git a/layouts/default.vue b/layouts/default.vue
index 336591f..a8de304 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,63 +1,22 @@
 <template>
   <div class="default-layout fill-screen">
-    <div class="content default-layout__content">
+    <KApp>
       <nuxt/>
-    </div>
-    <footer class="content default-layout__footer">
-      <nuxt-link
-        v-for="link in $options.footer"
-        :key="link.to"
-        class="default-layout__footer-link"
-        :to="link.to"
-      >
-        {{ link.label }}
-      </nuxt-link>
-    </footer>
+      <KFooter/>
+    </KApp>
   </div>
 </template>
 
 <style scoped lang="scss">
-  @import "~@/assets/css/variables";
-  @import "~@/assets/css/mobile";
 
-  .default-layout__content {
-    margin-top: var(--navbar-height);
-    margin-bottom: 50px;
-  }
-
-  .default-layout__footer {
-    margin-bottom: 40px;
-    display: flex;
-    flex-direction: row;
-
-    justify-content: center;
-    align-items: center;
-
-    @include mobile {
-      flex-direction: column;
-    }
-  }
-
-  .default-layout__footer-link {
-    color: #606060;
-    text-decoration: none;
-    flex-shrink: 0;
-
-    margin: 10px;
-
-    transition: 100ms linear color;
-    &:hover {
-      color: $blue;
-    }
-  }
 </style>
 
 <script>
-  import { footer } from "@/assets/js/footer";
+  import KApp from "kiste/components/KApp";
+  import KFooter from "kiste/components/KFooter";
 
   export default {
     name: "DefaultLayout",
-    components: {},
-    footer
+    components: { KApp, KFooter }
   };
 </script>
diff --git a/layouts/none.vue b/layouts/none.vue
index 366bec2..dfbf1e6 100644
--- a/layouts/none.vue
+++ b/layouts/none.vue
@@ -1,5 +1,7 @@
 <template>
-  <nuxt/>
+  <KApp>
+    <nuxt/>
+  </KApp>
 </template>
 
 <style>
@@ -7,7 +9,10 @@
 </style>
 
 <script>
+  import KApp from "kiste/components/KApp";
+
   export default {
-    name: "NoneLayout"
+    name: "WithoutFooterLayout",
+    components: { KApp }
   };
 </script>
diff --git a/nuxt.config.js b/nuxt.config.js
index 5674027..253bc95 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -17,7 +17,7 @@ export default {
   ** Global CSS
   */
   css: [
-    "@/assets/css/global.scss"
+    "@/assets/global.scss"
   ],
   /*
   ** Plugins to load before mounting the App
@@ -30,7 +30,8 @@ export default {
   */
   buildModules: [
     // Doc: https://github.com/nuxt-community/eslint-module
-    "@nuxtjs/eslint-module"
+    "@nuxtjs/eslint-module",
+    "kiste/nuxt"
   ],
   /*
   ** Nuxt.js modules
@@ -40,6 +41,32 @@ export default {
     "@nuxtjs/pwa"
   ],
 
+  kiste: {
+    theme: {
+      contentPadding: "10px"
+    },
+    navigationItems: [
+      {
+        label: "Home",
+        to: "/"
+      },
+      {
+        label: "Projects",
+        to: "/projects"
+      }
+    ],
+    footerItems: [
+      {
+        label: "Legal Notice",
+        to: "/legal-notice"
+      },
+      {
+        label: "Privacy Policy",
+        to: "/privacy-policy"
+      }
+    ]
+  },
+
   // https://pwa.nuxtjs.org/modules/workbox.html
   workbox: {
     workboxExtensions: [
diff --git a/package.json b/package.json
index 006bd7e..072c235 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "eslint-plugin-nuxt": ">=0.4.2",
     "eslint-plugin-vue": "^6.0.1",
     "fibers": "^4.0.2",
+    "kiste": "^1.2.0",
     "sass": "^1.23.7",
     "sass-loader": "^8.0.0",
     "serve": "^11.2.0",
diff --git a/pages/index.vue b/pages/index.vue
index f05ccea..8fb09ce 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="index-page">
-    <NavigationBar show-background/>
+    <KNavigationBar/>
     <AnimatedLogo/>
     <main class="index-page__content">
       <div class="index-page__name">
@@ -21,22 +21,12 @@
         </a>
       </div>
     </main>
-    <footer class="index-page__footer">
-      <nuxt-link
-        v-for="link in $options.footer"
-        :key="link.to"
-        class="index-page__footer-link"
-        :to="link.to"
-      >
-        {{ link.label }}
-      </nuxt-link>
-    </footer>
+    <KFooter class="index-page__footer"/>
   </div>
 </template>
 
 <style scoped lang="scss">
-  @import "~@/assets/css/variables";
-  @import "~@/assets/css/mobile";
+  @use "~kiste/css/mixins/screenSize";
 
   .index-page {
     display: flex;
@@ -44,7 +34,7 @@
     align-items: center;
     flex-direction: column;
 
-    height: 100vh;
+    height: calc(100vh - var(--x-navbar-height));
   }
 
   .index-page__name {
@@ -93,56 +83,36 @@
 
   .index-page__footer {
     position: absolute;
-    top: 100vh;
-    left: 0;
-    right: 0;
-
     padding: 20px 0;
 
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    margin-bottom: 10px;
 
-    @include notMobile {
+    @include screenSize.notMobile {
       top: unset;
       bottom: 0;
       right: 0;
 
       width: fit-content;
       padding: 20px;
+      margin: 0;
 
       flex-direction: row;
     }
   }
-
-  .index-page__footer-link {
-    color: #606060;
-    text-decoration: none;
-    flex-shrink: 0;
-
-    margin: 0 10px;
-
-    transition: 100ms linear color;
-    &:hover {
-      color: $blue;
-    }
-  }
 </style>
 
 <script>
+  import KNavigationBar from "kiste/components/KNavigationBar";
+  import KFooter from "kiste/components/KFooter";
   import AnimatedLogo from "../components/AnimatedLogo";
   import GitHubIcon from "@/assets/icons/github.svg";
   import TwitterIcon from "@/assets/icons/twitter.svg";
   import InstagramIcon from "@/assets/icons/instagram.svg";
   import EmailIcon from "@/assets/icons/email.svg";
-  import NavigationBar from "@/components/NavigationBar";
-  import { footer } from "@/assets/js/footer";
 
   export default {
     name: "IndexPage",
     layout: "none",
-    components: { NavigationBar, AnimatedLogo, GitHubIcon, TwitterIcon, InstagramIcon, EmailIcon },
-    footer
+    components: { AnimatedLogo, GitHubIcon, TwitterIcon, InstagramIcon, EmailIcon, KNavigationBar, KFooter }
   };
 </script>
diff --git a/pages/legal-notice.vue b/pages/legal-notice.vue
index 2c1f4d6..e128eaa 100644
--- a/pages/legal-notice.vue
+++ b/pages/legal-notice.vue
@@ -1,79 +1,77 @@
 <template>
   <div class="legal-notice-page">
-    <NavigationBar show-background title="Legal Notice"/>
-    <h1 class="heading--1">
-      Legal Notice
-    </h1>
-    <h2 class="heading--3">
-      Diensteanbieter
-    </h2>
-    <p class="paragraph">
-      Moritz Ruth<br>
-      Zum Galgenberg 19<br>
-      66539 Neunkirchen<br>
-      Deutschland
-    </p>
-    <h2 class="heading--3">
-      Kontaktmöglichkeiten
-    </h2>
-    <p class="paragraph">
-      <b>Telefon</b>: +49 176 46146329
-    </p>
-    <p class="paragraph">
-      <b>E-Mail</b>: <a class="link" href="mailto:legal@moritz-ruth.de">legal@moritz-ruth.de</a>
-    </p>
-    <h2 class="heading--3">
-      Haftungs- und Urheberrechtshinweise
-    </h2>
-    <p class="paragraph">
-      <b>Haftungsausschluss</b>:
-      Die Inhalte dieses Onlineangebotes wurden sorgfältig und nach unserem aktuellen Kenntnisstand
-      erstellt, dienen jedoch nur der Information und entfalten keine rechtlich bindende Wirkung, sofern es sich nicht
-      um gesetzlich verpflichtende Informationen (z.B. das Impressum, die Datenschutzerklärung, AGB oder
-      Widerrufsbelehrungen für Verbraucher) handelt. Wir behalten uns vor, die Inhalte vollständig oder teilweise zu
-      ändern oder zu löschen, soweit vertragliche Verpflichtungen unberührt bleiben. Alle Angebote sind freibleibend und
-      unverbindlich.
-    </p>
-    <p class="paragraph">
-      <b>Links auf fremde Webseiten</b>:
-      Inhalte fremder Webseiten, auf die wir direkt oder indirekt verweisen, liegen
-      außerhalb unseres Verantwortungsbereiches und machen wir uns nicht zu Eigen. Für alle Inhalte und insbesondere für
-      Schäden, die aus der Nutzung der in den verlinkten Webseiten aufrufbaren Informationen entstehen, haftet allein
-      der Anbieter der verlinkten Webseiten.
-    </p>
-    <p class="paragraph">
-      <b>Urheberrechte und Markenrechte</b>:
-      Alle auf dieser Website dargestellten Inhalte, wie Texte, Fotografien, Grafiken,
-      Marken und Warenzeichen sind durch die jeweiligen Schutzrechte (Urheberrechte, Markenrechte) geschützt. Die
-      Verwendung, Vervielfältigung usw. unterliegen unseren Rechten oder den Rechten der jeweiligen Urheber bzw.
-      Rechteverwalter.
-    </p>
-    <p class="paragraph">
-      <b>Hinweise auf Rechtsverstöße</b>:
-      Sollten Sie innerhalb unseres Internetauftritts Rechtsverstöße bemerken, bitten wir
-      Sie uns auf diese hinzuweisen. Wir werden rechtswidrige Inhalte und Links nach Kenntnisnahme unverzüglich
-      entfernen.
-    </p>
-    <a
-      class="link"
-      href="https://datenschutz-generator.de/?l=de"
-      rel="noopener"
-      title="Rechtstext von Dr. Schwenke - für weitere Informationen bitte anklicken."
-      target="_blank"
-    >Erstellt mit kostenlosem Datenschutz-Generator.de von Dr. Thomas Schwenke</a>
+    <KNavigationBar title="Legal Notice"/>
+    <div class="content">
+      <h1 class="heading--1">
+        Legal Notice
+      </h1>
+      <h2 class="heading--3">
+        Diensteanbieter
+      </h2>
+      <p class="paragraph">
+        Moritz Ruth<br>
+        Zum Galgenberg 19<br>
+        66539 Neunkirchen<br>
+        Deutschland
+      </p>
+      <h2 class="heading--3">
+        Kontaktmöglichkeiten
+      </h2>
+      <p class="paragraph">
+        <b>Telefon</b>: +49 176 46146329
+      </p>
+      <p class="paragraph">
+        <b>E-Mail</b>: <a class="link" href="mailto:legal@moritz-ruth.de">legal@moritz-ruth.de</a>
+      </p>
+      <h2 class="heading--3">
+        Haftungs- und Urheberrechtshinweise
+      </h2>
+      <p class="paragraph">
+        <b>Haftungsausschluss</b>:
+        Die Inhalte dieses Onlineangebotes wurden sorgfältig und nach unserem aktuellen Kenntnisstand
+        erstellt, dienen jedoch nur der Information und entfalten keine rechtlich bindende Wirkung, sofern es sich nicht
+        um gesetzlich verpflichtende Informationen (z.B. das Impressum, die Datenschutzerklärung, AGB oder
+        Widerrufsbelehrungen für Verbraucher) handelt. Wir behalten uns vor, die Inhalte vollständig oder teilweise zu
+        ändern oder zu löschen, soweit vertragliche Verpflichtungen unberührt bleiben. Alle Angebote sind freibleibend und
+        unverbindlich.
+      </p>
+      <p class="paragraph">
+        <b>Links auf fremde Webseiten</b>:
+        Inhalte fremder Webseiten, auf die wir direkt oder indirekt verweisen, liegen
+        außerhalb unseres Verantwortungsbereiches und machen wir uns nicht zu Eigen. Für alle Inhalte und insbesondere für
+        Schäden, die aus der Nutzung der in den verlinkten Webseiten aufrufbaren Informationen entstehen, haftet allein
+        der Anbieter der verlinkten Webseiten.
+      </p>
+      <p class="paragraph">
+        <b>Urheberrechte und Markenrechte</b>:
+        Alle auf dieser Website dargestellten Inhalte, wie Texte, Fotografien, Grafiken,
+        Marken und Warenzeichen sind durch die jeweiligen Schutzrechte (Urheberrechte, Markenrechte) geschützt. Die
+        Verwendung, Vervielfältigung usw. unterliegen unseren Rechten oder den Rechten der jeweiligen Urheber bzw.
+        Rechteverwalter.
+      </p>
+      <p class="paragraph">
+        <b>Hinweise auf Rechtsverstöße</b>:
+        Sollten Sie innerhalb unseres Internetauftritts Rechtsverstöße bemerken, bitten wir
+        Sie uns auf diese hinzuweisen. Wir werden rechtswidrige Inhalte und Links nach Kenntnisnahme unverzüglich
+        entfernen.
+      </p>
+      <a
+        class="link"
+        href="https://datenschutz-generator.de/?l=de"
+        rel="noopener"
+        title="Rechtstext von Dr. Schwenke - für weitere Informationen bitte anklicken."
+        target="_blank"
+      >Erstellt mit kostenlosem Datenschutz-Generator.de von Dr. Thomas Schwenke</a>
+    </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-
-</style>
-
 <script>
-  import NavigationBar from "@/components/NavigationBar";
+  import KNavigationBar from "kiste/components/KNavigationBar";
 
   export default {
     name: "LegalNoticePage",
-    components: { NavigationBar },
+    components: { KNavigationBar },
     head: {
       htmlAttrs: {
         lang: "de"
diff --git a/pages/privacy-policy.vue b/pages/privacy-policy.vue
index 3586280..0e73bf6 100644
--- a/pages/privacy-policy.vue
+++ b/pages/privacy-policy.vue
@@ -1,273 +1,279 @@
 <template>
   <div class="privacy-policy-page">
-    <NavigationBar show-background title="Datenschutzerklärung"/>
-    <h1 class="heading--1">
-      Datenschutzerklärung
-    </h1>
-    <p class="paragraph">
-      Verantwortlicher im Sinne der Datenschutzgesetze, insbesondere der EU-Datenschutzgrundverordnung (DSGVO), ist:
-    </p>
-    <p class="paragraph">
-      Moritz Ruth<br>
-      Zum Galgenberg 19<br>
-      66539 Neunkirchen<br>
-      Deutschland
-    </p>
-    <h2 class="heading--2">
-      Ihre Betroffenenrechte
-    </h2>
-    <p class="paragraph">
-      Unter den angegebenen Kontaktdaten unseres Datenschutzbeauftragten können Sie jederzeit folgende Rechte ausüben:
-    </p>
-    <ul class="paragraph">
-      <li>Auskunft über Ihre bei uns gespeicherten Daten und deren Verarbeitung (Art. 15 DSGVO),</li>
-      <li>Berichtigung unrichtiger personenbezogener Daten (Art. 16 DSGVO),</li>
-      <li>Löschung Ihrer bei uns gespeicherten Daten (Art. 17 DSGVO),</li>
-      <li>
-        Einschränkung der Datenverarbeitung, sofern wir Ihre Daten aufgrund gesetzlicher Pflichten noch nicht löschen
-        dürfen (Art. 18 DSGVO),
-      </li>
-      <li>Widerspruch gegen die Verarbeitung Ihrer Daten bei uns (Art. 21 DSGVO) und</li>
-      <li>
-        Datenübertragbarkeit, sofern Sie in die Datenverarbeitung eingewilligt haben oder einen Vertrag mit uns
-        abgeschlossen haben (Art. 20 DSGVO).
-      </li>
-    </ul>
-    <p class="paragraph">
-      Sofern Sie uns eine Einwilligung erteilt haben, können Sie diese jederzeit mit Wirkung für die Zukunft widerrufen.
-    </p>
-    <p class="paragraph">
-      Sie können sich jederzeit mit einer Beschwerde an eine Aufsichtsbehörde wenden, z. B. an die zuständige
-      Aufsichtsbehörde des Bundeslands Ihres Wohnsitzes oder an die für uns als verantwortliche Stelle zuständige
-      Behörde.
-    </p>
-    <p class="paragraph">
-      Eine Liste der Aufsichtsbehörden (für den nichtöffentlichen Bereich) mit Anschrift finden Sie unter:
-      <ExternalLink href="https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html"/>.
-    </p>
-    <h2 class="heading--2">
-      Erfassung allgemeiner Informationen beim Besuch unserer Website
-    </h2>
-    <h3 class="heading--3">
-      Art und Zweck der Verarbeitung
-    </h3>
-    <p class="paragraph">
-      Wenn Sie auf unsere Website zugreifen, d.h., wenn Sie sich nicht registrieren oder anderweitig Informationen
-      übermitteln, werden automatisch Informationen allgemeiner Natur erfasst. Diese Informationen (Server-Logfiles)
-      beinhalten etwa die Art des Webbrowsers, das verwendete Betriebssystem, den Domainnamen Ihres
-      Internet-Service-Providers, Ihre IP-Adresse und ähnliches.
-    </p>
-    <p class="paragraph">
-      Sie werden insbesondere zu folgenden Zwecken verarbeitet
-    </p>
-    <ul class="paragraph">
-      <li>Sicherstellung eines problemlosen Verbindungsaufbaus der Website,</li>
-      <li>Sicherstellung einer reibungslosen Nutzung unserer Website,</li>
-      <li>Auswertung der Systemsicherheit und -stabilität sowie</li>
-      <li>zu weiteren administrativen Zwecken.</li>
-    </ul>
-    <p class="paragraph">
-      Wir verwenden Ihre Daten nicht, um Rückschlüsse auf Ihre Person zu ziehen. Informationen dieser Art werden von uns
-      ggfs. statistisch ausgewertet, um unseren Internetauftritt und die dahinterstehende Technik zu optimieren.
-    </p>
-    <h3 class="heading--3">
-      Rechtsgrundlage
-    </h3>
-    <p class="paragraph">
-      Die Verarbeitung erfolgt gemäß Art. 6 Abs. 1 lit. f DSGVO auf Basis unseres berechtigten Interesses an der
-      Verbesserung der Stabilität und Funktionalität unserer Website.
-    </p>
-    <h3 class="heading--3">
-      Empfänger
-    </h3>
-    <p class="paragraph">
-      Empfänger der Daten sind ggf. technische Dienstleister, die für den Betrieb und die Wartung unserer Webseite als
-      Auftragsverarbeiter tätig werden.
-    </p>
-    <h3 class="heading--3">
-      Speicherdauer
-    </h3>
-    <p class="paragraph">
-      Die Daten werden gelöscht, sobald diese für den Zweck der Erhebung nicht mehr erforderlich sind. Dies ist für die
-      Daten, die der Bereitstellung der Webseite dienen, grundsätzlich der Fall, wenn die jeweilige Sitzung beendet ist.
-    </p>
-    <h3 class="heading--3">
-      Bereitstellung vorgeschrieben oder erforderlich
-    </h3>
-    <p class="paragraph">
-      Die Bereitstellung der vorgenannten personenbezogenen Daten ist weder gesetzlich noch vertraglich vorgeschrieben.
-      Ohne die IP-Adresse ist jedoch der Dienst und die Funktionsfähigkeit unserer Website nicht gewährleistet. Zudem
-      können einzelne Dienste und Services nicht verfügbar oder eingeschränkt sein. Aus diesem Grund ist ein Widerspruch
-      ausgeschlossen.
-    </p>
-    <h2 class="heading--2">
-      Verwendung von Scriptbibliotheken (Google Webfonts)
-    </h2>
-    <h3 class="heading--3">
-      Art und Zweck der Verarbeitung
-    </h3>
-    <p class="paragraph">
-      Um unsere Inhalte browserübergreifend korrekt und grafisch ansprechend darzustellen, verwenden wir auf dieser
-      Website „Google Web Fonts“ der Google LLC (1600 Amphitheatre Parkway, Mountain View, CA 94043, USA; nachfolgend
-      „Google“) zur Darstellung von Schriften.
-    </p>
-    <p class="paragraph">
-      Die Datenschutzrichtlinie des Bibliothekbetreibers Google finden Sie hier:
-      <ExternalLink href="https://www.google.com/policies/privacy/"/>
-    </p>
-    <h3 class="heading--3">
-      Rechtsgrundlage
-    </h3>
-    <p class="paragraph">
-      Rechtsgrundlage für die Einbindung von Google Webfonts und dem damit verbundenen Datentransfer zu Google ist Ihre
-      Einwilligung (Art. 6 Abs. 1 lit. a DSGVO).
-    </p>
-    <h3 class="heading--3">
-      Empfänger
-    </h3>
-    <p class="paragraph">
-      Der Aufruf von Scriptbibliotheken oder Schriftbibliotheken löst automatisch eine Verbindung zum Betreiber der
-      Bibliothek aus. Dabei ist es theoretisch möglich – aktuell allerdings auch unklar ob und ggf. zu welchen Zwecken
-      – dass der Betreiber in diesem Fall Google Daten erhebt.
-    </p>
-    <h3 class="heading--3">
-      Speicherdauer
-    </h3>
-    <p class="paragraph">
-      Wir erheben keine personenbezogenen Daten, durch die Einbindung von Google Webfonts.
-    </p>
-    <p class="paragraph">
-      Weitere Informationen zu Google Web Fonts finden Sie unter
-      <ExternalLink href="https://developers.google.com/fonts/faq"/> und in der Datenschutzerklärung von Google:
-      <ExternalLink href="https://www.google.com/policies/privacy/"/>.
-    </p>
-    <h3 class="heading--3">
-      Drittlandtransfer
-    </h3>
-    <p class="paragraph">
-      Google verarbeitet Ihre Daten in den USA und hat sich dem EU_US Privacy Shield unterworfen
-      <ExternalLink href="https://www.privacyshield.gov/EU-US-Framework"/>.
-    </p>
-    <h3 class="heading--3">
-      Bereitstellung vorgeschrieben oder erforderlich
-    </h3>
-    <p class="paragraph">
-      Die Bereitstellung der personenbezogenen Daten ist weder gesetzlich, noch vertraglich vorgeschrieben. Allerdings
-      kann ggfs. die korrekte Darstellung der Inhalte durch Standardschriften nicht möglich sein.
-    </p>
-    <h3 class="heading--3">
-      Widerruf der Einwilligung
-    </h3>
-    <p class="paragraph">
-      Zur Darstellung der Inhalte wird regelmäßig die Programmiersprache JavaScript verwendet. Sie können der
-      Datenverarbeitung daher widersprechen, indem Sie die Ausführung von JavaScript in Ihrem Browser deaktivieren oder
-      einen JavaScript-Blocker installieren. Bitte beachten Sie, dass es hierdurch zu Funktionseinschränkungen auf der
-      Website kommen kann.
-    </p>
-    <h2 class="heading--2">
-      Eingebettete YouTube-Videos
-    </h2>
-    <h3 class="heading--3">
-      Art und Zweck der Verarbeitung
-    </h3>
-    <p class="paragraph">
-      Auf einigen unserer Webseiten betten wir YouTube-Videos ein. Betreiber der entsprechenden Plugins ist die YouTube,
-      LLC, 901 Cherry Ave., San Bruno, CA 94066, USA (nachfolgend „YouTube“). Wenn Sie eine Seite mit dem YouTube-Plugin
-      besuchen, wird eine Verbindung zu Servern von YouTube hergestellt. Dabei wird YouTube mitgeteilt, welche Seiten
-      Sie besuchen. Wenn Sie in Ihrem YouTube-Account eingeloggt sind, kann YouTube Ihr Surfverhalten Ihnen persönlich
-      zuzuordnen. Dies verhindern Sie, indem Sie sich vorher aus Ihrem YouTube-Account ausloggen.
-    </p>
-    <p class="paragraph">
-      Wird ein YouTube-Video gestartet, setzt der Anbieter Cookies ein, die Hinweise über das Nutzerverhalten sammeln.
-    </p>
-    <p class="paragraph">
-      Weitere Informationen zu Zweck und Umfang der Datenerhebung und ihrer Verarbeitung durch YouTube erhalten Sie in
-      den Datenschutzerklärungen des Anbieters, Dort erhalten Sie auch weitere Informationen zu Ihren diesbezüglichen
-      Rechten und Einstellungsmöglichkeiten zum Schutze Ihrer Privatsphäre
-      (<ExternalLink href="https://policies.google.com/privacy"/>). Google verarbeitet Ihre Daten in den USA und hat
-      sich dem EU-US Privacy Shield unterworfen <ExternalLink href="https://www.privacyshield.gov/EU-US-Framework"/>.
-    </p>
-    <h3 class="heading--3">
-      Rechtsgrundlage
-    </h3>
-    <p class="paragraph">
-      Rechtsgrundlage für die Einbindung von YouTube und dem damit verbundenen Datentransfer zu Google ist Ihre
-      Einwilligung (Art. 6 Abs. 1 lit. a DSGVO).
-    </p>
-    <h3 class="heading--3">
-      Empfänger
-    </h3>
-    <p class="paragraph">
-      Der Aufruf von YouTube löst automatisch eine Verbindung zu Google aus.
-    </p>
-    <h3 class="heading--3">
-      Speicherdauer und Widerruf der Einwilligung:
-    </h3>
-    <p class="paragraph">
-      Wer das Speichern von Cookies für das Google-Ad-Programm deaktiviert hat, wird auch beim Anschauen von
-      YouTube-Videos mit keinen solchen Cookies rechnen müssen. YouTube legt aber auch in anderen Cookies
-      nicht-personenbezogene Nutzungsinformationen ab. Möchten Sie dies verhindern, so müssen Sie das Speichern von
-      Cookies im Browser blockieren.
-    </p>
-    <p class="paragraph">
-      Weitere Informationen zum Datenschutz bei „YouTube“ finden Sie in der Datenschutzerklärung des Anbieters unter:
-      <ExternalLink href="https://www.google.de/intl/de/policies/privacy/"/>
-    </p>
-    <h3 class="heading--3">
-      Drittlandtransfer
-    </h3>
-    <p class="paragraph">
-      Google verarbeitet Ihre Daten in den USA und hat sich dem EU_US Privacy Shield unterworfen
-      <ExternalLink href="https://www.privacyshield.gov/EU-US-Framework"/>.
-    </p>
-    <h3 class="heading--3">
-      Bereitstellung vorgeschrieben oder erforderlich
-    </h3>
-    <p class="paragraph">
-      Die Bereitstellung Ihrer personenbezogenen Daten erfolgt freiwillig, allein auf Basis Ihrer Einwilligung. Sofern
-      Sie den Zugriff unterbinden, kann es hierdurch zu Funktionseinschränkungen auf der Website kommen.
-    </p>
-    <h2 class="heading--2">
-      SSL-Verschlüsselung
-    </h2>
-    <p class="paragraph">
-      Um die Sicherheit Ihrer Daten bei der Übertragung zu schützen, verwenden wir dem aktuellen Stand der Technik
-      entsprechende Verschlüsselungsverfahren (z. B. SSL) über HTTPS.
-    </p>
-    <h2 class="heading--2">
-      Änderung unserer Datenschutzbestimmungen
-    </h2>
-    <p class="paragraph">
-      Wir behalten uns vor, diese Datenschutzerklärung anzupassen, damit sie stets den aktuellen rechtlichen
-      Anforderungen entspricht oder um Änderungen unserer Leistungen in der Datenschutzerklärung umzusetzen, z.B. bei
-      der Einführung neuer Services. Für Ihren erneuten Besuch gilt dann die neue Datenschutzerklärung.
-    </p>
-    <h2 class="heading--2">
-      Fragen an den Datenschutzbeauftragten
-    </h2>
-    <p class="paragraph">
-      Wenn Sie Fragen zum Datenschutz haben, schreiben Sie uns bitte eine E-Mail oder wenden Sie sich direkt an die für
-      den Datenschutz verantwortliche Person:
-    </p>
-    <p class="paragraph">
-      Moritz Ruth<br>
-      Zum Galgenberg 19<br>
-      66539 Neunkirchen<br>
-      Deutschland
-    </p>
-    <p class="paragraph">
-      <b>Telefon</b>: +49 176 46146329
-    </p>
-    <p class="paragraph">
-      <b>E-Mail</b>: <a class="link" href="mailto:legal@moritz-ruth.de">legal@moritz-ruth.de</a>
-    </p>
-    <p class="paragraph">
-      Die Datenschutzerklärung wurde mithilfe der activeMind AG erstellt, den Experten für
-      <ExternalLink
-        href="https://www.activemind.de/datenschutz/datenschutzhinweis-generator/"
-        label="externe Datenschutzbeauftragte"
-      /> (Version #2019-04-10).
-    </p>
+    <KNavigationBar title="Datenschutzerklärung"/>
+    <div class="content">
+      <h1 class="heading--1">
+        Datenschutzerklärung
+      </h1>
+      <p class="paragraph">
+        Verantwortlicher im Sinne der Datenschutzgesetze, insbesondere der EU-Datenschutzgrundverordnung (DSGVO), ist:
+      </p>
+      <p class="paragraph">
+        Moritz Ruth<br>
+        Zum Galgenberg 19<br>
+        66539 Neunkirchen<br>
+        Deutschland
+      </p>
+      <h2 class="heading--2">
+        Ihre Betroffenenrechte
+      </h2>
+      <p class="paragraph">
+        Unter den angegebenen Kontaktdaten unseres Datenschutzbeauftragten können Sie jederzeit folgende Rechte ausüben:
+      </p>
+      <ul class="paragraph">
+        <li>Auskunft über Ihre bei uns gespeicherten Daten und deren Verarbeitung (Art. 15 DSGVO),</li>
+        <li>Berichtigung unrichtiger personenbezogener Daten (Art. 16 DSGVO),</li>
+        <li>Löschung Ihrer bei uns gespeicherten Daten (Art. 17 DSGVO),</li>
+        <li>
+          Einschränkung der Datenverarbeitung, sofern wir Ihre Daten aufgrund gesetzlicher Pflichten noch nicht löschen
+          dürfen (Art. 18 DSGVO),
+        </li>
+        <li>Widerspruch gegen die Verarbeitung Ihrer Daten bei uns (Art. 21 DSGVO) und</li>
+        <li>
+          Datenübertragbarkeit, sofern Sie in die Datenverarbeitung eingewilligt haben oder einen Vertrag mit uns
+          abgeschlossen haben (Art. 20 DSGVO).
+        </li>
+      </ul>
+      <p class="paragraph">
+        Sofern Sie uns eine Einwilligung erteilt haben, können Sie diese jederzeit mit Wirkung für die Zukunft
+        widerrufen.
+      </p>
+      <p class="paragraph">
+        Sie können sich jederzeit mit einer Beschwerde an eine Aufsichtsbehörde wenden, z. B. an die zuständige
+        Aufsichtsbehörde des Bundeslands Ihres Wohnsitzes oder an die für uns als verantwortliche Stelle zuständige
+        Behörde.
+      </p>
+      <p class="paragraph">
+        Eine Liste der Aufsichtsbehörden (für den nichtöffentlichen Bereich) mit Anschrift finden Sie unter:
+        <KExternalLink href="https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html"/>.
+      </p>
+      <h2 class="heading--2">
+        Erfassung allgemeiner Informationen beim Besuch unserer Website
+      </h2>
+      <h3 class="heading--3">
+        Art und Zweck der Verarbeitung
+      </h3>
+      <p class="paragraph">
+        Wenn Sie auf unsere Website zugreifen, d.h., wenn Sie sich nicht registrieren oder anderweitig Informationen
+        übermitteln, werden automatisch Informationen allgemeiner Natur erfasst. Diese Informationen (Server-Logfiles)
+        beinhalten etwa die Art des Webbrowsers, das verwendete Betriebssystem, den Domainnamen Ihres
+        Internet-Service-Providers, Ihre IP-Adresse und ähnliches.
+      </p>
+      <p class="paragraph">
+        Sie werden insbesondere zu folgenden Zwecken verarbeitet
+      </p>
+      <ul class="paragraph">
+        <li>Sicherstellung eines problemlosen Verbindungsaufbaus der Website,</li>
+        <li>Sicherstellung einer reibungslosen Nutzung unserer Website,</li>
+        <li>Auswertung der Systemsicherheit und -stabilität sowie</li>
+        <li>zu weiteren administrativen Zwecken.</li>
+      </ul>
+      <p class="paragraph">
+        Wir verwenden Ihre Daten nicht, um Rückschlüsse auf Ihre Person zu ziehen. Informationen dieser Art werden von
+        uns ggfs. statistisch ausgewertet, um unseren Internetauftritt und die dahinterstehende Technik zu
+        optimieren.
+      </p>
+      <h3 class="heading--3">
+        Rechtsgrundlage
+      </h3>
+      <p class="paragraph">
+        Die Verarbeitung erfolgt gemäß Art. 6 Abs. 1 lit. f DSGVO auf Basis unseres berechtigten Interesses an der
+        Verbesserung der Stabilität und Funktionalität unserer Website.
+      </p>
+      <h3 class="heading--3">
+        Empfänger
+      </h3>
+      <p class="paragraph">
+        Empfänger der Daten sind ggf. technische Dienstleister, die für den Betrieb und die Wartung unserer Webseite als
+        Auftragsverarbeiter tätig werden.
+      </p>
+      <h3 class="heading--3">
+        Speicherdauer
+      </h3>
+      <p class="paragraph">
+        Die Daten werden gelöscht, sobald diese für den Zweck der Erhebung nicht mehr erforderlich sind. Dies ist für
+        die Daten, die der Bereitstellung der Webseite dienen, grundsätzlich der Fall, wenn die jeweilige Sitzung
+        beendet ist.
+      </p>
+      <h3 class="heading--3">
+        Bereitstellung vorgeschrieben oder erforderlich
+      </h3>
+      <p class="paragraph">
+        Die Bereitstellung der vorgenannten personenbezogenen Daten ist weder gesetzlich noch vertraglich
+        vorgeschrieben. Ohne die IP-Adresse ist jedoch der Dienst und die Funktionsfähigkeit unserer Website nicht
+        gewährleistet. Zudem können einzelne Dienste und Services nicht verfügbar oder eingeschränkt sein. Aus diesem
+        Grund ist ein Widerspruch ausgeschlossen.
+      </p>
+      <h2 class="heading--2">
+        Verwendung von Scriptbibliotheken (Google Webfonts)
+      </h2>
+      <h3 class="heading--3">
+        Art und Zweck der Verarbeitung
+      </h3>
+      <p class="paragraph">
+        Um unsere Inhalte browserübergreifend korrekt und grafisch ansprechend darzustellen, verwenden wir auf dieser
+        Website „Google Web Fonts“ der Google LLC (1600 Amphitheatre Parkway, Mountain View, CA 94043, USA; nachfolgend
+        „Google“) zur Darstellung von Schriften.
+      </p>
+      <p class="paragraph">
+        Die Datenschutzrichtlinie des Bibliothekbetreibers Google finden Sie hier:
+        <KExternalLink href="https://www.google.com/policies/privacy/"/>
+      </p>
+      <h3 class="heading--3">
+        Rechtsgrundlage
+      </h3>
+      <p class="paragraph">
+        Rechtsgrundlage für die Einbindung von Google Webfonts und dem damit verbundenen Datentransfer zu Google ist
+        Ihre Einwilligung (Art. 6 Abs. 1 lit. a DSGVO).
+      </p>
+      <h3 class="heading--3">
+        Empfänger
+      </h3>
+      <p class="paragraph">
+        Der Aufruf von Scriptbibliotheken oder Schriftbibliotheken löst automatisch eine Verbindung zum Betreiber der
+        Bibliothek aus. Dabei ist es theoretisch möglich – aktuell allerdings auch unklar ob und ggf. zu welchen Zwecken
+        – dass der Betreiber in diesem Fall Google Daten erhebt.
+      </p>
+      <h3 class="heading--3">
+        Speicherdauer
+      </h3>
+      <p class="paragraph">
+        Wir erheben keine personenbezogenen Daten, durch die Einbindung von Google Webfonts.
+      </p>
+      <p class="paragraph">
+        Weitere Informationen zu Google Web Fonts finden Sie unter
+        <KExternalLink href="https://developers.google.com/fonts/faq"/> und in der Datenschutzerklärung von Google:
+        <KExternalLink href="https://www.google.com/policies/privacy/"/>.
+      </p>
+      <h3 class="heading--3">
+        Drittlandtransfer
+      </h3>
+      <p class="paragraph">
+        Google verarbeitet Ihre Daten in den USA und hat sich dem EU_US Privacy Shield unterworfen
+        <KExternalLink href="https://www.privacyshield.gov/EU-US-Framework"/>.
+      </p>
+      <h3 class="heading--3">
+        Bereitstellung vorgeschrieben oder erforderlich
+      </h3>
+      <p class="paragraph">
+        Die Bereitstellung der personenbezogenen Daten ist weder gesetzlich, noch vertraglich vorgeschrieben. Allerdings
+        kann ggfs. die korrekte Darstellung der Inhalte durch Standardschriften nicht möglich sein.
+      </p>
+      <h3 class="heading--3">
+        Widerruf der Einwilligung
+      </h3>
+      <p class="paragraph">
+        Zur Darstellung der Inhalte wird regelmäßig die Programmiersprache JavaScript verwendet. Sie können der
+        Datenverarbeitung daher widersprechen, indem Sie die Ausführung von JavaScript in Ihrem Browser deaktivieren
+        oder einen JavaScript-Blocker installieren. Bitte beachten Sie, dass es hierdurch zu Funktionseinschränkungen
+        auf der Website kommen kann.
+      </p>
+      <h2 class="heading--2">
+        Eingebettete YouTube-Videos
+      </h2>
+      <h3 class="heading--3">
+        Art und Zweck der Verarbeitung
+      </h3>
+      <p class="paragraph">
+        Auf einigen unserer Webseiten betten wir YouTube-Videos ein. Betreiber der entsprechenden Plugins ist die
+        YouTube, LLC, 901 Cherry Ave., San Bruno, CA 94066, USA (nachfolgend „YouTube“). Wenn Sie eine Seite mit dem
+        YouTube-Plugin besuchen, wird eine Verbindung zu Servern von YouTube hergestellt. Dabei wird YouTube mitgeteilt,
+        welche Seiten Sie besuchen. Wenn Sie in Ihrem YouTube-Account eingeloggt sind, kann YouTube Ihr Surfverhalten
+        Ihnen persönlich zuzuordnen. Dies verhindern Sie, indem Sie sich vorher aus Ihrem YouTube-Account ausloggen.
+      </p>
+      <p class="paragraph">
+        Wird ein YouTube-Video gestartet, setzt der Anbieter Cookies ein, die Hinweise über das Nutzerverhalten sammeln.
+      </p>
+      <p class="paragraph">
+        Weitere Informationen zu Zweck und Umfang der Datenerhebung und ihrer Verarbeitung durch YouTube erhalten Sie in
+        den Datenschutzerklärungen des Anbieters, Dort erhalten Sie auch weitere Informationen zu Ihren diesbezüglichen
+        Rechten und Einstellungsmöglichkeiten zum Schutze Ihrer Privatsphäre
+        (<KExternalLink href="https://policies.google.com/privacy"/>). Google verarbeitet Ihre Daten in den USA und hat
+        sich dem EU-US Privacy Shield unterworfen <KExternalLink href="https://www.privacyshield.gov/EU-US-Framework"/>.
+      </p>
+      <h3 class="heading--3">
+        Rechtsgrundlage
+      </h3>
+      <p class="paragraph">
+        Rechtsgrundlage für die Einbindung von YouTube und dem damit verbundenen Datentransfer zu Google ist Ihre
+        Einwilligung (Art. 6 Abs. 1 lit. a DSGVO).
+      </p>
+      <h3 class="heading--3">
+        Empfänger
+      </h3>
+      <p class="paragraph">
+        Der Aufruf von YouTube löst automatisch eine Verbindung zu Google aus.
+      </p>
+      <h3 class="heading--3">
+        Speicherdauer und Widerruf der Einwilligung:
+      </h3>
+      <p class="paragraph">
+        Wer das Speichern von Cookies für das Google-Ad-Programm deaktiviert hat, wird auch beim Anschauen von
+        YouTube-Videos mit keinen solchen Cookies rechnen müssen. YouTube legt aber auch in anderen Cookies
+        nicht-personenbezogene Nutzungsinformationen ab. Möchten Sie dies verhindern, so müssen Sie das Speichern von
+        Cookies im Browser blockieren.
+      </p>
+      <p class="paragraph">
+        Weitere Informationen zum Datenschutz bei „YouTube“ finden Sie in der Datenschutzerklärung des Anbieters unter:
+        <KExternalLink href="https://www.google.de/intl/de/policies/privacy/"/>
+      </p>
+      <h3 class="heading--3">
+        Drittlandtransfer
+      </h3>
+      <p class="paragraph">
+        Google verarbeitet Ihre Daten in den USA und hat sich dem EU_US Privacy Shield unterworfen
+        <KExternalLink href="https://www.privacyshield.gov/EU-US-Framework"/>.
+      </p>
+      <h3 class="heading--3">
+        Bereitstellung vorgeschrieben oder erforderlich
+      </h3>
+      <p class="paragraph">
+        Die Bereitstellung Ihrer personenbezogenen Daten erfolgt freiwillig, allein auf Basis Ihrer Einwilligung. Sofern
+        Sie den Zugriff unterbinden, kann es hierdurch zu Funktionseinschränkungen auf der Website kommen.
+      </p>
+      <h2 class="heading--2">
+        SSL-Verschlüsselung
+      </h2>
+      <p class="paragraph">
+        Um die Sicherheit Ihrer Daten bei der Übertragung zu schützen, verwenden wir dem aktuellen Stand der Technik
+        entsprechende Verschlüsselungsverfahren (z. B. SSL) über HTTPS.
+      </p>
+      <h2 class="heading--2">
+        Änderung unserer Datenschutzbestimmungen
+      </h2>
+      <p class="paragraph">
+        Wir behalten uns vor, diese Datenschutzerklärung anzupassen, damit sie stets den aktuellen rechtlichen
+        Anforderungen entspricht oder um Änderungen unserer Leistungen in der Datenschutzerklärung umzusetzen, z.B. bei
+        der Einführung neuer Services. Für Ihren erneuten Besuch gilt dann die neue Datenschutzerklärung.
+      </p>
+      <h2 class="heading--2">
+        Fragen an den Datenschutzbeauftragten
+      </h2>
+      <p class="paragraph">
+        Wenn Sie Fragen zum Datenschutz haben, schreiben Sie uns bitte eine E-Mail oder wenden Sie sich direkt an die
+        für den Datenschutz verantwortliche Person:
+      </p>
+      <p class="paragraph">
+        Moritz Ruth<br>
+        Zum Galgenberg 19<br>
+        66539 Neunkirchen<br>
+        Deutschland
+      </p>
+      <p class="paragraph">
+        <b>Telefon</b>: +49 176 46146329
+      </p>
+      <p class="paragraph">
+        <b>E-Mail</b>: <a class="link" href="mailto:legal@moritz-ruth.de">legal@moritz-ruth.de</a>
+      </p>
+      <p class="paragraph">
+        Die Datenschutzerklärung wurde mithilfe der activeMind AG erstellt, den Experten für
+        <KExternalLink
+          href="https://www.activemind.de/datenschutz/datenschutzhinweis-generator/"
+        >
+          externe Datenschutzbeauftragte
+        </KExternalLink> (Version #2019-04-10).
+      </p>
+    </div>
   </div>
 </template>
 
@@ -276,12 +282,12 @@
 </style>
 
 <script>
-  import NavigationBar from "@/components/NavigationBar";
-  import ExternalLink from "@/components/ExternalLink";
+  import KNavigationBar from "kiste/components/KNavigationBar";
+  import KExternalLink from "kiste/components/KExternalLink";
 
   export default {
     name: "PrivacyPolicyPage",
-    components: { ExternalLink, NavigationBar },
+    components: { KNavigationBar, KExternalLink },
     head: {
       htmlAttrs: {
         lang: "de"
diff --git a/pages/projects.vue b/pages/projects.vue
index ffe4df4..910657b 100644
--- a/pages/projects.vue
+++ b/pages/projects.vue
@@ -1,35 +1,37 @@
 <template>
   <div class="projects-page">
-    <NavigationBar show-background title="Projects"/>
-    <h1 class="heading--1">
-      Projects
-    </h1>
-    <GProject
-      type="App"
-      title="RelaxYourEyes"
-      link="https://relaxyoureyes.moritz-ruth.de"
-      github="moritzruth/relaxyoureyes"
-    >
-      A timer which reminds you to relax your eyes every 20 minutes.
-    </GProject>
-    <GProject
-      type="Website"
-      title="cryptic-game.net"
-      link="https://test.cryptic-game.net"
-      github="cryptic-game/website/tree/vueWebsite"
-    >
-      I am responsible for the new (not yet released) website of the
-      <a class="link" href="https://github.com/cryptic-game">Cryptic game</a>.
-      (Just the website, not the game itself)
-    </GProject>
-    <GProject
-      type="Node.js Library"
-      title="log-groups"
-      github="moritzruth/log-groups"
-      npm="log-groups"
-    >
-      A pretty console logging library for printing grouped messages with Node.js.
-    </GProject>
+    <KNavigationBar title="Projects"/>
+    <div class="content">
+      <h1 class="heading--1">
+        Projects
+      </h1>
+      <GProject
+        type="App"
+        title="RelaxYourEyes"
+        link="https://relaxyoureyes.moritz-ruth.de"
+        github="moritzruth/relaxyoureyes"
+      >
+        A timer which reminds you to relax your eyes every 20 minutes.
+      </GProject>
+      <GProject
+        type="Website"
+        title="cryptic-game.net"
+        link="https://test.cryptic-game.net"
+        github="cryptic-game/website/tree/vueWebsite"
+      >
+        I am responsible for the new (not yet released) website of the
+        <a class="link" href="https://github.com/cryptic-game">Cryptic game</a>.
+        (Just the website, not the game itself)
+      </GProject>
+      <GProject
+        type="Node.js Library"
+        title="log-groups"
+        github="moritzruth/log-groups"
+        npm="log-groups"
+      >
+        A pretty console logging library for printing grouped messages with Node.js.
+      </GProject>
+    </div>
   </div>
 </template>
 
@@ -38,11 +40,11 @@
 </style>
 
 <script>
-  import NavigationBar from "@/components/NavigationBar";
+  import KNavigationBar from "kiste/components/KNavigationBar";
   import GProject from "@/components/pages/projects/GProject";
 
   export default {
     name: "ProjectsPage",
-    components: { GProject, NavigationBar }
+    components: { GProject, KNavigationBar }
   };
 </script>
diff --git a/yarn.lock b/yarn.lock
index 1d6f7a9..2338bbb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2043,6 +2043,13 @@ chownr@^1.1.1, chownr@^1.1.2:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
   integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==
 
+chroma-js@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.1.0.tgz#c0be48a21fe797ef8965608c1c4f911ef2da49d5"
+  integrity sha512-uiRdh4ZZy+UTPSrAdp8hqEdVb1EllLtTHOt5TMaOjJUvi+O54/83Fc5K2ld1P+TJX+dw5B+8/sCgzI6eaur/lg==
+  dependencies:
+    cross-env "^6.0.3"
+
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -2434,6 +2441,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cross-env@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
+  integrity sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==
+  dependencies:
+    cross-spawn "^7.0.0"
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -4640,6 +4654,17 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
   integrity sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==
 
+kiste@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/kiste/-/kiste-1.2.0.tgz#d3c78fa9e3135d97e7a5fb760c8b491f08653efe"
+  integrity sha512-/K5hIpQaa9bOI6Z3oYxkBz1hJyjRn7Pv2j5BTE7gDYPnurCmskmceBPZTb/BvicnEWnwh0c07JPydAK+vJv+UQ==
+  dependencies:
+    chroma-js "^2.1.0"
+    lodash.defaultsdeep "^4.6.1"
+    lodash.kebabcase "^4.1.1"
+    lodash.mapvalues "^4.6.0"
+    vue-ripple-directive "^2.0.1"
+
 last-call-webpack-plugin@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
@@ -4761,7 +4786,7 @@ lodash.camelcase@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
 
-lodash.defaultsdeep@^4.6.0:
+lodash.defaultsdeep@^4.6.0, lodash.defaultsdeep@^4.6.1:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
   integrity sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==
@@ -4776,6 +4801,11 @@ lodash.kebabcase@^4.0.1, lodash.kebabcase@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
   integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
 
+lodash.mapvalues@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
+  integrity sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"