OpenVisor-Website/src/views/ssse-trume.vue

<template>
  <div class="ssse-trume-container">
    <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
    <h1 class="ssse-trume-heading">
      <span>Süsse Träume</span>
      <br />
    </h1>
    <span class="ssse-trume-caption">
      <span>Fantasy Mini-LARP</span>
      <br />
    </span>
    <p class="ssse-trume-description">
      <span>
        &quot;Weisst du, wer du bist? Was du bereust, befürchtest, vergessen
        möchtest? Was du erreichen möchtest und was dir alles recht ist um dies zu
        erreichen? Zeit, deine Antworten auf diese Fragen auf die Probe zu
        stellen...&quot;
      </span>
      <br />
      <br />
      <span>
        Süsse Träume war ein Fantasy Minilarp (nicht Nordic) im Wald von Eschikon
        (8315 Lindau, Schweiz) das Sue und Hermann organisierten. Es ging darum,
        dass ein Hexer Trajar die Spielercharaktere in seine Traumwelt entführte,
        als diese sich schlafen legten. Hier wurde das Open Visor Larpkonzept noch
        nicht verwendet.
      </span>
      <br />
    </p>
    <app-kontakt rootClassName="kontakt-root-class-name"></app-kontakt>
  </div>
</template>

<script>
import AppNavigation from '../components/navigation'
import AppKontakt from '../components/kontakt'

export default {
  name: 'SsseTrume',
  components: {
    AppNavigation,
    AppKontakt,
  },
  metaInfo: {
    title: 'Ssse-Trume - Open Visor',
    meta: [
      {
        property: 'og:title',
        content: 'Ssse-Trume - Open Visor',
      },
    ],
  },
}
</script>

<style scoped>
.ssse-trume-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("/playground_assets/forest-background-luca-dross-1500w.jpg");
}
.ssse-trume-heading {
  color: rgb(255, 255, 255);
  font-size: 64px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 600;
}
.ssse-trume-caption {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: Poppins;
  line-height: 30px;
}
.ssse-trume-description {
  color: rgb(255, 255, 255);
  width: 90%;
  font-size: 18px;
  max-width: 1080px;
  align-self: center;
  font-style: normal;
  margin-top: var(--dl-space-space-twounits);
  font-family: Poppins;
  font-weight: 400;
  line-height: 28px;
  padding-top: var(--dl-space-space-oneandhalfunits);
  padding-left: var(--dl-space-space-oneandhalfunits);
  border-radius: 20px;
  padding-right: var(--dl-space-space-oneandhalfunits);
  padding-bottom: var(--dl-space-space-oneandhalfunits);
  background-color: rgba(41, 41, 41, 0.8);
}
@media(max-width: 991px) {
  .ssse-trume-caption {
    text-align: left;
  }
}
@media(max-width: 767px) {
  .ssse-trume-heading {
    font-size: 40px;
  }
  .ssse-trume-caption {
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-family: Poppins;
    line-height: 24px;
  }
}
@media(max-width: 479px) {
  .ssse-trume-heading {
    max-width: auto;
    text-align: center;
  }
}
</style>