Add scroll to top left behavior

Fix umlauts in component links; Update 404 page
Fix typo
2024-06-28 20:07:35 +02:00 · 2024-06-28 19:37:46 +02:00 · 2024-06-28 19:08:11 +02:00 · 2024-06-28 19:05:23 +02:00 · 2024-06-28 19:02:54 +02:00 · 2024-06-28 19:00:59 +02:00
41 changed files with 345 additions and 340 deletions
--- a/default.conf
+++ b/default.conf
@ -0,0 +1,54 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+
+    #access_log  /var/log/nginx/host.access.log  main;
+
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        # Added try_files to ensure that one can link or type a specific URI
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Added charset utf-8; to ensure UTF-8 is supported
+    charset utf-8;
+
+    # TODO: Add custom error pages (for now they're commented out)
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    #error_page   500 502 503 504  /50x.html;
+    #location = /50x.html {
+    #    root   /usr/share/nginx/html;
+    #}
+
+    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
+    #
+    #location ~ \.php$ {
+    #    proxy_pass   http://127.0.0.1;
+    #}
+
+    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
+    #
+    #location ~ \.php$ {
+    #    root           html;
+    #    fastcgi_pass   127.0.0.1:9000;
+    #    fastcgi_index  index.php;
+    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
+    #    include        fastcgi_params;
+    #}
+
+    # deny access to .htaccess files, if Apache's document root
+    # concurs with nginx's one
+    #
+    #location ~ /\.ht {
+    #    deny  all;
+    #}
+}
--- a/src/router.js
+++ b/src/router.js
@ -6,37 +6,36 @@ import KlonOderLeid from './views/kurzgeschichten/klon-oder-leid'
 import Games from './views/games'
 import HuhnRammtHuhn from './views/kurzgeschichten/huhn-rammt-huhn'
 import HeiligerSteinkrieg from './views/kurzgeschichten/heiliger-steinkrieg'
-import DieLegendeVomWolfDesSdens from './views/kurzfilme/die-legende-vom-wolf-des-sdens'
+import DieLegendeVomWolfDesSuedens from './views/kurzfilme/die-legende-vom-wolf-des-suedens'
 import FunktioniertLARPAuchOnline from './views/blog/funktioniert-larp-auch-online'
-import VersetztesBedrfnis from './views/kurzgeschichten/versetztes-bedrfnis'
+import VersetztesBeduerfnis from './views/kurzgeschichten/versetztes-beduerfnis'
 import Assemblatron from './views/games/assemblatron'
 import EinsamesSchaf from './views/kurzgeschichten/einsames-schaf'
-import WiesoItrasByEinSoSimplesWieGrandiosesPPIst from './views/blog/wieso-itras-by-ein-so-simples-wie-grandioses-pp-ist'
-import DieLsungGegenLeid from './views/kurzgeschichten/die-lsung-gegen-leid'
+import WiesoItrasByEinSoSimplesWieGrandiosesPenAndPenIst from './views/blog/wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist'
+import DieLoesungGegenLeid from './views/kurzgeschichten/die-loesung-gegen-leid'
 import GefangenerGorilla from './views/kurzgeschichten/gefangener-gorilla'
 import ThemOrUs from './views/kurzgeschichten/them-or-us'
-import GetrumtesGlck from './views/kurzgeschichten/getrumtes-glck'
+import GetraeumtesGlueck from './views/kurzgeschichten/getraeumtes-glueck'
 import Blog from './views/blog'
-import WasUnterscheidetHimmelVonHlle from './views/kurzgeschichten/was-unterscheidet-himmel-von-hlle'
-import ConundrumSchattenBerOstmerkopa from './views/larps/conundrum-schatten-ber-ostmerkopa'
+import WasUnterscheidetHimmelVonHoelle from './views/kurzgeschichten/was-unterscheidet-himmel-von-hoelle'
+import ConundrumSchattenUeberOstmerkopa from './views/larps/conundrum-schatten-ueber-ostmerkopa'
 import MurphysLARP from './views/games/murphys-larp'
 import LasstMichRuhen from './views/kurzgeschichten/lasst-mich-ruhen'
 import Kurzgeschichten from './views/kurzgeschichten'
 import InfiniteDeaths from './views/kurzgeschichten/infinite-deaths'
-import LebenStattBerleben from './views/kurzgeschichten/leben-statt-berleben'
+import LebenStattUeberleben from './views/kurzgeschichten/leben-statt-ueberleben'
 import WieTalesInsideEineEinmaligeImmersionErreicht from './views/blog/wie-tales-inside-eine-einmalige-immersion-erreicht'
 import SuperkraftImStarbucks from './views/kurzgeschichten/superkraft-im-starbucks'
 import UnwichtigsterMensch from './views/kurzgeschichten/unwichtigster-mensch'
 import TeilungZweierWelten from './views/kurzgeschichten/teilung-zweier-welten'
 import WieManEinGutesOnlineLARPMachtUndWieNicht from './views/blog/wie-man-ein-gutes-online-larp-macht-und-wie-nicht'
-import Page from './views/page'
-import LARPs from './views/lar-ps'
+import LARPs from './views/larps'
 import IchWillKeinHammerSein from './views/kurzgeschichten/ich-will-kein-hammer-sein'
 import Kurzfilme from './views/kurzfilme'
-import SsseTrume from './views/larps/ssse-trume'
-import BerUns from './views/ber-uns'
+import SuesseTraeume from './views/larps/suesse-traeume'
+import UeberUns from './views/ueber-uns'
 import Larpkonzept from './views/larpkonzept'
-import EinOrdenFrEineGuteTat from './views/kurzgeschichten/ein-orden-fr-eine-gute-tat'
+import EinOrdenFrEineGuteTat from './views/kurzgeschichten/ein-orden-fuer-eine-gute-tat'
 import LetzteGelegenheit from './views/larps/letzte-gelegenheit'
 import Rosenteufel from './views/kurzgeschichten/rosenteufel'
 import Home from './views/home'
