OpenVisor/OpenVisor-Website
OpenVisor/OpenVisor-Website
1
1
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Improve website

Browse source
This commit is contained in:
OpenVisor 2024-04-26 21:56:57 +02:00
parent 56f1ef55c0
commit 8456434cde
21 changed files with 951 additions and 1841 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,5 +1,5 @@
{
"name": "open-visor",
"name": "openvisor",
"version": "1.0.0",
"private": true,
"scripts": {

2
public/index.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<title>Open Visor</title>
<title>OpenVisor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta property="twitter:card" content="summary_large_image" />

BIN
public/playground_assets/buch-vorderseite-schrift-1400w.png
View file

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 137 KiB

BIN
public/playground_assets/einordenfuereinegutetat-1100w.png Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

245
src/components/accordion.vue
View file

@ -1,245 +0,0 @@
<template>
<div class="accordion-accordion" v-bind:class="rootClassName">
<div data-role="accordion-container" class="accordion-element">
<div class="accordion-details">
<span class="accordion-text">{{ text }}</span>
<span data-role="accordion-content" class="accordion-text1">
{{ text1 }}
</span>
</div>
<svg
viewBox="0 0 1024 1024"
data-role="accordion-icon"
class="accordion-icon"
>
<path d="M366 708l196-196-196-196 60-60 256 256-256 256z"></path>
</svg>
</div>
<div
data-role="accordion-container"
class="accordion-element1 accordion-element"
>
<div class="accordion-details1">
<span class="accordion-text2">{{ text2 }}</span>
<span data-role="accordion-content" class="accordion-text3">
{{ text3 }}
</span>
</div>
<svg
viewBox="0 0 1024 1024"
data-role="accordion-icon"
class="accordion-icon2"
>
<path d="M366 708l196-196-196-196 60-60 256 256-256 256z"></path>
</svg>
</div>
<div
data-role="accordion-container"
class="accordion-element2 accordion-element"
>
<div class="accordion-details2">
<span class="accordion-text4">{{ text4 }}</span>
<span data-role="accordion-content" class="accordion-text5">
{{ text5 }}
</span>
</div>
<svg
viewBox="0 0 1024 1024"
data-role="accordion-icon"
class="accordion-icon4"
>
<path d="M366 708l196-196-196-196 60-60 256 256-256 256z"></path>
</svg>
</div>
</div>
</template>
<script>
export default {
name: 'Accordion',
props: {
text2: {
type: String,
default: 'Nemo enim ipsam voluptatem quia voluptas',
},
text1: {
type: String,
default:
'Sed do eiusmod tempor incididunt ut labore et dolore magna aliquat enim ad minim veniam, quis nostrud',
},
text: {
type: String,
default: 'Aliquam quaerat voluptatem',
},
text4: {
type: String,
default: 'Magnam aliquam quaerat voluptatem',
},
text5: {
type: String,
default:
'Sed do eiusmod tempor incididunt ut labore et dolore magna aliquat enim ad minim veniam, quis nostrud',
},
text3: {
type: String,
default:
'Sed do eiusmod tempor incididunt ut labore et dolore magna aliquat enim ad minim veniam, quis nostrud',
},
rootClassName: String,
},
}
</script>
<style scoped>
.accordion-accordion {
display: flex;
position: relative;
align-items: flex-start;
flex-direction: column;
justify-content: center;
}
.accordion-element {
width: 640px;
user-select: none;
}
.accordion-details {
gap: var(--dl-space-space-halfunit);
width: 100%;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
}
.accordion-text {
color: var(--dl-color-gray-white);
width: 100%;
font-size: 18px;
max-width: 535px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
line-height: 27px;
}
.accordion-text1 {
color: var(--dl-color-gray-900);
width: 100%;
max-width: 535px;
font-family: Poppins;
line-height: 24px;
user-select: text;
}
.accordion-icon {
fill: var(--dl-color-gray-white);
width: var(--dl-size-size-xsmall);
height: var(--dl-size-size-xsmall);
}
.accordion-element1 {
width: 640px;
user-select: none;
}
.accordion-details1 {
gap: var(--dl-space-space-halfunit);
width: 100%;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
}
.accordion-text2 {
color: var(--dl-color-gray-white);
width: 100%;
font-size: 18px;
max-width: 535px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
line-height: 27px;
}
.accordion-text3 {
color: var(--dl-color-gray-900);
width: 100%;
max-width: 535px;
font-family: Poppins;
line-height: 24px;
user-select: text;
}
.accordion-icon2 {
fill: var(--dl-color-gray-white);
width: var(--dl-size-size-xsmall);
height: var(--dl-size-size-xsmall);
}
.accordion-element2 {
width: 640px;
user-select: none;
}
.accordion-details2 {
gap: var(--dl-space-space-halfunit);
width: 100%;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
}
.accordion-text4 {
color: var(--dl-color-gray-white);
width: 100%;
font-size: 18px;
max-width: 535px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
line-height: 27px;
}
.accordion-text5 {
color: var(--dl-color-gray-900);
width: 100%;
max-width: 535px;
font-family: Poppins;
line-height: 24px;
user-select: text;
}
.accordion-icon4 {
fill: var(--dl-color-gray-white);
width: var(--dl-size-size-xsmall);
height: var(--dl-size-size-xsmall);
}
@media(max-width: 767px) {
.accordion-element {
width: 100%;
max-width: 560px;
}
.accordion-text {
font-size: 16px;
line-height: 24px;
}
.accordion-element1 {
width: 100%;
max-width: 560px;
}
.accordion-text2 {
font-size: 16px;
}
.accordion-element2 {
width: 100%;
max-width: 560px;
}
.accordion-text4 {
font-size: 16px;
}
}
@media(max-width: 479px) {
.accordion-element {
width: 350px;
max-width: auto;
}
.accordion-element1 {
width: 350px;
max-width: auto;
}
.accordion-element2 {
width: 350px;
max-width: auto;
}
}
</style>

79
src/components/buttons.vue
View file

@ -1,79 +0,0 @@
<template>
<div class="buttons-buttons">
<div class="buttons-get-started button">
<span class="buttons-text">{{ Text }}</span>
</div>
<div class="buttons-get-started1 button">
<span class="buttons-text1">{{ Text1 }}</span>
</div>
</div>
</template>
<script>
export default {
name: 'Buttons',
props: {
Text: {
type: String,
default: 'Get started',
},
Text1: {
type: String,
default: 'View features',
},
},
}
</script>
<style scoped>
.buttons-buttons {
gap: var(--dl-space-space-unit);
display: flex;
position: relative;
align-items: center;
flex-direction: row;
}
.buttons-get-started {
display: flex;
background-color: #ffff00;
}
.buttons-text {
color: #0C100C;
font-size: 16px;
font-style: normal;
font-family: Poppins;
font-weight: 500;
line-height: 24px;
}
.buttons-get-started1 {
background-color: #2A2A2A;
}
.buttons-text1 {
color: #ffffff;
font-size: 16px;
font-style: normal;
font-family: Poppins;
font-weight: 500;
line-height: 24px;
}
@media(max-width: 991px) {
.buttons-buttons {
width: 100%;
}
.buttons-get-started {
flex: 1;
}
.buttons-get-started1 {
flex: 1;
}
}
@media(max-width: 767px) {
.buttons-get-started {
padding-top: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-unit);
}
.buttons-get-started1 {
display: none;
}
}
</style>

38
src/components/kontakt.vue
View file

@ -1,16 +1,9 @@
<template>
<footer class="kontakt-footer" v-bind:class="rootClassName">
<div class="kontakt-category">
<div class="kontakt-header">
<span class="kontakt-text footer-header">{{ Text }}</span>
</div>
<a
href="mailto:info@openvisor.ch?subject="
class="kontakt-text1 footer-link"
>
<span class="kontakt-text">{{ Text }}</span>
<a href="mailto:info@openvisor.ch?subject=" class="kontakt-text1">
{{ Text1 }}
</a>
</div>
</footer>
</template>
@ -33,40 +26,23 @@ export default {
<style scoped>
.kontakt-footer {
gap: var(--dl-space-space-fiveunits);
gap: var(--dl-space-space-unit);
flex: 1;
width: 100%;
display: flex;
position: relative;
margin-top: var(--dl-space-space-sixunits);
align-items: center;
padding-top: var(--dl-space-space-threeunits);
border-color: var(--dl-color-gray-black);
border-width: 0px;
padding-left: var(--dl-space-space-oneandhalfunits);
margin-bottom: 30%;
padding-right: var(--dl-space-space-oneandhalfunits);
flex-direction: column;
padding-bottom: var(--dl-space-space-sixunits);
justify-content: center;
}
.kontakt-category {
gap: var(--dl-space-space-unit);
display: flex;
align-items: center;
border-width: 0px;
flex-direction: column;
justify-content: center;
border-top-width: 0px;
}
.kontakt-header {
gap: var(--dl-space-space-unit);
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
}
.kontakt-text {
color: #ffffff;
font-size: 36px;
margin-bottom: var(--dl-space-space-unit);
text-align: center;
text-transform: uppercase;
}
.kontakt-text1 {

105
src/components/letzte-gelegenheit-run1.vue
View file

@ -1,105 +0,0 @@
<template>
<div class="letzte-gelegenheit-run1-container" v-bind:class="rootClassName">
<h2 class="letzte-gelegenheit-run1-heading">{{ Name }}</h2>
<p class="letzte-gelegenheit-run1-description">{{ Datum }}</p>
<p class="letzte-gelegenheit-run1-description1">{{ Standort }}</p>
<router-link to="/letzte-gelegenheit" class="letzte-gelegenheit-run1-navlink">
<div class="letzte-gelegenheit-run1-explore-more">
<p class="letzte-gelegenheit-run1-text">{{ Anmeldung }}</p>
</div>
</router-link>
</div>
</template>
<script>
export default {
name: 'LetzteGelegenheitRun1',
props: {
Anmeldung: {
type: String,
default: 'Mehr ->',
},
Standort: {
type: String,
default: 'Zivilschutzanlage Sonnenblock Chilegass 8, 8484 Weisslingen',
},
Datum: {
type: String,
default: '1. April 2023, 10:00 Uhr bis 2. April 2023, 14:00 Uhr',
},
rootClassName: String,
Name: {
type: String,
default: 'Letzte Gelegenheit Run 1 (Schweiz)',
},
},
}
</script>
<style scoped>
.letzte-gelegenheit-run1-container {
gap: var(--dl-space-space-unit);
flex: 0 0 auto;
width: 100%;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.letzte-gelegenheit-run1-heading {
color: rgb(255, 255, 255);
width: 496px;
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 500;
margin-left: var(--dl-space-space-unit);
}
.letzte-gelegenheit-run1-description {
color: #ffffff;
width: 201px;
height: 58px;
font-family: Poppins;
line-height: 28px;
}
.letzte-gelegenheit-run1-description1 {
color: #ffffff;
width: 275px;
font-family: Poppins;
line-height: 28px;
}
.letzte-gelegenheit-run1-navlink {
display: contents;
}
.letzte-gelegenheit-run1-explore-more {
gap: var(--dl-space-space-oneandhalfunits);
width: 61px;
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
border-color: #FFFF00;
margin-right: var(--dl-space-space-unit);
flex-direction: column;
padding-bottom: var(--dl-space-space-halfunit);
justify-content: center;
text-decoration: none;
border-bottom-width: 1px;
}
.letzte-gelegenheit-run1-explore-more:hover {
opacity: 0.5;
}
.letzte-gelegenheit-run1-text {
color: #FFFF00;
width: auto;
height: auto;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
@media(max-width: 767px) {
.letzte-gelegenheit-run1-heading {
font-size: 28px;
}
}
</style>

108
src/components/letzte-gelegenheit-run2.vue
View file

@ -1,108 +0,0 @@
<template>
<div class="letzte-gelegenheit-run2-container" v-bind:class="rootClassName">
<h2 class="letzte-gelegenheit-run2-heading">{{ Name }}</h2>
<p class="letzte-gelegenheit-run2-description">{{ Datum }}</p>
<p class="letzte-gelegenheit-run2-description1">{{ Standort }}</p>
<router-link to="/letzte-gelegenheit" class="letzte-gelegenheit-run2-navlink">
<div class="letzte-gelegenheit-run2-explore-more">
<p class="letzte-gelegenheit-run2-text">{{ Mehr }}</p>
</div>
</router-link>
</div>
</template>
<script>
export default {
name: 'LetzteGelegenheitRun2',
props: {
Datum: {
type: String,
default: '29. April 2023, 10:00 Uhr bis 30. April 2023, 14:00 Uhr',
},
Standort: {
type: String,
default: 'Waldritter e.V. _ _ _ Ewaldstraße 20, 45699 Herten',
},
Name: {
type: String,
default: 'Letzte Gelegenheit Run 2 (Deutschland)',
},
Mehr: {
type: String,
default: 'Mehr ->',
},
rootClassName: String,
},
}
</script>
<style scoped>
.letzte-gelegenheit-run2-container {
gap: var(--dl-space-space-unit);
flex: 0 0 auto;
width: 100%;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.letzte-gelegenheit-run2-heading {
color: rgb(255, 255, 255);
width: 507px;
height: 31px;
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 500;
margin-left: var(--dl-space-space-unit);
}
.letzte-gelegenheit-run2-description {
color: #ffffff;
width: 229px;
height: 58px;
font-family: Poppins;
line-height: 28px;
}
.letzte-gelegenheit-run2-description1 {
color: #ffffff;
width: 251px;
font-family: Poppins;
line-height: 28px;
margin-right: var(--dl-space-space-unit);
}
.letzte-gelegenheit-run2-navlink {
display: contents;
}
.letzte-gelegenheit-run2-explore-more {
gap: var(--dl-space-space-oneandhalfunits);
width: 63px;
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
border-color: #ffff00;
margin-right: var(--dl-space-space-unit);
flex-direction: column;
padding-bottom: var(--dl-space-space-halfunit);
justify-content: center;
text-decoration: none;
border-bottom-width: 1px;
}
.letzte-gelegenheit-run2-explore-more:hover {
opacity: 0.5;
}
.letzte-gelegenheit-run2-text {
color: #ffff00;
width: auto;
height: auto;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
@media(max-width: 767px) {
.letzte-gelegenheit-run2-heading {
font-size: 28px;
}
}
</style>

66
src/components/navigation.vue
View file

@ -17,7 +17,7 @@
<router-link to="/" class="navigation-home nav-link">
{{ Home }}
</router-link>
<router-link to="/larpkonzept" class="navigation-larpkonzept">
<router-link to="/larpkonzept" class="navigation-larpkonzept nav-link">
{{ Larpkonzept }}
</router-link>
<div
@ -28,7 +28,7 @@
data-thq="thq-dropdown-toggle"
class="navigation-dropdown-toggle"
>
<span class="navigation-larps">{{ Larps }}</span>
<span class="navigation-larps nav-link">{{ Larps }}</span>
<div
data-thq="thq-dropdown-arrow"
class="navigation-dropdown-arrow"
@ -76,7 +76,7 @@
data-thq="thq-dropdown-toggle"
class="navigation-dropdown-toggle03"
>
<span class="navigation-kurzgeschichten">
<span class="navigation-kurzgeschichten nav-link">
{{ Kurzgeschichten }}
</span>
<div
@ -148,8 +148,13 @@
data-role="Nav"
class="navigation-nav-body"
>
<router-link to="/" class="navigation-home1">{{ Home }}</router-link>
<router-link to="/larpkonzept" class="navigation-larpkonzept1">
<router-link to="/" class="navigation-home1 nav-link">
{{ Home }}
</router-link>
<router-link
to="/larpkonzept"
class="navigation-larpkonzept1 nav-link"
>
{{ Larpkonzept }}
</router-link>
<div
@ -160,7 +165,7 @@
data-thq="thq-dropdown-toggle"
class="navigation-dropdown-toggle06"
>
<span class="navigation-larps1">{{ Larps }}</span>
<span class="navigation-larps1 nav-link">{{ Larps }}</span>
<div
data-thq="thq-dropdown-arrow"
class="navigation-dropdown-arrow2"
@ -183,7 +188,7 @@
data-thq="thq-dropdown-toggle"
class="navigation-dropdown-toggle07"
>
<span class="navigation-letzte-gelegenheit1">
<span class="navigation-letzte-gelegenheit1 nav-link">
{{ LetzteGelegenheit }}
</span>
</div>
@ -198,7 +203,7 @@
data-thq="thq-dropdown-toggle"
class="navigation-dropdown-toggle08"
>
<span class="navigation-suesse-traeume1">
<span class="navigation-suesse-traeume1 nav-link">
{{ SuesseTraeume }}
</span>
</div>
@ -214,7 +219,7 @@
data-thq="thq-dropdown-toggle"
class="navigation-dropdown-toggle09"
>
<span class="navigation-kurzgeschichten1">
<span class="navigation-kurzgeschichten1 nav-link">
{{ Kurzgeschichten }}
</span>
<div
@ -239,7 +244,9 @@
data-thq="thq-dropdown-toggle"
class="navigation-dropdown-toggle10"
>
<span class="navigation-ein-orden-fuer-eine-gute-tat1">
<span
class="navigation-ein-orden-fuer-eine-gute-tat1 nav-link"
>
{{ EinOrdenFuerEineGuteTat }}
</span>
</div>
@ -254,7 +261,7 @@
data-thq="thq-dropdown-toggle"
class="navigation-dropdown-toggle11"
>
<span class="navigation-rosenteufel1">
<span class="navigation-rosenteufel1 nav-link">
{{ Rosenteufel }}
</span>
</div>
@ -331,7 +338,7 @@ export default {
padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-oneandhalfunits);
padding-right: var(--dl-space-space-oneandhalfunits);
padding-bottom: var(--dl-space-space-fiveunits);
padding-bottom: var(--dl-space-space-twounits);
justify-content: space-between;
}
.navigation-navbar-interactive {
@ -340,7 +347,7 @@ export default {
position: relative;
align-items: center;
padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-threeunits);
padding-left: var(--dl-space-space-oneandhalfunits);
padding-right: var(--dl-space-space-threeunits);
padding-bottom: var(--dl-space-space-twounits);
justify-content: space-between;
@ -630,13 +637,18 @@ export default {
justify-content: center;
}
.navigation-icon04 {
fill: #ffffff;
width: 36px;
cursor: pointer;
height: 36px;
padding: 6px;
transition: 0.3s;
border-radius: 18px;
background-color: rgba(100, 100, 100, 0.4);
}
.navigation-icon04:hover {
opacity: 0.5;
}
.navigation-mobile-menu {
top: 0px;
left: 0px;
@ -672,11 +684,19 @@ export default {
width: 30px;
cursor: pointer;
height: 30px;
margin-top: 30px;
transition: 0.3s;
margin-left: -30px;
}
.navigation-icon06:hover {
opacity: 0.5;
}
.navigation-nav-body {
flex: 0 0 auto;
display: flex;
margin-top: -30px;
align-items: flex-start;
margin-left: 30px;
flex-direction: column;
}
.navigation-home1 {
@ -937,7 +957,9 @@ export default {
font-family: Poppins;
font-weight: 400;
}
.navigation-root-class-name {
max-width: 1200px;
}
@ -969,9 +991,6 @@ export default {
.navigation-burger-menu {
display: flex;
}
.navigation-icon04 {
fill: #ffffff;
}
.navigation-home1 {
color: #ffffff;
}
@ -1019,19 +1038,6 @@ export default {
.navigation-navbar-interactive {
padding: var(--dl-space-space-unit);
}
.navigation-burger-menu {
width: auto;
height: auto;
}
.navigation-icon04 {
fill: transparent;
width: auto;
height: auto;
z-index: 110;
padding-top: 0px;
border-color: var(--dl-color-gray-black);
border-width: 0px;
}
.navigation-mobile-menu {
padding: 16px;
}

141
src/components/zusammenfassung-ein-orden-fuer-eine-gute-tat.vue
View file

@ -1,141 +0,0 @@
<template>
<div
class="zusammenfassung-ein-orden-fuer-eine-gute-tat-container"
v-bind:class="rootClassName"
>
<section class="zusammenfassung-ein-orden-fuer-eine-gute-tat-card">
<main class="zusammenfassung-ein-orden-fuer-eine-gute-tat-content">
<header class="zusammenfassung-ein-orden-fuer-eine-gute-tat-header">
<h1 class="zusammenfassung-ein-orden-fuer-eine-gute-tat-header1">
{{ Header }}
</h1>
</header>
<p class="zusammenfassung-ein-orden-fuer-eine-gute-tat-description">
{{ Description }}
</p>
<router-link
to="/ein-orden-fuer-eine-gute-tat"
class="zusammenfassung-ein-orden-fuer-eine-gute-tat-navlink"
>
<div class="zusammenfassung-ein-orden-fuer-eine-gute-tat-button">
<p class="zusammenfassung-ein-orden-fuer-eine-gute-tat-text">
{{ Button }}
</p>
</div>
</router-link>
</main>
</section>
</div>
</template>
<script>
export default {
name: 'ZusammenfassungEinOrdenFuerEineGuteTat',
props: {
ButtonLink: String,
Button: {
type: String,
default: 'Lesen ->',
},
Header: {
type: String,
default: 'Ein Orden für eine gute Tat',
},
Description: {
type: String,
default:
'"Ein brauner Schneehase besucht ein ein Rothörnchen und ein Grauhörnchen im vom Herbst bunt gefärbten Wald. Er hat einen Orden, den er für eine gute Tat vergeben möchte. Doch welches Hörnchen schafft es, diesen zu bekommen?" Diese Kurzgeschichte für Kinder und Eltern stellt spielerisch eine moralische Frage dar, dessen Antwort das Elternteil oder das Kind selbst finden muss. Es soll das Kind unterhalten und zugleich mit einer einfachen aber doch spannenden Fragestellung bilden.',
},
rootClassName: String,
},
}
</script>
<style scoped>
.zusammenfassung-ein-orden-fuer-eine-gute-tat-container {
width: 100%;
height: 400px;
display: flex;
position: relative;
align-items: flex-start;
flex-direction: column;
}
.zusammenfassung-ein-orden-fuer-eine-gute-tat-card {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
display: flex;
padding: var(--dl-space-space-threeunits);
position: relative;
align-items: flex-start;
border-radius: 20px;
flex-direction: column;
justify-content: flex-start;
background-color: rgba(41, 41, 41, 0.8);
}
.zusammenfassung-ein-orden-fuer-eine-gute-tat-content {
gap: var(--dl-space-space-twounits);
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.zusammenfassung-ein-orden-fuer-eine-gute-tat-header {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
}
.zusammenfassung-ein-orden-fuer-eine-gute-tat-header1 {
color: rgb(255, 255, 255);
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
line-height: 36px;
}
.zusammenfassung-ein-orden-fuer-eine-gute-tat-description {
color: #ffffff;
font-size: 18px;
font-family: Poppins;
line-height: 28px;
}
.zusammenfassung-ein-orden-fuer-eine-gute-tat-navlink {
display: contents;
}
.zusammenfassung-ein-orden-fuer-eine-gute-tat-button {
gap: var(--dl-space-space-oneandhalfunits);
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
border-color: #ffff00;
flex-direction: column;
padding-bottom: var(--dl-space-space-halfunit);
justify-content: center;
text-decoration: none;
border-bottom-width: 1px;
}
.zusammenfassung-ein-orden-fuer-eine-gute-tat-button:hover {
opacity: 0.5;
}
.zusammenfassung-ein-orden-fuer-eine-gute-tat-text {
color: #ffff00;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
.zusammenfassung-ein-orden-fuer-eine-gute-tat-root-class-name {
height: auto;
}
.zusammenfassung-ein-orden-fuer-eine-gute-tat-root-class-name1 {
height: auto;
}
@media(max-width: 991px) {
.zusammenfassung-ein-orden-fuer-eine-gute-tat-card {
padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-oneandhalfunits);
padding-right: var(--dl-space-space-oneandhalfunits);
padding-bottom: var(--dl-space-space-twounits);
}
}
</style>

141
src/components/zusammenfassung-letzte-gelegenheit.vue
View file

@ -1,141 +0,0 @@
<template>
<section
class="zusammenfassung-letzte-gelegenheit-card"
v-bind:class="rootClassName"
>
<main class="zusammenfassung-letzte-gelegenheit-content">
<header class="zusammenfassung-letzte-gelegenheit-header">
<h1 class="zusammenfassung-letzte-gelegenheit-header1">{{ Header }}</h1>
</header>
<p class="zusammenfassung-letzte-gelegenheit-description">
{{ Description }}
</p>
<router-link
to="/letzte-gelegenheit"
class="zusammenfassung-letzte-gelegenheit-navlink"
>
<div class="zusammenfassung-letzte-gelegenheit-button">
<p class="zusammenfassung-letzte-gelegenheit-text">{{ Mehr }}</p>
</div>
</router-link>
</main>
</section>
</template>
<script>
export default {
name: 'ZusammenfassungLetzteGelegenheit',
props: {
rootClassName: String,
Mehr: {
type: String,
default: 'Mehr ->',
},
ButtonLink: String,
Description: {
type: String,
default:
'Das Nordic LARP “Letzte Gelegenheit” spielt in der heutigen Zeit in einer alternativen Realität: Vor 63 Tagen fiel plötzlich der Strom aus und dichte Nebelschwaden überzogen einige Städte. Sirenen führten die Menschen in Bunker. Radios, die noch funktionierten, meldeten die sofortige Mobilisierung der Milizarmee und des Zivilschutzes. Was genau passierte, ist noch immer ungeklärt. Im Bunker des Gefängnisses Schwarzbach versucht man den Alltag beizubehalten, doch langsam gehen die Ressourcen aus und die Lage verschärft sich.',
},
Header: {
type: String,
default: 'Letzte Gelegenheit',
},
},
}
</script>
<style scoped>
.zusammenfassung-letzte-gelegenheit-card {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
display: flex;
padding: var(--dl-space-space-threeunits);
position: relative;
align-items: flex-start;
border-radius: 20px;
flex-direction: column;
justify-content: flex-start;
background-color: rgba(41, 41, 41, 0.8);
}
.zusammenfassung-letzte-gelegenheit-content {
gap: var(--dl-space-space-twounits);
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.zusammenfassung-letzte-gelegenheit-header {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
}
.zusammenfassung-letzte-gelegenheit-header1 {
color: rgb(255, 255, 255);
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
line-height: 36px;
}
.zusammenfassung-letzte-gelegenheit-description {
color: #ffffff;
font-size: 18px;
font-family: Poppins;
line-height: 28px;
}
.zusammenfassung-letzte-gelegenheit-navlink {
display: contents;
}
.zusammenfassung-letzte-gelegenheit-button {
gap: var(--dl-space-space-oneandhalfunits);
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
border-color: #ffff00;
flex-direction: column;
padding-bottom: var(--dl-space-space-halfunit);
justify-content: center;
text-decoration: none;
border-bottom-width: 1px;
}
.zusammenfassung-letzte-gelegenheit-button:hover {
opacity: 0.5;
}
.zusammenfassung-letzte-gelegenheit-text {
color: #ffff00;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
.zusammenfassung-letzte-gelegenheit-root-class-name {
width: 100%;
}
.zusammenfassung-letzte-gelegenheit-root-class-name10 {
width: 100%;
}
@media(max-width: 991px) {
.zusammenfassung-letzte-gelegenheit-card {
padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-oneandhalfunits);
padding-right: var(--dl-space-space-oneandhalfunits);
padding-bottom: var(--dl-space-space-twounits);
}
}
@media(max-width: 767px) {
.zusammenfassung-letzte-gelegenheit-root-class-name {
height: 50%;
}
}
</style>

132
src/components/zusammenfassung-rosenteufel.vue
View file

@ -1,132 +0,0 @@
<template>
<div class="zusammenfassung-rosenteufel-container" v-bind:class="rootClassName">
<section class="zusammenfassung-rosenteufel-card">
<main class="zusammenfassung-rosenteufel-content">
<header class="zusammenfassung-rosenteufel-header">
<h1 class="zusammenfassung-rosenteufel-header1">{{ Header }}</h1>
</header>
<p class="zusammenfassung-rosenteufel-description">{{ Description }}</p>
<router-link
to="/rosenteufel"
class="zusammenfassung-rosenteufel-navlink"
>
<div class="zusammenfassung-rosenteufel-button">
<p class="zusammenfassung-rosenteufel-text">{{ Lesen }}</p>
</div>
</router-link>
</main>
</section>
</div>
</template>
<script>
export default {
name: 'ZusammenfassungRosenteufel',
props: {
Lesen: {
type: String,
default: 'Lesen ->',
},
ButtonLink: String,
Description: {
type: String,
default:
'"Ich erzähl euch ein Gschicht von wahr, so wahr wie ihr danach nicht gwollt. Ein Gschicht dieerzähl als einzger überlebend: Mein Gschicht. S wart im letzten Jahr..." Diese Kurzgeschichte geschrieben mit Pseudomittelalterlicher Grammatik entstand aus einer Challenge die sich ein Freund und ich uns stellten, mit den Wörtern "Sand" und "Rose" eine Kurzgeschichte zu schreiben.',
},
rootClassName: String,
Header: {
type: String,
default: 'Rosenteufel',
},
},
}
</script>
<style scoped>
.zusammenfassung-rosenteufel-container {
width: 100%;
height: 400px;
display: flex;
position: relative;
align-items: flex-start;
flex-direction: column;
}
.zusammenfassung-rosenteufel-card {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
display: flex;
padding: var(--dl-space-space-threeunits);
position: relative;
align-items: flex-start;
border-radius: 20px;
flex-direction: column;
justify-content: flex-start;
background-color: rgba(41, 41, 41, 0.8);
}
.zusammenfassung-rosenteufel-content {
gap: var(--dl-space-space-twounits);
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.zusammenfassung-rosenteufel-header {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
}
.zusammenfassung-rosenteufel-header1 {
color: rgb(255, 255, 255);
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
line-height: 36px;
}
.zusammenfassung-rosenteufel-description {
color: #ffffff;
font-size: 18px;
font-family: Poppins;
line-height: 28px;
}
.zusammenfassung-rosenteufel-navlink {
display: contents;
}
.zusammenfassung-rosenteufel-button {
gap: var(--dl-space-space-oneandhalfunits);
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
border-color: #ffff00;
flex-direction: column;
padding-bottom: var(--dl-space-space-halfunit);
justify-content: center;
text-decoration: none;
border-bottom-width: 1px;
}
.zusammenfassung-rosenteufel-button:hover {
opacity: 0.5;
}
.zusammenfassung-rosenteufel-text {
color: #ffff00;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
.zusammenfassung-rosenteufel-root-class-name {
height: auto;
}
.zusammenfassung-rosenteufel-root-class-name1 {
height: auto;
}
@media(max-width: 991px) {
.zusammenfassung-rosenteufel-card {
padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-oneandhalfunits);
padding-right: var(--dl-space-space-oneandhalfunits);
padding-bottom: var(--dl-space-space-twounits);
}
}
</style>

153
src/components/zusammenfassung-suesse-traeume.vue
View file

@ -1,153 +0,0 @@
<template>
<div
class="zusammenfassung-suesse-traeume-container"
v-bind:class="rootClassName"
>
<section class="zusammenfassung-suesse-traeume-card">
<main class="zusammenfassung-suesse-traeume-content">
<header class="zusammenfassung-suesse-traeume-header">
<h1 class="zusammenfassung-suesse-traeume-header1">{{ Header }}</h1>
</header>
<p class="zusammenfassung-suesse-traeume-description">
{{ Description }}
</p>
<router-link
to="/suesse-traeume"
class="zusammenfassung-suesse-traeume-navlink"
>
<div class="zusammenfassung-suesse-traeume-button">
<p class="zusammenfassung-suesse-traeume-text">{{ Mehr }}</p>
</div>
</router-link>
</main>
</section>
</div>
</template>
<script>
export default {
name: 'ZusammenfassungSuesseTraeume',
props: {
Description: {
type: String,
default:
'"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..." 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.',
},
ButtonLink: String,
rootClassName: String,
Mehr: {
type: String,
default: 'Mehr ->',
},
Header: {
type: String,
default: 'Süsse Träume',
},
},
}
</script>
<style scoped>
.zusammenfassung-suesse-traeume-container {
width: 100%;
height: 400px;
display: flex;
position: relative;
align-items: flex-start;
flex-direction: column;
}
.zusammenfassung-suesse-traeume-card {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
display: flex;
padding: var(--dl-space-space-threeunits);
position: relative;
align-items: flex-start;
border-radius: 20px;
flex-direction: column;
justify-content: flex-start;
background-color: rgba(41, 41, 41, 0.8);
}
.zusammenfassung-suesse-traeume-content {
gap: var(--dl-space-space-twounits);
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.zusammenfassung-suesse-traeume-header {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
}
.zusammenfassung-suesse-traeume-header1 {
color: rgb(255, 255, 255);
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
line-height: 36px;
}
.zusammenfassung-suesse-traeume-description {
color: #ffffff;
font-size: 18px;
font-family: Poppins;
line-height: 28px;
}
.zusammenfassung-suesse-traeume-navlink {
display: contents;
}
.zusammenfassung-suesse-traeume-button {
gap: var(--dl-space-space-oneandhalfunits);
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
border-color: #FFFF00;
flex-direction: column;
padding-bottom: var(--dl-space-space-halfunit);
justify-content: center;
text-decoration: none;
border-bottom-width: 1px;
}
.zusammenfassung-suesse-traeume-button:hover {
opacity: 0.5;
}
.zusammenfassung-suesse-traeume-text {
color: #FFFF00;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
.zusammenfassung-suesse-traeume-root-class-name {
flex: 1;
width: 100%;
height: auto;
}
.zusammenfassung-suesse-traeume-root-class-name1 {
flex: 1;
width: auto;
height: auto;
}
.zusammenfassung-suesse-traeume-root-class-name2 {
flex: 2;
width: 100%;
height: auto;
}
@media(max-width: 991px) {
.zusammenfassung-suesse-traeume-card {
padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-oneandhalfunits);
padding-right: var(--dl-space-space-oneandhalfunits);
padding-bottom: var(--dl-space-space-twounits);
}
}
@media(max-width: 767px) {
.zusammenfassung-suesse-traeume-root-class-name {
flex: 1;
width: 100%;
height: 50%;
}
}
</style>

183
src/style.css
View file

@ -89,24 +89,6 @@
.nav-link:hover {
opacity: 0.5;
}
.get-started {
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
padding-top: var(--dl-space-space-unit);
border-color: transparent;
padding-left: var(--dl-space-space-oneandhalfunits);
border-radius: 58px;
padding-right: var(--dl-space-space-oneandhalfunits);
padding-bottom: var(--dl-space-space-unit);
justify-content: center;
text-decoration: none;
background-color: rgba(42, 42, 42, 1);
}
.get-started:hover {
opacity: 0.5;
}
.avatar {
width: var(--dl-size-size-small);
height: var(--dl-size-size-small);
@ -151,23 +133,6 @@
font-family: Poppins;
line-height: 28px;
}
.accordion-element {
gap: var(--dl-space-space-fiveunits);
width: 100%;
cursor: pointer;
display: flex;
position: relative;
max-width: 600px;
transition: .5s all linear;
align-items: center;
padding-top: var(--dl-space-space-unit);
user-select: none;
border-color: #5A5A5A;
flex-direction: row;
padding-bottom: var(--dl-space-space-unit);
justify-content: center;
border-bottom-width: 1px;
}
.side {
top: 0;
left: 0;
@ -176,49 +141,6 @@
position: absolute;
backdrop-filter: blur(130px);
}
.switch {
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
padding-top: var(--dl-space-space-unit);
padding-left: var(--dl-space-space-oneandhalfunits);
border-radius: 48px;
padding-right: var(--dl-space-space-oneandhalfunits);
flex-direction: column;
padding-bottom: var(--dl-space-space-unit);
justify-content: center;
background-color: #0F0F0F;
}
.switch:hover {
opacity: .5;
}
.social {
width: 24px;
cursor: pointer;
height: 24px;
object-fit: cover;
transition: 0.3s;
text-decoration: none;
}
.social:hover {
opacity: 0.5;
}
.footer-header {
color: rgb(255, 255, 255);
width: 100%;
font-size: 20px;
font-style: normal;
font-family: Poppins;
font-weight: 500;
line-height: 30px;
}
.footer-link {
color: rgb(204, 204, 204);
font-size: 14px;
font-family: Poppins;
line-height: 21px;
}
.site-title {
color: rgb(255, 255, 255);
font-size: 56px;
@ -241,6 +163,84 @@
justify-content: center;
background-color: rgba(41, 41, 41, 0.8);
}
.text-body {
color: rgb(255, 255, 255);
width: 90%;
padding: var(--dl-space-space-oneandhalfunits);
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;
border-radius: 20px;
background-color: rgba(41, 41, 41, 0.8);
}
.card {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
display: flex;
position: relative;
align-items: flex-start;
padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-oneandhalfunits);
border-radius: 20px;
padding-right: var(--dl-space-space-oneandhalfunits);
flex-direction: column;
padding-bottom: var(--dl-space-space-twounits);
justify-content: flex-start;
background-color: rgba(41, 41, 41, 0.8);
}
.event-entry {
gap: var(--dl-space-space-unit);
flex: 0 0 auto;
width: 100%;
display: flex;
position: relative;
align-self: flex-start;
align-items: center;
padding-top: var(--dl-space-space-unit);
border-color: rgba(200, 200, 200, 0.8);
border-style: dashed;
border-width: 0px;
padding-bottom: var(--dl-space-space-unit);
justify-content: flex-start;
border-top-width: 3px;
border-left-width: 0px;
border-right-width: 0px;
}
.event-date {
color: #ffffff;
width: 24%;
height: auto;
max-width: 220px;
font-family: Poppins;
line-height: 28px;
}
.event-title {
color: rgb(255, 255, 255);
width: 34%;
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 400;
margin-left: var(--dl-space-space-unit);
}
.event-location {
color: #ffffff;
width: 28%;
font-family: Poppins;
line-height: 28px;
}
.Heading {
font-size: 32px;
font-family: Inter;
@ -261,20 +261,33 @@
.site-title {
text-align: center;
}
.event-title {
font-size: 24px;
}
}
@media(max-width: 767px) {
.nav-link {
color: black;
}
.accordion-element {
gap: var(--dl-space-space-oneandhalfunits);
}
.round-borders {
width: 90%;
}
}
@media(max-width: 479px) {
.accordion-element {
max-width: auto;
.event-entry {
flex-wrap: wrap;
}
.event-date {
width: 220px;
height: auto;
}
.event-title {
width: auto;
height: auto;
font-size: 28px;
text-align: center;
margin-left: 0;
}
.event-location {
width: 260px;
}
}

14
src/views/ein-orden-fr-eine-gute-tat.vue
View file

@ -9,7 +9,7 @@
<span>Eine moralische Kurzgeschichte für Kinder</span>
<br />
</span>
<div class="ein-orden-fr-eine-gute-tat-beschreibung round-borders">
<div class="ein-orden-fr-eine-gute-tat-beschreibung text-body">
<span class="ein-orden-fr-eine-gute-tat-text04">
<span class="ein-orden-fr-eine-gute-tat-text05">
Ein brauner Schneehase besucht ein ein Rothörnchen und ein Grauhörnchen
@ -34,7 +34,7 @@
</span>
<img
alt="image"
src="/playground_assets/buch-vorderseite-schrift-1400w.png"
src="/playground_assets/einordenfuereinegutetat-1100w.png"
class="ein-orden-fr-eine-gute-tat-image"
/>
</div>
@ -53,11 +53,11 @@ export default {
AppKontakt,
},
metaInfo: {
title: 'Ein-Orden-fr-eine-gute-Tat - Open Visor',
title: 'Ein-Orden-fr-eine-gute-Tat - OpenVisor',
meta: [
{
property: 'og:title',
content: 'Ein-Orden-fr-eine-gute-Tat - Open Visor',
content: 'Ein-Orden-fr-eine-gute-Tat - OpenVisor',
},
],
},
@ -80,8 +80,10 @@ export default {
color: rgb(255, 255, 255);
font-size: 64px;
font-style: normal;
text-align: center;
font-family: Poppins;
font-weight: 600;
font-weight: 500;
margin-bottom: 12px;
}
.ein-orden-fr-eine-gute-tat-caption {
color: rgb(255, 255, 255);
@ -129,6 +131,7 @@ export default {
.ein-orden-fr-eine-gute-tat-heading {
width: 70%;
font-size: 40px;
margin-bottom: 6px;
}
.ein-orden-fr-eine-gute-tat-caption {
color: rgb(255, 255, 255);
@ -143,7 +146,6 @@ export default {
@media(max-width: 479px) {
.ein-orden-fr-eine-gute-tat-heading {
max-width: 70%;
text-align: center;
}
}
</style>

499
src/views/home.vue
View file

@ -1,74 +1,119 @@
<template>
<div class="home-container">
<app-navigation rootClassName="navigation-root-class-name"></app-navigation>
<h1 class="site-title">
<span>Open Visor</span>
<h1 class="home-heading site-title">
<span>OpenVisor</span>
<br />
</h1>
<span class="home-caption">
<span>Mit Offenem Visier</span>
<br />
</span>
<section class="home-kommende-veranstaltungen">
<header class="home-header">
<section class="home-veranstaltungen-kapitel">
<header class="home-veranstaltungen-titel">
<h2 class="home-section section-head">Kommende Veranstaltungen</h2>
</header>
<div class="home-veranstaltungen-liste">
<div class="home-letzte-gelegenheit-run1">
<h3 class="home-heading1">Letzte Gelegenheit Run 1 (Schweiz)</h3>
<p class="home-description">
<div class="event-entry">
<h3 class="event-title">Letzte Gelegenheit Run 1 (Schweiz)</h3>
<p class="event-date">
1. April 2023, 10:00 Uhr bis 2. April 2023, 14:00 Uhr
</p>
<p class="home-description1">
<p class="event-location">
Zivilschutzanlage Sonnenblock Chilegass 8, 8484 Weisslingen
</p>
<router-link to="/letzte-gelegenheit" class="home-navlink">
<div class="home-explore-more">
<p class="home-text4">Mehr -&gt;</p>
</div>
<router-link to="/letzte-gelegenheit">
<div class="home-mehr-link"><p class="home-mehr">Mehr -&gt;</p></div>
</router-link>
</div>
<div class="home-letzte-gelegenheit-run2">
<h3 class="home-heading2">Letzte Gelegenheit Run 2 (Deutschland)</h3>
<p class="home-description2">
<div class="home-letzte-gelegenheit-run2 event-entry">
<h3 class="event-title">Letzte Gelegenheit Run 2 (Deutschland)</h3>
<p class="event-date">
15. April 2023, 10:00 Uhr bis 16. April 2023, 14:00 Uhr
</p>
<p class="home-description3">coming soon</p>
<router-link to="/letzte-gelegenheit" class="home-navlink1">
<div class="home-explore-more1">
<p class="home-text5">Mehr -&gt;</p>
<p class="event-location home-standort1">coming soon</p>
<router-link to="/letzte-gelegenheit">
<div class="home-mehr-link1">
<p class="home-mehr1">Mehr -&gt;</p>
</div>
</router-link>
</div>
</div>
</section>
<section class="home-larps">
<header class="home-header1">
<h2 class="home-section1 section-head">LARPs</h2>
</header>
<section class="home-larps-kapitel">
<h2 class="home-larps-titel section-head">LARPs</h2>
<main class="home-cards">
<zusammenfassung-letzte-gelegenheit
rootClassName="zusammenfassung-letzte-gelegenheit-root-class-name"
></zusammenfassung-letzte-gelegenheit>
<zusammenfassung-suesse-traeume
rootClassName="zusammenfassung-suesse-traeume-root-class-name"
></zusammenfassung-suesse-traeume>
<section class="card">
<h1 class="home-header">Letzte Gelegenheit</h1>
<p class="home-description">
Das Nordic LARP “Letzte Gelegenheit” spielt in der heutigen Zeit in
einer alternativen Realität: Vor 63 Tagen fiel plötzlich der Strom aus
und dichte Nebelschwaden überzogen einige Städte. Sirenen führten die
Menschen in Bunker. Radios, die noch funktionierten, meldeten die
sofortige Mobilisierung der Milizarmee und des Zivilschutzes. Was
genau passierte, ist noch immer ungeklärt. Im Bunker des Gefängnisses
Schwarzbach versucht man den Alltag beizubehalten, doch langsam gehen
die Ressourcen aus und die Lage verschärft sich.
</p>
<router-link to="/letzte-gelegenheit">
<div class="home-button"><p class="home-text04">Mehr -&gt;</p></div>
</router-link>
</section>
<div class="card">
<h1 class="home-header1">Süsse Träume</h1>
<p class="home-description1">
&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; 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.
</p>
<router-link to="/suesse-traeume">
<div class="home-button1"><p class="home-text05">Mehr -&gt;</p></div>
</router-link>
</div>
</main>
</section>
<section class="home-kurzgeschichten">
<header class="home-header2">
<h2 class="home-section2 section-head">
<section class="home-kurzgeschichten-kapitel">
<h2 class="home-kurzgeschichten-titel section-head">
<span>Kurzgeschichten</span>
<br />
</h2>
</header>
<main class="home-cards1">
<zusammenfassung-ein-orden-fuer-eine-gute-tat
rootClassName="zusammenfassung-ein-orden-fuer-eine-gute-tat-root-class-name"
></zusammenfassung-ein-orden-fuer-eine-gute-tat>
<zusammenfassung-rosenteufel
rootClassName="zusammenfassung-rosenteufel-root-class-name"
></zusammenfassung-rosenteufel>
<div class="card">
<h1 class="home-header2">Ein Orden für eine gute Tat</h1>
<p class="home-description2">
&quot;Ein brauner Schneehase besucht ein ein Rothörnchen und ein
Grauhörnchen im vom Herbst bunt gefärbten Wald. Er hat einen Orden,
den er für eine gute Tat vergeben möchte. Doch welches Hörnchen
schafft es, diesen zu bekommen?&quot; Diese Kurzgeschichte für Kinder
und Eltern stellt spielerisch eine moralische Frage dar, dessen
Antwort das Elternteil oder das Kind selbst finden muss. Es soll das
Kind unterhalten und zugleich mit einer einfachen aber doch spannenden
Fragestellung bilden.
</p>
<router-link to="/ein-orden-fuer-eine-gute-tat">
<div class="home-button2"><p class="home-text08">Lesen -&gt;</p></div>
</router-link>
</div>
<div class="card">
<h1 class="home-header3">Rosenteufel</h1>
<p class="home-description3">
&quot;Ich erzähl euch ein Gschicht von wahr, so wahr wie ihr danach
nicht gwollt. Ein Gschicht dieerzähl als einzger überlebend: Mein
Gschicht. S wart im letzten Jahr...&quot; Diese Kurzgeschichte
geschrieben mit Pseudomittelalterlicher Grammatik entstand aus einer
Challenge die sich ein Freund und ich uns stellten, mit den Wörtern
&quot;Sand&quot; und &quot;Rose&quot; eine Kurzgeschichte zu
schreiben.
</p>
<router-link to="/rosenteufel">
<div class="home-button3"><p class="home-text09">Lesen -&gt;</p></div>
</router-link>
</div>
</main>
</section>
<app-kontakt></app-kontakt>
@ -77,28 +122,20 @@
<script>
import AppNavigation from '../components/navigation'
import ZusammenfassungLetzteGelegenheit from '../components/zusammenfassung-letzte-gelegenheit'
import ZusammenfassungSuesseTraeume from '../components/zusammenfassung-suesse-traeume'
import ZusammenfassungEinOrdenFuerEineGuteTat from '../components/zusammenfassung-ein-orden-fuer-eine-gute-tat'
import ZusammenfassungRosenteufel from '../components/zusammenfassung-rosenteufel'
import AppKontakt from '../components/kontakt'
export default {
name: 'Home',
components: {
AppNavigation,
ZusammenfassungLetzteGelegenheit,
ZusammenfassungSuesseTraeume,
ZusammenfassungEinOrdenFuerEineGuteTat,
ZusammenfassungRosenteufel,
AppKontakt,
},
metaInfo: {
title: 'Open Visor',
title: 'OpenVisor',
meta: [
{
property: 'og:title',
content: 'Open Visor',
content: 'OpenVisor',
},
],
},
@ -117,31 +154,32 @@ export default {
background-size: cover;
background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
}
.home-heading {
font-size: 64px;
}
.home-caption {
color: rgb(255, 255, 255);
font-size: 20px;
font-family: Fira Sans;
line-height: 30px;
}
.home-kommende-veranstaltungen {
.home-veranstaltungen-kapitel {
gap: var(--dl-space-space-halfunit);
flex: 1;
width: 100%;
height: auto;
display: flex;
position: relative;
margin-top: var(--dl-space-space-threeunits);
margin-top: var(--dl-space-space-sixunits);
align-items: center;
padding-top: var(--dl-space-space-threeunits);
border-color: #51515A;
padding-left: var(--dl-space-space-twounits);
padding-right: var(--dl-space-space-twounits);
flex-direction: column;
padding-bottom: var(--dl-space-space-threeunits);
justify-content: center;
border-top-width: 0px;
}
.home-header {
.home-veranstaltungen-titel {
gap: var(--dl-space-space-oneandhalfunits);
width: 100%;
display: flex;
@ -164,49 +202,7 @@ export default {
flex-direction: column;
background-color: rgba(41, 41, 41, 0.8);
}
.home-letzte-gelegenheit-run1 {
gap: var(--dl-space-space-unit);
flex: 0 0 auto;
width: 100%;
display: flex;
position: relative;
align-self: flex-start;
align-items: center;
border-color: rgba(200, 200, 200, 0.8);
border-style: dashed;
border-width: 0px;
justify-content: flex-start;
border-top-width: 3px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 3px;
}
.home-heading1 {
color: rgb(255, 255, 255);
width: 34%;
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 500;
margin-left: var(--dl-space-space-unit);
}
.home-description {
color: #ffffff;
width: 24%;
height: auto;
font-family: Poppins;
line-height: 28px;
}
.home-description1 {
color: #ffffff;
width: 28%;
font-family: Poppins;
line-height: 28px;
}
.home-navlink {
display: contents;
}
.home-explore-more {
.home-mehr-link {
gap: var(--dl-space-space-oneandhalfunits);
width: 60px;
cursor: pointer;
@ -221,10 +217,10 @@ export default {
text-decoration: none;
border-bottom-width: 1px;
}
.home-explore-more:hover {
.home-mehr-link:hover {
opacity: 0.5;
}
.home-text4 {
.home-mehr {
color: #FFFF00;
width: auto;
height: auto;
@ -234,48 +230,9 @@ export default {
line-height: 24px;
}
.home-letzte-gelegenheit-run2 {
gap: var(--dl-space-space-unit);
flex: 0 0 auto;
width: 100%;
display: flex;
position: relative;
align-self: flex-start;
align-items: center;
border-color: rgba(200, 200, 200, 0.8);
border-style: dashed;
border-width: 0px;
justify-content: flex-start;
border-top-width: 0px;
border-bottom-width: 3px;
}
.home-heading2 {
color: rgb(255, 255, 255);
width: 34%;
height: auto;
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 500;
margin-left: var(--dl-space-space-unit);
}
.home-description2 {
color: rgb(255, 255, 255);
width: 24%;
height: auto;
font-family: Poppins;
line-height: 28px;
}
.home-description3 {
color: rgb(255, 255, 255);
width: 28%;
font-family: Poppins;
line-height: 28px;
margin-right: 0px;
}
.home-navlink1 {
display: contents;
}
.home-explore-more1 {
.home-mehr-link1 {
gap: var(--dl-space-space-oneandhalfunits);
width: 60px;
cursor: pointer;
@ -290,10 +247,10 @@ export default {
text-decoration: none;
border-bottom-width: 1px;
}
.home-explore-more1:hover {
.home-mehr-link1:hover {
opacity: 0.5;
}
.home-text5 {
.home-mehr1 {
color: #ffff00;
width: 60px;
height: auto;
@ -302,30 +259,20 @@ export default {
font-weight: 500;
line-height: 24px;
}
.home-larps {
.home-larps-kapitel {
gap: var(--dl-space-space-twounits);
flex: 1;
width: 100%;
height: auto;
display: flex;
align-items: center;
padding-top: 60px;
padding-top: var(--dl-space-space-sixunits);
padding-left: var(--dl-space-space-oneandhalfunits);
padding-right: var(--dl-space-space-oneandhalfunits);
flex-direction: column;
padding-bottom: 60px;
justify-content: center;
}
.home-header1 {
gap: var(--dl-space-space-oneandhalfunits);
width: 100%;
display: flex;
max-width: 1200px;
align-items: center;
flex-direction: column;
justify-content: center;
}
.home-section1 {
.home-larps-titel {
color: rgb(255, 255, 255);
font-size: 36px;
text-transform: capitalize;
@ -339,31 +286,91 @@ export default {
flex-direction: row;
justify-content: center;
}
.home-kurzgeschichten {
.home-header {
color: rgb(255, 255, 255);
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
line-height: 36px;
}
.home-description {
color: #ffffff;
font-size: 18px;
font-family: Poppins;
line-height: 28px;
}
.home-button {
gap: var(--dl-space-space-oneandhalfunits);
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
border-color: #ffff00;
flex-direction: column;
padding-bottom: var(--dl-space-space-halfunit);
justify-content: center;
text-decoration: none;
border-bottom-width: 1px;
}
.home-button:hover {
opacity: 0.5;
}
.home-text04 {
color: #ffff00;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
.home-header1 {
color: rgb(255, 255, 255);
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
line-height: 36px;
}
.home-description1 {
color: #ffffff;
font-size: 18px;
font-family: Poppins;
line-height: 28px;
}
.home-button1 {
gap: var(--dl-space-space-oneandhalfunits);
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
border-color: #FFFF00;
flex-direction: column;
padding-bottom: var(--dl-space-space-halfunit);
justify-content: center;
text-decoration: none;
border-bottom-width: 1px;
}
.home-button1:hover {
opacity: 0.5;
}
.home-text05 {
color: #FFFF00;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
.home-kurzgeschichten-kapitel {
gap: var(--dl-space-space-twounits);
flex: 1;
width: 100%;
display: flex;
align-items: center;
padding-top: 60px;
border-color: #51515A;
padding-top: var(--dl-space-space-sixunits);
padding-left: var(--dl-space-space-oneandhalfunits);
padding-right: var(--dl-space-space-oneandhalfunits);
flex-direction: column;
padding-bottom: 60px;
justify-content: center;
border-top-width: 0px;
}
.home-header2 {
gap: var(--dl-space-space-oneandhalfunits);
width: 100%;
display: flex;
max-width: 1200px;
align-items: center;
flex-direction: column;
justify-content: center;
}
.home-section2 {
.home-kurzgeschichten-titel {
color: #ffffff;
font-size: 36px;
text-transform: uppercase;
@ -377,6 +384,78 @@ export default {
flex-direction: row;
justify-content: center;
}
.home-header2 {
color: rgb(255, 255, 255);
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
line-height: 36px;
}
.home-description2 {
color: #ffffff;
font-size: 18px;
font-family: Poppins;
line-height: 28px;
}
.home-button2 {
gap: var(--dl-space-space-oneandhalfunits);
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
border-color: #ffff00;
flex-direction: column;
padding-bottom: var(--dl-space-space-halfunit);
justify-content: center;
text-decoration: none;
border-bottom-width: 1px;
}
.home-button2:hover {
opacity: 0.5;
}
.home-text08 {
color: #ffff00;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
.home-header3 {
color: rgb(255, 255, 255);
font-size: 24px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
line-height: 36px;
}
.home-description3 {
color: #ffffff;
font-size: 18px;
font-family: Poppins;
line-height: 28px;
}
.home-button3 {
gap: var(--dl-space-space-oneandhalfunits);
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
border-color: #ffff00;
flex-direction: column;
padding-bottom: var(--dl-space-space-halfunit);
justify-content: center;
text-decoration: none;
border-bottom-width: 1px;
}
.home-button3:hover {
opacity: 0.5;
}
.home-text09 {
color: #ffff00;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
@media(max-width: 991px) {
.home-caption {
text-align: left;
@ -384,21 +463,7 @@ export default {
.home-veranstaltungen-liste {
width: 99%;
}
.home-letzte-gelegenheit-run1 {
padding-top: var(--dl-space-space-unit);
flex-direction: column;
padding-bottom: var(--dl-space-space-unit);
}
.home-heading1 {
font-size: 24px;
text-align: center;
}
.home-letzte-gelegenheit-run2 {
padding-top: var(--dl-space-space-unit);
flex-direction: column;
padding-bottom: var(--dl-space-space-unit);
}
.home-description3 {
.home-standort1 {
text-align: center;
}
.home-cards {
@ -417,57 +482,13 @@ export default {
font-family: Poppins;
line-height: 24px;
}
.home-kommende-veranstaltungen {
.home-veranstaltungen-kapitel {
width: auto;
border-color: transparent;
}
.home-veranstaltungen-liste {
flex-wrap: wrap;
}
.home-letzte-gelegenheit-run1 {
flex: 1;
width: auto;
flex-wrap: wrap;
align-self: center;
padding-top: var(--dl-space-space-unit);
flex-direction: column;
padding-bottom: var(--dl-space-space-unit);
}
.home-heading1 {
width: auto;
height: auto;
font-size: 28px;
text-align: center;
}
.home-description {
width: 200px;
height: auto;
}
.home-description1 {
width: 260px;
text-align: center;
}
.home-letzte-gelegenheit-run2 {
flex: auto;
width: auto;
flex-wrap: wrap;
align-self: center;
padding-top: var(--dl-space-space-unit);
flex-direction: column;
padding-bottom: var(--dl-space-space-unit);
}
.home-heading2 {
height: auto;
font-size: 28px;
text-align: center;
}
.home-description2 {
height: auto;
text-align: left;
}
.home-description3 {
text-align: center;
}
.home-cards {
gap: var(--dl-space-space-oneandhalfunits);
flex-wrap: wrap;
@ -482,7 +503,7 @@ export default {
.home-caption {
font-family: Poppins;
}
.home-header {
.home-veranstaltungen-titel {
width: auto;
height: auto;
max-width: auto;
@ -495,24 +516,10 @@ export default {
.home-veranstaltungen-liste {
width: 90%;
}
.home-letzte-gelegenheit-run1 {
width: 100%;
z-index: 50;
align-self: flex-start;
}
.home-letzte-gelegenheit-run2 {
width: 100%;
z-index: 50;
align-self: center;
}
.home-heading2 {
width: auto;
margin-left: 0px;
}
.home-larps {
.home-larps-kapitel {
gap: var(--dl-space-space-twounits);
}
.home-kurzgeschichten {
.home-kurzgeschichten-kapitel {
gap: var(--dl-space-space-twounits);
}
}

200
src/views/larpkonzept.vue
View file

@ -12,25 +12,24 @@
</span>
<br />
</span>
<div class="larpkonzept-container1">
<p class="larpkonzept-description">
<p class="text-body">
<span class="larpkonzept-text04">
Kurze Begriffserklärung für Larp-Neulinge
</span>
<br class="larpkonzept-text05" />
<span>
LARP steht für Live Action Roleplay. Hierbei schlüpft man in die Rolle
eines fiktiven Menschen für die Dauer einer Veranstaltung. Immer wenn
man die Rolle des Charakters übernimmt, ist man In-Time (IT). Ansonsten
ist man Out-Time (OT). Hierbei ist wichtig für die Trennung, dass man
vor und nach der Veranstaltung (OT) wieder sich selbst ist und vom
Charakter am besten in der dritten Person (er/sie/*) redet. Auch wenn
man während der Veranstaltung mal etwas ausserhalb des Charakters
macht/sagt ist man OT. Manche Leute zeigen das, in dem man mit den Armen
ein Kreuz vor der Brust macht oder mit den flachen Händen ein “T”
darstellt. Falls möglich, versucht man OT-Signale aber so zu senden,
dass man die Immersion durch OT Ansagen nicht stört. Zu diesen kommen
wir im Kapitel “Spielintensitäts Steigerung- und Verringerrung”.
eines fiktiven Menschen für die Dauer einer Veranstaltung. Immer wenn man
die Rolle des Charakters übernimmt, ist man In-Time (IT). Ansonsten ist
man Out-Time (OT). Hierbei ist wichtig für die Trennung, dass man vor und
nach der Veranstaltung (OT) wieder sich selbst ist und vom Charakter am
besten in der dritten Person (er/sie/*) redet. Auch wenn man während der
Veranstaltung mal etwas ausserhalb des Charakters macht/sagt ist man OT.
Manche Leute zeigen das, in dem man mit den Armen ein Kreuz vor der Brust
macht oder mit den flachen Händen ein “T” darstellt. Falls möglich,
versucht man OT-Signale aber so zu senden, dass man die Immersion durch OT
Ansagen nicht stört. Zu diesen kommen wir im Kapitel “Spielintensitäts
Steigerung- und Verringerrung”.
</span>
<br class="larpkonzept-text07" />
<br class="larpkonzept-text08" />
@ -38,14 +37,13 @@
<br class="larpkonzept-text10" />
<span>
Grundsätzlich gilt, &quot;Du kannst was Du darstellen kannst&quot;. D.h.
man zeigt in echt was man kann und sagt nicht &quot;ich tue gerade
X&quot; (sogenanntes Telling). Beispiel: Wenn man ein Kräftiger
Metallbiegender Muskelprotz sein möchte muss man entweder so trainieren,
dass man das wirklich kann, oder z.B. überall leichte Props verstecken,
die der Charakter mit Leichtigkeit verbiegt oder aufhebt. Der Grund
weswegen wir das möchten ist um eine Immersion im Spiel
aufrechtzuerhalten, sodass man sich besser in die Charaktere einfühlen
kann.
man zeigt in echt was man kann und sagt nicht &quot;ich tue gerade X&quot;
(sogenanntes Telling). Beispiel: Wenn man ein Kräftiger Metallbiegender
Muskelprotz sein möchte muss man entweder so trainieren, dass man das
wirklich kann, oder z.B. überall leichte Props verstecken, die der
Charakter mit Leichtigkeit verbiegt oder aufhebt. Der Grund weswegen wir
das möchten ist um eine Immersion im Spiel aufrechtzuerhalten, sodass man
sich besser in die Charaktere einfühlen kann.
</span>
<br class="larpkonzept-text12" />
<br class="larpkonzept-text13" />
@ -53,10 +51,10 @@
<br class="larpkonzept-text15" />
<span>
Play to Lose heisst für eine bessere Geschichte oder besseres Spiel für
die Beteiligten auf einen Erfolg des eigenen Charakters zu verzichten.
Das heisst der eigene Charakter kann viele Erfolge haben, doch das Spiel
ist kein Wettstreit darum, wer den erfolgreichsten Charakter gespielt
hat. Es geht bei “Letzte Gelegenheit” darum, kollaborativ eine spannende
die Beteiligten auf einen Erfolg des eigenen Charakters zu verzichten. Das
heisst der eigene Charakter kann viele Erfolge haben, doch das Spiel ist
kein Wettstreit darum, wer den erfolgreichsten Charakter gespielt hat. Es
geht bei “Letzte Gelegenheit” darum, kollaborativ eine spannende
Geschichte zu erzählen.
</span>
<br class="larpkonzept-text17" />
@ -64,32 +62,30 @@
Das Gegenteil von Play to Lose ist Play to Win, also wenn man versucht
einen möglichst siegreichen Charakter zu spielen. Das ist an sich nicht
schlecht und kann auch viel Spass machen, ist aber bei “Letzte
Gelegenheit” nicht das Ziel. Allgemein verpönt ist Powergaming, also
wenn man eine offensichtliche Niederlage des eigenen Charakters nicht
zulässt oder ignoriert und damit die Glaubwürdigkeit der Szene und die
Immersion der Beteiligten bricht. Powergaming ist bei “Letzte
Gelegenheit” verboten.
Gelegenheit” nicht das Ziel. Allgemein verpönt ist Powergaming, also wenn
man eine offensichtliche Niederlage des eigenen Charakters nicht zulässt
oder ignoriert und damit die Glaubwürdigkeit der Szene und die Immersion
der Beteiligten bricht. Powergaming ist bei “Letzte Gelegenheit” verboten.
</span>
<br class="larpkonzept-text19" />
<br class="larpkonzept-text20" />
<span class="larpkonzept-text21">Play to Lift</span>
<br class="larpkonzept-text22" />
<span>
Play to Lift heisst seinen Mitspielern beim Ausspielen ihres Charakters
zu unterstützen. Grundsätzlich gilt DKWDDK, doch es gibt auch Spiel
deren Darstellung schwierig ist, zum Beispiel wenn zwei Spieler
Wissenschaftler spielen, die sich über eine fiktive Technologie
streiten. Wenn jemand vor dem Spiel angibt, ein Charakter zu spielen der
ein kompetenter Wissenschaftler ist, dann können sich die Mitspieler
schon mal das richtige Mindset setzen, dass man, was dieser erzählt,
nicht einfach als unbewiesene Theorien abstempelt, sondern seinen
Argumenten als Zuhörer Gewicht verleiht. Falls ich jetzt mit dem
Charakter streiten möchte, kritisiere ich nicht seine Kompetenz, sondern
vielleicht seine Herkunft und Kultur oder den Zweck seiner Erfindungen.
Man nennt das Ganze auch “sich gegenseitig Hochspielen”. Die wenigsten
von uns bedienen wohl als Beruf oder in der Freizeit militärische
Funkgeräte, also müssen wir uns da gegenseitig helfen, die Kompetenzen
dazu glaubwürdig darzustellen.
Play to Lift heisst seinen Mitspielern beim Ausspielen ihres Charakters zu
unterstützen. Grundsätzlich gilt DKWDDK, doch es gibt auch Spiel deren
Darstellung schwierig ist, zum Beispiel wenn zwei Spieler Wissenschaftler
spielen, die sich über eine fiktive Technologie streiten. Wenn jemand vor
dem Spiel angibt, ein Charakter zu spielen der ein kompetenter
Wissenschaftler ist, dann können sich die Mitspieler schon mal das
richtige Mindset setzen, dass man, was dieser erzählt, nicht einfach als
unbewiesene Theorien abstempelt, sondern seinen Argumenten als Zuhörer
Gewicht verleiht. Falls ich jetzt mit dem Charakter streiten möchte,
kritisiere ich nicht seine Kompetenz, sondern vielleicht seine Herkunft
und Kultur oder den Zweck seiner Erfindungen. Man nennt das Ganze auch
“sich gegenseitig Hochspielen”. Die wenigsten von uns bedienen wohl als
Beruf oder in der Freizeit militärische Funkgeräte, also müssen wir uns da
gegenseitig helfen, die Kompetenzen dazu glaubwürdig darzustellen.
</span>
<br class="larpkonzept-text24" />
<br class="larpkonzept-text25" />
@ -98,14 +94,13 @@
</span>
<br class="larpkonzept-text27" />
<span>
Wir werden Charaktere schreiben die dicht miteinander vernetzt sind.
Dies hat zur Konsequenz, dass eher weniger Spielerplätze verfügbar sind,
dafür ist die Intensivität für diese Spieler umso höher. Letztendlich
liegt es an den Spielern, was die Organisatoren schreiben zu
interpretieren und selber zusätzliche Verknüpfungen ins Spiel zu bringen
wenn es passt. Die vorgeschriebenen Charaktere und Beziehungen sollen
aber sicherstellen, dass sicher jeder Spieler andere Spieler hat, die
man anspielen kann.
Wir werden Charaktere schreiben die dicht miteinander vernetzt sind. Dies
hat zur Konsequenz, dass eher weniger Spielerplätze verfügbar sind, dafür
ist die Intensivität für diese Spieler umso höher. Letztendlich liegt es
an den Spielern, was die Organisatoren schreiben zu interpretieren und
selber zusätzliche Verknüpfungen ins Spiel zu bringen wenn es passt. Die
vorgeschriebenen Charaktere und Beziehungen sollen aber sicherstellen,
dass sicher jeder Spieler andere Spieler hat, die man anspielen kann.
</span>
<br class="larpkonzept-text29" />
<br class="larpkonzept-text30" />
@ -115,25 +110,25 @@
<br class="larpkonzept-text32" />
<span>
Wie an vielen Nordic Larps gibt es oft OT-Signale um seinem gegenüber zu
vermitteln, dass man die Spielintensität verringern oder steigern
möchte. Der Vorteil bei solchen Signalen, ist dass man die Szene dabei
nicht OT unterbrechen muss und das die Immersion schützt und
gleichzeitig die Hemmungen senkt für das eigene Wohl einzustehen. Um
etwas OT mitzuteilen, meist, dass man etwas OT nicht tun will, nutzen
wir am “Letzte Gelegenheit” die Formell “wirklich wirklich”. Dies hat
sich beim Larp “Tales Inside” bewährt. Man sagt z.B. “Ich will das
wirklich wirklich nicht tun.” oder “Bitte schlage mich wirklich wirklich
nicht.” Das Steigern erwirkt man durch die Ansage “War das schon
alles?”. Dies hat sich auch beim “Tales Inside” bewährt. Das Steigern
ist dabei immer nur ein Angebot. Das Gegenüber muss auch komfortabel mit
einer Intensitätssteigerung sein. Es kann also sein, dass das
Steigerungssignal ignoriert wird.
vermitteln, dass man die Spielintensität verringern oder steigern möchte.
Der Vorteil bei solchen Signalen, ist dass man die Szene dabei nicht OT
unterbrechen muss und das die Immersion schützt und gleichzeitig die
Hemmungen senkt für das eigene Wohl einzustehen. Um etwas OT mitzuteilen,
meist, dass man etwas OT nicht tun will, nutzen wir am “Letzte
Gelegenheit” die Formell “wirklich wirklich”. Dies hat sich beim Larp
“Tales Inside” bewährt. Man sagt z.B. “Ich will das wirklich wirklich
nicht tun.” oder “Bitte schlage mich wirklich wirklich nicht.” Das
Steigern erwirkt man durch die Ansage “War das schon alles?”. Dies hat
sich auch beim “Tales Inside” bewährt. Das Steigern ist dabei immer nur
ein Angebot. Das Gegenüber muss auch komfortabel mit einer
Intensitätssteigerung sein. Es kann also sein, dass das Steigerungssignal
ignoriert wird.
</span>
<br class="larpkonzept-text34" />
<br class="larpkonzept-text35" />
<span>
Zu guter Letzt benutzen wir am “Letzte Gelegenheit” auch die
<span v-html="rawpeca"></span>
<span v-html="raw9psn"></span>
</span>
<a
href="https://en.wikipedia.org/wiki/OK_gesture"
@ -144,13 +139,13 @@
OK-Hand
</a>
<span>
. Diese soll man Spielern zeigen, bei denen man sich nicht sicher ist,
ob es denen OT gut geht. Diese geben dann mit einem Daumen an, wie es
ihnen geht (nach oben heisst gut, Mitte eher mittelmässig und nach unten
. Diese soll man Spielern zeigen, bei denen man sich nicht sicher ist, ob
es denen OT gut geht. Diese geben dann mit einem Daumen an, wie es ihnen
geht (nach oben heisst gut, Mitte eher mittelmässig und nach unten
schlecht). Nur wenn der Daumen nach oben zeigt, soll man die
Spielintensität beibehalten, ansonsten soll man sie verringern, um
sicherzustellen, dass es der Person wieder besser geht.
<span v-html="rawrr57"></span>
<span v-html="rawx0tt"></span>
</span>
<br class="larpkonzept-text38" />
<br class="larpkonzept-text39" />
@ -159,22 +154,20 @@
</span>
<br class="larpkonzept-text41" />
<span>
Wir werden vor und nach dem Spiel Workshops durchführen um die
Spielenden ins Spiel ein- und wieder auszuführen. Wenn man intensives
Spiel hat, was unser Ziel ist, kann es schwer sein, die Rolle wieder zu
verlassen. IT Gefühle wandern ins OT. Das ist der sogenannte “Bleed”.
Das ist grundsätzlich gut, weil einem Larp nur so wirklich unter die
Haut gehen kann, doch es ist wichtig dann damit sauber abzuschliessen.
Wir versuchen euch dabei zu helfen. Zusätzlich wird es eine
Feedbackrunde geben, wobei die Spielenden auf Plakaten mit verschiedenen
Aspekten des Larps schreiben, was sie gut fanden und was sie verbessern
würden. Organisatoren sind nach einem Larp meist auch OT angeschlagen
und können das Feedback dann später wenn der Stress abgeklungen ist in
Ruhe anschauen.
Wir werden vor und nach dem Spiel Workshops durchführen um die Spielenden
ins Spiel ein- und wieder auszuführen. Wenn man intensives Spiel hat, was
unser Ziel ist, kann es schwer sein, die Rolle wieder zu verlassen. IT
Gefühle wandern ins OT. Das ist der sogenannte “Bleed”. Das ist
grundsätzlich gut, weil einem Larp nur so wirklich unter die Haut gehen
kann, doch es ist wichtig dann damit sauber abzuschliessen. Wir versuchen
euch dabei zu helfen. Zusätzlich wird es eine Feedbackrunde geben, wobei
die Spielenden auf Plakaten mit verschiedenen Aspekten des Larps
schreiben, was sie gut fanden und was sie verbessern würden. Organisatoren
sind nach einem Larp meist auch OT angeschlagen und können das Feedback
dann später wenn der Stress abgeklungen ist in Ruhe anschauen.
</span>
<br class="larpkonzept-text43" />
</p>
</div>
<app-kontakt rootClassName="kontakt-root-class-name2"></app-kontakt>
</div>
</template>
@ -192,17 +185,17 @@ export default {
data() {
return {
rawpeca: ' ',
rawrr57: ' ',
raw9psn: ' ',
rawx0tt: ' ',
}
},
metaInfo: {
title: 'Larpkonzept - Open Visor',
title: 'Larpkonzept - OpenVisor',
meta: [
{
property: 'og:title',
content: 'Larpkonzept - Open Visor',
content: 'Larpkonzept - OpenVisor',
},
],
},
@ -230,7 +223,7 @@ export default {
font-style: normal;
text-align: center;
font-family: Poppins;
font-weight: 600;
font-weight: 500;
margin-bottom: 6px;
}
.larpkonzept-caption {
@ -241,30 +234,6 @@ export default {
font-family: Poppins;
line-height: 30px;
}
.larpkonzept-container1 {
flex: 0 0 auto;
width: 90%;
height: auto;
display: flex;
max-width: 1080px;
align-items: flex-start;
flex-direction: column;
}
.larpkonzept-description {
color: rgb(255, 255, 255);
width: auto;
font-size: 18px;
align-self: center;
margin-top: var(--dl-space-space-twounits);
font-family: Poppins;
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);
}
.larpkonzept-text04 {
font-weight: 700;
}
@ -373,12 +342,7 @@ export default {
}
@media(max-width: 479px) {
.larpkonzept-heading {
color: rgb(255, 255, 255);
font-size: 64px;
max-width: 280px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
}
}
</style>

455
src/views/letzte-gelegenheit.vue
View file

@ -9,8 +9,11 @@
<span>Haben Häftlinge Platz im Bunker?</span>
<br />
</span>
<div class="letzte-gelegenheit-container1">
<p class="letzte-gelegenheit-description">
<div class="letzte-gelegenheit-zusammenfassung text-body">
<h2 class="letzte-gelegenheit-zusammenfassung1 section-head">
Zusammenfassung
</h2>
<p class="letzte-gelegenheit-beschreibung">
<span class="letzte-gelegenheit-text004">Setting</span>
<br />
<span>
@ -31,13 +34,13 @@
<br />
<span>
 ·
<span v-html="raw0fvt"></span>
<span v-html="rawfznl"></span>
</span>
<span>Gemeinsam eine Geschichte erleben und entwickeln</span>
<br />
<span>
 ·
<span v-html="rawyqmf"></span>
<span v-html="raw12i1"></span>
</span>
<span>
Intensive Momente und Emotionen ermöglichen, die in Erinnerung bleiben.
@ -45,7 +48,7 @@
<br />
<span>
 ·
<span v-html="rawuymr"></span>
<span v-html="rawwo2u"></span>
</span>
<span>
Persönliche Auseinandersetzungen der Spieler mit nicht alltäglichen
@ -54,7 +57,7 @@
<br />
<span>
 ·
<span v-html="raw2864"></span>
<span v-html="rawruix"></span>
</span>
<span>
Interne Charakterentwicklung oder -verfestigung durch externe Faktoren.
@ -62,13 +65,13 @@
<br />
<span>
 ·
<span v-html="raw9rkn"></span>
<span v-html="rawxbjr"></span>
</span>
<span>Dilemmata mit sich selbst und mit anderen.</span>
<br />
<span>
 ·
<span v-html="rawo439"></span>
<span v-html="raw2mh3"></span>
</span>
<span>
Weder dauernder Zusammenhalt noch konstanter Konflikt, sondern Variation
@ -115,7 +118,7 @@
<br />
<span>
Sexismus und
<span v-html="rawesus"></span>
<span v-html="rawr7m0"></span>
</span>
<span>
Rassismus (stattdessen werden kulturelle Differenzen vergrössert)
@ -142,19 +145,19 @@
<br />
<span>
 ·
<span v-html="raw9kr2"></span>
<span v-html="rawijin"></span>
</span>
<span>Solidaritätsticket: 20.- CHF</span>
<br />
<span>
 ·
<span v-html="rawtjh9"></span>
<span v-html="rawthiy"></span>
</span>
<span>Normalticket: 40.- CHF</span>
<br />
<span>
 ·
<span v-html="raw47l8"></span>
<span v-html="rawchy3"></span>
</span>
<span>Sponsorticket: 60.- CHF</span>
<br />
@ -188,18 +191,18 @@
Möglichkeit im OT Bereich Snacks zu essen (Früchte, geschnittenes
Gemüse, Brötchen, Käse, Süssigkeiten, Trockenwürste, Wasserkocher mit
French Press, Kaffeepulver und Teebeuteln).
<span v-html="rawacc0"></span>
<span v-html="rawubo7"></span>
</span>
<br class="letzte-gelegenheit-text080" />
<span>
 ·
<span v-html="rawh417"></span>
<span v-html="rawle0k"></span>
</span>
<span>Samstag OT Mittagessen (vor Time-In)</span>
<br class="letzte-gelegenheit-text083" />
<span>
 ·
<span v-html="raw4ovv"></span>
<span v-html="raw1cuz"></span>
</span>
<span>
Samstag IT Abendessen (gefriergetrocknetes IT Essen &quot;Meals Ready to
@ -208,7 +211,7 @@
<br class="letzte-gelegenheit-text086" />
<span>
 ·
<span v-html="raw3t1i"></span>
<span v-html="rawy7xo"></span>
</span>
<span>
Sonntag IT Frühstück (gefriergetrocknetes IT Essen &quot;Meals Ready to
@ -217,7 +220,7 @@
<br class="letzte-gelegenheit-text089" />
<span>
 ·
<span v-html="rawz8vp"></span>
<span v-html="rawa62o"></span>
</span>
<span>Sonntag OT Mittagessen (nach Time-Out)</span>
<br class="letzte-gelegenheit-text092" />
@ -272,7 +275,7 @@
<br />
<span>
Parkplatz:
<span v-html="rawnptf"></span>
<span v-html="raw61u8"></span>
</span>
<span class="letzte-gelegenheit-text128">
https://goo.gl/maps/KgqAwRdw8pJSdmjTA
@ -285,12 +288,242 @@
<br />
<br />
</p>
<div class="letzte-gelegenheit-container2">
<p class="letzte-gelegenheit-description1">Ablauf</p>
<a
href="https://forms.gle/YL6fFSHqY43TsV4B7"
target="_blank"
rel="noreferrer noopener"
class="letzte-gelegenheit-link"
>
<div class="letzte-gelegenheit-anmeldung button">
<span class="letzte-gelegenheit-anmeldung1">Anmeldung</span>
</div>
<div class="letzte-gelegenheit-get-started button">
<span class="letzte-gelegenheit-text136">Anmeldung</span>
</a>
</div>
<div class="letzte-gelegenheit-spielangebot text-body">
<h2 class="letzte-gelegenheit-spielangebot1 section-head">Spielangebot</h2>
<p class="letzte-gelegenheit-beschreibung1">
<span class="letzte-gelegenheit-text136">
TEXT IN BEARBEITUNG! TEXT IN BEARBEITUNG! TEXT IN BEARBEITUNG!
</span>
<br />
<br />
<span class="letzte-gelegenheit-text139">Drogen und Gift</span>
<br />
<span>
Opioide werden durch saures Pulver dargestellt. Je saurer, desto
potenter die Opioide. Eine normale Dosis ist nur leicht spürbar. Eine
Überdosis wird durch harte Säure dargestellt. Diese kann z.B. auch ins
Essen gemischt werden. Die Überdosis macht einen Charakter sehr schwach,
sollte aber nicht töten. Natürlich darf ein Spieler seinen Charakter
auch an einer Überdosis sterben lassen, wenn es zum Spiel passt.
</span>
<br />
<br />
<span>
Drogen können helfen Drama im Spiel anzuheizen. Ein Grund, Drogen zu
benötigen ist schnell gefunden und die Beschaffung der Drogen, der
Besitz der Drogen und die Nutzung der Drogen geben mehreren Spielern
Spiel. IT sind Drogen verboten, vor allem weil man ja eigentlich
Ressourcen sparen will, OT sind Spieler aber dazu angehalten das Spiel
mit Drogen möglich zu halten für die Charaktere, die damit zu tun haben.
Selbst ein Prinzipienreiter kann auch irgendwann Drogen nehmen wenn die
Verzweiflung oder die Schmerzen die Durchhaltegrenze überschreiten.
Drogenkonsum ist aber nur ein Spielangebot, das nicht bespielt werden
muss.
</span>
<br />
<br />
<span class="letzte-gelegenheit-text147">Lager</span>
<br />
<span>
Das Gefängnis hat noch vor der Zeit der Invasion Ersatzteile neben dem
Bunker gelagert. Doch draussen ist alles voller Nebel und es ist nur
schwer sich dort zu bewegen und nicht sicher, deshalb wird das eher nur
gemacht, wenn wirklich nötig. Dies kann z.B. von den Häftlingen als
Moment genutzt werden, um die aufgeteilten Wärter zu überrumpeln oder
von Wärtern, um Häftlinge zu bedrohen/vermöbeln. Einen Körper dort
loszuwerden ist praktisch unmöglich, also würde nur jemand, der nicht
bei Verstand ist, versuchen dort jemanden umzubringen, weil dies
ziemlich sicher auffliegt.
</span>
<br />
<br />
<span class="letzte-gelegenheit-text152">Waffen</span>
<br />
<span>
Die Wärter haben Pistolen und Schlagstöcke, die Militärs haben
Sturmgewehre. Ausserdem liegen überall Werkzeuge rum, die von Häftlingen
gebraucht werden. Wenn ein Wärter bemerkt, dass ein Häftling ein
Werkzeug bei sich hat, das er gerade nicht benutzt, wird er bestraft. Da
die Wärter die Häftlinge aber z.B. für Reparaturen brauchen, verbieten
sie die Werkzeuge nie ganz.
</span>
<br />
<br />
<span class="letzte-gelegenheit-text157">Elektrik</span>
<br />
<span>
Es gibt Charaktere, die die Elektrik der Lichter, des Fernsehers, des
Computers, der Heizungs- und Lüftungssysteme des Bunkers reparieren oder
sabotieren. Dazu gibt es Minispiele, die man absichtlich verlieren kann,
um das Drama zu erhöhen oder um IT etwas zu sabotieren. Lindbeck kennt
sich am besten mit der Elektrik aus. Alle anderen machen bei versuchter
Reparatur ohne seine Hilfe garantiert Fehler.
</span>
<br />
<br />
<span class="letzte-gelegenheit-text162">IT vs. OT Feuer</span>
<br />
<span>
IT Feuer wird durch Nebel in Kombination mit orangem Licht dargestellt.
Z.B. kann die Elektrik anfangen zu brennen bei falscher Reparatur. Es
gibt eine Löschdecke, die auch IT für das Löschen des Feuers benutzt
werden kann, doch man atmet dabei ziemlich sicher giftigen Rauch und
allenfalls sogar toxische Gase der Elektronik ein und verbrennt sich
allenfalls sogar. D.h. wer auch immer IT das Feuer löscht, begibt sich
in Gefahr. Für OT Feuer stehen Feuerlöscher bereit. Das Safeword für OT
Feuer lautet “Feuerwehr”.
</span>
<br />
<br />
<span class="letzte-gelegenheit-text167">Medizinspiel</span>
<br />
<span>
Um das Medizinspiel ohne OT Telling zu ermöglichen, erhält jeder Spieler
zu Beginn OT-Etiketten (evtl. Besser Clipper oder Kleber an
Namensschild?), die man sich auf den Arm macht um den aktuellen
Gesundheitszustand der analysiert werden kann z.B. durch Blutprobe
darzustellen. Die Stati sind wie folgt sind auf den Aufkleber nochmals
aufgeschrieben, d.h. man muss sich die Farbe nicht auswendig merken:
</span>
<br />
<span>Grün: Normalwerte</span>
<br />
<span>Blau: Opioide o.Ä. Im Blut</span>
<br />
<span>Gelb: Unterernährt</span>
<br />
<span>Orange: Krankheit</span>
<br />
<span>Rot: tödliche/schwere Krankheit oder kritischer Zustand</span>
<br />
<span>Schwarz: kein Puls</span>
<br />
<br />
<span>
Grundsätzlich beherrscht nur Krankenpfleger Jankovic und dessen
Assistent Lindbeck Medizin, sie können aber andere mit genauen
Vorgehensweisen instruieren, medizinische Tätigkeiten auszuüben. Wenn
jemand das ohne ihre Hilfe versucht, wird das auf die eine oder andere
Art fehlschlagen (Wunde entzündet sich und eitert, Krankheit wird
schlimmer etc.).
</span>
<br />
<br />
<span class="letzte-gelegenheit-text187">Reinigung</span>
<br />
<span>
Der Bunker wird regelmässig gereinigt. Damit möchte man den Bunker
sauber halten, damit die Lebenskonditionen besser sind, die Hygiene gut
halten, um Krankheiten zu verhindern und die Häftlinge zu beschäftigen,
um sie von schlechten Ideen abzulenken. Vor allem aus letzterem Punkt
kann ein Häftling gut mal dazu verdonnert werden, dieselbe Stelle zu
reinigen, die der Häftling erst gerade vor einer Stunde reinigte.
</span>
<br />
<br />
<span class="letzte-gelegenheit-text192">Computer</span>
<br />
<span>
Im Büro von Aubert hat es einen Computer, auf dem sämtliche Daten des
Gefängnispersonals und der Häftlinge gespeichert sind. Das
Gefängnispersonal hat Logins, die mit Passwörter geschützt sind, die
auffindbar sein sollen. Dazu wird es Zettel geben, die die Leute jeweils
verstecken und immer vor dem Login hervorkramen, um das Passwort
einzugeben. So kann dies entdeckt und allenfalls gestohlen werden. Je
nach Funktion hat der Mitarbeiter andere Lese- und Schreibrechte auf die
Dokumente. Für die Rationsberechnung mit einem Excel Sheet hat Aubert
z.B. auch den Computer benutzt. Man kann Geheimnisse auch ohne den
Computer herausfinden, doch falls man keine Idee hat, bietet der
Computer immer eine Möglichkeit. Jeder, der etwas am Computer macht,
sollte dabei irgendwann erwischt werden. Leute, die andere am Computer
erwischen, sollten diesen etwas Zeit lassen, bevor sie einschreiten. IT
lässt sich das z.B. begründen, in dem man sehen will, was die Intention
des anderen Charakters ist. Falls dies kein Sinn macht, kann man es IT
auch einfach erst etwas später entdecken.
</span>
<br />
<br />
<span class="letzte-gelegenheit-text197">Funkgeräte</span>
<br />
<span>
Pavone bedient mit Sartre den Militärfunk und versucht mit ihm
herauszufinden, was draussen läuft und ob konkret ihr Bunker bedroht
wird. Dabei hören sie immer wieder z.B. Militärcodes und Koordinaten,
die sie mithilfe von Dokumenten, die sie von ihrer Truppe mitbrachten,
in die Situation übersetzen.
</span>
<br />
<br />
<span>
Die Wärter haben auch Funkgeräte, die zwar nicht so stark sind wie der
Militärfunk, aber reichen, um z.B. noch miteinander zu kommunizieren,
wenn einer ins Lager geht oder um einen Alarm auszulösen. Die Funkgeräte
kann man IT auch als Bastelmaterial verwenden. OT reicht es dann, diese
mit Klebeband an das gewünschte Objekt zu befestigen.
</span>
<br />
<br />
<br />
<span class="letzte-gelegenheit-text206">Tod</span>
<br />
<span>
Damit Tod eine realistische und emotionale Wirkung auf die Spieler bzw.
Ihre Charaktere hat, darf Tod nicht allgegenwärtig sein. Durch die
Katastrophe sterben sicher viele Leute, doch im Bunker ist bisher zum
Glück noch niemand gestorben. Die Angst besteht. Die Orga wird keinen
einzigen Tod forcieren. Es wird Situationen geben, bei denen die Spieler
entscheiden, wie damit umgegangen ist. Nur die Spieler entscheiden, wann
sie sterben bzw. Können so eine Eskalation dazu herbeiführen. Es wird
NSCs geben, bei denen man nicht Rücksicht auf den Nicht-Spieler nehmen
muss, dessen Charakter in den Tod zu schicken z.B. Trotzdem sollte das
natürlich schönes Spiel für alle bieten. Es kann sein, dass am Ende der
Con kein Spielercharakter stirbt aber in der Geschichte einige Wochen
später vielleicht. Oder am Schluss sind alle tot. Was mit den Leben der
Charaktere geschieht, liegt völlig in der Hand der Spieler. Die Spieler
werden aber vor Dilemmata gestellt, wo der Tod von Charakteren
mindestens auf lange Frist unausweichlich ist. Die Frage ist nur, wer
sterben muss, bzw. Wer zuerst sterben muss…
</span>
<br />
<br />
<span class="letzte-gelegenheit-text211">Zeitgefühl</span>
<br />
<span>
Da alle schon einige Wochen im Bunker verbracht haben ist das Tages-
Nacht Zeitgefühl völlig verloren gegangen, aber auch das Zeitgefühl über
Wochen und Tagen. Man muss die Zeiten und Daten nachlesen, dass sie
einem bewusst werden. Deswegen kann es auch sein, dass unterschiedliche
Angaben gemacht werden wie lange etwas her ist als es passierte. Bitte
gebt nur ungefähre Angaben und hängt niemanden daran auf, sich an den
Zeiten zu widersprechen, weil das beim LARP durchaus passieren kann.
Falls ihr auffliegen wollt euch zu widersprechen, nutzt andere Mittel
wie Details. Z.B. “die Sonne war siedend heiss” und später “es war in
der Dunkelheit der Nacht”. Seit einer Woche werden die Wochentage nicht
mehr genannt. Jetzt ist einfach Tag 63, in 24 Stunden Tag 64 etc.
</span>
<br />
</p>
<a
href="https://forms.gle/YL6fFSHqY43TsV4B7"
target="_blank"
rel="noreferrer noopener"
class="letzte-gelegenheit-link1"
>
<div class="letzte-gelegenheit-anmeldung2 button">
<span class="letzte-gelegenheit-anmeldung3">Anmeldung</span>
</div>
</a>
</div>
<app-kontakt rootClassName="kontakt-root-class-name2"></app-kontakt>
</div>
@ -309,31 +542,31 @@ export default {
data() {
return {
raw0fvt: ' ',
rawyqmf: ' ',
rawuymr: ' ',
raw2864: ' ',
raw9rkn: ' ',
rawo439: ' ',
rawesus: ' ',
raw9kr2: ' ',
rawtjh9: ' ',
raw47l8: ' ',
rawacc0: ' ',
rawh417: ' ',
raw4ovv: ' ',
raw3t1i: ' ',
rawz8vp: ' ',
rawnptf: ' ',
rawfznl: ' ',
raw12i1: ' ',
rawwo2u: ' ',
rawruix: ' ',
rawxbjr: ' ',
raw2mh3: ' ',
rawr7m0: ' ',
rawijin: ' ',
rawthiy: ' ',
rawchy3: ' ',
rawubo7: ' ',
rawle0k: ' ',
raw1cuz: ' ',
rawy7xo: ' ',
rawa62o: ' ',
raw61u8: ' ',
}
},
metaInfo: {
title: 'Letzte-Gelegenheit - Open Visor',
title: 'Letzte-Gelegenheit - OpenVisor',
meta: [
{
property: 'og:title',
content: 'Letzte-Gelegenheit - Open Visor',
content: 'Letzte-Gelegenheit - OpenVisor',
},
],
},
@ -360,7 +593,7 @@ export default {
font-size: 64px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
font-weight: 500;
}
.letzte-gelegenheit-caption {
color: rgb(255, 255, 255);
@ -368,7 +601,7 @@ export default {
font-family: Poppins;
line-height: 30px;
}
.letzte-gelegenheit-container1 {
.letzte-gelegenheit-zusammenfassung {
flex: 0 0 auto;
width: 1080px;
height: auto;
@ -376,22 +609,13 @@ export default {
align-items: flex-start;
flex-direction: column;
}
.letzte-gelegenheit-description {
.letzte-gelegenheit-zusammenfassung1 {
color: rgb(255, 255, 255);
width: 90%;
padding: var(--dl-space-space-twounits);
font-size: 18px;
max-width: 1080px;
font-size: 36px;
align-self: center;
margin-top: var(--dl-space-space-twounits);
font-family: Poppins;
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);
}
.letzte-gelegenheit-beschreibung {
margin-top: 4%;
}
.letzte-gelegenheit-text004 {
font-weight: 700;
@ -431,26 +655,88 @@ export default {
.letzte-gelegenheit-text131 {
font-weight: 700;
}
.letzte-gelegenheit-container2 {
flex: 0 0 auto;
width: 200px;
.letzte-gelegenheit-link {
display: contents;
}
.letzte-gelegenheit-anmeldung {
display: flex;
align-self: center;
margin-top: 2%;
text-decoration: none;
background-color: #ffff00;
}
.letzte-gelegenheit-anmeldung1 {
color: rgb(12, 16, 12);
font-size: 16px;
font-style: normal;
font-family: Poppins;
font-weight: 500;
line-height: 24px;
}
.letzte-gelegenheit-spielangebot {
flex: 0 0 auto;
width: 1080px;
height: auto;
display: flex;
margin-top: 4%;
align-items: flex-start;
flex-direction: column;
}
.letzte-gelegenheit-description1 {
color: rgb(194, 198, 204);
width: auto;
.letzte-gelegenheit-spielangebot1 {
color: rgb(255, 255, 255);
font-size: 36px;
align-self: center;
font-family: Poppins;
font-weight: 700;
line-height: 28px;
}
.letzte-gelegenheit-get-started {
display: flex;
background-color: #80FF44;
.letzte-gelegenheit-beschreibung1 {
margin-top: 4%;
}
.letzte-gelegenheit-text136 {
color: var(--dl-color-danger-500);
}
.letzte-gelegenheit-text139 {
font-weight: 700;
}
.letzte-gelegenheit-text147 {
font-weight: 700;
}
.letzte-gelegenheit-text152 {
font-weight: 700;
}
.letzte-gelegenheit-text157 {
font-weight: 700;
}
.letzte-gelegenheit-text162 {
font-weight: 700;
}
.letzte-gelegenheit-text167 {
font-weight: 700;
}
.letzte-gelegenheit-text187 {
font-weight: 700;
}
.letzte-gelegenheit-text192 {
font-weight: 700;
}
.letzte-gelegenheit-text197 {
font-weight: 700;
}
.letzte-gelegenheit-text206 {
font-weight: 700;
}
.letzte-gelegenheit-text211 {
font-weight: 700;
}
.letzte-gelegenheit-link1 {
display: contents;
}
.letzte-gelegenheit-anmeldung2 {
display: flex;
align-self: center;
margin-top: 2%;
text-decoration: none;
background-color: #ffff00;
}
.letzte-gelegenheit-anmeldung3 {
color: rgb(12, 16, 12);
font-size: 16px;
font-style: normal;
@ -459,15 +745,9 @@ export default {
line-height: 24px;
}
@media(max-width: 991px) {
.letzte-gelegenheit-heading {
text-align: left;
}
.letzte-gelegenheit-caption {
text-align: left;
}
.letzte-gelegenheit-get-started {
flex: 1;
}
}
@media(max-width: 767px) {
.letzte-gelegenheit-heading {
@ -479,29 +759,23 @@ export default {
font-family: Poppins;
line-height: 24px;
}
.letzte-gelegenheit-container1 {
.letzte-gelegenheit-zusammenfassung {
width: 90%;
max-width: 1080px;
}
.letzte-gelegenheit-description {
width: auto;
max-width: auto;
}
.letzte-gelegenheit-get-started {
padding-top: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-unit);
.letzte-gelegenheit-spielangebot {
width: 90%;
max-width: 1080px;
}
}
@media(max-width: 479px) {
.letzte-gelegenheit-heading {
max-width: 280px;
}
.letzte-gelegenheit-description {
color: rgb(255, 255, 255);
font-size: 20px;
font-family: Poppins;
line-height: 28px;
background-color: rgba(41, 41, 41, 0.8);
.letzte-gelegenheit-zusammenfassung1 {
height: auto;
font-size: 30px;
line-height: 36px;
}
.letzte-gelegenheit-text004 {
font-weight: 700;
@ -568,5 +842,10 @@ export default {
.letzte-gelegenheit-text131 {
font-weight: 700;
}
.letzte-gelegenheit-spielangebot1 {
height: auto;
font-size: 30px;
line-height: 36px;
}
}
</style>

30
src/views/rosenteufel.vue
View file

@ -7,7 +7,7 @@
<br />
</span>
<div class="rosenteufel-container1">
<span class="rosenteufel-text002">
<span class="text-body">
<span class="rosenteufel-text003">
Ich erzähl euch ein Gschicht von wahr, so wahr wie ihr danach nicht
gwollt. Ein Gschicht die erzähl als einzger überlebend: Mein Gschicht. S
@ -285,7 +285,7 @@
zuher. Sie starrten; auch kalt und hilflos wie Kind. Ich schritt nach
vorn: In die Händ des Toten seh, weiss Ros. Ins Gesicht des Toten blick.
Beulen zierten’s. Hässliche Beulen. Der Teufel aber wart woanders...
<span v-html="raw14qf"></span>
<span v-html="rawq446"></span>
</span>
</span>
</div>
@ -306,16 +306,16 @@ export default {
data() {
return {
raw14qf: ' ',
rawq446: ' ',
}
},
metaInfo: {
title: 'Rosenteufel - Open Visor',
title: 'Rosenteufel - OpenVisor',
meta: [
{
property: 'og:title',
content: 'Rosenteufel - Open Visor',
content: 'Rosenteufel - OpenVisor',
},
],
},
@ -341,7 +341,7 @@ export default {
align-self: center;
font-style: normal;
font-family: Poppins;
font-weight: 600;
font-weight: 500;
}
.rosenteufel-caption {
color: rgb(255, 255, 255);
@ -357,19 +357,6 @@ export default {
align-items: center;
justify-content: center;
}
.rosenteufel-text002 {
color: rgb(255, 255, 255);
width: 90%;
font-size: 18px;
max-width: 1080px;
margin-top: var(--dl-space-space-twounits);
padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-twounits);
border-radius: 20px;
padding-right: var(--dl-space-space-twounits);
padding-bottom: var(--dl-space-space-twounits);
background-color: rgba(41, 41, 41, 0.8);
}
.rosenteufel-text003 {
font-style: italic;
}
@ -395,13 +382,10 @@ export default {
@media(max-width: 479px) {
.rosenteufel-heading {
max-width: 280px;
font-style: normal;
}
.rosenteufel-container1 {
width: 90%;
}
.rosenteufel-text002 {
width: 90%;
max-width: 1080px;
}
}
</style>

27
src/views/ssse-trume.vue
View file

@ -9,7 +9,7 @@
<span>Fantasy Mini-LARP</span>
<br />
</span>
<p class="ssse-trume-description">
<p class="text-body">
<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
@ -42,11 +42,11 @@ export default {
AppKontakt,
},
metaInfo: {
title: 'Ssse-Trume - Open Visor',
title: 'Ssse-Trume - OpenVisor',
meta: [
{
property: 'og:title',
content: 'Ssse-Trume - Open Visor',
content: 'Ssse-Trume - OpenVisor',
},
],
},
@ -70,7 +70,7 @@ export default {
font-size: 64px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
font-weight: 500;
}
.ssse-trume-caption {
color: rgb(255, 255, 255);
@ -78,24 +78,6 @@ export default {
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;
@ -115,6 +97,7 @@ export default {
@media(max-width: 479px) {
.ssse-trume-heading {
max-width: auto;
font-style: normal;
text-align: center;
}
}