Fix mobile support and URL names

This commit is contained in:
OpenVisor 2024-04-26 21:56:56 +02:00
parent ef00066728
commit 69cf272ee3
24 changed files with 2080 additions and 1133 deletions

View file

@ -9,8 +9,7 @@
"dependencies": { "dependencies": {
"vue": "^2.6.7", "vue": "^2.6.7",
"vue-router": "^3.0.2", "vue-router": "^3.0.2",
"vue-meta": "^2.2.1", "vue-meta": "^2.2.1"
"dangerous-html": "0.1.11"
}, },
"devDependencies": { "devDependencies": {
"@vue/babel-preset-app": "^5.0.8", "@vue/babel-preset-app": "^5.0.8",

View file

@ -48,10 +48,24 @@
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
data-tag="font" data-tag="font"
/> />
undefined
<style data-section-id="dropdown">
[data-thq="thq-dropdown"]:hover > [data-thq="thq-dropdown-list"] {
display: flex;
}
[data-thq="thq-dropdown"]:hover > div [data-thq="thq-dropdown-arrow"] {
transform: rotate(90deg);
}
</style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<!-- Your body code here --> <!-- Your body code here -->
<!-- <script type="text/javascript"> ... </script> --> <!-- <script type="text/javascript"> ... </script> -->
<script
data-section-id="navbar"
src="https://unpkg.com/@teleporthq/teleport-custom-scripts"
></script>
</body> </body>
</html> </html>

View file

Before

Width:  |  Height:  |  Size: 137 KiB

After

Width:  |  Height:  |  Size: 137 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7 KiB

View file

@ -1,12 +1,12 @@
<template> <template>
<footer class="footer-footer" v-bind:class="rootClassName"> <footer class="kontakt-footer" v-bind:class="rootClassName">
<div class="footer-category"> <div class="kontakt-category">
<div class="footer-header"> <div class="kontakt-header">
<span class="footer-text footer-header">{{ Text }}</span> <span class="kontakt-text footer-header">{{ Text }}</span>
</div> </div>
<a <a
href="mailto:info@openvisor.ch?subject=" href="mailto:info@openvisor.ch?subject="
class="footer-text1 footer-link" class="kontakt-text1 footer-link"
> >
{{ Text1 }} {{ Text1 }}
</a> </a>
@ -16,7 +16,7 @@
<script> <script>
export default { export default {
name: 'Footer', name: 'Kontakt',
props: { props: {
Text: { Text: {
type: String, type: String,
@ -32,7 +32,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.footer-footer { .kontakt-footer {
gap: var(--dl-space-space-fiveunits); gap: var(--dl-space-space-fiveunits);
flex: 1; flex: 1;
width: 100%; width: 100%;
@ -48,7 +48,7 @@ export default {
padding-bottom: var(--dl-space-space-sixunits); padding-bottom: var(--dl-space-space-sixunits);
justify-content: center; justify-content: center;
} }
.footer-category { .kontakt-category {
gap: var(--dl-space-space-unit); gap: var(--dl-space-space-unit);
display: flex; display: flex;
align-items: center; align-items: center;
@ -57,21 +57,21 @@ export default {
justify-content: center; justify-content: center;
border-top-width: 0px; border-top-width: 0px;
} }
.footer-header { .kontakt-header {
gap: var(--dl-space-space-unit); gap: var(--dl-space-space-unit);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.footer-text { .kontakt-text {
font-size: 36px; font-size: 36px;
margin-bottom: var(--dl-space-space-unit); margin-bottom: var(--dl-space-space-unit);
text-transform: uppercase; text-transform: uppercase;
} }
.footer-text1 { .kontakt-text1 {
color: #ffff00; color: #ffff00;
font-size: 20px; font-size: 18px;
align-self: center; align-self: center;
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;

View file

@ -1,12 +1,9 @@
<template> <template>
<div class="letzte-gelegenheit-run1-container"> <div class="letzte-gelegenheit-run1-container" v-bind:class="rootClassName">
<h2 class="letzte-gelegenheit-run1-heading">{{ Name }}</h2> <h2 class="letzte-gelegenheit-run1-heading">{{ Name }}</h2>
<p class="letzte-gelegenheit-run1-description">{{ Datum }}</p> <p class="letzte-gelegenheit-run1-description">{{ Datum }}</p>
<p class="letzte-gelegenheit-run1-description1">{{ Standort }}</p> <p class="letzte-gelegenheit-run1-description1">{{ Standort }}</p>
<router-link <router-link to="/letzte-gelegenheit" class="letzte-gelegenheit-run1-navlink">
to="/letzte-gelegenheit1"
class="letzte-gelegenheit-run1-navlink"
>
<div class="letzte-gelegenheit-run1-explore-more"> <div class="letzte-gelegenheit-run1-explore-more">
<p class="letzte-gelegenheit-run1-text">{{ Anmeldung }}</p> <p class="letzte-gelegenheit-run1-text">{{ Anmeldung }}</p>
</div> </div>
@ -30,6 +27,7 @@ export default {
type: String, type: String,
default: '1. April 2023, 10:00 Uhr bis 2. April 2023, 14:00 Uhr', default: '1. April 2023, 10:00 Uhr bis 2. April 2023, 14:00 Uhr',
}, },
rootClassName: String,
Name: { Name: {
type: String, type: String,
default: 'Letzte Gelegenheit Run 1 (Schweiz)', default: 'Letzte Gelegenheit Run 1 (Schweiz)',

View file

@ -3,10 +3,7 @@
<h2 class="letzte-gelegenheit-run2-heading">{{ Name }}</h2> <h2 class="letzte-gelegenheit-run2-heading">{{ Name }}</h2>
<p class="letzte-gelegenheit-run2-description">{{ Datum }}</p> <p class="letzte-gelegenheit-run2-description">{{ Datum }}</p>
<p class="letzte-gelegenheit-run2-description1">{{ Standort }}</p> <p class="letzte-gelegenheit-run2-description1">{{ Standort }}</p>
<router-link <router-link to="/letzte-gelegenheit" class="letzte-gelegenheit-run2-navlink">
to="/letzte-gelegenheit1"
class="letzte-gelegenheit-run2-navlink"
>
<div class="letzte-gelegenheit-run2-explore-more"> <div class="letzte-gelegenheit-run2-explore-more">
<p class="letzte-gelegenheit-run2-text">{{ Mehr }}</p> <p class="letzte-gelegenheit-run2-text">{{ Mehr }}</p>
</div> </div>
@ -103,7 +100,6 @@ export default {
line-height: 24px; line-height: 24px;
} }
@media(max-width: 767px) { @media(max-width: 767px) {
.letzte-gelegenheit-run2-heading { .letzte-gelegenheit-run2-heading {
font-size: 28px; font-size: 28px;

View file

@ -1,349 +0,0 @@
<template>
<nav class="navbar-navbar" v-bind:class="rootClassName">
<div class="navbar-container">
<div class="navbar-container1">
<div class="navbar-container2">
<router-link to="/" class="navbar-navlink">
<img :alt="image_alt2" :src="image_src2" class="navbar-logo" />
</router-link>
</div>
</div>
</div>
<div class="navbar-container3">
<div class="navbar-nav-content">
<div class="navbar-nav-links">
<router-link to="/" class="navbar-link nav-link">Home</router-link>
<router-link to="/larp-konzept1" class="navbar-link01 nav-link">
{{ Larpkonzept }}
</router-link>
<router-link to="/letzte-gelegenheit1" class="navbar-link02 nav-link">
<span>Letzte Gelegenheit</span>
<br />
</router-link>
<router-link to="/ssse-trume1" class="navbar-link03 nav-link">
<span>Süsse Träume</span>
<br />
</router-link>
<router-link
to="/ein-orden-fr-eine-gute-tat1"
class="navbar-link04 nav-link"
>
<span>Ein Orden für eine gute Tat</span>
<br />
</router-link>
<router-link to="/rosenteufel1" class="navbar-link05 nav-link">
Rosenteufel
</router-link>
</div>
<div id="open-mobile-menu" class="navbar-hamburger get-started">
<img :alt="image_alt" :src="image_src" class="navbar-image" />
</div>
</div>
</div>
<div id="mobile-menu" class="navbar-mobile-menu">
<div class="navbar-branding">
<img :alt="image_alt1" :src="image_src1" class="navbar-image1" />
<div id="close-mobile-menu" class="navbar-container4">
<svg viewBox="0 0 1024 1024" class="navbar-icon">
<path
d="M225.835 286.165l225.835 225.835-225.835 225.835c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.835-225.835 225.835 225.835c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331l-225.835-225.835 225.835-225.835c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.835 225.835-225.835-225.835c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z"
></path>
</svg>
</div>
</div>
<div class="navbar-nav-links1">
<span class="navbar-link06 nav-link">Features</span>
<span class="nav-link">Why us</span>
<span class="nav-link">Prices</span>
<span class="nav-link">Contact</span>
</div>
<div class="get-started"><span class="navbar-text6">Get started</span></div>
</div>
<div>
<DangerousHTML
html="<script>
/*
Mobile menu - Code Embed
*/
/* listenForUrlChangesMobileMenu() makes sure that if you changes pages inside your app,
the mobile menu will still work*/
const listenForUrlChangesMobileMenu = () => {
let url = location.href;
document.body.addEventListener('click', () => {
requestAnimationFrame(() => {
if (url !== location.href) {
runMobileMenuCodeEmbed();
url = location.href;
}
});
},
true
);
};
const runMobileMenuCodeEmbed = () => {
// Mobile menu
const mobileMenu = document.querySelector('#mobile-menu')
// Buttons
const closeButton = document.querySelector('#close-mobile-menu')
const openButton = document.querySelector('#open-mobile-menu')
// On openButton click, set the mobileMenu position left to -100vw
openButton && openButton.addEventListener('click', function() {
mobileMenu.style.transform = 'translateX(0%)'
})
// On closeButton click, set the mobileMenu position to 0vw
closeButton && closeButton.addEventListener('click', function() {
mobileMenu.style.transform = 'translateX(100%)'
})
}
runMobileMenuCodeEmbed()
listenForUrlChangesMobileMenu()
</script>"
></DangerousHTML>
</div>
</nav>
</template>
<script>
import DangerousHTML from 'dangerous-html/vue'
export default {
name: 'Navbar',
props: {
image_src2: {
type: String,
default: '/playground_assets/logo_mitoffenemvisier_bw_png-200h.png',
},
image_alt: {
type: String,
default: 'e',
},
image_src1: {
type: String,
default:
'https://play.teleporthq.io/static/svg/placeholders/no-image.svg',
},
image_src: {
type: String,
default: '/playground_assets/hamburger-200h.png',
},
Link: {
type: String,
default: 'Rosenteufel',
},
image_alt1: {
type: String,
default: 'image',
},
image_alt2: {
type: String,
default: 'image',
},
Larpkonzept: {
type: String,
default: 'Larpkonzept',
},
rootClassName: String,
BrandingLogo: {
type: String,
default:
'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/08e9141c-e9e9-4d51-994d-22f260b21c68/0f4ac702-51a5-4a68-8182-06e3f427edb8?org_if_sml=14251',
},
},
components: {
DangerousHTML,
},
}
</script>
<style scoped>
.navbar-navbar {
width: 100%;
display: flex;
z-index: 1000;
position: relative;
max-width: 1200px;
align-self: auto;
align-items: center;
flex-shrink: 1;
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);
}
.navbar-container {
flex: 0 0 auto;
width: auto;
height: auto;
display: flex;
flex-direction: column;
}
.navbar-container1 {
flex: 0 0 auto;
width: auto;
height: auto;
display: flex;
flex-direction: column;
}
.navbar-container2 {
flex: 0 0 auto;
width: auto;
height: auto;
display: flex;
align-items: flex-start;
flex-direction: row;
}
.navbar-navlink {
display: contents;
}
.navbar-logo {
width: 100px;
object-fit: cover;
transition: 0.3s;
text-decoration: none;
}
.navbar-container3 {
flex: 0 0 auto;
width: auto;
height: auto;
display: flex;
align-items: flex-end;
flex-direction: column;
}
.navbar-nav-content {
gap: var(--dl-space-space-threeunits);
display: flex;
align-items: center;
margin-left: auto;
flex-direction: row;
justify-content: flex-end;
}
.navbar-nav-links {
gap: var(--dl-space-space-threeunits);
display: flex;
align-items: flex-start;
margin-left: var(--dl-space-space-twounits);
border-color: transparent;
justify-content: flex-end;
}
.navbar-link {
text-decoration: none;
}
.navbar-link01 {
text-decoration: none;
}
.navbar-link02 {
text-decoration: none;
}
.navbar-link03 {
text-decoration: none;
}
.navbar-link04 {
text-decoration: none;
}
.navbar-link05 {
text-decoration: none;
}
.navbar-hamburger {
display: none;
}
.navbar-image {
width: 100px;
object-fit: cover;
}
.navbar-mobile-menu {
gap: var(--dl-space-space-twounits);
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
padding: var(--dl-space-space-twounits);
z-index: 100;
position: fixed;
transform: translateX(100%);
transition: 0.3s;
align-items: stretch;
flex-direction: column;
background-color: #fff;
}
.navbar-branding {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.navbar-image1 {
width: 100px;
filter: brightness(0) saturate(100%);
object-fit: cover;
}
.navbar-container4 {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.navbar-icon {
width: 24px;
height: 24px;
}
.navbar-nav-links1 {
gap: var(--dl-space-space-unit);
color: var(--dl-color-gray-black);
display: flex;
flex-direction: column;
}
.navbar-link06 {
color: #ffffff;
}
.navbar-text6 {
color: rgba(255, 255, 255, 1);
align-self: auto;
font-style: Medium;
text-align: left;
font-family: Poppins;
font-weight: 500;
font-stretch: normal;
text-decoration: none;
}
@media(max-width: 767px) {
.navbar-navbar {
padding-bottom: var(--dl-space-space-fourunits);
}
.navbar-nav-links {
display: none;
}
.navbar-hamburger {
display: flex;
padding-left: var(--dl-space-space-unit);
padding-right: var(--dl-space-space-unit);
}
.navbar-image {
width: 16px;
height: 14px;
}
.navbar-branding {
width: 100%;
}
.navbar-nav-links1 {
margin-top: var(--dl-space-space-twounits);
align-items: flex-start;
margin-bottom: var(--dl-space-space-twounits);
justify-content: center;
}
}
</style>

File diff suppressed because it is too large Load diff

View file

@ -1,17 +1,26 @@
<template> <template>
<div class="ein-orden-fr-eine-gute-tat-container" v-bind:class="rootClassName"> <div
<section class="ein-orden-fr-eine-gute-tat-card"> class="zusammenfassung-ein-orden-fuer-eine-gute-tat-container"
<main class="ein-orden-fr-eine-gute-tat-content"> v-bind:class="rootClassName"
<header class="ein-orden-fr-eine-gute-tat-header"> >
<h1 class="ein-orden-fr-eine-gute-tat-header1">{{ Header }}</h1> <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> </header>
<p class="ein-orden-fr-eine-gute-tat-description">{{ Description }}</p> <p class="zusammenfassung-ein-orden-fuer-eine-gute-tat-description">
{{ Description }}
</p>
<router-link <router-link
to="/ein-orden-fr-eine-gute-tat1" to="/ein-orden-fuer-eine-gute-tat"
class="ein-orden-fr-eine-gute-tat-navlink" class="zusammenfassung-ein-orden-fuer-eine-gute-tat-navlink"
> >
<div class="ein-orden-fr-eine-gute-tat-button"> <div class="zusammenfassung-ein-orden-fuer-eine-gute-tat-button">
<p class="ein-orden-fr-eine-gute-tat-text">{{ Button }}</p> <p class="zusammenfassung-ein-orden-fuer-eine-gute-tat-text">
{{ Button }}
</p>
</div> </div>
</router-link> </router-link>
</main> </main>
@ -21,7 +30,7 @@
<script> <script>
export default { export default {
name: 'EinOrdenFrEineGuteTat', name: 'ZusammenfassungEinOrdenFuerEineGuteTat',
props: { props: {
ButtonLink: String, ButtonLink: String,
Button: { Button: {
@ -43,7 +52,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.ein-orden-fr-eine-gute-tat-container { .zusammenfassung-ein-orden-fuer-eine-gute-tat-container {
width: 100%; width: 100%;
height: 400px; height: 400px;
display: flex; display: flex;
@ -51,7 +60,7 @@ export default {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
} }
.ein-orden-fr-eine-gute-tat-card { .zusammenfassung-ein-orden-fuer-eine-gute-tat-card {
gap: var(--dl-space-space-oneandhalfunits); gap: var(--dl-space-space-oneandhalfunits);
flex: 1; flex: 1;
display: flex; display: flex;
@ -63,20 +72,20 @@ export default {
justify-content: flex-start; justify-content: flex-start;
background-color: rgba(41, 41, 41, 0.8); background-color: rgba(41, 41, 41, 0.8);
} }
.ein-orden-fr-eine-gute-tat-content { .zusammenfassung-ein-orden-fuer-eine-gute-tat-content {
gap: var(--dl-space-space-twounits); gap: var(--dl-space-space-twounits);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
.ein-orden-fr-eine-gute-tat-header { .zusammenfassung-ein-orden-fuer-eine-gute-tat-header {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
} }
.ein-orden-fr-eine-gute-tat-header1 { .zusammenfassung-ein-orden-fuer-eine-gute-tat-header1 {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 24px; font-size: 24px;
font-style: normal; font-style: normal;
@ -84,16 +93,16 @@ export default {
font-weight: 600; font-weight: 600;
line-height: 36px; line-height: 36px;
} }
.ein-orden-fr-eine-gute-tat-description { .zusammenfassung-ein-orden-fuer-eine-gute-tat-description {
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 18px;
font-family: Poppins; font-family: Poppins;
line-height: 28px; line-height: 28px;
} }
.ein-orden-fr-eine-gute-tat-navlink { .zusammenfassung-ein-orden-fuer-eine-gute-tat-navlink {
display: contents; display: contents;
} }
.ein-orden-fr-eine-gute-tat-button { .zusammenfassung-ein-orden-fuer-eine-gute-tat-button {
gap: var(--dl-space-space-oneandhalfunits); gap: var(--dl-space-space-oneandhalfunits);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -106,23 +115,23 @@ export default {
text-decoration: none; text-decoration: none;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
.ein-orden-fr-eine-gute-tat-button:hover { .zusammenfassung-ein-orden-fuer-eine-gute-tat-button:hover {
opacity: 0.5; opacity: 0.5;
} }
.ein-orden-fr-eine-gute-tat-text { .zusammenfassung-ein-orden-fuer-eine-gute-tat-text {
color: #ffff00; color: #ffff00;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
} }
.ein-orden-fr-eine-gute-tat-root-class-name { .zusammenfassung-ein-orden-fuer-eine-gute-tat-root-class-name {
height: auto; height: auto;
} }
.ein-orden-fr-eine-gute-tat-root-class-name1 { .zusammenfassung-ein-orden-fuer-eine-gute-tat-root-class-name1 {
height: auto; height: auto;
} }
@media(max-width: 991px) { @media(max-width: 991px) {
.ein-orden-fr-eine-gute-tat-card { .zusammenfassung-ein-orden-fuer-eine-gute-tat-card {
padding-top: var(--dl-space-space-twounits); padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-oneandhalfunits); padding-left: var(--dl-space-space-oneandhalfunits);
padding-right: var(--dl-space-space-oneandhalfunits); padding-right: var(--dl-space-space-oneandhalfunits);

View file

@ -1,13 +1,21 @@
<template> <template>
<section class="letzte-gelegenheit-card" v-bind:class="rootClassName"> <section
<main class="letzte-gelegenheit-content"> class="zusammenfassung-letzte-gelegenheit-card"
<header class="letzte-gelegenheit-header"> v-bind:class="rootClassName"
<h1 class="letzte-gelegenheit-header1">{{ Header }}</h1> >
<main class="zusammenfassung-letzte-gelegenheit-content">
<header class="zusammenfassung-letzte-gelegenheit-header">
<h1 class="zusammenfassung-letzte-gelegenheit-header1">{{ Header }}</h1>
</header> </header>
<p class="letzte-gelegenheit-description">{{ Description }}</p> <p class="zusammenfassung-letzte-gelegenheit-description">
<router-link to="/letzte-gelegenheit1" class="letzte-gelegenheit-navlink"> {{ Description }}
<div class="letzte-gelegenheit-button"> </p>
<p class="letzte-gelegenheit-text">{{ Mehr }}</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> </div>
</router-link> </router-link>
</main> </main>
@ -16,7 +24,7 @@
<script> <script>
export default { export default {
name: 'LetzteGelegenheit', name: 'ZusammenfassungLetzteGelegenheit',
props: { props: {
rootClassName: String, rootClassName: String,
Mehr: { Mehr: {
@ -38,7 +46,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.letzte-gelegenheit-card { .zusammenfassung-letzte-gelegenheit-card {
gap: var(--dl-space-space-oneandhalfunits); gap: var(--dl-space-space-oneandhalfunits);
flex: 1; flex: 1;
display: flex; display: flex;
@ -50,20 +58,20 @@ export default {
justify-content: flex-start; justify-content: flex-start;
background-color: rgba(41, 41, 41, 0.8); background-color: rgba(41, 41, 41, 0.8);
} }
.letzte-gelegenheit-content { .zusammenfassung-letzte-gelegenheit-content {
gap: var(--dl-space-space-twounits); gap: var(--dl-space-space-twounits);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
.letzte-gelegenheit-header { .zusammenfassung-letzte-gelegenheit-header {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
} }
.letzte-gelegenheit-header1 { .zusammenfassung-letzte-gelegenheit-header1 {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 24px; font-size: 24px;
font-style: normal; font-style: normal;
@ -71,16 +79,16 @@ export default {
font-weight: 600; font-weight: 600;
line-height: 36px; line-height: 36px;
} }
.letzte-gelegenheit-description { .zusammenfassung-letzte-gelegenheit-description {
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 18px;
font-family: Poppins; font-family: Poppins;
line-height: 28px; line-height: 28px;
} }
.letzte-gelegenheit-navlink { .zusammenfassung-letzte-gelegenheit-navlink {
display: contents; display: contents;
} }
.letzte-gelegenheit-button { .zusammenfassung-letzte-gelegenheit-button {
gap: var(--dl-space-space-oneandhalfunits); gap: var(--dl-space-space-oneandhalfunits);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -93,16 +101,16 @@ export default {
text-decoration: none; text-decoration: none;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
.letzte-gelegenheit-button:hover { .zusammenfassung-letzte-gelegenheit-button:hover {
opacity: 0.5; opacity: 0.5;
} }
.letzte-gelegenheit-text { .zusammenfassung-letzte-gelegenheit-text {
color: #ffff00; color: #ffff00;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
} }
.letzte-gelegenheit-root-class-name { .zusammenfassung-letzte-gelegenheit-root-class-name {
width: 100%; width: 100%;
} }
@ -114,15 +122,20 @@ export default {
.letzte-gelegenheit-root-class-name10 { .zusammenfassung-letzte-gelegenheit-root-class-name10 {
width: 100%; width: 100%;
} }
@media(max-width: 991px) { @media(max-width: 991px) {
.letzte-gelegenheit-card { .zusammenfassung-letzte-gelegenheit-card {
padding-top: var(--dl-space-space-twounits); padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-oneandhalfunits); padding-left: var(--dl-space-space-oneandhalfunits);
padding-right: var(--dl-space-space-oneandhalfunits); padding-right: var(--dl-space-space-oneandhalfunits);
padding-bottom: var(--dl-space-space-twounits); padding-bottom: var(--dl-space-space-twounits);
} }
} }
@media(max-width: 767px) {
.zusammenfassung-letzte-gelegenheit-root-class-name {
height: 50%;
}
}
</style> </style>

View file

@ -1,14 +1,17 @@
<template> <template>
<div class="rosenteufel-container" v-bind:class="rootClassName"> <div class="zusammenfassung-rosenteufel-container" v-bind:class="rootClassName">
<section class="rosenteufel-card"> <section class="zusammenfassung-rosenteufel-card">
<main class="rosenteufel-content"> <main class="zusammenfassung-rosenteufel-content">
<header class="rosenteufel-header"> <header class="zusammenfassung-rosenteufel-header">
<h1 class="rosenteufel-header1">{{ Header }}</h1> <h1 class="zusammenfassung-rosenteufel-header1">{{ Header }}</h1>
</header> </header>
<p class="rosenteufel-description">{{ Description }}</p> <p class="zusammenfassung-rosenteufel-description">{{ Description }}</p>
<router-link to="/rosenteufel1" class="rosenteufel-navlink"> <router-link
<div class="rosenteufel-button"> to="/rosenteufel"
<p class="rosenteufel-text">{{ Lesen }}</p> class="zusammenfassung-rosenteufel-navlink"
>
<div class="zusammenfassung-rosenteufel-button">
<p class="zusammenfassung-rosenteufel-text">{{ Lesen }}</p>
</div> </div>
</router-link> </router-link>
</main> </main>
@ -18,7 +21,7 @@
<script> <script>
export default { export default {
name: 'Rosenteufel', name: 'ZusammenfassungRosenteufel',
props: { props: {
Lesen: { Lesen: {
type: String, type: String,
@ -40,7 +43,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.rosenteufel-container { .zusammenfassung-rosenteufel-container {
width: 100%; width: 100%;
height: 400px; height: 400px;
display: flex; display: flex;
@ -48,7 +51,7 @@ export default {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
} }
.rosenteufel-card { .zusammenfassung-rosenteufel-card {
gap: var(--dl-space-space-oneandhalfunits); gap: var(--dl-space-space-oneandhalfunits);
flex: 1; flex: 1;
display: flex; display: flex;
@ -60,20 +63,20 @@ export default {
justify-content: flex-start; justify-content: flex-start;
background-color: rgba(41, 41, 41, 0.8); background-color: rgba(41, 41, 41, 0.8);
} }
.rosenteufel-content { .zusammenfassung-rosenteufel-content {
gap: var(--dl-space-space-twounits); gap: var(--dl-space-space-twounits);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
.rosenteufel-header { .zusammenfassung-rosenteufel-header {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
} }
.rosenteufel-header1 { .zusammenfassung-rosenteufel-header1 {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 24px; font-size: 24px;
font-style: normal; font-style: normal;
@ -81,16 +84,16 @@ export default {
font-weight: 600; font-weight: 600;
line-height: 36px; line-height: 36px;
} }
.rosenteufel-description { .zusammenfassung-rosenteufel-description {
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 18px;
font-family: Poppins; font-family: Poppins;
line-height: 28px; line-height: 28px;
} }
.rosenteufel-navlink { .zusammenfassung-rosenteufel-navlink {
display: contents; display: contents;
} }
.rosenteufel-button { .zusammenfassung-rosenteufel-button {
gap: var(--dl-space-space-oneandhalfunits); gap: var(--dl-space-space-oneandhalfunits);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -103,23 +106,23 @@ export default {
text-decoration: none; text-decoration: none;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
.rosenteufel-button:hover { .zusammenfassung-rosenteufel-button:hover {
opacity: 0.5; opacity: 0.5;
} }
.rosenteufel-text { .zusammenfassung-rosenteufel-text {
color: #ffff00; color: #ffff00;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
} }
.rosenteufel-root-class-name { .zusammenfassung-rosenteufel-root-class-name {
height: auto; height: auto;
} }
.rosenteufel-root-class-name1 { .zusammenfassung-rosenteufel-root-class-name1 {
height: auto; height: auto;
} }
@media(max-width: 991px) { @media(max-width: 991px) {
.rosenteufel-card { .zusammenfassung-rosenteufel-card {
padding-top: var(--dl-space-space-twounits); padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-oneandhalfunits); padding-left: var(--dl-space-space-oneandhalfunits);
padding-right: var(--dl-space-space-oneandhalfunits); padding-right: var(--dl-space-space-oneandhalfunits);

View file

@ -1,14 +1,22 @@
<template> <template>
<div class="ssse-trume-container" v-bind:class="rootClassName"> <div
<section class="ssse-trume-card"> class="zusammenfassung-suesse-traeume-container"
<main class="ssse-trume-content"> v-bind:class="rootClassName"
<header class="ssse-trume-header"> >
<h1 class="ssse-trume-header1">{{ Header }}</h1> <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> </header>
<p class="ssse-trume-description">{{ Description }}</p> <p class="zusammenfassung-suesse-traeume-description">
<router-link to="/ssse-trume1" class="ssse-trume-navlink"> {{ Description }}
<div class="ssse-trume-button"> </p>
<p class="ssse-trume-text">{{ Mehr }}</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> </div>
</router-link> </router-link>
</main> </main>
@ -18,7 +26,7 @@
<script> <script>
export default { export default {
name: 'SsseTrume', name: 'ZusammenfassungSuesseTraeume',
props: { props: {
Description: { Description: {
type: String, type: String,
@ -40,7 +48,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.ssse-trume-container { .zusammenfassung-suesse-traeume-container {
width: 100%; width: 100%;
height: 400px; height: 400px;
display: flex; display: flex;
@ -48,7 +56,7 @@ export default {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
} }
.ssse-trume-card { .zusammenfassung-suesse-traeume-card {
gap: var(--dl-space-space-oneandhalfunits); gap: var(--dl-space-space-oneandhalfunits);
flex: 1; flex: 1;
display: flex; display: flex;
@ -60,20 +68,20 @@ export default {
justify-content: flex-start; justify-content: flex-start;
background-color: rgba(41, 41, 41, 0.8); background-color: rgba(41, 41, 41, 0.8);
} }
.ssse-trume-content { .zusammenfassung-suesse-traeume-content {
gap: var(--dl-space-space-twounits); gap: var(--dl-space-space-twounits);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
.ssse-trume-header { .zusammenfassung-suesse-traeume-header {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
} }
.ssse-trume-header1 { .zusammenfassung-suesse-traeume-header1 {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 24px; font-size: 24px;
font-style: normal; font-style: normal;
@ -81,16 +89,16 @@ export default {
font-weight: 600; font-weight: 600;
line-height: 36px; line-height: 36px;
} }
.ssse-trume-description { .zusammenfassung-suesse-traeume-description {
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 18px;
font-family: Poppins; font-family: Poppins;
line-height: 28px; line-height: 28px;
} }
.ssse-trume-navlink { .zusammenfassung-suesse-traeume-navlink {
display: contents; display: contents;
} }
.ssse-trume-button { .zusammenfassung-suesse-traeume-button {
gap: var(--dl-space-space-oneandhalfunits); gap: var(--dl-space-space-oneandhalfunits);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -103,36 +111,43 @@ export default {
text-decoration: none; text-decoration: none;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
.ssse-trume-button:hover { .zusammenfassung-suesse-traeume-button:hover {
opacity: 0.5; opacity: 0.5;
} }
.ssse-trume-text { .zusammenfassung-suesse-traeume-text {
color: #FFFF00; color: #FFFF00;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
} }
.ssse-trume-root-class-name { .zusammenfassung-suesse-traeume-root-class-name {
flex: 2; flex: 1;
width: 100%; width: 100%;
height: auto; height: auto;
} }
.ssse-trume-root-class-name1 { .zusammenfassung-suesse-traeume-root-class-name1 {
flex: 1; flex: 1;
width: auto; width: auto;
height: auto; height: auto;
} }
.ssse-trume-root-class-name2 { .zusammenfassung-suesse-traeume-root-class-name2 {
flex: 2; flex: 2;
width: 100%; width: 100%;
height: auto; height: auto;
} }
@media(max-width: 991px) { @media(max-width: 991px) {
.ssse-trume-card { .zusammenfassung-suesse-traeume-card {
padding-top: var(--dl-space-space-twounits); padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-oneandhalfunits); padding-left: var(--dl-space-space-oneandhalfunits);
padding-right: var(--dl-space-space-oneandhalfunits); padding-right: var(--dl-space-space-oneandhalfunits);
padding-bottom: var(--dl-space-space-twounits); padding-bottom: var(--dl-space-space-twounits);
} }
} }
@media(max-width: 767px) {
.zusammenfassung-suesse-traeume-root-class-name {
flex: 1;
width: 100%;
height: 50%;
}
}
</style> </style>

View file

@ -2,11 +2,11 @@ import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Meta from 'vue-meta' import Meta from 'vue-meta'
import SsseTrume1 from './views/ssse-trume1' import SsseTrume from './views/ssse-trume'
import LarpKonzept1 from './views/larp-konzept1' import Larpkonzept from './views/larpkonzept'
import EinOrdenFrEineGuteTat1 from './views/ein-orden-fr-eine-gute-tat1' import EinOrdenFrEineGuteTat from './views/ein-orden-fr-eine-gute-tat'
import LetzteGelegenheit1 from './views/letzte-gelegenheit1' import LetzteGelegenheit from './views/letzte-gelegenheit'
import Rosenteufel1 from './views/rosenteufel1' import Rosenteufel from './views/rosenteufel'
import Home from './views/home' import Home from './views/home'
import './style.css' import './style.css'
@ -16,29 +16,29 @@ export default new Router({
mode: 'history', mode: 'history',
routes: [ routes: [
{ {
name: 'Ssse-Trume1', name: 'Ssse-Trume',
path: '/ssse-trume1', path: '/suesse-traeume',
component: SsseTrume1, component: SsseTrume,
}, },
{ {
name: 'LarpKonzept1', name: 'Larpkonzept',
path: '/larp-konzept1', path: '/larpkonzept',
component: LarpKonzept1, component: Larpkonzept,
}, },
{ {
name: 'Ein-Orden-fr-eine-gute-Tat1', name: 'Ein-Orden-fr-eine-gute-Tat',
path: '/ein-orden-fr-eine-gute-tat1', path: '/ein-orden-fuer-eine-gute-tat',
component: EinOrdenFrEineGuteTat1, component: EinOrdenFrEineGuteTat,
}, },
{ {
name: 'Letzte-Gelegenheit1', name: 'Letzte-Gelegenheit',
path: '/letzte-gelegenheit1', path: '/letzte-gelegenheit',
component: LetzteGelegenheit1, component: LetzteGelegenheit,
}, },
{ {
name: 'Rosenteufel1', name: 'Rosenteufel',
path: '/rosenteufel1', path: '/rosenteufel',
component: Rosenteufel1, component: Rosenteufel,
}, },
{ {
name: 'Home', name: 'Home',

View file

@ -72,7 +72,7 @@
} }
.teleport-show { .teleport-show {
display: flex !important; display: flex !important;
transform: none !important; transform: translateY(0%) !important;
} }
.nav-link { .nav-link {
color: #fff; color: #fff;
@ -129,9 +129,10 @@
.section-head { .section-head {
color: rgb(128, 255, 68); color: rgb(128, 255, 68);
font-style: normal; font-style: normal;
text-align: center;
font-family: Poppins; font-family: Poppins;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 36px;
letter-spacing: 2px; letter-spacing: 2px;
text-transform: uppercase; text-transform: uppercase;
} }
@ -218,6 +219,28 @@
font-family: Poppins; font-family: Poppins;
line-height: 21px; line-height: 21px;
} }
.site-title {
color: rgb(255, 255, 255);
font-size: 56px;
font-style: normal;
font-family: Poppins;
font-weight: 500;
}
.round-borders {
flex: 0 0 auto;
width: 1080px;
display: flex;
margin-top: var(--dl-space-space-twounits);
align-items: center;
padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-twounits);
border-radius: 2%;
padding-right: var(--dl-space-space-twounits);
flex-direction: column;
padding-bottom: var(--dl-space-space-twounits);
justify-content: center;
background-color: rgba(41, 41, 41, 0.8);
}
.Heading { .Heading {
font-size: 32px; font-size: 32px;
font-family: Inter; font-family: Inter;
@ -234,7 +257,11 @@
text-transform: none; text-transform: none;
text-decoration: none; text-decoration: none;
} }
@media(max-width: 991px) {
.site-title {
text-align: center;
}
}
@media(max-width: 767px) { @media(max-width: 767px) {
.nav-link { .nav-link {
color: black; color: black;
@ -242,6 +269,9 @@
.accordion-element { .accordion-element {
gap: var(--dl-space-space-oneandhalfunits); gap: var(--dl-space-space-oneandhalfunits);
} }
.round-borders {
width: 90%;
}
} }
@media(max-width: 479px) { @media(max-width: 479px) {
.accordion-element { .accordion-element {

View file

@ -0,0 +1,149 @@
<template>
<div class="ein-orden-fr-eine-gute-tat-container">
<app-navigation rootClassName="navigation-root-class-name"></app-navigation>
<h1 class="ein-orden-fr-eine-gute-tat-heading site-title">
<span>Ein Orden für eine gute Tat</span>
<br />
</h1>
<span class="ein-orden-fr-eine-gute-tat-caption">
<span>Eine moralische Kurzgeschichte für Kinder</span>
<br />
</span>
<div class="ein-orden-fr-eine-gute-tat-beschreibung round-borders">
<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
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?
</span>
<br class="ein-orden-fr-eine-gute-tat-text06" />
<br class="ein-orden-fr-eine-gute-tat-text07" />
<span class="ein-orden-fr-eine-gute-tat-text08">
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.
</span>
<br />
<br />
<span> · 28 Seiten</span>
<br />
<span> · 14 Illustrationen</span>
<br />
</span>
<img
alt="image"
src="/playground_assets/buch-vorderseite-schrift-1400w.png"
class="ein-orden-fr-eine-gute-tat-image"
/>
</div>
<app-kontakt rootClassName="kontakt-root-class-name4"></app-kontakt>
</div>
</template>
<script>
import AppNavigation from '../components/navigation'
import AppKontakt from '../components/kontakt'
export default {
name: 'EinOrdenFrEineGuteTat',
components: {
AppNavigation,
AppKontakt,
},
metaInfo: {
title: 'Ein-Orden-fr-eine-gute-Tat - Open Visor',
meta: [
{
property: 'og:title',
content: 'Ein-Orden-fr-eine-gute-Tat - Open Visor',
},
],
},
}
</script>
<style scoped>
.ein-orden-fr-eine-gute-tat-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");
}
.ein-orden-fr-eine-gute-tat-heading {
color: rgb(255, 255, 255);
font-size: 64px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
}
.ein-orden-fr-eine-gute-tat-caption {
color: rgb(255, 255, 255);
font-size: 20px;
font-family: Poppins;
line-height: 30px;
}
.ein-orden-fr-eine-gute-tat-beschreibung {
width: 90%;
max-width: 1080px;
}
.ein-orden-fr-eine-gute-tat-text04 {
color: rgb(255, 255, 255);
}
.ein-orden-fr-eine-gute-tat-text05 {
font-style: italic;
}
.ein-orden-fr-eine-gute-tat-text06 {
font-style: italic;
}
.ein-orden-fr-eine-gute-tat-text07 {
font-style: italic;
}
.ein-orden-fr-eine-gute-tat-text08 {
font-style: italic;
}
.ein-orden-fr-eine-gute-tat-image {
width: 100%;
height: 100%;
margin-top: var(--dl-space-space-twounits);
object-fit: cover;
}
@media(max-width: 991px) {
.ein-orden-fr-eine-gute-tat-heading {
text-align: center;
}
.ein-orden-fr-eine-gute-tat-caption {
text-align: left;
}
.ein-orden-fr-eine-gute-tat-beschreibung {
width: 90%;
}
}
@media(max-width: 767px) {
.ein-orden-fr-eine-gute-tat-heading {
width: 70%;
font-size: 40px;
}
.ein-orden-fr-eine-gute-tat-caption {
color: rgb(255, 255, 255);
font-size: 16px;
font-family: Poppins;
line-height: 24px;
}
.ein-orden-fr-eine-gute-tat-text04 {
width: auto;
}
}
@media(max-width: 479px) {
.ein-orden-fr-eine-gute-tat-heading {
max-width: 70%;
text-align: center;
}
}
</style>

View file

@ -1,186 +0,0 @@
<template>
<div class="ein-orden-fr-eine-gute-tat1-container">
<app-navbar rootClassName="navbar-root-class-name"></app-navbar>
<h1 class="ein-orden-fr-eine-gute-tat1-heading">
<span>Ein Orden für eine gute Tat</span>
<br />
</h1>
<span class="ein-orden-fr-eine-gute-tat1-caption">
<span>Eine moralische Kurzgeschichte für Kinder</span>
<br />
</span>
<div class="ein-orden-fr-eine-gute-tat1-container1">
<span class="ein-orden-fr-eine-gute-tat1-text04">
<span class="ein-orden-fr-eine-gute-tat1-text05">
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?
</span>
<br class="ein-orden-fr-eine-gute-tat1-text06" />
<br class="ein-orden-fr-eine-gute-tat1-text07" />
<span class="ein-orden-fr-eine-gute-tat1-text08">
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.
</span>
<br />
<br />
<span> · 28 Seiten</span>
<br />
<span> · 14 Illustrationen</span>
<br />
<span> ·  A5 waagerecht</span>
<br />
<span> · drahtgebunden</span>
<br />
<span> · dickes Papier</span>
<br />
<span> · CHF 10.- pro Stück</span>
<br />
<span> · CHF 8.- pro Stück ab 3 Exemplare</span>
<br />
<br />
<span>
Bei Interesse schreiben Sie bitte eine E-Mail an:
<span v-html="raw41ge"></span>
</span>
<a
href="mailto:info@openvisor.ch?subject="
class="ein-orden-fr-eine-gute-tat1-link"
>
info@openvisor.ch
</a>
<br />
</span>
<img
alt="image"
src="/playground_assets/buch-vorderseite-schrift-1100w.png"
class="ein-orden-fr-eine-gute-tat1-image"
/>
</div>
<app-footer rootClassName="footer-root-class-name4"></app-footer>
</div>
</template>
<script>
import AppNavbar from '../components/navbar'
import AppFooter from '../components/footer'
export default {
name: 'EinOrdenFrEineGuteTat1',
components: {
AppNavbar,
AppFooter,
},
data() {
return {
raw41ge: ' ',
}
},
metaInfo: {
title: 'Ein-Orden-fr-eine-gute-Tat1 - Open Visor',
meta: [
{
property: 'og:title',
content: 'Ein-Orden-fr-eine-gute-Tat1 - Open Visor',
},
],
},
}
</script>
<style scoped>
.ein-orden-fr-eine-gute-tat1-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");
}
.ein-orden-fr-eine-gute-tat1-heading {
color: rgb(255, 255, 255);
font-size: 64px;
font-style: normal;
font-family: Poppins;
font-weight: 600;
}
.ein-orden-fr-eine-gute-tat1-caption {
color: rgb(255, 255, 255);
font-size: 20px;
font-family: Poppins;
line-height: 30px;
}
.ein-orden-fr-eine-gute-tat1-container1 {
flex: 0 0 auto;
width: 1080px;
display: flex;
margin-top: var(--dl-space-space-twounits);
align-items: center;
padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-twounits);
padding-right: var(--dl-space-space-twounits);
flex-direction: column;
padding-bottom: var(--dl-space-space-twounits);
justify-content: center;
background-color: rgba(41, 41, 41, 0.8);
}
.ein-orden-fr-eine-gute-tat1-text04 {
color: rgb(255, 255, 255);
}
.ein-orden-fr-eine-gute-tat1-text05 {
font-style: italic;
}
.ein-orden-fr-eine-gute-tat1-text06 {
font-style: italic;
}
.ein-orden-fr-eine-gute-tat1-text07 {
font-style: italic;
}
.ein-orden-fr-eine-gute-tat1-text08 {
font-style: italic;
}
.ein-orden-fr-eine-gute-tat1-link {
color: #ffff00;
font-style: normal;
font-weight: 500;
text-decoration: underline;
}
.ein-orden-fr-eine-gute-tat1-image {
width: 100%;
height: 100%;
margin-top: var(--dl-space-space-twounits);
object-fit: cover;
}
@media(max-width: 991px) {
.ein-orden-fr-eine-gute-tat1-heading {
text-align: left;
}
.ein-orden-fr-eine-gute-tat1-caption {
text-align: left;
}
}
@media(max-width: 767px) {
.ein-orden-fr-eine-gute-tat1-heading {
font-size: 40px;
}
.ein-orden-fr-eine-gute-tat1-caption {
color: rgb(255, 255, 255);
font-size: 16px;
font-family: Poppins;
line-height: 24px;
}
}
@media(max-width: 479px) {
.ein-orden-fr-eine-gute-tat1-heading {
max-width: 280px;
}
}
</style>

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="home-container"> <div class="home-container">
<app-navbar rootClassName="navbar-root-class-name"></app-navbar> <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
<h1 class="home-heading"> <h1 class="site-title">
<span>Open Visor</span> <span>Open Visor</span>
<br /> <br />
</h1> </h1>
@ -9,74 +9,89 @@
<span>Mit Offenem Visier</span> <span>Mit Offenem Visier</span>
<br /> <br />
</span> </span>
<section class="home-section"> <section class="home-kommende-veranstaltungen">
<header class="home-header"> <header class="home-header">
<span class="home-section1 section-head">Kommende Veranstaltungen</span> <h2 class="home-section section-head">Kommende Veranstaltungen</h2>
</header> </header>
<div class="home-container1"> <div class="home-veranstaltungen-liste">
<div class="home-dotted-line"></div> <div class="home-letzte-gelegenheit-run1">
<letzte-gelegenheit-run1 Datum="April 2023"></letzte-gelegenheit-run1> <h3 class="home-heading1">Letzte Gelegenheit Run 1 (Schweiz)</h3>
<div class="home-dotted-line1"></div> <p class="home-description">
<letzte-gelegenheit-run2 1. April 2023, 10:00 Uhr bis 2. April 2023, 14:00 Uhr
Datum="Mai 2023" </p>
Standort="TBD" <p class="home-description1">
rootClassName="letzte-gelegenheit-run2-root-class-name" Zivilschutzanlage Sonnenblock Chilegass 8, 8484 Weisslingen
></letzte-gelegenheit-run2> </p>
<div class="home-dotted-line2"></div> <router-link to="/letzte-gelegenheit" class="home-navlink">
<div class="home-explore-more">
<p class="home-text4">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">
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>
</div>
</router-link>
</div>
</div> </div>
</section> </section>
<section class="home-section2"> <section class="home-larps">
<header class="home-header1"> <header class="home-header1">
<span class="home-section3 section-head">LARPs</span> <h2 class="home-section1 section-head">LARPs</h2>
</header> </header>
<main class="home-cards"> <main class="home-cards">
<letzte-gelegenheit <zusammenfassung-letzte-gelegenheit
rootClassName="letzte-gelegenheit-root-class-name" rootClassName="zusammenfassung-letzte-gelegenheit-root-class-name"
></letzte-gelegenheit> ></zusammenfassung-letzte-gelegenheit>
<ssse-trume rootClassName="ssse-trume-root-class-name"></ssse-trume> <zusammenfassung-suesse-traeume
rootClassName="zusammenfassung-suesse-traeume-root-class-name"
></zusammenfassung-suesse-traeume>
</main> </main>
</section> </section>
<section class="home-section4"> <section class="home-kurzgeschichten">
<header class="home-header2"> <header class="home-header2">
<span class="home-section5 section-head"> <h2 class="home-section2 section-head">
<span>Kurzgeschichten</span> <span>Kurzgeschichten</span>
<br /> <br />
</span> </h2>
</header> </header>
<main class="home-cards1"> <main class="home-cards1">
<ein-orden-fr-eine-gute-tat <zusammenfassung-ein-orden-fuer-eine-gute-tat
rootClassName="ein-orden-fr-eine-gute-tat-root-class-name" rootClassName="zusammenfassung-ein-orden-fuer-eine-gute-tat-root-class-name"
></ein-orden-fr-eine-gute-tat> ></zusammenfassung-ein-orden-fuer-eine-gute-tat>
<app-rosenteufel <zusammenfassung-rosenteufel
rootClassName="rosenteufel-root-class-name" rootClassName="zusammenfassung-rosenteufel-root-class-name"
></app-rosenteufel> ></zusammenfassung-rosenteufel>
</main> </main>
</section> </section>
<app-footer></app-footer> <app-kontakt></app-kontakt>
</div> </div>
</template> </template>
<script> <script>
import AppNavbar from '../components/navbar' import AppNavigation from '../components/navigation'
import LetzteGelegenheitRun1 from '../components/letzte-gelegenheit-run1' import ZusammenfassungLetzteGelegenheit from '../components/zusammenfassung-letzte-gelegenheit'
import LetzteGelegenheitRun2 from '../components/letzte-gelegenheit-run2' import ZusammenfassungSuesseTraeume from '../components/zusammenfassung-suesse-traeume'
import LetzteGelegenheit from '../components/letzte-gelegenheit' import ZusammenfassungEinOrdenFuerEineGuteTat from '../components/zusammenfassung-ein-orden-fuer-eine-gute-tat'
import SsseTrume from '../components/ssse-trume' import ZusammenfassungRosenteufel from '../components/zusammenfassung-rosenteufel'
import EinOrdenFrEineGuteTat from '../components/ein-orden-fr-eine-gute-tat' import AppKontakt from '../components/kontakt'
import AppRosenteufel from '../components/rosenteufel'
import AppFooter from '../components/footer'
export default { export default {
name: 'Home', name: 'Home',
components: { components: {
AppNavbar, AppNavigation,
LetzteGelegenheitRun1, ZusammenfassungLetzteGelegenheit,
LetzteGelegenheitRun2, ZusammenfassungSuesseTraeume,
LetzteGelegenheit, ZusammenfassungEinOrdenFuerEineGuteTat,
SsseTrume, ZusammenfassungRosenteufel,
EinOrdenFrEineGuteTat, AppKontakt,
AppRosenteufel,
AppFooter,
}, },
metaInfo: { metaInfo: {
title: 'Open Visor', title: 'Open Visor',
@ -102,20 +117,13 @@ export default {
background-size: cover; background-size: cover;
background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg"); background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
} }
.home-heading {
color: rgb(255, 255, 255);
font-size: 64px;
font-style: normal;
font-family: Fira Sans;
font-weight: 500;
}
.home-caption { .home-caption {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 20px; font-size: 20px;
font-family: Fira Sans; font-family: Fira Sans;
line-height: 30px; line-height: 30px;
} }
.home-section { .home-kommende-veranstaltungen {
gap: var(--dl-space-space-halfunit); gap: var(--dl-space-space-halfunit);
flex: 1; flex: 1;
width: 100%; width: 100%;
@ -143,59 +151,159 @@ export default {
padding-bottom: var(--dl-space-space-oneandhalfunits); padding-bottom: var(--dl-space-space-oneandhalfunits);
justify-content: center; justify-content: center;
} }
.home-section1 { .home-section {
color: #ffffff; color: #ffffff;
font-size: 36px; font-size: 36px;
} }
.home-container1 { .home-veranstaltungen-liste {
flex: 0 0 auto; flex: 0 0 auto;
width: auto; width: 99%;
display: flex; display: flex;
max-width: 1080px;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
background-color: rgba(41, 41, 41, 0.8); background-color: rgba(41, 41, 41, 0.8);
} }
.home-dotted-line { .home-letzte-gelegenheit-run1 {
gap: var(--dl-space-space-fiveunits); gap: var(--dl-space-space-unit);
flex: 1; flex: 0 0 auto;
width: 100%;
border: 2px dashed rgba(120, 120, 120, 0.4);
display: flex;
align-items: center;
border-color: rgba(200, 200, 200, 0.8);
border-width: 0px;
flex-direction: column;
justify-content: center;
border-top-width: 3px;
}
.home-dotted-line1 {
gap: var(--dl-space-space-fiveunits);
flex: 1;
width: 100%;
border: 2px dashed rgba(120, 120, 120, 0.4);
display: flex;
align-items: center;
border-color: rgba(200, 200, 200, 0.8);
border-width: 0px;
flex-direction: column;
justify-content: center;
border-top-width: 3px;
}
.home-dotted-line2 {
gap: var(--dl-space-space-fiveunits);
flex: 1;
width: 100%; width: 100%;
display: flex; display: flex;
position: relative;
align-self: flex-start;
align-items: center; align-items: center;
border-color: rgba(200, 200, 200, 0.8); border-color: rgba(200, 200, 200, 0.8);
border-style: dashed; border-style: dashed;
border-width: 0px; border-width: 0px;
flex-direction: column; justify-content: flex-start;
justify-content: center;
border-top-width: 3px; border-top-width: 3px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 3px;
} }
.home-section2 { .home-heading1 {
gap: var(--dl-space-space-fiveunits); 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 {
gap: var(--dl-space-space-oneandhalfunits);
width: 60px;
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;
}
.home-explore-more:hover {
opacity: 0.5;
}
.home-text4 {
color: #FFFF00;
width: auto;
height: auto;
align-self: center;
font-style: normal;
font-weight: 500;
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 {
gap: var(--dl-space-space-oneandhalfunits);
width: 60px;
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;
}
.home-explore-more1:hover {
opacity: 0.5;
}
.home-text5 {
color: #ffff00;
width: 60px;
height: auto;
align-self: center;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
.home-larps {
gap: var(--dl-space-space-twounits);
flex: 1; flex: 1;
width: 100%; width: 100%;
height: auto; height: auto;
@ -217,7 +325,7 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.home-section3 { .home-section1 {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 36px; font-size: 36px;
text-transform: capitalize; text-transform: capitalize;
@ -231,8 +339,8 @@ export default {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
} }
.home-section4 { .home-kurzgeschichten {
gap: var(--dl-space-space-fiveunits); gap: var(--dl-space-space-twounits);
flex: 1; flex: 1;
width: 100%; width: 100%;
display: flex; display: flex;
@ -255,7 +363,7 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.home-section5 { .home-section2 {
color: #ffffff; color: #ffffff;
font-size: 36px; font-size: 36px;
text-transform: uppercase; text-transform: uppercase;
@ -270,40 +378,99 @@ export default {
justify-content: center; justify-content: center;
} }
@media(max-width: 991px) { @media(max-width: 991px) {
.home-heading {
text-align: left;
}
.home-caption { .home-caption {
text-align: left; text-align: left;
} }
.home-dotted-line { .home-veranstaltungen-liste {
display: none; width: 99%;
} }
.home-dotted-line1 { .home-letzte-gelegenheit-run1 {
display: none; padding-top: var(--dl-space-space-unit);
flex-direction: column;
padding-bottom: var(--dl-space-space-unit);
} }
.home-dotted-line2 { .home-heading1 {
display: none; 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 {
text-align: center;
} }
.home-cards { .home-cards {
gap: var(--dl-space-space-halfunit); gap: var(--dl-space-space-halfunit);
flex-direction: column;
} }
.home-cards1 { .home-cards1 {
gap: var(--dl-space-space-halfunit); gap: var(--dl-space-space-halfunit);
flex-direction: column;
} }
} }
@media(max-width: 767px) { @media(max-width: 767px) {
.home-heading {
font-size: 40px;
}
.home-caption { .home-caption {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 16px; font-size: 16px;
font-family: Poppins; font-family: Poppins;
line-height: 24px; line-height: 24px;
} }
.home-kommende-veranstaltungen {
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 { .home-cards {
gap: var(--dl-space-space-oneandhalfunits); gap: var(--dl-space-space-oneandhalfunits);
flex-wrap: wrap;
flex-direction: column; flex-direction: column;
} }
.home-cards1 { .home-cards1 {
@ -312,8 +479,38 @@ export default {
} }
} }
@media(max-width: 479px) { @media(max-width: 479px) {
.home-heading { .home-header {
max-width: 280px; width: auto;
height: auto;
max-width: auto;
padding-top: 0px;
}
.home-section {
height: auto;
line-height: 36px;
}
.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 {
gap: var(--dl-space-space-twounits);
}
.home-kurzgeschichten {
gap: var(--dl-space-space-twounits);
} }
} }
</style> </style>

View file

@ -1,23 +1,23 @@
<template> <template>
<div class="larp-konzept1-container"> <div class="larpkonzept-container">
<app-navbar rootClassName="navbar-root-class-name"></app-navbar> <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
<h1 class="larp-konzept1-heading"> <h1 class="larpkonzept-heading">
<span>Open Visor Larpkonzept</span> <span>Open Visor Larpkonzept</span>
<br /> <br />
</h1> </h1>
<span class="larp-konzept1-caption"> <span class="larpkonzept-caption">
<span> <span>
Für eine sichere Durchführung von intensiven, emotionalen und Für eine sichere Durchführung von intensiven, emotionalen und
kontrastreichen Nordic LARPs kontrastreichen Nordic LARPs
</span> </span>
<br /> <br />
</span> </span>
<div class="larp-konzept1-container1"> <div class="larpkonzept-container1">
<p class="larp-konzept1-description"> <p class="larpkonzept-description">
<span class="larp-konzept1-text04"> <span class="larpkonzept-text04">
Kurze Begriffserklärung für Larp-Neulinge Kurze Begriffserklärung für Larp-Neulinge
</span> </span>
<br class="larp-konzept1-text05" /> <br class="larpkonzept-text05" />
<span> <span>
LARP steht für Live Action Roleplay. Hierbei schlüpft man in die Rolle 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 eines fiktiven Menschen für die Dauer einer Veranstaltung. Immer wenn
@ -32,10 +32,10 @@
dass man die Immersion durch OT Ansagen nicht stört. Zu diesen kommen dass man die Immersion durch OT Ansagen nicht stört. Zu diesen kommen
wir im Kapitel Spielintensitäts Steigerung- und Verringerrung. wir im Kapitel Spielintensitäts Steigerung- und Verringerrung.
</span> </span>
<br class="larp-konzept1-text07" /> <br class="larpkonzept-text07" />
<br class="larp-konzept1-text08" /> <br class="larpkonzept-text08" />
<span class="larp-konzept1-text09">DKWDDK</span> <span class="larpkonzept-text09">DKWDDK</span>
<br class="larp-konzept1-text10" /> <br class="larpkonzept-text10" />
<span> <span>
Grundsätzlich gilt, &quot;Du kannst was Du darstellen kannst&quot;. D.h. 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 man zeigt in echt was man kann und sagt nicht &quot;ich tue gerade
@ -47,10 +47,10 @@
aufrechtzuerhalten, sodass man sich besser in die Charaktere einfühlen aufrechtzuerhalten, sodass man sich besser in die Charaktere einfühlen
kann. kann.
</span> </span>
<br class="larp-konzept1-text12" /> <br class="larpkonzept-text12" />
<br class="larp-konzept1-text13" /> <br class="larpkonzept-text13" />
<span class="larp-konzept1-text14">Play to Lose</span> <span class="larpkonzept-text14">Play to Lose</span>
<br class="larp-konzept1-text15" /> <br class="larpkonzept-text15" />
<span> <span>
Play to Lose heisst für eine bessere Geschichte oder besseres Spiel für Play to Lose heisst für eine bessere Geschichte oder besseres Spiel für
die Beteiligten auf einen Erfolg des eigenen Charakters zu verzichten. die Beteiligten auf einen Erfolg des eigenen Charakters zu verzichten.
@ -59,7 +59,7 @@
hat. Es geht bei Letzte Gelegenheit darum, kollaborativ eine spannende hat. Es geht bei Letzte Gelegenheit darum, kollaborativ eine spannende
Geschichte zu erzählen. Geschichte zu erzählen.
</span> </span>
<br class="larp-konzept1-text17" /> <br class="larpkonzept-text17" />
<span> <span>
Das Gegenteil von Play to Lose ist Play to Win, also wenn man versucht 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 einen möglichst siegreichen Charakter zu spielen. Das ist an sich nicht
@ -70,10 +70,10 @@
Immersion der Beteiligten bricht. Powergaming ist bei Letzte Immersion der Beteiligten bricht. Powergaming ist bei Letzte
Gelegenheit verboten. Gelegenheit verboten.
</span> </span>
<br class="larp-konzept1-text19" /> <br class="larpkonzept-text19" />
<br class="larp-konzept1-text20" /> <br class="larpkonzept-text20" />
<span class="larp-konzept1-text21">Play to Lift</span> <span class="larpkonzept-text21">Play to Lift</span>
<br class="larp-konzept1-text22" /> <br class="larpkonzept-text22" />
<span> <span>
Play to Lift heisst seinen Mitspielern beim Ausspielen ihres Charakters Play to Lift heisst seinen Mitspielern beim Ausspielen ihres Charakters
zu unterstützen. Grundsätzlich gilt DKWDDK, doch es gibt auch Spiel zu unterstützen. Grundsätzlich gilt DKWDDK, doch es gibt auch Spiel
@ -91,12 +91,12 @@
Funkgeräte, also müssen wir uns da gegenseitig helfen, die Kompetenzen Funkgeräte, also müssen wir uns da gegenseitig helfen, die Kompetenzen
dazu glaubwürdig darzustellen. dazu glaubwürdig darzustellen.
</span> </span>
<br class="larp-konzept1-text24" /> <br class="larpkonzept-text24" />
<br class="larp-konzept1-text25" /> <br class="larpkonzept-text25" />
<span class="larp-konzept1-text26"> <span class="larpkonzept-text26">
Vorgeschriebene Charaktere und Beziehungen Vorgeschriebene Charaktere und Beziehungen
</span> </span>
<br class="larp-konzept1-text27" /> <br class="larpkonzept-text27" />
<span> <span>
Wir werden Charaktere schreiben die dicht miteinander vernetzt sind. Wir werden Charaktere schreiben die dicht miteinander vernetzt sind.
Dies hat zur Konsequenz, dass eher weniger Spielerplätze verfügbar sind, Dies hat zur Konsequenz, dass eher weniger Spielerplätze verfügbar sind,
@ -107,12 +107,12 @@
aber sicherstellen, dass sicher jeder Spieler andere Spieler hat, die aber sicherstellen, dass sicher jeder Spieler andere Spieler hat, die
man anspielen kann. man anspielen kann.
</span> </span>
<br class="larp-konzept1-text29" /> <br class="larpkonzept-text29" />
<br class="larp-konzept1-text30" /> <br class="larpkonzept-text30" />
<span class="larp-konzept1-text31"> <span class="larpkonzept-text31">
Spielintensitäts Steigerung- und Verringerrung Spielintensitäts Steigerung- und Verringerrung
</span> </span>
<br class="larp-konzept1-text32" /> <br class="larpkonzept-text32" />
<span> <span>
Wie an vielen Nordic Larps gibt es oft OT-Signale um seinem gegenüber zu Wie an vielen Nordic Larps gibt es oft OT-Signale um seinem gegenüber zu
vermitteln, dass man die Spielintensität verringern oder steigern vermitteln, dass man die Spielintensität verringern oder steigern
@ -129,17 +129,17 @@
einer Intensitätssteigerung sein. Es kann also sein, dass das einer Intensitätssteigerung sein. Es kann also sein, dass das
Steigerungssignal ignoriert wird. Steigerungssignal ignoriert wird.
</span> </span>
<br class="larp-konzept1-text34" /> <br class="larpkonzept-text34" />
<br class="larp-konzept1-text35" /> <br class="larpkonzept-text35" />
<span> <span>
Zu guter Letzt benutzen wir am Letzte Gelegenheit auch die Zu guter Letzt benutzen wir am Letzte Gelegenheit auch die
<span v-html="rawtndy"></span> <span v-html="rawyca8"></span>
</span> </span>
<a <a
href="https://en.wikipedia.org/wiki/OK_gesture" href="https://en.wikipedia.org/wiki/OK_gesture"
target="_blank" target="_blank"
rel="noreferrer noopener" rel="noreferrer noopener"
class="larp-konzept1-link" class="larpkonzept-link"
> >
OK-Hand OK-Hand
</a> </a>
@ -150,14 +150,14 @@
schlecht). Nur wenn der Daumen nach oben zeigt, soll man die schlecht). Nur wenn der Daumen nach oben zeigt, soll man die
Spielintensität beibehalten, ansonsten soll man sie verringern, um Spielintensität beibehalten, ansonsten soll man sie verringern, um
sicherzustellen, dass es der Person wieder besser geht. sicherzustellen, dass es der Person wieder besser geht.
<span v-html="rawjhdi"></span> <span v-html="rawxyrj"></span>
</span> </span>
<br class="larp-konzept1-text38" /> <br class="larpkonzept-text38" />
<br class="larp-konzept1-text39" /> <br class="larpkonzept-text39" />
<span class="larp-konzept1-text40"> <span class="larpkonzept-text40">
Workshops vor und Feedback nach dem Spiel Workshops vor und Feedback nach dem Spiel
</span> </span>
<br class="larp-konzept1-text41" /> <br class="larpkonzept-text41" />
<span> <span>
Wir werden vor und nach dem Spiel Workshops durchführen um die Wir werden vor und nach dem Spiel Workshops durchführen um die
Spielenden ins Spiel ein- und wieder auszuführen. Wenn man intensives Spielenden ins Spiel ein- und wieder auszuführen. Wenn man intensives
@ -172,37 +172,37 @@
und können das Feedback dann später wenn der Stress abgeklungen ist in und können das Feedback dann später wenn der Stress abgeklungen ist in
Ruhe anschauen. Ruhe anschauen.
</span> </span>
<br class="larp-konzept1-text43" /> <br class="larpkonzept-text43" />
</p> </p>
</div> </div>
<app-footer rootClassName="footer-root-class-name2"></app-footer> <app-kontakt rootClassName="kontakt-root-class-name2"></app-kontakt>
</div> </div>
</template> </template>
<script> <script>
import AppNavbar from '../components/navbar' import AppNavigation from '../components/navigation'
import AppFooter from '../components/footer' import AppKontakt from '../components/kontakt'
export default { export default {
name: 'LarpKonzept1', name: 'Larpkonzept',
components: { components: {
AppNavbar, AppNavigation,
AppFooter, AppKontakt,
}, },
data() { data() {
return { return {
rawtndy: ' ', rawyca8: ' ',
rawjhdi: ' ', rawxyrj: ' ',
} }
}, },
metaInfo: { metaInfo: {
title: 'LarpKonzept1 - Open Visor', title: 'Larpkonzept - Open Visor',
meta: [ meta: [
{ {
property: 'og:title', property: 'og:title',
content: 'LarpKonzept1 - Open Visor', content: 'Larpkonzept - Open Visor',
}, },
], ],
}, },
@ -210,7 +210,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.larp-konzept1-container { .larpkonzept-container {
width: 100%; width: 100%;
display: flex; display: flex;
z-index: 100; z-index: 100;
@ -224,149 +224,147 @@ export default {
background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg"); background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
background-position: top left; background-position: top left;
} }
.larp-konzept1-heading { .larpkonzept-heading {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 64px; font-size: 64px;
font-style: normal; font-style: normal;
text-align: center;
font-family: Poppins; font-family: Poppins;
font-weight: 600; font-weight: 600;
margin-bottom: 6px;
} }
.larp-konzept1-caption { .larpkonzept-caption {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 20px; font-size: 20px;
max-width: 90%;
text-align: center;
font-family: Poppins; font-family: Poppins;
line-height: 30px; line-height: 30px;
} }
.larp-konzept1-container1 { .larpkonzept-container1 {
flex: 0 0 auto; flex: 0 0 auto;
width: 1080px; width: 90%;
height: auto; height: auto;
display: flex; display: flex;
max-width: 1080px;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
} }
.larp-konzept1-description { .larpkonzept-description {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
width: auto; width: auto;
font-size: 20px; font-size: 18px;
align-self: center; align-self: center;
margin-top: var(--dl-space-space-twounits); margin-top: var(--dl-space-space-twounits);
font-family: Poppins; font-family: Poppins;
line-height: 28px; line-height: 28px;
padding-top: var(--dl-space-space-oneandhalfunits); padding-top: var(--dl-space-space-oneandhalfunits);
padding-left: var(--dl-space-space-oneandhalfunits); padding-left: var(--dl-space-space-oneandhalfunits);
border-radius: 20px;
padding-right: var(--dl-space-space-oneandhalfunits); padding-right: var(--dl-space-space-oneandhalfunits);
padding-bottom: var(--dl-space-space-oneandhalfunits); padding-bottom: var(--dl-space-space-oneandhalfunits);
background-color: rgba(41, 41, 41, 0.8); background-color: rgba(41, 41, 41, 0.8);
} }
.larp-konzept1-text04 { .larpkonzept-text04 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text05 { .larpkonzept-text05 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text07 { .larpkonzept-text07 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text08 { .larpkonzept-text08 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text09 { .larpkonzept-text09 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text10 { .larpkonzept-text10 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text12 { .larpkonzept-text12 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text13 { .larpkonzept-text13 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text14 { .larpkonzept-text14 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text15 { .larpkonzept-text15 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text17 { .larpkonzept-text17 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text19 { .larpkonzept-text19 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text20 { .larpkonzept-text20 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text21 { .larpkonzept-text21 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text22 { .larpkonzept-text22 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text24 { .larpkonzept-text24 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text25 { .larpkonzept-text25 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text26 { .larpkonzept-text26 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text27 { .larpkonzept-text27 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text29 { .larpkonzept-text29 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text30 { .larpkonzept-text30 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text31 { .larpkonzept-text31 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text32 { .larpkonzept-text32 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text34 { .larpkonzept-text34 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text35 { .larpkonzept-text35 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-link { .larpkonzept-link {
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
.larp-konzept1-text38 { .larpkonzept-text38 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text39 { .larpkonzept-text39 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text40 { .larpkonzept-text40 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text41 { .larpkonzept-text41 {
font-weight: 700; font-weight: 700;
} }
.larp-konzept1-text43 { .larpkonzept-text43 {
font-weight: 700; font-weight: 700;
} }
@media(max-width: 991px) {
.larp-konzept1-heading {
text-align: left;
}
.larp-konzept1-caption {
text-align: left;
}
}
@media(max-width: 767px) { @media(max-width: 767px) {
.larp-konzept1-heading { .larpkonzept-heading {
font-size: 40px; font-size: 40px;
} }
.larp-konzept1-caption { .larpkonzept-caption {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 16px; font-size: 16px;
font-family: Poppins; font-family: Poppins;
@ -374,7 +372,7 @@ export default {
} }
} }
@media(max-width: 479px) { @media(max-width: 479px) {
.larp-konzept1-heading { .larpkonzept-heading {
max-width: 280px; max-width: 280px;
} }
} }

View file

@ -1,17 +1,17 @@
<template> <template>
<div class="letzte-gelegenheit1-container"> <div class="letzte-gelegenheit-container">
<app-navbar rootClassName="navbar-root-class-name"></app-navbar> <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
<h1 class="letzte-gelegenheit1-heading"> <h1 class="letzte-gelegenheit-heading">
<span>Letzte Gelegenheit</span> <span>Letzte Gelegenheit</span>
<br /> <br />
</h1> </h1>
<span class="letzte-gelegenheit1-caption"> <span class="letzte-gelegenheit-caption">
<span>Haben Häftlinge Platz im Bunker?</span> <span>Haben Häftlinge Platz im Bunker?</span>
<br /> <br />
</span> </span>
<div class="letzte-gelegenheit1-container1"> <div class="letzte-gelegenheit-container1">
<p class="letzte-gelegenheit1-description"> <p class="letzte-gelegenheit-description">
<span class="letzte-gelegenheit1-text004">Setting</span> <span class="letzte-gelegenheit-text004">Setting</span>
<br /> <br />
<span> <span>
Das Nordic LARP Letzte Gelegenheit spielt in der heutigen Zeit in Das Nordic LARP Letzte Gelegenheit spielt in der heutigen Zeit in
@ -25,19 +25,19 @@
</span> </span>
<br /> <br />
<br /> <br />
<span class="letzte-gelegenheit1-text009"> <span class="letzte-gelegenheit-text009">
Was will dieses Larp bewirken Was will dieses Larp bewirken
</span> </span>
<br /> <br />
<span> <span>
 ·  ·
<span v-html="rawupb0"></span> <span v-html="raw165c"></span>
</span> </span>
<span>Gemeinsam eine Geschichte erleben und entwickeln</span> <span>Gemeinsam eine Geschichte erleben und entwickeln</span>
<br /> <br />
<span> <span>
 ·  ·
<span v-html="rawptol"></span> <span v-html="rawrgfo"></span>
</span> </span>
<span> <span>
Intensive Momente und Emotionen ermöglichen, die in Erinnerung bleiben. Intensive Momente und Emotionen ermöglichen, die in Erinnerung bleiben.
@ -45,7 +45,7 @@
<br /> <br />
<span> <span>
 ·  ·
<span v-html="rawj0s2"></span> <span v-html="rawz9bj"></span>
</span> </span>
<span> <span>
Persönliche Auseinandersetzungen der Spieler mit nicht alltäglichen Persönliche Auseinandersetzungen der Spieler mit nicht alltäglichen
@ -54,7 +54,7 @@
<br /> <br />
<span> <span>
 ·  ·
<span v-html="rawf03l"></span> <span v-html="rawv8eb"></span>
</span> </span>
<span> <span>
Interne Charakterentwicklung oder -verfestigung durch externe Faktoren. Interne Charakterentwicklung oder -verfestigung durch externe Faktoren.
@ -62,13 +62,13 @@
<br /> <br />
<span> <span>
 ·  ·
<span v-html="rawjpgf"></span> <span v-html="rawbeku"></span>
</span> </span>
<span>Dilemmata mit sich selbst und mit anderen.</span> <span>Dilemmata mit sich selbst und mit anderen.</span>
<br /> <br />
<span> <span>
 ·  ·
<span v-html="rawecua"></span> <span v-html="rawi9rt"></span>
</span> </span>
<span> <span>
Weder dauernder Zusammenhalt noch konstanter Konflikt, sondern Variation Weder dauernder Zusammenhalt noch konstanter Konflikt, sondern Variation
@ -76,7 +76,7 @@
</span> </span>
<br /> <br />
<br /> <br />
<span class="letzte-gelegenheit1-text030">Wie will es das bewirken</span> <span class="letzte-gelegenheit-text030">Wie will es das bewirken</span>
<br /> <br />
<span> <span>
 · Mit Feindschaften und Freundschaften durch Vergangenheit, Ziel-,  · Mit Feindschaften und Freundschaften durch Vergangenheit, Ziel-,
@ -101,42 +101,21 @@
</span> </span>
<br /> <br />
<br /> <br />
<span class="letzte-gelegenheit1-text041"> <span class="letzte-gelegenheit-text041">Was bespielt wird</span>
Kurze Begriffserklärung für Larp-Neulinge
</span>
<br />
<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 Steigerungs- und
Verringerrungssignale.
</span>
<br />
<br />
<span class="letzte-gelegenheit1-text046">Was bespielt wird</span>
<br /> <br />
<span> <span>
Angst, Hass, Liebe, Eifersucht, Intrige, Loyalität, Verrat, Geheimnisse Angst, Hass, Liebe, Eifersucht, Intrige, Loyalität, Verrat, Geheimnisse
lüften, Mord, Diebstahl, Machtkampf, Rache/Vergebung, Wahnsinn, lüften, Mord, Diebstahl, Machtkampf, Rache/Vergebung, Wahnsinn,
Gerechtigkeit, Gruppe vs. Individuum, Flucht in Gerechtigkeit, Gruppe vs. Individuum, Flucht in
Drogenkonsum/-missbrauch, Diskriminierung von Kriminellen . . . Drogenkonsum/-missbrauch, Diskriminierung von Kriminellen...
</span> </span>
<br /> <br />
<br /> <br />
<span class="letzte-gelegenheit1-text051">Was nicht bespielt wird</span> <span class="letzte-gelegenheit-text046">Was nicht bespielt wird</span>
<br /> <br />
<span> <span>
Sexismus und Sexismus und
<span v-html="rawx0d8"></span> <span v-html="raws8w2"></span>
</span> </span>
<span> <span>
Rassismus (stattdessen werden kulturelle Differenzen vergrössert) Rassismus (stattdessen werden kulturelle Differenzen vergrössert)
@ -144,7 +123,16 @@
<span>.</span> <span>.</span>
<br /> <br />
<br /> <br />
<span class="letzte-gelegenheit1-text058">Preise</span> <span class="letzte-gelegenheit-text053">Konzept</span>
<br />
<span>
Wir werden das Open Visor Larpkonzept verwenden. Dieses wird am Anfang
der Veranstaltung auch nochmals für alle zusammengefasst und einzelne
zentrale Aspekte in Workshops aufgenommen.
</span>
<br />
<br />
<span class="letzte-gelegenheit-text058">Preise</span>
<br /> <br />
<span> <span>
Das gesamte Budget wird in das LARP investiert. Schäden, deren Das gesamte Budget wird in das LARP investiert. Schäden, deren
@ -154,24 +142,24 @@
<br /> <br />
<span> <span>
 ·  ·
<span v-html="rawvfbd"></span> <span v-html="rawlt4k"></span>
</span> </span>
<span>Solidaritätsticket: 20.- CHF</span> <span>Solidaritätsticket: 20.- CHF</span>
<br /> <br />
<span> <span>
 ·  ·
<span v-html="rawg6xe"></span> <span v-html="rawd3jf"></span>
</span> </span>
<span>Normalticket: 40.- CHF</span> <span>Normalticket: 40.- CHF</span>
<br /> <br />
<span> <span>
 ·  ·
<span v-html="rawolu7"></span> <span v-html="rawtfmn"></span>
</span> </span>
<span>Sponsorticket: 60.- CHF</span> <span>Sponsorticket: 60.- CHF</span>
<br /> <br />
<br /> <br />
<span class="letzte-gelegenheit1-text072">OT-Bereich</span> <span class="letzte-gelegenheit-text072">OT-Bereich</span>
<br /> <br />
<span> <span>
Es wird ein Zimmer geben, in dem man sich OT aufhalten kann und bei Es wird ein Zimmer geben, in dem man sich OT aufhalten kann und bei
@ -187,8 +175,8 @@
</span> </span>
<br /> <br />
<br /> <br />
<span class="letzte-gelegenheit1-text077">Verpflegung</span> <span class="letzte-gelegenheit-text077">Verpflegung</span>
<br class="letzte-gelegenheit1-text078" /> <br class="letzte-gelegenheit-text078" />
<span> <span>
IT hat es nur das Essen, das einem bei der Ressourcenknappheit IT IT hat es nur das Essen, das einem bei der Ressourcenknappheit IT
verteilt wird. Manche Charaktere tauschen ihre Essensration allenfalls verteilt wird. Manche Charaktere tauschen ihre Essensration allenfalls
@ -200,41 +188,41 @@
Möglichkeit im OT Bereich Snacks zu essen (Früchte, geschnittenes Möglichkeit im OT Bereich Snacks zu essen (Früchte, geschnittenes
Gemüse, Brötchen, Käse, Süssigkeiten, Trockenwürste, Wasserkocher mit Gemüse, Brötchen, Käse, Süssigkeiten, Trockenwürste, Wasserkocher mit
French Press, Kaffeepulver und Teebeuteln). French Press, Kaffeepulver und Teebeuteln).
<span v-html="rawpw0g"></span> <span v-html="raw8myh"></span>
</span> </span>
<br class="letzte-gelegenheit1-text080" /> <br class="letzte-gelegenheit-text080" />
<span> <span>
 ·  ·
<span v-html="rawdjsx"></span> <span v-html="rawm3qh"></span>
</span> </span>
<span>Samstag OT Mittagessen (vor Time-In)</span> <span>Samstag OT Mittagessen (vor Time-In)</span>
<br class="letzte-gelegenheit1-text083" /> <br class="letzte-gelegenheit-text083" />
<span> <span>
 ·  ·
<span v-html="rawu3fc"></span> <span v-html="rawgdhf"></span>
</span> </span>
<span> <span>
Samstag IT Abendessen (gefriergetrocknetes IT Essen &quot;Meals Ready to Samstag IT Abendessen (gefriergetrocknetes IT Essen &quot;Meals Ready to
Eat und anderes lange haltbares Essen) Eat und anderes lange haltbares Essen)
</span> </span>
<br class="letzte-gelegenheit1-text086" /> <br class="letzte-gelegenheit-text086" />
<span> <span>
 ·  ·
<span v-html="rawnabo"></span> <span v-html="rawpsh0"></span>
</span> </span>
<span> <span>
Sonntag IT Frühstück (gefriergetrocknetes IT Essen &quot;Meals Ready to Sonntag IT Frühstück (gefriergetrocknetes IT Essen &quot;Meals Ready to
Eat&quot;, z.B. Porridge und anderes lange haltbares Essen) Eat&quot;, z.B. Porridge und anderes lange haltbares Essen)
</span> </span>
<br class="letzte-gelegenheit1-text089" /> <br class="letzte-gelegenheit-text089" />
<span> <span>
 ·  ·
<span v-html="rawl9kx"></span> <span v-html="raw8asv"></span>
</span> </span>
<span>Sonntag OT Mittagessen (nach Time-Out)</span> <span>Sonntag OT Mittagessen (nach Time-Out)</span>
<br class="letzte-gelegenheit1-text092" /> <br class="letzte-gelegenheit-text092" />
<br /> <br />
<span class="letzte-gelegenheit1-text094">Ausrüstung</span> <span class="letzte-gelegenheit-text094">Ausrüstung</span>
<br /> <br />
<span> <span>
Die Wärter werden ein Hemd für ihre Körpergrösse erhalten, falls Die Wärter werden ein Hemd für ihre Körpergrösse erhalten, falls
@ -272,25 +260,9 @@
Mitspielern vor der Veranstaltung am besten bei der OT-Ansprache Mitspielern vor der Veranstaltung am besten bei der OT-Ansprache
mitteilen. mitteilen.
</span> </span>
<br class="letzte-gelegenheit1-text117" /> <br class="letzte-gelegenheit-text117" />
<br class="letzte-gelegenheit1-text118" /> <br class="letzte-gelegenheit-text118" />
<span class="letzte-gelegenheit1-text119">Konzept</span> <span class="letzte-gelegenheit-text119">Standort Run 1</span>
<br class="letzte-gelegenheit1-text120" />
<span class="letzte-gelegenheit1-text121">
Wir werden das
<span v-html="raw5v2a"></span>
</span>
<router-link to="/larp-konzept1" class="letzte-gelegenheit1-navlink">
Open Visor Larpkonzept
</router-link>
<span class="letzte-gelegenheit1-text122">
verwenden. Dieses wird am Anfang der Veranstaltung auch nochmals für
alle zusammengefasst und einzelne zentrale Aspekte in Workshops
aufgenommen.
</span>
<br class="letzte-gelegenheit1-text123" />
<br class="letzte-gelegenheit1-text124" />
<span class="letzte-gelegenheit1-text125">Standort Run 1</span>
<br /> <br />
<span>Zivilschutzanlage</span> <span>Zivilschutzanlage</span>
<br /> <br />
@ -300,69 +272,68 @@
<br /> <br />
<span> <span>
Parkplatz: Parkplatz:
<span v-html="raweoxb"></span> <span v-html="rawwiyo"></span>
</span> </span>
<span class="letzte-gelegenheit1-text134"> <span class="letzte-gelegenheit-text128">
https://goo.gl/maps/KgqAwRdw8pJSdmjTA https://goo.gl/maps/KgqAwRdw8pJSdmjTA
</span> </span>
<br /> <br />
<br /> <br />
<span class="letzte-gelegenheit1-text137">Standort Run 2</span> <span class="letzte-gelegenheit-text131">Standort Run 2</span>
<br /> <br />
<span>TBA</span> <span>TBA</span>
<br /> <br />
<br /> <br />
</p> </p>
<div class="letzte-gelegenheit1-container2"> <div class="letzte-gelegenheit-container2">
<p class="letzte-gelegenheit1-description1">Ablauf</p> <p class="letzte-gelegenheit-description1">Ablauf</p>
</div> </div>
<div class="letzte-gelegenheit1-get-started button"> <div class="letzte-gelegenheit-get-started button">
<span class="letzte-gelegenheit1-text142">Anmeldung</span> <span class="letzte-gelegenheit-text136">Anmeldung</span>
</div> </div>
</div> </div>
<app-footer rootClassName="footer-root-class-name2"></app-footer> <app-kontakt rootClassName="kontakt-root-class-name2"></app-kontakt>
</div> </div>
</template> </template>
<script> <script>
import AppNavbar from '../components/navbar' import AppNavigation from '../components/navigation'
import AppFooter from '../components/footer' import AppKontakt from '../components/kontakt'
export default { export default {
name: 'LetzteGelegenheit1', name: 'LetzteGelegenheit',
components: { components: {
AppNavbar, AppNavigation,
AppFooter, AppKontakt,
}, },
data() { data() {
return { return {
rawupb0: ' ', raw165c: ' ',
rawptol: ' ', rawrgfo: ' ',
rawj0s2: ' ', rawz9bj: ' ',
rawf03l: ' ', rawv8eb: ' ',
rawjpgf: ' ', rawbeku: ' ',
rawecua: ' ', rawi9rt: ' ',
rawx0d8: ' ', raws8w2: ' ',
rawvfbd: ' ', rawlt4k: ' ',
rawg6xe: ' ', rawd3jf: ' ',
rawolu7: ' ', rawtfmn: ' ',
rawpw0g: ' ', raw8myh: ' ',
rawdjsx: ' ', rawm3qh: ' ',
rawu3fc: ' ', rawgdhf: ' ',
rawnabo: ' ', rawpsh0: ' ',
rawl9kx: ' ', raw8asv: ' ',
raw5v2a: ' ', rawwiyo: ' ',
raweoxb: ' ',
} }
}, },
metaInfo: { metaInfo: {
title: 'Letzte-Gelegenheit1 - Open Visor', title: 'Letzte-Gelegenheit - Open Visor',
meta: [ meta: [
{ {
property: 'og:title', property: 'og:title',
content: 'Letzte-Gelegenheit1 - Open Visor', content: 'Letzte-Gelegenheit - Open Visor',
}, },
], ],
}, },
@ -370,7 +341,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.letzte-gelegenheit1-container { .letzte-gelegenheit-container {
width: 100%; width: 100%;
display: flex; display: flex;
z-index: 100; z-index: 100;
@ -384,20 +355,20 @@ export default {
background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg"); background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
background-position: top left; background-position: top left;
} }
.letzte-gelegenheit1-heading { .letzte-gelegenheit-heading {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 64px; font-size: 64px;
font-style: normal; font-style: normal;
font-family: Poppins; font-family: Poppins;
font-weight: 600; font-weight: 600;
} }
.letzte-gelegenheit1-caption { .letzte-gelegenheit-caption {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 20px; font-size: 20px;
font-family: Poppins; font-family: Poppins;
line-height: 30px; line-height: 30px;
} }
.letzte-gelegenheit1-container1 { .letzte-gelegenheit-container1 {
flex: 0 0 auto; flex: 0 0 auto;
width: 1080px; width: 1080px;
height: auto; height: auto;
@ -405,118 +376,69 @@ export default {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
} }
.letzte-gelegenheit1-description { .letzte-gelegenheit-description {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
width: auto; width: 90%;
padding: var(--dl-space-space-twounits); padding: var(--dl-space-space-twounits);
font-size: 20px; font-size: 18px;
max-width: 1080px;
align-self: center; align-self: center;
margin-top: var(--dl-space-space-twounits); margin-top: var(--dl-space-space-twounits);
font-family: Poppins; font-family: Poppins;
line-height: 28px; line-height: 28px;
padding-top: var(--dl-space-space-oneandhalfunits); padding-top: var(--dl-space-space-oneandhalfunits);
padding-left: var(--dl-space-space-oneandhalfunits); padding-left: var(--dl-space-space-oneandhalfunits);
border-radius: 20px;
padding-right: var(--dl-space-space-oneandhalfunits); padding-right: var(--dl-space-space-oneandhalfunits);
padding-bottom: var(--dl-space-space-oneandhalfunits); padding-bottom: var(--dl-space-space-oneandhalfunits);
background-color: rgba(41, 41, 41, 0.8); background-color: rgba(41, 41, 41, 0.8);
} }
.letzte-gelegenheit1-text004 { .letzte-gelegenheit-text004 {
font-weight: 700; font-weight: 700;
} }
.letzte-gelegenheit1-text009 { .letzte-gelegenheit-text009 {
font-weight: 700; font-weight: 700;
} }
.letzte-gelegenheit1-text030 { .letzte-gelegenheit-text030 {
font-weight: 700; font-weight: 700;
} }
.letzte-gelegenheit1-text041 { .letzte-gelegenheit-text041 {
font-weight: 700; font-weight: 700;
} }
.letzte-gelegenheit1-text046 { .letzte-gelegenheit-text046 {
font-weight: 700; font-weight: 700;
} }
.letzte-gelegenheit1-text051 { .letzte-gelegenheit-text058 {
font-weight: 700; font-weight: 700;
} }
.letzte-gelegenheit1-text058 { .letzte-gelegenheit-text072 {
font-weight: 700; font-weight: 700;
} }
.letzte-gelegenheit1-text072 { .letzte-gelegenheit-text077 {
font-weight: 700; font-weight: 700;
} }
.letzte-gelegenheit1-text077 { .letzte-gelegenheit-text094 {
font-weight: 700; font-weight: 700;
} }
.letzte-gelegenheit1-text078 { .letzte-gelegenheit-text119 {
font-weight: 700; font-weight: 700;
} }
.letzte-gelegenheit1-text080 { .letzte-gelegenheit-text128 {
font-weight: 700;
}
.letzte-gelegenheit1-text083 {
font-weight: 700;
}
.letzte-gelegenheit1-text086 {
font-weight: 700;
}
.letzte-gelegenheit1-text089 {
font-weight: 700;
}
.letzte-gelegenheit1-text092 {
font-weight: 700;
}
.letzte-gelegenheit1-text094 {
font-weight: 700;
}
.letzte-gelegenheit1-text117 {
font-weight: 700;
}
.letzte-gelegenheit1-text118 {
font-weight: 700;
}
.letzte-gelegenheit1-text119 {
font-weight: 700;
}
.letzte-gelegenheit1-text120 {
font-weight: 700;
}
.letzte-gelegenheit1-text121 {
font-style: normal;
font-weight: 400;
}
.letzte-gelegenheit1-navlink {
font-weight: 500;
text-decoration: underline;
}
.letzte-gelegenheit1-text122 {
font-style: normal;
font-weight: 400;
}
.letzte-gelegenheit1-text123 {
font-weight: 700;
}
.letzte-gelegenheit1-text124 {
font-weight: 700;
}
.letzte-gelegenheit1-text125 {
font-weight: 700;
}
.letzte-gelegenheit1-text134 {
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
.letzte-gelegenheit1-text137 { .letzte-gelegenheit-text131 {
font-weight: 700; font-weight: 700;
} }
.letzte-gelegenheit1-container2 { .letzte-gelegenheit-container2 {
flex: 0 0 auto; flex: 0 0 auto;
width: 200px; width: 200px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
} }
.letzte-gelegenheit1-description1 { .letzte-gelegenheit-description1 {
color: rgb(194, 198, 204); color: rgb(194, 198, 204);
width: auto; width: auto;
align-self: center; align-self: center;
@ -524,11 +446,11 @@ export default {
font-weight: 700; font-weight: 700;
line-height: 28px; line-height: 28px;
} }
.letzte-gelegenheit1-get-started { .letzte-gelegenheit-get-started {
display: flex; display: flex;
background-color: #80FF44; background-color: #80FF44;
} }
.letzte-gelegenheit1-text142 { .letzte-gelegenheit-text136 {
color: rgb(12, 16, 12); color: rgb(12, 16, 12);
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
@ -537,34 +459,114 @@ export default {
line-height: 24px; line-height: 24px;
} }
@media(max-width: 991px) { @media(max-width: 991px) {
.letzte-gelegenheit1-heading { .letzte-gelegenheit-heading {
text-align: left; text-align: left;
} }
.letzte-gelegenheit1-caption { .letzte-gelegenheit-caption {
text-align: left; text-align: left;
} }
.letzte-gelegenheit1-get-started { .letzte-gelegenheit-get-started {
flex: 1; flex: 1;
} }
} }
@media(max-width: 767px) { @media(max-width: 767px) {
.letzte-gelegenheit1-heading { .letzte-gelegenheit-heading {
font-size: 40px; font-size: 40px;
} }
.letzte-gelegenheit1-caption { .letzte-gelegenheit-caption {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 16px; font-size: 16px;
font-family: Poppins; font-family: Poppins;
line-height: 24px; line-height: 24px;
} }
.letzte-gelegenheit1-get-started { .letzte-gelegenheit-container1 {
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-top: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-unit); padding-bottom: var(--dl-space-space-unit);
} }
} }
@media(max-width: 479px) { @media(max-width: 479px) {
.letzte-gelegenheit1-heading { .letzte-gelegenheit-heading {
max-width: 280px; 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-text004 {
font-weight: 700;
}
.letzte-gelegenheit-text009 {
font-weight: 700;
}
.letzte-gelegenheit-text030 {
font-weight: 700;
}
.letzte-gelegenheit-text041 {
font-weight: 700;
}
.letzte-gelegenheit-text046 {
font-weight: 700;
}
.letzte-gelegenheit-text053 {
font-weight: 700;
}
.letzte-gelegenheit-text058 {
font-weight: 700;
}
.letzte-gelegenheit-text072 {
font-weight: 700;
}
.letzte-gelegenheit-text077 {
font-weight: 700;
}
.letzte-gelegenheit-text078 {
font-weight: 700;
}
.letzte-gelegenheit-text080 {
font-weight: 700;
}
.letzte-gelegenheit-text083 {
font-weight: 700;
}
.letzte-gelegenheit-text086 {
font-weight: 700;
}
.letzte-gelegenheit-text089 {
font-weight: 700;
}
.letzte-gelegenheit-text092 {
font-weight: 700;
}
.letzte-gelegenheit-text094 {
font-weight: 700;
}
.letzte-gelegenheit-text117 {
font-weight: 700;
}
.letzte-gelegenheit-text118 {
font-weight: 700;
}
.letzte-gelegenheit-text119 {
font-weight: 700;
}
.letzte-gelegenheit-text128 {
font-style: normal;
font-weight: 500;
text-decoration: underline;
}
.letzte-gelegenheit-text131 {
font-weight: 700;
}
} }
</style> </style>

View file

@ -1,14 +1,14 @@
<template> <template>
<div class="rosenteufel1-container"> <div class="rosenteufel-container">
<app-navbar rootClassName="navbar-root-class-name"></app-navbar> <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
<h1 class="rosenteufel1-heading">Rosenteufel</h1> <h1 class="rosenteufel-heading">Rosenteufel</h1>
<span class="rosenteufel1-caption"> <span class="rosenteufel-caption">
<span>Kurzgeschichte</span> <span>Kurzgeschichte</span>
<br /> <br />
</span> </span>
<div class="rosenteufel1-container1"> <div class="rosenteufel-container1">
<span class="rosenteufel1-text002"> <span class="rosenteufel-text002">
<span class="rosenteufel1-text003"> <span class="rosenteufel-text003">
Ich erzähl euch ein Gschicht von wahr, so wahr wie ihr danach nicht 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 gwollt. Ein Gschicht die erzähl als einzger überlebend: Mein Gschicht. S
wart im letzten Jahr... wart im letzten Jahr...
@ -285,37 +285,37 @@
zuher. Sie starrten; auch kalt und hilflos wie Kind. Ich schritt nach 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. vorn: In die Händ des Toten seh, weiss Ros. Ins Gesicht des Toten blick.
Beulen ziertens. Hässliche Beulen. Der Teufel aber wart woanders... Beulen ziertens. Hässliche Beulen. Der Teufel aber wart woanders...
<span v-html="rawju54"></span> <span v-html="rawp1z0"></span>
</span> </span>
</span> </span>
</div> </div>
<app-footer rootClassName="footer-root-class-name1"></app-footer> <app-kontakt rootClassName="kontakt-root-class-name1"></app-kontakt>
</div> </div>
</template> </template>
<script> <script>
import AppNavbar from '../components/navbar' import AppNavigation from '../components/navigation'
import AppFooter from '../components/footer' import AppKontakt from '../components/kontakt'
export default { export default {
name: 'Rosenteufel1', name: 'Rosenteufel',
components: { components: {
AppNavbar, AppNavigation,
AppFooter, AppKontakt,
}, },
data() { data() {
return { return {
rawju54: ' ', rawp1z0: ' ',
} }
}, },
metaInfo: { metaInfo: {
title: 'Rosenteufel1 - Open Visor', title: 'Rosenteufel - Open Visor',
meta: [ meta: [
{ {
property: 'og:title', property: 'og:title',
content: 'Rosenteufel1 - Open Visor', content: 'Rosenteufel - Open Visor',
}, },
], ],
}, },
@ -323,7 +323,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.rosenteufel1-container { .rosenteufel-container {
width: 100%; width: 100%;
display: flex; display: flex;
overflow: auto; overflow: auto;
@ -335,7 +335,7 @@ export default {
background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg"); background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
background-position: bottom right; background-position: bottom right;
} }
.rosenteufel1-heading { .rosenteufel-heading {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 64px; font-size: 64px;
align-self: center; align-self: center;
@ -343,49 +343,49 @@ export default {
font-family: Poppins; font-family: Poppins;
font-weight: 600; font-weight: 600;
} }
.rosenteufel1-caption { .rosenteufel-caption {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 20px; font-size: 20px;
align-self: center; align-self: center;
font-family: Poppins; font-family: Poppins;
line-height: 30px; line-height: 30px;
} }
.rosenteufel1-container1 { .rosenteufel-container1 {
flex: 0 0 auto; flex: 0 0 auto;
width: 100%;
height: auto; height: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.rosenteufel1-text002 { .rosenteufel-text002 {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
width: 100%; width: 90%;
font-size: 20px; font-size: 18px;
max-width: 1080px; max-width: 1080px;
margin-top: var(--dl-space-space-twounits); margin-top: var(--dl-space-space-twounits);
padding-top: var(--dl-space-space-twounits); padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-twounits); padding-left: var(--dl-space-space-twounits);
border-radius: 20px;
padding-right: var(--dl-space-space-twounits); padding-right: var(--dl-space-space-twounits);
padding-bottom: var(--dl-space-space-twounits); padding-bottom: var(--dl-space-space-twounits);
background-color: rgba(41, 41, 41, 0.8); background-color: rgba(41, 41, 41, 0.8);
} }
.rosenteufel1-text003 { .rosenteufel-text003 {
font-style: italic; font-style: italic;
} }
@media(max-width: 991px) { @media(max-width: 991px) {
.rosenteufel1-heading { .rosenteufel-heading {
text-align: left; text-align: left;
} }
.rosenteufel1-caption { .rosenteufel-caption {
text-align: left; text-align: left;
} }
} }
@media(max-width: 767px) { @media(max-width: 767px) {
.rosenteufel1-heading { .rosenteufel-heading {
font-size: 40px; font-size: 40px;
} }
.rosenteufel1-caption { .rosenteufel-caption {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 16px; font-size: 16px;
font-family: Poppins; font-family: Poppins;
@ -393,8 +393,15 @@ export default {
} }
} }
@media(max-width: 479px) { @media(max-width: 479px) {
.rosenteufel1-heading { .rosenteufel-heading {
max-width: 280px; max-width: 280px;
} }
.rosenteufel-container1 {
width: 90%;
}
.rosenteufel-text002 {
width: 90%;
max-width: 1080px;
}
} }
</style> </style>

View file

@ -1,15 +1,15 @@
<template> <template>
<div class="ssse-trume1-container"> <div class="ssse-trume-container">
<app-navbar rootClassName="navbar-root-class-name"></app-navbar> <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
<h1 class="ssse-trume1-heading"> <h1 class="ssse-trume-heading">
<span>Süsse Träume</span> <span>Süsse Träume</span>
<br /> <br />
</h1> </h1>
<span class="ssse-trume1-caption"> <span class="ssse-trume-caption">
<span>Fantasy Mini-LARP</span> <span>Fantasy Mini-LARP</span>
<br /> <br />
</span> </span>
<p class="ssse-trume1-description"> <p class="ssse-trume-description">
<span> <span>
&quot;Weisst du, wer du bist? Was du bereust, befürchtest, vergessen &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 möchtest? Was du erreichen möchtest und was dir alles recht ist um dies zu
@ -27,26 +27,26 @@
</span> </span>
<br /> <br />
</p> </p>
<app-footer rootClassName="footer-root-class-name"></app-footer> <app-kontakt rootClassName="kontakt-root-class-name"></app-kontakt>
</div> </div>
</template> </template>
<script> <script>
import AppNavbar from '../components/navbar' import AppNavigation from '../components/navigation'
import AppFooter from '../components/footer' import AppKontakt from '../components/kontakt'
export default { export default {
name: 'SsseTrume1', name: 'SsseTrume',
components: { components: {
AppNavbar, AppNavigation,
AppFooter, AppKontakt,
}, },
metaInfo: { metaInfo: {
title: 'Ssse-Trume1 - Open Visor', title: 'Ssse-Trume - Open Visor',
meta: [ meta: [
{ {
property: 'og:title', property: 'og:title',
content: 'Ssse-Trume1 - Open Visor', content: 'Ssse-Trume - Open Visor',
}, },
], ],
}, },
@ -54,7 +54,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.ssse-trume1-container { .ssse-trume-container {
width: 100%; width: 100%;
display: flex; display: flex;
overflow: auto; overflow: auto;
@ -65,23 +65,24 @@ export default {
background-size: cover; background-size: cover;
background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg"); background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
} }
.ssse-trume1-heading { .ssse-trume-heading {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 64px; font-size: 64px;
font-style: normal; font-style: normal;
font-family: Poppins; font-family: Poppins;
font-weight: 600; font-weight: 600;
} }
.ssse-trume1-caption { .ssse-trume-caption {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 20px; font-size: 20px;
font-family: Poppins; font-family: Poppins;
line-height: 30px; line-height: 30px;
} }
.ssse-trume1-description { .ssse-trume-description {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
width: 1080px; width: 90%;
font-size: 20px; font-size: 18px;
max-width: 1080px;
align-self: center; align-self: center;
font-style: normal; font-style: normal;
margin-top: var(--dl-space-space-twounits); margin-top: var(--dl-space-space-twounits);
@ -90,23 +91,21 @@ export default {
line-height: 28px; line-height: 28px;
padding-top: var(--dl-space-space-oneandhalfunits); padding-top: var(--dl-space-space-oneandhalfunits);
padding-left: var(--dl-space-space-oneandhalfunits); padding-left: var(--dl-space-space-oneandhalfunits);
border-radius: 20px;
padding-right: var(--dl-space-space-oneandhalfunits); padding-right: var(--dl-space-space-oneandhalfunits);
padding-bottom: var(--dl-space-space-oneandhalfunits); padding-bottom: var(--dl-space-space-oneandhalfunits);
background-color: rgba(41, 41, 41, 0.8); background-color: rgba(41, 41, 41, 0.8);
} }
@media(max-width: 991px) { @media(max-width: 991px) {
.ssse-trume1-heading { .ssse-trume-caption {
text-align: left;
}
.ssse-trume1-caption {
text-align: left; text-align: left;
} }
} }
@media(max-width: 767px) { @media(max-width: 767px) {
.ssse-trume1-heading { .ssse-trume-heading {
font-size: 40px; font-size: 40px;
} }
.ssse-trume1-caption { .ssse-trume-caption {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 16px; font-size: 16px;
font-family: Poppins; font-family: Poppins;
@ -114,8 +113,9 @@ export default {
} }
} }
@media(max-width: 479px) { @media(max-width: 479px) {
.ssse-trume1-heading { .ssse-trume-heading {
max-width: 280px; max-width: auto;
text-align: center;
} }
} }
</style> </style>