@ -49,192 +48,187 @@ export default new Router({
  mode: 'history',
  routes: [
    {
-      name: 'Klon-oder-Leid',
+      name: 'klon-oder-leid',
      path: '/kurzgeschichten/klon-oder-leid',
      component: KlonOderLeid,
    },
    {
-      name: 'Games',
+      name: 'games',
      path: '/games',
      component: Games,
    },
    {
-      name: 'Huhn-rammt-Huhn',
+      name: 'huhn-rammt-huhn',
      path: '/kurzgeschichten/huhn-rammt-huhn',
      component: HuhnRammtHuhn,
    },
    {
-      name: 'Heiliger-Steinkrieg',
+      name: 'heiliger-steinkrieg',
      path: '/kurzgeschichten/heiliger-steinkrieg',
      component: HeiligerSteinkrieg,
    },
    {
-      name: 'Die-Legende-vom-Wolf-des-Sdens',
+      name: 'die-legende-vom-wolf-des-suedens',
      path: '/kurzfilme/wolf-des-suedens',
-      component: DieLegendeVomWolfDesSdens,
+      component: DieLegendeVomWolfDesSuedens,
    },
    {
-      name: 'Funktioniert-LARP-auch-online',
+      name: 'funktioniert-larp-auch-online',
      path: '/blog/funktioniert-larp-auch-online',
      component: FunktioniertLARPAuchOnline,
    },
    {
-      name: 'Versetztes-Bedrfnis',
+      name: 'versetztes-beduerfnis',
      path: '/kurzgeschichten/versetztes-beduerfnis',
-      component: VersetztesBedrfnis,
+      component: VersetztesBeduerfnis,
    },
    {
-      name: 'Assemblatron',
+      name: 'assemblatron',
      path: '/games/assemblatron',
      component: Assemblatron,
    },
    {
-      name: 'Einsames-Schaf',
+      name: 'einsames-schaf',
      path: '/kurzgeschichten/einsames-schaf',
      component: EinsamesSchaf,
    },
    {
-      name: 'Wieso-Itras-By-ein-so-simples-wie-grandioses-PP-ist',
+      name: 'wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist',
      path: '/blog/wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist',
-      component: WiesoItrasByEinSoSimplesWieGrandiosesPPIst,
+      component: WiesoItrasByEinSoSimplesWieGrandiosesPenAndPenIst,
    },
    {
-      name: 'Die-Lsung-gegen-Leid',
+      name: 'die-loesung-gegen-leid',
      path: '/kurzgeschichten/die-loesung-gegen-leid',
-      component: DieLsungGegenLeid,
+      component: DieLoesungGegenLeid,
    },
    {
-      name: 'Gefangener-Gorilla',
+      name: 'gefangener-gorilla',
      path: '/kurzgeschichten/gefangener-gorilla',
      component: GefangenerGorilla,
    },
    {
-      name: 'Them-or-Us',
+      name: 'them-or-us',
      path: '/kurzgeschichten/them-or-us',
      component: ThemOrUs,
    },
    {
-      name: 'Getrumtes-Glck',
+      name: 'getraeumtes-glueck',
      path: '/kurzgeschichten/getraeumtes-glueck',
-      component: GetrumtesGlck,
+      component: GetraeumtesGlueck,
    },
    {
-      name: 'Blog',
+      name: 'blog',
      path: '/blog',
      component: Blog,
    },
    {
-      name: 'Was-unterscheidet-Himmel-von-Hlle',
+      name: 'was-unterscheidet-himmel-von-hoelle',
      path: '/kurzgeschichten/was-unterscheidet-himmel-von-hoelle',
-      component: WasUnterscheidetHimmelVonHlle,
+      component: WasUnterscheidetHimmelVonHoelle,
    },
    {
-      name: 'Conundrum-Schatten-ber-Ostmerkopa',
+      name: 'conundrum-schatten-ueber-ostmerkopa',
      path: '/larps/conundrum-schatten-ueber-ostmerkopa',
-      component: ConundrumSchattenBerOstmerkopa,
+      component: ConundrumSchattenUeberOstmerkopa,
    },
    {
-      name: 'Murphys-LARP',
+      name: 'murphys-larp',
      path: '/games/murphys-larp',
      component: MurphysLARP,
    },
    {
-      name: 'Lasst-mich-Ruhen',
+      name: 'lasst-mich-ruhen',
      path: '/kurzgeschichten/lasst-mich-ruhen',
      component: LasstMichRuhen,
    },
    {
-      name: 'Kurzgeschichten',
+      name: 'kurzgeschichten',
      path: '/kurzgeschichten',
      component: Kurzgeschichten,
    },
    {
-      name: 'Infinite-Deaths',
+      name: 'infinite-deaths',
      path: '/kurzgeschichten/infinite-deaths',
      component: InfiniteDeaths,
    },
    {
-      name: 'Leben-statt-berleben',
+      name: 'leben-statt-ueberleben',
      path: '/kurzgeschichten/leben-statt-ueberleben',
-      component: LebenStattBerleben,
+      component: LebenStattUeberleben,
    },
    {
-      name: 'Wie-Tales-Inside-eine-einmalige-Immersion-erreicht',
+      name: 'wie-tales-inside-eine-einmalige-immersion-erreicht',
      path: '/blog/wie-tales-inside-eine-einmalige-immersion-erreicht',
      component: WieTalesInsideEineEinmaligeImmersionErreicht,
    },
    {
-      name: 'Superkraft-im-Starbucks',
+      name: 'superkraft-im-starbucks',
      path: '/kurzgeschichten/superkraft-im-starbucks',
      component: SuperkraftImStarbucks,
    },
    {
-      name: 'Unwichtigster-Mensch',
+      name: 'unwichtigster-mensch',
      path: '/kurzgeschichten/unwichtigster-mensch',
      component: UnwichtigsterMensch,
    },
    {
-      name: 'Teilung-zweier-Welten',
+      name: 'teilung-zweier-welten',
      path: '/kurzgeschichten/teilung-zweier-welten',
      component: TeilungZweierWelten,
    },
    {
-      name: 'Wie-man-ein-gutes-Online-LARP-macht-und-wie-nicht',
+      name: 'wie-man-ein-gutes-online-larp-macht-und-wie-nicht',
      path: '/blog/wie-man-ein-gutes-online-larp-macht-und-wie-nicht',
      component: WieManEinGutesOnlineLARPMachtUndWieNicht,
    },
    {
-      name: 'Page',
-      path: '/page',
-      component: Page,
-    },
-    {
-      name: 'LARPs',
+      name: 'larps',
      path: '/larps',
      component: LARPs,
    },
    {
-      name: 'Ich-will-kein-Hammer-sein',
+      name: 'ich-will-kein-hammer-sein',
      path: '/kurzgeschichten/ich-will-kein-hammer-sein',
      component: IchWillKeinHammerSein,
    },
    {
-      name: 'Kurzfilme',
+      name: 'kurzfilme',
      path: '/kurzfilme',
      component: Kurzfilme,
    },
    {
-      name: 'Ssse-Trume',
+      name: 'suesse-traeume',
      path: '/larps/suesse-traeume',
-      component: SsseTrume,
+      component: SuesseTraeume,
    },
    {
-      name: 'ber-uns',
+      name: 'ueber-uns',
      path: '/ueber-uns',
-      component: BerUns,
+      component: UeberUns,
    },
    {
-      name: 'Larpkonzept',
+      name: 'larpkonzept',
      path: '/larpkonzept',
      component: Larpkonzept,
    },
    {
-      name: 'Ein-Orden-fr-eine-gute-Tat',
+      name: 'ein-orden-fuer-eine-gute-tat',
      path: '/kurzgeschichten/ein-orden-fuer-eine-gute-tat',
      component: EinOrdenFrEineGuteTat,
    },
    {
-      name: 'Letzte-Gelegenheit',
+      name: 'letzte-gelegenheit',
      path: '/larps/letzte-gelegenheit',
      component: LetzteGelegenheit,
    },
    {
-      name: 'Rosenteufel',
+      name: 'rosenteufel',
      path: '/kurzgeschichten/rosenteufel',
      component: Rosenteufel,
    },
    {
-      name: 'Home',
+      name: 'home',
      path: '/',
      component: Home,
    },
@ -245,4 +239,8 @@ export default new Router({
      fallback: true,
    },
  ],
+  scrollBehavior(to, from, savedPosition) {
+    // Scroll to top left on route change
+    return { x: 0, y: 0 };
+  },
 })
--- a/src/views/blog.vue
+++ b/src/views/blog.vue
@ -54,7 +54,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/blog/funktioniert-larp-auch-online.vue
+++ b/src/views/blog/funktioniert-larp-auch-online.vue
@ -66,7 +66,7 @@ export default {
  overflow: auto;
  box-shadow: 5px 5px 10px 0px #d4d4d4;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/blog/wie-man-ein-gutes-online-larp-macht-und-wie-nicht.vue
+++ b/src/views/blog/wie-man-ein-gutes-online-larp-macht-und-wie-nicht.vue
@ -69,7 +69,7 @@ export default {
  overflow: auto;
  box-shadow: 5px 5px 10px 0px #d4d4d4;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/blog/wie-tales-inside-eine-einmalige-immersion-erreicht.vue
+++ b/src/views/blog/wie-tales-inside-eine-einmalige-immersion-erreicht.vue
@ -1015,11 +1015,8 @@
          rel="noreferrer noopener"
          class="wie-tales-inside-eine-einmalige-immersion-erreicht-link2"
        >
-          Fotofän
+          Fotofänger
        </a>
-        <span class="wie-tales-inside-eine-einmalige-immersion-erreicht-text168">
-          ger
-        </span>
        <span>
          ,
          <span v-html="rawk18f"></span>
@ -1030,11 +1027,8 @@
          rel="noreferrer noopener"
          class="wie-tales-inside-eine-einmalige-immersion-erreicht-link3"
        >
-          Hagen H
+          Hagen Hoppe
        </a>
-        <span class="wie-tales-inside-eine-einmalige-immersion-erreicht-text170">
-          oppe
-        </span>
        <span>
          und
          <span v-html="rawybzr"></span>
@ -1051,7 +1045,7 @@
        <br />
        <br />
        <span>
-          Ein grosses Lob an die Erschaffer vom Tales Inside: Armin Sass und
+          Ein grosses Lob an die Erschaffer vom Tales Inside: Armin Saß und
          Jorina Havet. Sie haben mit dem Tales Inside eine Messlatte fürs LARP
          gesetzt wie wir sie uns zuvor nur erträumen konnten.
        </span>
@ -1151,7 +1145,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/blog/wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist.vue
+++ b/src/views/blog/wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="wieso-itras-by-ein-so-simples-wie-grandioses-pp-ist-container">
+  <div class="wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist-container">
    <app-navigation rootClassName="navigation-root-class-name45"></app-navigation>
    <h1 class="page-title">
      Wieso Itras By ein so simples wie grandioses P&amp;P ist
@ -19,7 +19,7 @@
      href="https://web.archive.org/web/20220819114007/https://mitoffenemvisier.com/rollenspiel/wieso-itras-by-ein-so-simples-wie-grandioses-pnp-ist/"
      target="_blank"
      rel="noreferrer noopener"
-      class="wieso-itras-by-ein-so-simples-wie-grandioses-pp-ist-download-button button"
+      class="wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist-download-button button"
    >
      <span class="button-text">Artikel auf archive.org lesen</span>
    </a>
@ -32,7 +32,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'

 export default {
-  name: 'WiesoItrasByEinSoSimplesWieGrandiosesPPIst',
+  name: 'WiesoItrasByEinSoSimplesWieGrandiosesPenAndPenIst',
  props: {},
  components: {
    AppNavigation,
@ -62,21 +62,21 @@ export default {
 </script>

 <style scoped>
-.wieso-itras-by-ein-so-simples-wie-grandioses-pp-ist-container {
+.wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist-container {
  width: 100%;
  display: flex;
  z-index: 100;
  overflow: auto;
  box-shadow: 5px 5px 10px 0px #d4d4d4;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-image: url("/forest-background-luca-dross-1500w.jpg");
  background-position: top left;
 }
-.wieso-itras-by-ein-so-simples-wie-grandioses-pp-ist-download-button {
+.wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist-download-button {
  text-decoration: none;
 }
 </style>
--- a/src/views/games.vue
+++ b/src/views/games.vue
@ -61,7 +61,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/games/assemblatron.vue
+++ b/src/views/games/assemblatron.vue
@ -76,7 +76,7 @@ export default {
  overflow: auto;
  box-shadow: 5px 5px 10px 0px #d4d4d4;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/games/murphys-larp.vue
+++ b/src/views/games/murphys-larp.vue
@ -92,7 +92,7 @@ export default {
  overflow: auto;
  box-shadow: 5px 5px 10px 0px #d4d4d4;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/home.vue
+++ b/src/views/home.vue
@ -113,7 +113,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzfilme.vue
+++ b/src/views/kurzfilme.vue
@ -61,7 +61,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzfilme/die-legende-vom-wolf-des-suedens.vue
+++ b/src/views/kurzfilme/die-legende-vom-wolf-des-suedens.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="die-legende-vom-wolf-des-sdens-container">
+  <div class="die-legende-vom-wolf-des-suedens-container">
    <app-navigation rootClassName="navigation-root-class-name41"></app-navigation>
    <h1 class="page-title">
      <span>Die Legende vom Wolf des Südens</span>
@ -11,7 +11,7 @@
    </span>
    <iframe
      src="https://www.youtube.com/embed/gaaC1lg-qYU?si=9lNTQKMdJcN-wBTy"
-      class="die-legende-vom-wolf-des-sdens-trailer-video embedded-video"
+      class="die-legende-vom-wolf-des-suedens-trailer-video embedded-video"
    ></iframe>
    <div class="text-body">
      <span>
@ -43,7 +43,7 @@
      href="https://visuation.ch/films/wolf-des-s%C3%BCdens"
      target="_blank"
      rel="noreferrer noopener"
-      class="die-legende-vom-wolf-des-sdens-download-button button"
+      class="die-legende-vom-wolf-des-suedens-download-button button"
    >
      <span class="button-text">offizielle Seite des Trailers</span>
    </a>
@ -56,7 +56,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'

 export default {
-  name: 'DieLegendeVomWolfDesSdens',
+  name: 'DieLegendeVomWolfDesSuedens',
  props: {},
  components: {
    AppNavigation,
@ -85,24 +85,24 @@ export default {
 </script>

 <style scoped>
-.die-legende-vom-wolf-des-sdens-container {
+.die-legende-vom-wolf-des-suedens-container {
  width: 100%;
  display: flex;
  z-index: 100;
  overflow: auto;
  box-shadow: 5px 5px 10px 0px #d4d4d4;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-image: url("/forest-background-luca-dross-1500w.jpg");
  background-position: top left;
 }
-.die-legende-vom-wolf-des-sdens-trailer-video {
+.die-legende-vom-wolf-des-suedens-trailer-video {
  margin-bottom: 0px;
 }
-.die-legende-vom-wolf-des-sdens-download-button {
+.die-legende-vom-wolf-des-suedens-download-button {
  text-decoration: none;
 }
 </style>
--- a/src/views/kurzgeschichten.vue
+++ b/src/views/kurzgeschichten.vue
@ -8,9 +8,26 @@
    </span>
    <div class="text-body">
      <span>
-        Hermann nutzt Kurzgeschichten um Ideen, die er spannend findet, kompakt
-        erzählerisch zusammenzufassen. Künftig möchte Hermann ähnliche Ideen
-        zusätzlich als Kurzfilme umsetzen, wenn das Filmformat dafür geeignet ist.
+        <span>
+          Hermann nutzt Kurzgeschichten um Ideen, die er spannend findet, kompakt
+          erzählerisch zusammenzufassen. Künftig möchte Hermann ähnliche Ideen
+          zusätzlich als Kurzfilme umsetzen, wenn das Filmformat dafür geeignet ist.
+        </span>
+        <br />
+        <br />
+        <span>
+          Weitere Kurzgeschichten von Fabio Geisser, einem Freund von Hermann, sind zu finden auf dessen Webseite:
+        </span>
+        <a
+            href="https://geschichtenfabio.ch"
+            target="_blank"
+            rel="noreferrer noopener"
+            class="card-link"
+            style="text-align:center;
+            text-decoration:underline;"
+          >
+            https://geschichtenfabio.ch
+        </a>
      </span>
    </div>
    <div class="kurzgeschichten-container1 card-container">
@ -63,7 +80,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/die-loesung-gegen-leid.vue
+++ b/src/views/kurzgeschichten/die-loesung-gegen-leid.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="die-lsung-gegen-leid-container">
+  <div class="die-loesung-gegen-leid-container">
    <app-navigation rootClassName="navigation-root-class-name22"></app-navigation>
    <h1 class="page-title">Die Lösung gegen Leid</h1>
    <span class="page-subtitle">
@ -10,7 +10,7 @@
      href="https://drive.google.com/file/d/16XqhRQzP0uIwtT15Lt9q7qSodAbu4dIS/view?usp=sharing"
      target="_blank"
      rel="noreferrer noopener"
-      class="die-lsung-gegen-leid-download-button button"
+      class="die-loesung-gegen-leid-download-button button"
    >
      <span class="button-text">Als PDF</span>
    </a>
@ -118,7 +118,7 @@
        src="/kurzgeschichten/openvisor_kurzgeschichte_zeichnung_die_loesung_gegen_leid-1200w.webp"
        class="shortstory-image"
      />
-      <p class="die-lsung-gegen-leid-text56 shortstory-paragraph">
+      <p class="die-loesung-gegen-leid-text56 shortstory-paragraph">
        Zeichnung von Lorena Zdanewitz.
      </p>
    </div>
@ -131,7 +131,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'

 export default {
-  name: 'DieLsungGegenLeid',
+  name: 'DieLoesungGegenLeid',
  props: {},
  components: {
    AppNavigation,
@ -160,27 +160,27 @@ export default {
 </script>

 <style scoped>
-.die-lsung-gegen-leid-container {
+.die-loesung-gegen-leid-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-image: url("/forest-background-luca-dross-1500w.jpg");
  background-position: bottom right;
 }
-.die-lsung-gegen-leid-download-button {
+.die-loesung-gegen-leid-download-button {
  text-decoration: none;
 }
-.die-lsung-gegen-leid-text56 {
+.die-loesung-gegen-leid-text56 {
  font-style: italic;
  text-align: center;
 }
@media(max-width: 991px) {
-  .die-lsung-gegen-leid-text56 {
+  .die-loesung-gegen-leid-text56 {
    font-style: italic;
  }
 }
--- a/src/views/kurzgeschichten/ein-orden-fuer-eine-gute-tat.vue
+++ b/src/views/kurzgeschichten/ein-orden-fuer-eine-gute-tat.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="ein-orden-fr-eine-gute-tat-container">
+  <div class="ein-orden-fuer-eine-gute-tat-container">
    <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
    <h1 class="page-title">
      <span>Ein Orden für eine gute Tat</span>
@ -9,17 +9,17 @@
      <span>Eine moralische Kurzgeschichte für Kinder, Dezember 2020</span>
      <br />
    </span>
-    <div class="ein-orden-fr-eine-gute-tat-container1">
+    <div class="ein-orden-fuer-eine-gute-tat-container1">
      <a
        href="https://drive.google.com/file/d/10oT5Mr9dZuApIKR_C7K765kU4pA9cg-m/view?usp=sharing"
        target="_blank"
        rel="noreferrer noopener"
-        class="ein-orden-fr-eine-gute-tat-download-button button"
+        class="ein-orden-fuer-eine-gute-tat-download-button button"
      >
        <span class="button-text">Als PDF</span>
      </a>
    </div>
-    <div class="ein-orden-fr-eine-gute-tat-text-container text-body">
+    <div class="ein-orden-fuer-eine-gute-tat-text-container text-body">
      <span>
        <span>
          &quot;Ein brauner Schneehase besucht ein ein Rothörnchen und ein
@ -80,25 +80,25 @@ export default {
 </script>

 <style scoped>
-.ein-orden-fr-eine-gute-tat-container {
+.ein-orden-fuer-eine-gute-tat-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.ein-orden-fr-eine-gute-tat-container1 {
+.ein-orden-fuer-eine-gute-tat-container1 {
  display: flex;
  position: relative;
 }
-.ein-orden-fr-eine-gute-tat-download-button {
+.ein-orden-fuer-eine-gute-tat-download-button {
  text-decoration: none;
 }
-.ein-orden-fr-eine-gute-tat-text-container {
+.ein-orden-fuer-eine-gute-tat-text-container {
  width: 90%;
  max-width: 1080px;
  align-items: flex-end;
@ -106,7 +106,7 @@ export default {
  justify-content: center;
 }
@media(max-width: 991px) {
-  .ein-orden-fr-eine-gute-tat-text-container {
+  .ein-orden-fuer-eine-gute-tat-text-container {
    width: 90%;
  }
 }
--- a/src/views/kurzgeschichten/einsames-schaf.vue
+++ b/src/views/kurzgeschichten/einsames-schaf.vue
@ -116,7 +116,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/gefangener-gorilla.vue
+++ b/src/views/kurzgeschichten/gefangener-gorilla.vue
@ -143,7 +143,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/getraeumtes-glueck.vue
+++ b/src/views/kurzgeschichten/getraeumtes-glueck.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="getrumtes-glck-container">
+  <div class="getraeumtes-glueck-container">
    <app-navigation rootClassName="navigation-root-class-name37"></app-navigation>
    <h1 class="page-title">Geträumtes Glück</h1>
    <span class="page-subtitle">
@ -10,7 +10,7 @@
      href="https://drive.google.com/file/d/1uSdNFezdhoXgtXFo-pKTFC0FBw2jFuvN/view?usp=sharing"
      target="_blank"
      rel="noreferrer noopener"
-      class="getrumtes-glck-download-button button"
+      class="getraeumtes-glueck-download-button button"
    >
      <span class="button-text">Als PDF</span>
    </a>
@ -115,7 +115,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'

 export default {
-  name: 'GetrumtesGlck',
+  name: 'GetraeumtesGlueck',
  props: {},
  components: {
    AppNavigation,
@ -144,19 +144,19 @@ export default {
 </script>

 <style scoped>
-.getrumtes-glck-container {
+.getraeumtes-glueck-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-image: url("/forest-background-luca-dross-1500w.jpg");
  background-position: bottom right;
 }
-.getrumtes-glck-download-button {
+.getraeumtes-glueck-download-button {
  text-decoration: none;
 }
 </style>
--- a/src/views/kurzgeschichten/heiliger-steinkrieg.vue
+++ b/src/views/kurzgeschichten/heiliger-steinkrieg.vue
@ -76,7 +76,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/huhn-rammt-huhn.vue
+++ b/src/views/kurzgeschichten/huhn-rammt-huhn.vue
@ -82,7 +82,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/ich-will-kein-hammer-sein.vue
+++ b/src/views/kurzgeschichten/ich-will-kein-hammer-sein.vue
@ -94,7 +94,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/infinite-deaths.vue
+++ b/src/views/kurzgeschichten/infinite-deaths.vue
@ -107,7 +107,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/klon-oder-leid.vue
+++ b/src/views/kurzgeschichten/klon-oder-leid.vue
@ -157,7 +157,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/lasst-mich-ruhen.vue
+++ b/src/views/kurzgeschichten/lasst-mich-ruhen.vue
@ -105,7 +105,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/leben-statt-ueberleben.vue
+++ b/src/views/kurzgeschichten/leben-statt-ueberleben.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="leben-statt-berleben-container">
+  <div class="leben-statt-ueberleben-container">
    <app-navigation rootClassName="navigation-root-class-name26"></app-navigation>
    <h1 class="page-title">Leben statt Überleben</h1>
    <span class="page-subtitle">
@ -10,7 +10,7 @@
      href="https://drive.google.com/file/d/1li9O8iGqL6mOgagHtzH4tKe6WZW8xt0J/view?usp=sharing"
      target="_blank"
      rel="noreferrer noopener"
-      class="leben-statt-berleben-download-button button"
+      class="leben-statt-ueberleben-download-button button"
    >
      <span class="button-text">Als PDF</span>
    </a>
@ -95,7 +95,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'

 export default {
-  name: 'LebenStattBerleben',
+  name: 'LebenStattUeberleben',
  props: {},
  components: {
    AppNavigation,
@ -124,19 +124,19 @@ export default {
 </script>

 <style scoped>
-.leben-statt-berleben-container {
+.leben-statt-ueberleben-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-image: url("/forest-background-luca-dross-1500w.jpg");
  background-position: bottom right;
 }
-.leben-statt-berleben-download-button {
+.leben-statt-ueberleben-download-button {
  text-decoration: none;
 }
 </style>
--- a/src/views/kurzgeschichten/rosenteufel.vue
+++ b/src/views/kurzgeschichten/rosenteufel.vue
@ -352,7 +352,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/superkraft-im-starbucks.vue
+++ b/src/views/kurzgeschichten/superkraft-im-starbucks.vue
@ -117,7 +117,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/teilung-zweier-welten.vue
+++ b/src/views/kurzgeschichten/teilung-zweier-welten.vue
@ -99,7 +99,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/them-or-us.vue
+++ b/src/views/kurzgeschichten/them-or-us.vue
@ -113,7 +113,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/unwichtigster-mensch.vue
+++ b/src/views/kurzgeschichten/unwichtigster-mensch.vue
@ -117,7 +117,7 @@ export default {
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/kurzgeschichten/versetztes-beduerfnis.vue
+++ b/src/views/kurzgeschichten/versetztes-beduerfnis.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="versetztes-bedrfnis-container">
+  <div class="versetztes-beduerfnis-container">
    <app-navigation rootClassName="navigation-root-class-name27"></app-navigation>
    <h1 class="page-title">Versetztes Bedürfnis</h1>
    <span class="page-subtitle">
@ -10,7 +10,7 @@
      href="https://drive.google.com/file/d/1yCXpaWPRsyVCODBB32YTT_hN60fpcpdx/view?usp=sharing"
      target="_blank"
      rel="noreferrer noopener"
-      class="versetztes-bedrfnis-download-button button"
+      class="versetztes-beduerfnis-download-button button"
    >
      <span class="button-text">Als PDF</span>
    </a>
@ -49,7 +49,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'

 export default {
-  name: 'VersetztesBedrfnis',
+  name: 'VersetztesBeduerfnis',
  props: {},
  components: {
    AppNavigation,
@ -78,19 +78,19 @@ export default {
 </script>

 <style scoped>
-.versetztes-bedrfnis-container {
+.versetztes-beduerfnis-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-image: url("/forest-background-luca-dross-1500w.jpg");
  background-position: bottom right;
 }
-.versetztes-bedrfnis-download-button {
+.versetztes-beduerfnis-download-button {
  text-decoration: none;
 }
 </style>
--- a/src/views/kurzgeschichten/was-unterscheidet-himmel-von-hoelle.vue
+++ b/src/views/kurzgeschichten/was-unterscheidet-himmel-von-hoelle.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="was-unterscheidet-himmel-von-hlle-container">
+  <div class="was-unterscheidet-himmel-von-hoelle-container">
    <app-navigation rootClassName="navigation-root-class-name24"></app-navigation>
    <h1 class="page-title">Was unterscheidet Himmel von Hölle?</h1>
    <span class="page-subtitle">
@ -10,7 +10,7 @@
      href="https://drive.google.com/file/d/1vCD8vRj1FgZwoHBqq1a0bhMsIDO4zwY2/view?usp=sharing"
      target="_blank"
      rel="noreferrer noopener"
-      class="was-unterscheidet-himmel-von-hlle-download-button button"
+      class="was-unterscheidet-himmel-von-hoelle-download-button button"
    >
      <span class="button-text">Als PDF</span>
    </a>
@ -54,7 +54,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'

 export default {
-  name: 'WasUnterscheidetHimmelVonHlle',
+  name: 'WasUnterscheidetHimmelVonHoelle',
  props: {},
  components: {
    AppNavigation,
@ -83,19 +83,19 @@ export default {
 </script>

 <style scoped>
-.was-unterscheidet-himmel-von-hlle-container {
+.was-unterscheidet-himmel-von-hoelle-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-image: url("/forest-background-luca-dross-1500w.jpg");
  background-position: bottom right;
 }
-.was-unterscheidet-himmel-von-hlle-download-button {
+.was-unterscheidet-himmel-von-hoelle-download-button {
  text-decoration: none;
 }
 </style>
--- a/src/views/larpkonzept.vue
+++ b/src/views/larpkonzept.vue
@ -65,7 +65,7 @@ export default {
  overflow: auto;
  box-shadow: 5px 5px 10px 0px #d4d4d4;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/lar-ps.vue
+++ b/src/views/lar-ps.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="lar-ps-container">
+  <div class="larps-container">
    <app-navigation rootClassName="navigation-root-class-name16"></app-navigation>
    <h1 class="page-title">LARPs</h1>
    <div class="text-body">
@ -67,12 +67,12 @@ export default {
 </script>

 <style scoped>
-.lar-ps-container {
+.larps-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/larps/conundrum-schatten-ueber-ostmerkopa.vue
+++ b/src/views/larps/conundrum-schatten-ueber-ostmerkopa.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="conundrum-schatten-ber-ostmerkopa-container">
+  <div class="conundrum-schatten-ueber-ostmerkopa-container">
    <app-navigation rootClassName="navigation-root-class-name40"></app-navigation>
    <span class="page-title">Conundrum: Schatten über Ostmerkopa</span>
    <span class="page-subtitle">
@ -19,9 +19,9 @@
      href="https://notgreatnotterrible.de"
      target="_blank"
      rel="noreferrer noopener"
-      class="conundrum-schatten-ber-ostmerkopa-link"
+      class="conundrum-schatten-ueber-ostmerkopa-link"
    >
-      <div class="conundrum-schatten-ber-ostmerkopa-plot button">
+      <div class="conundrum-schatten-ueber-ostmerkopa-plot button">
        <span class="button-text">
          <span>Infos (Not Great Not Terrible Webseite)</span>
          <br />
@ -37,7 +37,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'

 export default {
-  name: 'ConundrumSchattenBerOstmerkopa',
+  name: 'ConundrumSchattenUeberOstmerkopa',
  props: {},
  components: {
    AppNavigation,
@ -66,21 +66,21 @@ export default {
 </script>

 <style scoped>
-.conundrum-schatten-ber-ostmerkopa-container {
+.conundrum-schatten-ueber-ostmerkopa-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.conundrum-schatten-ber-ostmerkopa-link {
+.conundrum-schatten-ueber-ostmerkopa-link {
  display: contents;
 }
-.conundrum-schatten-ber-ostmerkopa-plot {
+.conundrum-schatten-ueber-ostmerkopa-plot {
  text-decoration: none;
 }
 </style>
--- a/src/views/larps/letzte-gelegenheit.vue
+++ b/src/views/larps/letzte-gelegenheit.vue
@ -779,7 +779,7 @@ export default {
  overflow: auto;
  box-shadow: 5px 5px 10px 0px #d4d4d4;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
--- a/src/views/larps/suesse-traeume.vue
+++ b/src/views/larps/suesse-traeume.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="ssse-trume-container">
+  <div class="suesse-traeume-container">
    <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
    <span class="page-title">Süsse Träume</span>
    <span class="page-subtitle">
@ -48,15 +48,15 @@
        <br />
      </p>
    </div>
-    <div class="ssse-trume-container2">
+    <div class="suesse-traeume-container2">
      <a
        href="https://www.dropbox.com/s/vnpc477fo6bxz1g/OpenVisor_Suesse_Traueme_1_Plot.pdf?dl=0"
        target="_blank"
        rel="noreferrer noopener"
-        class="ssse-trume-link"
+        class="suesse-traeume-link"
      >
-        <div class="ssse-trume-plot button">
-          <span class="ssse-trume-plot1">
+        <div class="suesse-traeume-plot button">
+          <span class="suesse-traeume-plot1">
            <span>Plot</span>
            <br />
          </span>
@ -66,20 +66,20 @@
        href="https://www.dropbox.com/s/wwigmb6qrv62cvx/OpenVisor_Suesse_Traueme_1_Plot_Hintergrund.pdf?dl=0"
        target="_blank"
        rel="noreferrer noopener"
-        class="ssse-trume-link1"
+        class="suesse-traeume-link1"
      >
-        <div class="ssse-trume-hintergrund button">
-          <span class="ssse-trume-hintergrund1">Hintergrund</span>
+        <div class="suesse-traeume-hintergrund button">
+          <span class="suesse-traeume-hintergrund1">Hintergrund</span>
        </div>
      </a>
      <a
        href="https://www.dropbox.com/s/2y3tc1yziynll94/OpenVisor_Suesse_Traueme_1_Infos_SC.pdf?dl=0"
        target="_blank"
        rel="noreferrer noopener"
-        class="ssse-trume-link2"
+        class="suesse-traeume-link2"
      >
-        <div class="ssse-trume-infos-sc button">
-          <span class="ssse-trume-infos-sc1">
+        <div class="suesse-traeume-infos-sc button">
+          <span class="suesse-traeume-infos-sc1">
            <span>Infos SC</span>
            <br />
          </span>
@ -89,27 +89,27 @@
        href="https://www.dropbox.com/s/rqpjnkinbnhr8fy/OpenVisor_Suesse_Traueme_2_Anklageschrift.pdf?dl=0"
        target="_blank"
        rel="noreferrer noopener"
-        class="ssse-trume-link3"
+        class="suesse-traeume-link3"
      >
-        <div class="ssse-trume-anklageschrift button">
-          <span class="ssse-trume-anklageschrift1">Anklageschrift</span>
+        <div class="suesse-traeume-anklageschrift button">
+          <span class="suesse-traeume-anklageschrift1">Anklageschrift</span>
        </div>
      </a>
      <a
        href="https://www.dropbox.com/s/vkw2f9sys5d46yw/OpenVisor_Suesse_Traueme_2_Gerichtsordnung.pdf?dl=0"
        target="_blank"
        rel="noreferrer noopener"
-        class="ssse-trume-link4"
+        class="suesse-traeume-link4"
      >
-        <div class="ssse-trume-gerichtsordnung button">
-          <span class="ssse-trume-gerichtsordnung1">Gerichtsordnung</span>
+        <div class="suesse-traeume-gerichtsordnung button">
+          <span class="suesse-traeume-gerichtsordnung1">Gerichtsordnung</span>
        </div>
      </a>
    </div>
    <h1 class="character-title section-head">Süsse Träume Run 1 Fotos</h1>
-    <span class="ssse-trume-credits">63 Fotos von Claudia Chiodi</span>
-    <div class="ssse-trume-container3">
-      <div class="ssse-trume-container4">
+    <span class="suesse-traeume-credits">63 Fotos von Claudia Chiodi</span>
+    <div class="suesse-traeume-container3">
+      <div class="suesse-traeume-container4">
        <DangerousHTML
          html="<script src='https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js' async></script>
  <div class='pa-carousel-widget' style='width:100%; height:480px;'
@ -185,9 +185,9 @@
      </div>
    </div>
    <h1 class="character-title section-head">Süsse Träume Run 2 Fotos</h1>
-    <span class="ssse-trume-credits1">67 Fotos von Claudia Chiodi</span>
-    <div class="ssse-trume-container5">
-      <div class="ssse-trume-container6">
+    <span class="suesse-traeume-credits1">67 Fotos von Claudia Chiodi</span>
+    <div class="suesse-traeume-container5">
+      <div class="suesse-traeume-container6">
        <DangerousHTML
          html="<script src='https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js' async></script>
  <div class='pa-carousel-widget' style='width:100%; height:480px;'
@ -278,7 +278,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'

 export default {
-  name: 'SsseTrume',
+  name: 'SuesseTraeume',
  props: {},
  components: {
    AppNavigation,
@ -308,18 +308,18 @@ export default {
 </script>

 <style scoped>
-.ssse-trume-container {
+.suesse-traeume-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.ssse-trume-container2 {
+.suesse-traeume-container2 {
  gap: var(--dl-space-space-twounits);
  flex: 0 0 auto;
  width: 100%;
@ -329,13 +329,13 @@ export default {
  align-items: center;
  justify-content: center;
 }
-.ssse-trume-link {
+.suesse-traeume-link {
  display: contents;
 }
-.ssse-trume-plot {
+.suesse-traeume-plot {
  width: 200px;
 }
-.ssse-trume-plot1 {
+.suesse-traeume-plot1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
@ -343,13 +343,13 @@ export default {
  font-weight: 500;
  line-height: 24px;
 }
-.ssse-trume-link1 {
+.suesse-traeume-link1 {
  display: contents;
 }
-.ssse-trume-hintergrund {
+.suesse-traeume-hintergrund {
  width: 200px;
 }
-.ssse-trume-hintergrund1 {
+.suesse-traeume-hintergrund1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
@ -357,13 +357,13 @@ export default {
  font-weight: 500;
  line-height: 24px;
 }
-.ssse-trume-link2 {
+.suesse-traeume-link2 {
  display: contents;
 }
-.ssse-trume-infos-sc {
+.suesse-traeume-infos-sc {
  width: 200px;
 }
-.ssse-trume-infos-sc1 {
+.suesse-traeume-infos-sc1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
@ -371,13 +371,13 @@ export default {
  font-weight: 500;
  line-height: 24px;
 }
-.ssse-trume-link3 {
+.suesse-traeume-link3 {
  display: contents;
 }
-.ssse-trume-anklageschrift {
+.suesse-traeume-anklageschrift {
  width: 200px;
 }
-.ssse-trume-anklageschrift1 {
+.suesse-traeume-anklageschrift1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
@ -385,13 +385,13 @@ export default {
  font-weight: 500;
  line-height: 24px;
 }
-.ssse-trume-link4 {
+.suesse-traeume-link4 {
  display: contents;
 }
-.ssse-trume-gerichtsordnung {
+.suesse-traeume-gerichtsordnung {
  width: 200px;
 }
-.ssse-trume-gerichtsordnung1 {
+.suesse-traeume-gerichtsordnung1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
@ -399,7 +399,7 @@ export default {
  font-weight: 500;
  line-height: 24px;
 }
-.ssse-trume-credits {
+.suesse-traeume-credits {
  color: rgb(255, 255, 255);
  font-size: 20px;
  text-align: center;
@ -407,13 +407,13 @@ export default {
  line-height: 30px;
  margin-bottom: var(--dl-space-space-twounits);
 }
-.ssse-trume-container3 {
+.suesse-traeume-container3 {
  width: 100%;
 }
-.ssse-trume-container4 {
+.suesse-traeume-container4 {
  display: contents;
 }
-.ssse-trume-credits1 {
+.suesse-traeume-credits1 {
  color: rgb(255, 255, 255);
  font-size: 20px;
  text-align: center;
@ -421,18 +421,18 @@ export default {
  line-height: 30px;
  margin-bottom: var(--dl-space-space-twounits);
 }
-.ssse-trume-container5 {
+.suesse-traeume-container5 {
  width: 100%;
 }
-.ssse-trume-container6 {
+.suesse-traeume-container6 {
  display: contents;
 }
@media(max-width: 767px) {
-  .ssse-trume-credits {
+  .suesse-traeume-credits {
    font-size: 16px;
    line-height: 24px;
  }
-  .ssse-trume-credits1 {
+  .suesse-traeume-credits1 {
    font-size: 16px;
    line-height: 24px;
  }
--- a/src/views/not-found.vue
+++ b/src/views/not-found.vue
@ -1,58 +1,80 @@
 <template>
-  <div class="not-found-container">
-    <h3>OOPS! PAGE NOT FOUND</h3>
-    <div class="not-found-container1"><h1 class="not-found-text1">404</h1></div>
-    <div class="not-found-container2">
-      <h2 class="not-found-text2">
-        WE ARE SORRY, BUT THE PAGE YOU REQUESTED WAS NOT FOUND
-      </h2>
+  <div class="page-container">
+    <app-navigation rootClassName="navigation-root-class-name39"></app-navigation>
+    <img
+      alt="OpenVisor"
+      src="/openvisor_logo_only_text_compressed-200h.png"
+      class="page-image"
+    />
+    <span class="page-subtitle">404 (Seite nicht gefunden)</span>
+    <div class="text-body">
+      <span>
+        Die URL führt zu keiner aktiven Seite. Bitte benutze das Menü um zu einer
+        Seite Deiner Wahl zu gelangen.
+      </span>
    </div>
+    <app-kontakt></app-kontakt>
  </div>
 </template>

 <script>
+import AppNavigation from '../components/navigation'
+import AppKontakt from '../components/kontakt'
+
 export default {
-  name: 'NotFound',
+  name: '404 (Seite nicht gefunden)',
+  props: {},
+  components: {
+    AppNavigation,
+    AppKontakt,
+  },
  metaInfo: {
-    title: '404 - Not Found',
+    title: 'OpenVisor - 404 (Seite nicht gefunden)',
+    meta: [
+      {
+        name: 'description',
+        content: 'Die URL führt zu keiner aktiven Seite.',
+      },
+      {
+        property: 'og:title',
+        content: 'OpenVisor - 404 (Seite nicht gefunden)',
+      },
+      {
+        property: 'og:description',
+        content: 'Die URL führt zu keiner aktiven Seite.',
+      },
+      {
+        name: 'robots',
+        content: 'noindex',
+      },
+    ],
  },
 }
 </script>

 <style scoped>
-.not-found-container {
+.page-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
-  justify-content: center;
+  background-size: cover;
+  background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.not-found-container1 {
-  display: flex;
-  position: relative;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
+.page-image {
+  width: 640px;
 }
-.not-found-text1 {
-  color: rgb(38, 38, 38);
-  font-size: 252px;
-  margin-top: -20px;
-  font-weight: 900;
-  margin-bottom: -20px;
-  letter-spacing: -20px;
+@media(max-width: 991px) {
+  .page-image {
+    width: 420px;
+  }
 }
-.not-found-container2 {
-  width: 421px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-}
-.not-found-text2 {
-  text-align: center;
-  font-weight: 400;
+@media(max-width: 767px) {
+  .page-image {
+    margin-top: var(--dl-space-space-unit);
+  }
 }
 </style>
--- a/src/views/page.vue
+++ b/src/views/page.vue
@ -1,80 +0,0 @@
-<template>
-  <div class="page-container">
-    <app-navigation rootClassName="navigation-root-class-name39"></app-navigation>
-    <img
-      alt="OpenVisor"
-      src="/openvisor_logo_only_text_compressed-200h.png"
-      class="page-image"
-    />
-    <span class="page-subtitle">404 (Seite nicht gefunden)</span>
-    <div class="text-body">
-      <span>
-        Die URL führt zu keiner aktiven Seite. Bitte benutze das Menü um zu einer
-        Seite Deiner Wahl zu gelangen.
-      </span>
-    </div>
-    <app-kontakt></app-kontakt>
-  </div>
-</template>
-
-<script>
-import AppNavigation from '../components/navigation'
-import AppKontakt from '../components/kontakt'
-
-export default {
-  name: 'Page',
-  props: {},
-  components: {
-    AppNavigation,
-    AppKontakt,
-  },
-  metaInfo: {
-    title: 'OpenVisor - 404 (Seite nicht gefunden)',
-    meta: [
-      {
-        name: 'description',
-        content: 'Die URL führt zu keiner aktiven Seite.',
-      },
-      {
-        property: 'og:title',
-        content: 'OpenVisor - 404 (Seite nicht gefunden)',
-      },
-      {
-        property: 'og:description',
-        content: 'Die URL führt zu keiner aktiven Seite.',
-      },
-      {
-        name: 'robots',
-        content: 'noindex',
-      },
-    ],
-  },
-}
-</script>
-
-<style scoped>
-.page-container {
-  width: 100%;
-  display: flex;
-  overflow: auto;
-  min-height: 100vh;
-  overflow-x: hidden;
-  align-items: center;
-  flex-direction: column;
-  background-size: cover;
-  background-image: url("/forest-background-luca-dross-1500w.jpg");
-}
-.page-image {
-  width: 640px;
-}
-@media(max-width: 991px) {
-  .page-image {
-    width: 420px;
-  }
-}
-@media(max-width: 767px) {
-  .page-image {
-    margin-top: var(--dl-space-space-unit);
-  }
-}
-</style>
--- a/src/views/ueber-uns.vue
+++ b/src/views/ueber-uns.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="ber-uns-container">
+  <div class="ueber-uns-container">
    <app-navigation rootClassName="navigation-root-class-name10"></app-navigation>
    <h1 class="page-title">
      <span>Über uns</span>
@ -34,7 +34,7 @@
      href="https://docs.google.com/spreadsheets/d/1fWIJHFUjcbE5a04M3eIBmRVvBI2bYcDbsys3mc5r7h0/edit?usp=sharing"
      target="_blank"
      rel="noreferrer noopener"
-      class="ber-uns-link button"
+      class="ueber-uns-link button"
    >
      <span class="button-text">Hermanns Larperfahrung</span>
    </a>
@ -47,7 +47,7 @@ import AppNavigation from '../components/navigation'
 import AppKontakt from '../components/kontakt'

 export default {
-  name: 'BerUns',
+  name: 'UeberUns',
  props: {},
  components: {
    AppNavigation,
@ -70,18 +70,18 @@ export default {
 </script>

 <style scoped>
-.ber-uns-container {
+.ueber-uns-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.ber-uns-link {
+.ueber-uns-link {
  display: flex;
  flex-direction: row;
  text-decoration: none;
Author	SHA1	Message	Date
OpenVisor	aab907dd15	Add scroll to top left behavior	2024-06-28 20:07:35 +02:00
OpenVisor	d2bfa0dc3c	Fix umlauts in component links; Update 404 page	2024-06-28 19:37:46 +02:00
OpenVisor	c9b1c32957	Fix typo	2024-06-28 19:08:11 +02:00
OpenVisor	d209aed292	Fix visible link content	2024-06-28 19:05:23 +02:00
OpenVisor	04c92692fd	Add default.conf required by Dockerfile	2024-06-28 19:02:54 +02:00
OpenVisor	d76f0abf36	Add reference to geschichtenfabio.ch	2024-06-28 19:00:59 +02:00