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>
    <div class="ssse-trume-container1 text-body">
      <p>
        <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>
    </div>
    <div class="ssse-trume-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"
      >
        <div class="ssse-trume-plot button">
          <span class="ssse-trume-plot1">
            <span>Plot</span>
            <br />
          </span>
        </div>
      </a>
      <a
        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"
      >
        <div class="ssse-trume-hintergrund button">
          <span class="ssse-trume-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"
      >
        <div class="ssse-trume-infos-s-c button">
          <span class="ssse-trume-infos-s-c1">
            <span>Infos SC</span>
            <br />
          </span>
        </div>
      </a>
      <a
        href="https://www.dropbox.com/s/rqpjnkinbnhr8fy/OpenVisor_Suesse_Traueme_2_Anklageschrift.pdf?dl=0"
        target="_blank"
        rel="noreferrer noopener"
        class="ssse-trume-link3"
      >
        <div class="ssse-trume-anklageschrift button">
          <span class="ssse-trume-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"
      >
        <div class="ssse-trume-gerichtsordnung button">
          <span class="ssse-trume-gerichtsordnung1">Gerichtsordnung</span>
        </div>
      </a>
    </div>
    <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: 'OpenVisor - Süsse Träume',
    meta: [
      {
        name: 'description',
        content:
          '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?"',
      },
      {
        property: 'og:title',
        content: 'OpenVisor - Süsse Träume',
      },
      {
        property: 'og:description',
        content:
          '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 die Probe zu stellen..."',
      },
    ],
  },
}
</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: 500;
}
.ssse-trume-caption {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: Poppins;
  line-height: 30px;
}
.ssse-trume-container1 {
  align-items: center;
  justify-content: center;
}
.ssse-trume-container2 {
  gap: var(--dl-space-space-twounits);
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.ssse-trume-link {
  display: contents;
}
.ssse-trume-plot {
  width: 200px;
}
.ssse-trume-plot1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 500;
  line-height: 24px;
}
.ssse-trume-link1 {
  display: contents;
}
.ssse-trume-hintergrund {
  width: 200px;
}
.ssse-trume-hintergrund1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 500;
  line-height: 24px;
}
.ssse-trume-link2 {
  display: contents;
}
.ssse-trume-infos-s-c {
  width: 200px;
}
.ssse-trume-infos-s-c1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 500;
  line-height: 24px;
}
.ssse-trume-link3 {
  display: contents;
}
.ssse-trume-anklageschrift {
  width: 200px;
}
.ssse-trume-anklageschrift1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 500;
  line-height: 24px;
}
.ssse-trume-link4 {
  display: contents;
}
.ssse-trume-gerichtsordnung {
  width: 200px;
}
.ssse-trume-gerichtsordnung1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 500;
  line-height: 24px;
}
@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;
    font-style: normal;
    text-align: center;
  }
}
</style>