Initial commit
This commit is contained in:
commit
3a130ba5a9
6
babel.config.js
Normal file
6
babel.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
]
|
||||
}
|
||||
31
package.json
Normal file
31
package.json
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "mitoffenemvisier",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.6.7",
|
||||
"vue-router": "^3.0.2",
|
||||
"vue-meta": "^2.2.1",
|
||||
"dangerous-html": "0.1.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/babel-preset-app": "^5.0.8",
|
||||
"@vue/cli-plugin-babel": "^5.0.4",
|
||||
"@vue/cli-service": "^5.0.8",
|
||||
"vue-template-compiler": "^2.6.7"
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
46
public/index.html
Normal file
46
public/index.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>MitOffenemVisier</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta charset="utf-8" />
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<style data-tag="reset-style-sheet">
|
||||
html { line-height: 1.15;}body { margin: 0;}* { box-sizing: border-box; border-width: 0; border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption { margin: 0; padding: 0;}button { background-color: transparent;}button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}button,select { text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus { outline: 1px dotted ButtonText;}a { color: inherit; text-decoration: inherit;}input { padding: 2px 4px;}img { display: block;}html { scroll-behavior: smooth }
|
||||
</style>
|
||||
<style data-tag="default-style-sheet">
|
||||
html {
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-weight: 400;
|
||||
font-style:normal;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
line-height: 1.15;
|
||||
color: var(--dl-color-gray-black);
|
||||
background-color: var(--dl-color-gray-white);
|
||||
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
|
||||
data-tag="font"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
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"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- Your body code here -->
|
||||
<!-- <script type="text/javascript"> ... </script> -->
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/playground_assets/hamburger-200h.png
Normal file
BIN
public/playground_assets/hamburger-200h.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 B |
BIN
public/playground_assets/logo_mitoffenemvisier_bw_png-200h.png
Normal file
BIN
public/playground_assets/logo_mitoffenemvisier_bw_png-200h.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7 KiB |
BIN
public/playground_assets/pexels-luca-dross-5976404-1500w.jpg
Normal file
BIN
public/playground_assets/pexels-luca-dross-5976404-1500w.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
4
src/App.vue
Normal file
4
src/App.vue
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
|
||||
<template>
|
||||
<router-view/>
|
||||
</template>
|
||||
245
src/components/accordion.vue
Normal file
245
src/components/accordion.vue
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
<template>
|
||||
<div class="accordion-accordion" v-bind:class="rootClassName">
|
||||
<div data-role="accordion-container" class="accordion-element">
|
||||
<div class="accordion-details">
|
||||
<span class="accordion-text">{{ text }}</span>
|
||||
<span data-role="accordion-content" class="accordion-text1">
|
||||
{{ text1 }}
|
||||
</span>
|
||||
</div>
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
data-role="accordion-icon"
|
||||
class="accordion-icon"
|
||||
>
|
||||
<path d="M366 708l196-196-196-196 60-60 256 256-256 256z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
data-role="accordion-container"
|
||||
class="accordion-element1 accordion-element"
|
||||
>
|
||||
<div class="accordion-details1">
|
||||
<span class="accordion-text2">{{ text2 }}</span>
|
||||
<span data-role="accordion-content" class="accordion-text3">
|
||||
{{ text3 }}
|
||||
</span>
|
||||
</div>
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
data-role="accordion-icon"
|
||||
class="accordion-icon2"
|
||||
>
|
||||
<path d="M366 708l196-196-196-196 60-60 256 256-256 256z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
data-role="accordion-container"
|
||||
class="accordion-element2 accordion-element"
|
||||
>
|
||||
<div class="accordion-details2">
|
||||
<span class="accordion-text4">{{ text4 }}</span>
|
||||
<span data-role="accordion-content" class="accordion-text5">
|
||||
{{ text5 }}
|
||||
</span>
|
||||
</div>
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
data-role="accordion-icon"
|
||||
class="accordion-icon4"
|
||||
>
|
||||
<path d="M366 708l196-196-196-196 60-60 256 256-256 256z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Accordion',
|
||||
props: {
|
||||
text2: {
|
||||
type: String,
|
||||
default: 'Nemo enim ipsam voluptatem quia voluptas',
|
||||
},
|
||||
text1: {
|
||||
type: String,
|
||||
default:
|
||||
'Sed do eiusmod tempor incididunt ut labore et dolore magna aliquat enim ad minim veniam, quis nostrud',
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'Aliquam quaerat voluptatem',
|
||||
},
|
||||
text4: {
|
||||
type: String,
|
||||
default: 'Magnam aliquam quaerat voluptatem',
|
||||
},
|
||||
text5: {
|
||||
type: String,
|
||||
default:
|
||||
'Sed do eiusmod tempor incididunt ut labore et dolore magna aliquat enim ad minim veniam, quis nostrud',
|
||||
},
|
||||
text3: {
|
||||
type: String,
|
||||
default:
|
||||
'Sed do eiusmod tempor incididunt ut labore et dolore magna aliquat enim ad minim veniam, quis nostrud',
|
||||
},
|
||||
rootClassName: String,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.accordion-accordion {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.accordion-element {
|
||||
width: 640px;
|
||||
user-select: none;
|
||||
}
|
||||
.accordion-details {
|
||||
gap: var(--dl-space-space-halfunit);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.accordion-text {
|
||||
color: var(--dl-color-gray-white);
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
max-width: 535px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
line-height: 27px;
|
||||
}
|
||||
.accordion-text1 {
|
||||
color: var(--dl-color-gray-900);
|
||||
width: 100%;
|
||||
max-width: 535px;
|
||||
font-family: Poppins;
|
||||
line-height: 24px;
|
||||
user-select: text;
|
||||
}
|
||||
.accordion-icon {
|
||||
fill: var(--dl-color-gray-white);
|
||||
width: var(--dl-size-size-xsmall);
|
||||
height: var(--dl-size-size-xsmall);
|
||||
}
|
||||
.accordion-element1 {
|
||||
width: 640px;
|
||||
user-select: none;
|
||||
}
|
||||
.accordion-details1 {
|
||||
gap: var(--dl-space-space-halfunit);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.accordion-text2 {
|
||||
color: var(--dl-color-gray-white);
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
max-width: 535px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
line-height: 27px;
|
||||
}
|
||||
.accordion-text3 {
|
||||
color: var(--dl-color-gray-900);
|
||||
width: 100%;
|
||||
max-width: 535px;
|
||||
font-family: Poppins;
|
||||
line-height: 24px;
|
||||
user-select: text;
|
||||
}
|
||||
.accordion-icon2 {
|
||||
fill: var(--dl-color-gray-white);
|
||||
width: var(--dl-size-size-xsmall);
|
||||
height: var(--dl-size-size-xsmall);
|
||||
}
|
||||
.accordion-element2 {
|
||||
width: 640px;
|
||||
user-select: none;
|
||||
}
|
||||
.accordion-details2 {
|
||||
gap: var(--dl-space-space-halfunit);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.accordion-text4 {
|
||||
color: var(--dl-color-gray-white);
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
max-width: 535px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
line-height: 27px;
|
||||
}
|
||||
.accordion-text5 {
|
||||
color: var(--dl-color-gray-900);
|
||||
width: 100%;
|
||||
max-width: 535px;
|
||||
font-family: Poppins;
|
||||
line-height: 24px;
|
||||
user-select: text;
|
||||
}
|
||||
.accordion-icon4 {
|
||||
fill: var(--dl-color-gray-white);
|
||||
width: var(--dl-size-size-xsmall);
|
||||
height: var(--dl-size-size-xsmall);
|
||||
}
|
||||
|
||||
@media(max-width: 767px) {
|
||||
.accordion-element {
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
}
|
||||
.accordion-text {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.accordion-element1 {
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
}
|
||||
.accordion-text2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.accordion-element2 {
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
}
|
||||
.accordion-text4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media(max-width: 479px) {
|
||||
.accordion-element {
|
||||
width: 350px;
|
||||
max-width: auto;
|
||||
}
|
||||
.accordion-element1 {
|
||||
width: 350px;
|
||||
max-width: auto;
|
||||
}
|
||||
.accordion-element2 {
|
||||
width: 350px;
|
||||
max-width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
src/components/buttons.vue
Normal file
79
src/components/buttons.vue
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<div class="buttons-buttons">
|
||||
<div class="buttons-get-started button">
|
||||
<span class="buttons-text">{{ Text }}</span>
|
||||
</div>
|
||||
<div class="buttons-get-started1 button">
|
||||
<span class="buttons-text1">{{ Text1 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Buttons',
|
||||
props: {
|
||||
Text: {
|
||||
type: String,
|
||||
default: 'Get started',
|
||||
},
|
||||
Text1: {
|
||||
type: String,
|
||||
default: 'View features',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.buttons-buttons {
|
||||
gap: var(--dl-space-space-unit);
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
.buttons-get-started {
|
||||
display: flex;
|
||||
background-color: #ffff00;
|
||||
}
|
||||
.buttons-text {
|
||||
color: #0C100C;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
.buttons-get-started1 {
|
||||
background-color: #2A2A2A;
|
||||
}
|
||||
.buttons-text1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
.buttons-buttons {
|
||||
width: 100%;
|
||||
}
|
||||
.buttons-get-started {
|
||||
flex: 1;
|
||||
}
|
||||
.buttons-get-started1 {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px) {
|
||||
.buttons-get-started {
|
||||
padding-top: var(--dl-space-space-unit);
|
||||
padding-bottom: var(--dl-space-space-unit);
|
||||
}
|
||||
.buttons-get-started1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
131
src/components/ein-orden-fr-eine-gute-tat.vue
Normal file
131
src/components/ein-orden-fr-eine-gute-tat.vue
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<div class="ein-orden-fr-eine-gute-tat-container" v-bind:class="rootClassName">
|
||||
<section class="ein-orden-fr-eine-gute-tat-card">
|
||||
<main class="ein-orden-fr-eine-gute-tat-content">
|
||||
<header class="ein-orden-fr-eine-gute-tat-header">
|
||||
<h1 class="ein-orden-fr-eine-gute-tat-header1">{{ Header }}</h1>
|
||||
</header>
|
||||
<p class="ein-orden-fr-eine-gute-tat-description">{{ Description }}</p>
|
||||
<router-link
|
||||
to="/ein-orden-fr-eine-gute-tat1"
|
||||
class="ein-orden-fr-eine-gute-tat-navlink"
|
||||
>
|
||||
<div class="ein-orden-fr-eine-gute-tat-button">
|
||||
<p class="ein-orden-fr-eine-gute-tat-text">{{ Button }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</main>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EinOrdenFrEineGuteTat',
|
||||
props: {
|
||||
ButtonLink: String,
|
||||
Button: {
|
||||
type: String,
|
||||
default: 'Lesen ->',
|
||||
},
|
||||
Header: {
|
||||
type: String,
|
||||
default: 'Ein Orden für eine gute Tat',
|
||||
},
|
||||
Description: {
|
||||
type: String,
|
||||
default:
|
||||
'"Ein brauner Schneehase besucht ein ein Rothörnchen und ein Grauhörnchen im vom Herbst bunt gefärbten Wald. Er hat einen Orden, den er für eine gute Tat vergeben möchte. Doch welches Hörnchen schafft es, diesen zu bekommen?" Diese Kurzgeschichte für Kinder und Eltern stellt spielerisch eine moralische Frage dar, dessen Antwort das Elternteil oder das Kind selbst finden muss. Es soll das Kind unterhalten und zugleich mit einer einfachen aber doch spannenden Fragestellung bilden.',
|
||||
},
|
||||
rootClassName: String,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ein-orden-fr-eine-gute-tat-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat-card {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: var(--dl-space-space-threeunits);
|
||||
position: relative;
|
||||
align-items: flex-start;
|
||||
border-radius: 20px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
background-color: rgba(41, 41, 41, 0.8);
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat-content {
|
||||
gap: var(--dl-space-space-twounits);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat-header1 {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
line-height: 36px;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat-description {
|
||||
color: #ffffff;
|
||||
font-family: Poppins;
|
||||
line-height: 28px;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat-navlink {
|
||||
display: contents;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat-button {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
align-items: center;
|
||||
border-color: #ffff00;
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-halfunit);
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat-button:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat-text {
|
||||
color: #ffff00;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat-root-class-name {
|
||||
height: auto;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat-root-class-name1 {
|
||||
height: auto;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
.ein-orden-fr-eine-gute-tat-card {
|
||||
padding-top: var(--dl-space-space-twounits);
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
padding-bottom: var(--dl-space-space-twounits);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
src/components/footer.vue
Normal file
120
src/components/footer.vue
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<footer class="footer-footer" v-bind:class="rootClassName">
|
||||
<section class="footer-dotted-line"></section>
|
||||
<div class="footer-category">
|
||||
<div class="footer-header">
|
||||
<span class="footer-text footer-header">{{ Text }}</span>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<span class="footer-text1 footer-link">{{ Text1 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="footer-dotted-line1"></section>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Footer',
|
||||
props: {
|
||||
Text: {
|
||||
type: String,
|
||||
default: 'Kontakt',
|
||||
},
|
||||
rootClassName: String,
|
||||
Text1: {
|
||||
type: String,
|
||||
default: 'hermann@mitoffenemvisier.com',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer-footer {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
padding-top: 120px;
|
||||
border-color: var(--dl-color-gray-black);
|
||||
border-width: 0px;
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-threeunits);
|
||||
justify-content: center;
|
||||
}
|
||||
.footer-dotted-line {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-color: rgba(200,200,200,0.8);
|
||||
border-style: dashed;
|
||||
border-width: 0px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-top-width: 3px;
|
||||
}
|
||||
.footer-category {
|
||||
gap: var(--dl-space-space-unit);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-width: 0px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-top-width: 0px;
|
||||
}
|
||||
.footer-header {
|
||||
gap: var(--dl-space-space-unit);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.footer-text {
|
||||
font-size: 36px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.footer-links {
|
||||
gap: var(--dl-space-space-unit);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.footer-text1 {
|
||||
color: #ffff00;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.footer-dotted-line1 {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-color: rgba(200,200,200,0.8);
|
||||
border-style: dashed;
|
||||
border-width: 0px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-top-width: 3px;
|
||||
}
|
||||
|
||||
@media(max-width: 991px) {
|
||||
.footer-dotted-line {
|
||||
display: none;
|
||||
}
|
||||
.footer-dotted-line1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
src/components/letzte-gelegenheit-run1.vue
Normal file
107
src/components/letzte-gelegenheit-run1.vue
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<div class="letzte-gelegenheit-run1-container">
|
||||
<h2 class="letzte-gelegenheit-run1-heading">{{ Name }}</h2>
|
||||
<p class="letzte-gelegenheit-run1-description">{{ Datum }}</p>
|
||||
<p class="letzte-gelegenheit-run1-description1">{{ Standort }}</p>
|
||||
<router-link
|
||||
to="/letzte-gelegenheit1"
|
||||
class="letzte-gelegenheit-run1-navlink"
|
||||
>
|
||||
<div class="letzte-gelegenheit-run1-explore-more">
|
||||
<p class="letzte-gelegenheit-run1-text">{{ Anmeldung }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LetzteGelegenheitRun1',
|
||||
props: {
|
||||
Anmeldung: {
|
||||
type: String,
|
||||
default: 'Mehr ->',
|
||||
},
|
||||
Standort: {
|
||||
type: String,
|
||||
default: 'Zivilschutzanlage Sonnenblock Chilegass 8, 8484 Weisslingen',
|
||||
},
|
||||
Datum: {
|
||||
type: String,
|
||||
default: '1. April 2023, 10:00 Uhr bis 2. April 2023, 14:00 Uhr',
|
||||
},
|
||||
Name: {
|
||||
type: String,
|
||||
default: 'Letzte Gelegenheit Run 1 (Schweiz)',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.letzte-gelegenheit-run1-container {
|
||||
gap: var(--dl-space-space-unit);
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.letzte-gelegenheit-run1-heading {
|
||||
color: rgb(255, 255, 255);
|
||||
width: 496px;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 500;
|
||||
margin-left: var(--dl-space-space-unit);
|
||||
}
|
||||
.letzte-gelegenheit-run1-description {
|
||||
color: #ffffff;
|
||||
width: 201px;
|
||||
height: 58px;
|
||||
font-family: Poppins;
|
||||
line-height: 28px;
|
||||
}
|
||||
.letzte-gelegenheit-run1-description1 {
|
||||
color: #ffffff;
|
||||
width: 275px;
|
||||
font-family: Poppins;
|
||||
line-height: 28px;
|
||||
}
|
||||
.letzte-gelegenheit-run1-navlink {
|
||||
display: contents;
|
||||
}
|
||||
.letzte-gelegenheit-run1-explore-more {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
width: 61px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
align-items: center;
|
||||
border-color: #FFFF00;
|
||||
margin-right: var(--dl-space-space-unit);
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-halfunit);
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.letzte-gelegenheit-run1-explore-more:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.letzte-gelegenheit-run1-text {
|
||||
color: #FFFF00;
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
@media(max-width: 767px) {
|
||||
.letzte-gelegenheit-run1-heading {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
112
src/components/letzte-gelegenheit-run2.vue
Normal file
112
src/components/letzte-gelegenheit-run2.vue
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<div class="letzte-gelegenheit-run2-container" v-bind:class="rootClassName">
|
||||
<h2 class="letzte-gelegenheit-run2-heading">{{ Name }}</h2>
|
||||
<p class="letzte-gelegenheit-run2-description">{{ Datum }}</p>
|
||||
<p class="letzte-gelegenheit-run2-description1">{{ Standort }}</p>
|
||||
<router-link
|
||||
to="/letzte-gelegenheit1"
|
||||
class="letzte-gelegenheit-run2-navlink"
|
||||
>
|
||||
<div class="letzte-gelegenheit-run2-explore-more">
|
||||
<p class="letzte-gelegenheit-run2-text">{{ Mehr }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LetzteGelegenheitRun2',
|
||||
props: {
|
||||
Datum: {
|
||||
type: String,
|
||||
default: '29. April 2023, 10:00 Uhr bis 30. April 2023, 14:00 Uhr',
|
||||
},
|
||||
Standort: {
|
||||
type: String,
|
||||
default: 'Waldritter e.V. _ _ _ Ewaldstraße 20, 45699 Herten',
|
||||
},
|
||||
Name: {
|
||||
type: String,
|
||||
default: 'Letzte Gelegenheit Run 2 (Deutschland)',
|
||||
},
|
||||
Mehr: {
|
||||
type: String,
|
||||
default: 'Mehr ->',
|
||||
},
|
||||
rootClassName: String,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.letzte-gelegenheit-run2-container {
|
||||
gap: var(--dl-space-space-unit);
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.letzte-gelegenheit-run2-heading {
|
||||
color: rgb(255, 255, 255);
|
||||
width: 507px;
|
||||
height: 31px;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 500;
|
||||
margin-left: var(--dl-space-space-unit);
|
||||
}
|
||||
.letzte-gelegenheit-run2-description {
|
||||
color: #ffffff;
|
||||
width: 229px;
|
||||
height: 58px;
|
||||
font-family: Poppins;
|
||||
line-height: 28px;
|
||||
}
|
||||
.letzte-gelegenheit-run2-description1 {
|
||||
color: #ffffff;
|
||||
width: 251px;
|
||||
font-family: Poppins;
|
||||
line-height: 28px;
|
||||
margin-right: var(--dl-space-space-unit);
|
||||
}
|
||||
.letzte-gelegenheit-run2-navlink {
|
||||
display: contents;
|
||||
}
|
||||
.letzte-gelegenheit-run2-explore-more {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
width: 63px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
align-items: center;
|
||||
border-color: #ffff00;
|
||||
margin-right: var(--dl-space-space-unit);
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-halfunit);
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.letzte-gelegenheit-run2-explore-more:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.letzte-gelegenheit-run2-text {
|
||||
color: #ffff00;
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
|
||||
@media(max-width: 767px) {
|
||||
.letzte-gelegenheit-run2-heading {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
127
src/components/letzte-gelegenheit.vue
Normal file
127
src/components/letzte-gelegenheit.vue
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<section class="letzte-gelegenheit-card" v-bind:class="rootClassName">
|
||||
<main class="letzte-gelegenheit-content">
|
||||
<header class="letzte-gelegenheit-header">
|
||||
<h1 class="letzte-gelegenheit-header1">{{ Header }}</h1>
|
||||
</header>
|
||||
<p class="letzte-gelegenheit-description">{{ Description }}</p>
|
||||
<router-link to="/letzte-gelegenheit1" class="letzte-gelegenheit-navlink">
|
||||
<div class="letzte-gelegenheit-button">
|
||||
<p class="letzte-gelegenheit-text">{{ Mehr }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</main>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LetzteGelegenheit',
|
||||
props: {
|
||||
rootClassName: String,
|
||||
Mehr: {
|
||||
type: String,
|
||||
default: 'Mehr ->',
|
||||
},
|
||||
ButtonLink: String,
|
||||
Description: {
|
||||
type: String,
|
||||
default:
|
||||
'Das Nordic LARP “Letzte Gelegenheit” spielt in der heutigen Zeit in einer alternativen Realität: Vor 63 Tagen fiel plötzlich der Strom aus und dichte Nebelschwaden überzogen einige Städte. Sirenen führten die Menschen in Bunker. Radios, die noch funktionierten, meldeten die sofortige Mobilisierung der Milizarmee und des Zivilschutzes. Was genau passierte, ist noch immer ungeklärt. Im Bunker des Gefängnisses Schwarzbach versucht man den Alltag beizubehalten, doch langsam gehen die Ressourcen aus und die Lage verschärft sich.',
|
||||
},
|
||||
Header: {
|
||||
type: String,
|
||||
default: 'Letzte Gelegenheit',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.letzte-gelegenheit-card {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: var(--dl-space-space-threeunits);
|
||||
position: relative;
|
||||
align-items: flex-start;
|
||||
border-radius: 20px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
background-color: rgba(41, 41, 41, 0.8);
|
||||
}
|
||||
.letzte-gelegenheit-content {
|
||||
gap: var(--dl-space-space-twounits);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.letzte-gelegenheit-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.letzte-gelegenheit-header1 {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
line-height: 36px;
|
||||
}
|
||||
.letzte-gelegenheit-description {
|
||||
color: #ffffff;
|
||||
font-family: Poppins;
|
||||
line-height: 28px;
|
||||
}
|
||||
.letzte-gelegenheit-navlink {
|
||||
display: contents;
|
||||
}
|
||||
.letzte-gelegenheit-button {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
align-items: center;
|
||||
border-color: #ffff00;
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-halfunit);
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.letzte-gelegenheit-button:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.letzte-gelegenheit-text {
|
||||
color: #ffff00;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
.letzte-gelegenheit-root-class-name {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.letzte-gelegenheit-root-class-name10 {
|
||||
width: 100%;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
.letzte-gelegenheit-card {
|
||||
padding-top: var(--dl-space-space-twounits);
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
padding-bottom: var(--dl-space-space-twounits);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
322
src/components/navbar.vue
Normal file
322
src/components/navbar.vue
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
<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-nav-content">
|
||||
<div class="navbar-nav-links">
|
||||
<router-link to="/" class="navbar-link nav-link">Home</router-link>
|
||||
<router-link to="/letzte-gelegenheit1" class="navbar-link1 nav-link">
|
||||
<span>Letzte Gelegenheit</span>
|
||||
<br />
|
||||
</router-link>
|
||||
<router-link to="/ssse-trume1" class="navbar-link2 nav-link">
|
||||
<span>Süsse Träume</span>
|
||||
<br />
|
||||
</router-link>
|
||||
<router-link
|
||||
to="/ein-orden-fr-eine-gute-tat1"
|
||||
class="navbar-link3 nav-link"
|
||||
>
|
||||
<span>Ein Orden für eine gute Tat</span>
|
||||
<br />
|
||||
</router-link>
|
||||
<router-link to="/rosenteufel1" class="navbar-link4 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 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-container3">
|
||||
<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-link5 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',
|
||||
},
|
||||
image_alt1: {
|
||||
type: String,
|
||||
default: 'image',
|
||||
},
|
||||
image_alt2: {
|
||||
type: String,
|
||||
default: 'image',
|
||||
},
|
||||
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-nav-content {
|
||||
gap: var(--dl-space-space-threeunits);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.navbar-nav-links {
|
||||
gap: var(--dl-space-space-threeunits);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
border-color: transparent;
|
||||
}
|
||||
.navbar-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar-link1 {
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar-link2 {
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar-link3 {
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar-link4 {
|
||||
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-container3 {
|
||||
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-link5 {
|
||||
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>
|
||||
128
src/components/rosenteufel.vue
Normal file
128
src/components/rosenteufel.vue
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div class="rosenteufel-container" v-bind:class="rootClassName">
|
||||
<section class="rosenteufel-card">
|
||||
<main class="rosenteufel-content">
|
||||
<header class="rosenteufel-header">
|
||||
<h1 class="rosenteufel-header1">{{ Header }}</h1>
|
||||
</header>
|
||||
<p class="rosenteufel-description">{{ Description }}</p>
|
||||
<router-link to="/rosenteufel1" class="rosenteufel-navlink">
|
||||
<div class="rosenteufel-button">
|
||||
<p class="rosenteufel-text">{{ Lesen }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</main>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Rosenteufel',
|
||||
props: {
|
||||
Lesen: {
|
||||
type: String,
|
||||
default: 'Lesen ->',
|
||||
},
|
||||
ButtonLink: String,
|
||||
Description: {
|
||||
type: String,
|
||||
default:
|
||||
'"Ich erzähl euch ein Gschicht von wahr, so wahr wie ihr danach nicht gwollt. Ein Gschicht dieerzähl als einzger überlebend: Mein Gschicht. S wart im letzten Jahr..." Diese Kurzgeschichte geschrieben mit Pseudomittelalterlicher Grammatik entstand aus einer Challenge die sich ein Freund und ich uns stellten, mit den Wörtern "Sand" und "Rose" eine Kurzgeschichte zu schreiben.',
|
||||
},
|
||||
rootClassName: String,
|
||||
Header: {
|
||||
type: String,
|
||||
default: 'Rosenteufel',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rosenteufel-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.rosenteufel-card {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: var(--dl-space-space-threeunits);
|
||||
position: relative;
|
||||
align-items: flex-start;
|
||||
border-radius: 20px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
background-color: rgba(41, 41, 41, 0.8);
|
||||
}
|
||||
.rosenteufel-content {
|
||||
gap: var(--dl-space-space-twounits);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.rosenteufel-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.rosenteufel-header1 {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
line-height: 36px;
|
||||
}
|
||||
.rosenteufel-description {
|
||||
color: #ffffff;
|
||||
font-family: Poppins;
|
||||
line-height: 28px;
|
||||
}
|
||||
.rosenteufel-navlink {
|
||||
display: contents;
|
||||
}
|
||||
.rosenteufel-button {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
align-items: center;
|
||||
border-color: #ffff00;
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-halfunit);
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.rosenteufel-button:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.rosenteufel-text {
|
||||
color: #ffff00;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
.rosenteufel-root-class-name {
|
||||
height: auto;
|
||||
}
|
||||
.rosenteufel-root-class-name1 {
|
||||
height: auto;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
.rosenteufel-card {
|
||||
padding-top: var(--dl-space-space-twounits);
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
padding-bottom: var(--dl-space-space-twounits);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
137
src/components/ssse-trume.vue
Normal file
137
src/components/ssse-trume.vue
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<div class="ssse-trume-container" v-bind:class="rootClassName">
|
||||
<section class="ssse-trume-card">
|
||||
<main class="ssse-trume-content">
|
||||
<header class="ssse-trume-header">
|
||||
<h1 class="ssse-trume-header1">{{ Header }}</h1>
|
||||
</header>
|
||||
<p class="ssse-trume-description">{{ Description }}</p>
|
||||
<router-link to="/ssse-trume1" class="ssse-trume-navlink">
|
||||
<div class="ssse-trume-button">
|
||||
<p class="ssse-trume-text">{{ Mehr }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</main>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SsseTrume',
|
||||
props: {
|
||||
Description: {
|
||||
type: String,
|
||||
default:
|
||||
'"Weisst du, wer du bist? Was du bereust, befürchtest, vergessen möchtest? Was du erreichen möchtest und was dir alles recht ist um dies zu erreichen? Zeit, deine Antworten auf diese Fragen auf die Probe zu stellen..." Süsse Träume war ein Fantasy Minilarp (nicht Nordic) im Wald von Eschikon (8315 Lindau, Schweiz) das Sue und Hermann organisierten. Es ging darum, dass ein Hexer Trajar die Spielercharaktere in seine Traumwelt entführte, als diese sich schlafen legten.',
|
||||
},
|
||||
ButtonLink: String,
|
||||
rootClassName: String,
|
||||
Mehr: {
|
||||
type: String,
|
||||
default: 'Mehr ->',
|
||||
},
|
||||
Header: {
|
||||
type: String,
|
||||
default: 'Süsse Träume',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ssse-trume-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ssse-trume-card {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: var(--dl-space-space-threeunits);
|
||||
position: relative;
|
||||
align-items: flex-start;
|
||||
border-radius: 20px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
background-color: rgba(41, 41, 41, 0.8);
|
||||
}
|
||||
.ssse-trume-content {
|
||||
gap: var(--dl-space-space-twounits);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.ssse-trume-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.ssse-trume-header1 {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
line-height: 36px;
|
||||
}
|
||||
.ssse-trume-description {
|
||||
color: #ffffff;
|
||||
font-family: Poppins;
|
||||
line-height: 28px;
|
||||
}
|
||||
.ssse-trume-navlink {
|
||||
display: contents;
|
||||
}
|
||||
.ssse-trume-button {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
align-items: center;
|
||||
border-color: #FFFF00;
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-halfunit);
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.ssse-trume-button:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.ssse-trume-text {
|
||||
color: #FFFF00;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
.ssse-trume-root-class-name {
|
||||
flex: 2;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.ssse-trume-root-class-name1 {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.ssse-trume-root-class-name2 {
|
||||
flex: 2;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
.ssse-trume-card {
|
||||
padding-top: var(--dl-space-space-twounits);
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
padding-bottom: var(--dl-space-space-twounits);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
11
src/main.js
Normal file
11
src/main.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
router
|
||||
}).$mount('#app')
|
||||
43
src/router.js
Normal file
43
src/router.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Meta from 'vue-meta'
|
||||
|
||||
import SsseTrume1 from './views/ssse-trume1'
|
||||
import EinOrdenFrEineGuteTat1 from './views/ein-orden-fr-eine-gute-tat1'
|
||||
import LetzteGelegenheit1 from './views/letzte-gelegenheit1'
|
||||
import Rosenteufel1 from './views/rosenteufel1'
|
||||
import Home from './views/home'
|
||||
import './style.css'
|
||||
|
||||
Vue.use(Router)
|
||||
Vue.use(Meta)
|
||||
export default new Router({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
{
|
||||
name: 'Ssse-Trume1',
|
||||
path: '/ssse-trume1',
|
||||
component: SsseTrume1,
|
||||
},
|
||||
{
|
||||
name: 'Ein-Orden-fr-eine-gute-Tat1',
|
||||
path: '/ein-orden-fr-eine-gute-tat1',
|
||||
component: EinOrdenFrEineGuteTat1,
|
||||
},
|
||||
{
|
||||
name: 'Letzte-Gelegenheit1',
|
||||
path: '/letzte-gelegenheit1',
|
||||
component: LetzteGelegenheit1,
|
||||
},
|
||||
{
|
||||
name: 'Rosenteufel1',
|
||||
path: '/rosenteufel1',
|
||||
component: Rosenteufel1,
|
||||
},
|
||||
{
|
||||
name: 'Home',
|
||||
path: '/',
|
||||
component: Home,
|
||||
},
|
||||
],
|
||||
})
|
||||
250
src/style.css
Normal file
250
src/style.css
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
:root {
|
||||
--dl-color-gray-500: #595959;
|
||||
--dl-color-gray-700: #999999;
|
||||
--dl-color-gray-900: #D9D9D9;
|
||||
--dl-size-size-large: 144px;
|
||||
--dl-size-size-small: 48px;
|
||||
--dl-color-danger-300: #A22020;
|
||||
--dl-color-danger-500: #BF2626;
|
||||
--dl-color-danger-700: #E14747;
|
||||
--dl-color-gray-black: #000000;
|
||||
--dl-color-gray-white: #FFFFFF;
|
||||
--dl-size-size-medium: 96px;
|
||||
--dl-size-size-xlarge: 192px;
|
||||
--dl-size-size-xsmall: 16px;
|
||||
--dl-space-space-unit: 16px;
|
||||
--dl-color-primary-100: #003EB3;
|
||||
--dl-color-primary-300: #0074F0;
|
||||
--dl-color-primary-500: #14A9FF;
|
||||
--dl-color-primary-700: #85DCFF;
|
||||
--dl-color-success-300: #199033;
|
||||
--dl-color-success-500: #32A94C;
|
||||
--dl-color-success-700: #4CC366;
|
||||
--dl-size-size-xxlarge: 288px;
|
||||
--dl-size-size-maxwidth: 1400px;
|
||||
--dl-radius-radius-round: 50%;
|
||||
--dl-space-space-halfunit: 8px;
|
||||
--dl-space-space-sixunits: 96px;
|
||||
--dl-space-space-twounits: 32px;
|
||||
--dl-radius-radius-radius2: 2px;
|
||||
--dl-radius-radius-radius4: 4px;
|
||||
--dl-radius-radius-radius8: 8px;
|
||||
--dl-space-space-fiveunits: 80px;
|
||||
--dl-space-space-fourunits: 64px;
|
||||
--dl-space-space-threeunits: 48px;
|
||||
--dl-space-space-oneandhalfunits: 24px;
|
||||
}
|
||||
.button {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
align-items: center;
|
||||
padding-top: var(--dl-space-space-oneandhalfunits);
|
||||
padding-left: var(--dl-space-space-twounits);
|
||||
border-radius: 58px;
|
||||
padding-right: var(--dl-space-space-twounits);
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-oneandhalfunits);
|
||||
}
|
||||
.button:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
color: var(--dl-color-gray-black);
|
||||
cursor: auto;
|
||||
padding: 0.5rem;
|
||||
border-color: var(--dl-color-gray-black);
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--dl-color-gray-white);
|
||||
}
|
||||
.list {
|
||||
width: 100%;
|
||||
margin: 1em 0px 1em 0px;
|
||||
display: block;
|
||||
padding: 0px 0px 0px 1.5rem;
|
||||
list-style-type: none;
|
||||
list-style-position: outside;
|
||||
}
|
||||
.list-item {
|
||||
display: list-item;
|
||||
}
|
||||
.teleport-show {
|
||||
display: flex !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.nav-link {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-style: Medium;
|
||||
text-align: left;
|
||||
transition: 0.3s;
|
||||
font-family: Poppins;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
font-stretch: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-link:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.get-started {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
align-items: center;
|
||||
padding-top: var(--dl-space-space-unit);
|
||||
border-color: transparent;
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
border-radius: 58px;
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
padding-bottom: var(--dl-space-space-unit);
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
background-color: rgba(42, 42, 42, 1);
|
||||
}
|
||||
.get-started:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.avatar {
|
||||
width: var(--dl-size-size-small);
|
||||
height: var(--dl-size-size-small);
|
||||
object-fit: cover;
|
||||
border-radius: var(--dl-radius-radius-round);
|
||||
}
|
||||
.feature {
|
||||
gap: var(--dl-space-space-halfunit);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-oneandhalfunits);
|
||||
justify-content: center;
|
||||
}
|
||||
.feature-active {
|
||||
border-color: #80FF44;
|
||||
border-bottom-width: 4px;
|
||||
}
|
||||
.section-head {
|
||||
color: rgb(128, 255, 68);
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.section-heading {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
line-height: 48px;
|
||||
}
|
||||
.section-description {
|
||||
color: rgb(204, 204, 204);
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
font-family: Poppins;
|
||||
line-height: 28px;
|
||||
}
|
||||
.accordion-element {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
position: relative;
|
||||
max-width: 600px;
|
||||
transition: .5s all linear;
|
||||
align-items: center;
|
||||
padding-top: var(--dl-space-space-unit);
|
||||
user-select: none;
|
||||
border-color: #5A5A5A;
|
||||
flex-direction: row;
|
||||
padding-bottom: var(--dl-space-space-unit);
|
||||
justify-content: center;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.side {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
backdrop-filter: blur(130px);
|
||||
}
|
||||
.switch {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
align-items: center;
|
||||
padding-top: var(--dl-space-space-unit);
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
border-radius: 48px;
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-unit);
|
||||
justify-content: center;
|
||||
background-color: #0F0F0F;
|
||||
}
|
||||
.switch:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
.social {
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
object-fit: cover;
|
||||
transition: 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
.social:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.footer-header {
|
||||
color: rgb(255, 255, 255);
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 500;
|
||||
line-height: 30px;
|
||||
}
|
||||
.footer-link {
|
||||
color: rgb(204, 204, 204);
|
||||
font-size: 14px;
|
||||
font-family: Poppins;
|
||||
line-height: 21px;
|
||||
}
|
||||
.Heading {
|
||||
font-size: 32px;
|
||||
font-family: Inter;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
.Content {
|
||||
font-size: 16px;
|
||||
font-family: Inter;
|
||||
font-weight: 400;
|
||||
line-height: 1.15;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media(max-width: 767px) {
|
||||
.nav-link {
|
||||
color: black;
|
||||
}
|
||||
.accordion-element {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
}
|
||||
}
|
||||
@media(max-width: 479px) {
|
||||
.accordion-element {
|
||||
max-width: auto;
|
||||
}
|
||||
}
|
||||
196
src/views/ein-orden-fr-eine-gute-tat1.vue
Normal file
196
src/views/ein-orden-fr-eine-gute-tat1.vue
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
<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>
|
||||
<footer class="ein-orden-fr-eine-gute-tat1-footer">
|
||||
<div class="ein-orden-fr-eine-gute-tat1-container1">
|
||||
<p class="ein-orden-fr-eine-gute-tat1-description">
|
||||
<span class="ein-orden-fr-eine-gute-tat1-text04">Setting</span>
|
||||
<br />
|
||||
<span>
|
||||
Das Nordic LARP “Letzte Gelegenheit” spielt in der heutigen Zeit in
|
||||
einer alternativen Realität: Vor 63 Tagen fiel plötzlich der Strom aus
|
||||
und dichte
|
||||
<span v-html="rawv46v"></span>
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
</div>
|
||||
<section class="ein-orden-fr-eine-gute-tat1-dotted-line"></section>
|
||||
<div class="ein-orden-fr-eine-gute-tat1-category">
|
||||
<div class="ein-orden-fr-eine-gute-tat1-header">
|
||||
<span class="footer-header">Kontakt</span>
|
||||
</div>
|
||||
<div class="ein-orden-fr-eine-gute-tat1-links">
|
||||
<span class="footer-link">hermann@mitoffenemvisier.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="ein-orden-fr-eine-gute-tat1-dotted-line1"></section>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppNavbar from '../components/navbar'
|
||||
|
||||
export default {
|
||||
name: 'EinOrdenFrEineGuteTat1',
|
||||
components: {
|
||||
AppNavbar,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
rawv46v: ' ',
|
||||
}
|
||||
},
|
||||
|
||||
metaInfo: {
|
||||
title: 'Ein-Orden-fr-eine-gute-Tat1 - MitOffenemVisier',
|
||||
meta: [
|
||||
{
|
||||
property: 'og:title',
|
||||
content: 'Ein-Orden-fr-eine-gute-Tat1 - MitOffenemVisier',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
</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-color: #0F0F0F;
|
||||
}
|
||||
.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-footer {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
flex: 1;
|
||||
width: 1080px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 120px;
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-threeunits);
|
||||
justify-content: center;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat1-container1 {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat1-description {
|
||||
color: rgb(194, 198, 204);
|
||||
width: auto;
|
||||
align-self: center;
|
||||
font-family: Poppins;
|
||||
line-height: 28px;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat1-text04 {
|
||||
font-weight: 700;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat1-dotted-line {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
width: 100%;
|
||||
border: 2px dashed rgba(120, 120, 120, 0.4);
|
||||
height: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat1-category {
|
||||
gap: var(--dl-space-space-unit);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat1-header {
|
||||
gap: var(--dl-space-space-unit);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat1-links {
|
||||
gap: var(--dl-space-space-unit);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat1-dotted-line1 {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
width: 100%;
|
||||
border: 2px dashed rgba(120, 120, 120, 0.4);
|
||||
height: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
.ein-orden-fr-eine-gute-tat1-heading {
|
||||
text-align: left;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat1-caption {
|
||||
text-align: left;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat1-dotted-line {
|
||||
display: none;
|
||||
}
|
||||
.ein-orden-fr-eine-gute-tat1-dotted-line1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@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>
|
||||
317
src/views/home.vue
Normal file
317
src/views/home.vue
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
<template>
|
||||
<div class="home-container">
|
||||
<app-navbar rootClassName="navbar-root-class-name"></app-navbar>
|
||||
<h1 class="home-heading">
|
||||
<span>Mit Offenem Visier</span>
|
||||
<br />
|
||||
</h1>
|
||||
<span class="home-caption">
|
||||
<span>Intensive, emotionale, kontrastreiche Nordic LARPs</span>
|
||||
<br />
|
||||
</span>
|
||||
<section class="home-section">
|
||||
<header class="home-header">
|
||||
<span class="home-section1 section-head">Kommende Veranstaltungen</span>
|
||||
</header>
|
||||
<div class="home-container1">
|
||||
<div class="home-dotted-line"></div>
|
||||
<letzte-gelegenheit-run1 Datum="April 2023"></letzte-gelegenheit-run1>
|
||||
<div class="home-dotted-line1"></div>
|
||||
<letzte-gelegenheit-run2
|
||||
Datum="Mai 2023"
|
||||
Standort="TBD"
|
||||
rootClassName="letzte-gelegenheit-run2-root-class-name"
|
||||
></letzte-gelegenheit-run2>
|
||||
<div class="home-dotted-line2"></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="home-section2">
|
||||
<header class="home-header1">
|
||||
<span class="home-section3 section-head">LARPs</span>
|
||||
</header>
|
||||
<main class="home-cards">
|
||||
<letzte-gelegenheit
|
||||
rootClassName="letzte-gelegenheit-root-class-name"
|
||||
></letzte-gelegenheit>
|
||||
<ssse-trume rootClassName="ssse-trume-root-class-name"></ssse-trume>
|
||||
</main>
|
||||
</section>
|
||||
<section class="home-section4">
|
||||
<header class="home-header2">
|
||||
<span class="home-section5 section-head">
|
||||
<span>Kurzgeschichten</span>
|
||||
<br />
|
||||
</span>
|
||||
</header>
|
||||
<main class="home-cards1">
|
||||
<ein-orden-fr-eine-gute-tat
|
||||
rootClassName="ein-orden-fr-eine-gute-tat-root-class-name"
|
||||
></ein-orden-fr-eine-gute-tat>
|
||||
<app-rosenteufel
|
||||
rootClassName="rosenteufel-root-class-name"
|
||||
></app-rosenteufel>
|
||||
</main>
|
||||
</section>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppNavbar from '../components/navbar'
|
||||
import LetzteGelegenheitRun1 from '../components/letzte-gelegenheit-run1'
|
||||
import LetzteGelegenheitRun2 from '../components/letzte-gelegenheit-run2'
|
||||
import LetzteGelegenheit from '../components/letzte-gelegenheit'
|
||||
import SsseTrume from '../components/ssse-trume'
|
||||
import EinOrdenFrEineGuteTat from '../components/ein-orden-fr-eine-gute-tat'
|
||||
import AppRosenteufel from '../components/rosenteufel'
|
||||
import AppFooter from '../components/footer'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
AppNavbar,
|
||||
LetzteGelegenheitRun1,
|
||||
LetzteGelegenheitRun2,
|
||||
LetzteGelegenheit,
|
||||
SsseTrume,
|
||||
EinOrdenFrEineGuteTat,
|
||||
AppRosenteufel,
|
||||
AppFooter,
|
||||
},
|
||||
metaInfo: {
|
||||
title: 'MitOffenemVisier',
|
||||
meta: [
|
||||
{
|
||||
property: 'og:title',
|
||||
content: 'MitOffenemVisier',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-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/pexels-luca-dross-5976404-1500w.jpg");
|
||||
}
|
||||
.home-heading {
|
||||
color: #ffffff;
|
||||
font-size: 64px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 500;
|
||||
}
|
||||
.home-caption {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 20px;
|
||||
font-family: Poppins;
|
||||
line-height: 30px;
|
||||
}
|
||||
.home-section {
|
||||
gap: var(--dl-space-space-halfunit);
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
padding-top: 60px;
|
||||
border-color: #51515A;
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
flex-direction: column;
|
||||
padding-bottom: 60px;
|
||||
justify-content: center;
|
||||
border-top-width: 0px;
|
||||
}
|
||||
.home-header {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-oneandhalfunits);
|
||||
justify-content: center;
|
||||
}
|
||||
.home-section1 {
|
||||
color: #ffffff;
|
||||
}
|
||||
.home-container1 {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
background-color: rgba(41, 41, 41, 0.8);
|
||||
}
|
||||
.home-dotted-line {
|
||||
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-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%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-color: rgba(200, 200, 200, 0.8);
|
||||
border-style: dashed;
|
||||
border-width: 0px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-top-width: 3px;
|
||||
}
|
||||
.home-section2 {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 60px;
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
flex-direction: column;
|
||||
padding-bottom: 60px;
|
||||
justify-content: center;
|
||||
}
|
||||
.home-header1 {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.home-section3 {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 36px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.home-cards {
|
||||
gap: var(--dl-space-space-threeunits);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
.home-section4 {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 60px;
|
||||
border-color: #51515A;
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
flex-direction: column;
|
||||
padding-bottom: 60px;
|
||||
justify-content: center;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
.home-header2 {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.home-section5 {
|
||||
color: #ffffff;
|
||||
font-size: 36px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.home-cards1 {
|
||||
gap: var(--dl-space-space-threeunits);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
.home-heading {
|
||||
text-align: left;
|
||||
}
|
||||
.home-caption {
|
||||
text-align: left;
|
||||
}
|
||||
.home-dotted-line {
|
||||
display: none;
|
||||
}
|
||||
.home-dotted-line1 {
|
||||
display: none;
|
||||
}
|
||||
.home-dotted-line2 {
|
||||
display: none;
|
||||
}
|
||||
.home-cards {
|
||||
gap: var(--dl-space-space-halfunit);
|
||||
}
|
||||
.home-cards1 {
|
||||
gap: var(--dl-space-space-halfunit);
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px) {
|
||||
.home-heading {
|
||||
font-size: 40px;
|
||||
}
|
||||
.home-caption {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 16px;
|
||||
font-family: Poppins;
|
||||
line-height: 24px;
|
||||
}
|
||||
.home-cards {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
flex-direction: column;
|
||||
}
|
||||
.home-cards1 {
|
||||
gap: var(--dl-space-space-oneandhalfunits);
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media(max-width: 479px) {
|
||||
.home-heading {
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
580
src/views/letzte-gelegenheit1.vue
Normal file
580
src/views/letzte-gelegenheit1.vue
Normal file
|
|
@ -0,0 +1,580 @@
|
|||
<template>
|
||||
<div class="letzte-gelegenheit1-container">
|
||||
<app-navbar rootClassName="navbar-root-class-name"></app-navbar>
|
||||
<h1 class="letzte-gelegenheit1-heading">
|
||||
<span>Letzte Gelegenheit</span>
|
||||
<br />
|
||||
</h1>
|
||||
<span class="letzte-gelegenheit1-caption">
|
||||
<span>Haben Häftlinge Platz im Bunker?</span>
|
||||
<br />
|
||||
</span>
|
||||
<footer class="letzte-gelegenheit1-footer">
|
||||
<div class="letzte-gelegenheit1-container1">
|
||||
<p class="letzte-gelegenheit1-description">
|
||||
<span class="letzte-gelegenheit1-text004">Setting</span>
|
||||
<br />
|
||||
<span>
|
||||
Das Nordic LARP “Letzte Gelegenheit” spielt in der heutigen Zeit in
|
||||
einer alternativen Realität: Vor 63 Tagen fiel plötzlich der Strom aus
|
||||
und dichte Nebelschwaden überzogen einige Städte. Sirenen führten die
|
||||
Menschen in Bunker. Radios, die noch funktionierten, meldeten die
|
||||
sofortige Mobilisierung der Milizarmee und des Zivilschutzes. Was
|
||||
genau passierte, ist noch immer ungeklärt. Im Bunker des Gefängnisses
|
||||
Schwarzbach versucht man den Alltag beizubehalten, doch langsam gehen
|
||||
die Ressourcen aus und die Lage verschärft sich.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span class="letzte-gelegenheit1-text009">
|
||||
Was will dieses Larp bewirken
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawqglq"></span>
|
||||
</span>
|
||||
<span>Gemeinsam eine Geschichte erleben und entwickeln</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="raw78pk"></span>
|
||||
</span>
|
||||
<span>
|
||||
Intensive Momente und Emotionen ermöglichen, die in Erinnerung
|
||||
bleiben.
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawusca"></span>
|
||||
</span>
|
||||
<span>
|
||||
Persönliche Auseinandersetzungen der Spieler mit nicht alltäglichen
|
||||
Situationen, Denkweisen und Weltanschauungen ermöglichen.
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="raw668e"></span>
|
||||
</span>
|
||||
<span>
|
||||
Interne Charakterentwicklung oder -verfestigung durch externe
|
||||
Faktoren.
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawub19"></span>
|
||||
</span>
|
||||
<span>Dilemmata mit sich selbst und mit anderen.</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="raw1n1s"></span>
|
||||
</span>
|
||||
<span>
|
||||
Weder dauernder Zusammenhalt noch konstanter Konflikt, sondern
|
||||
Variation und Kontrast.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span class="letzte-gelegenheit1-text030">
|
||||
Wie will es das bewirken
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
· Mit Feindschaften und Freundschaften durch Vergangenheit, Ziel-,
|
||||
Methoden- und Verteilkonflikten und -gemeinsamkeiten.
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
· Änderung der Normalität durch Entscheidungsdruck,
|
||||
Ressourcenknappheit und steigende Bedrohung.
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
· Charaktere in eine Situation versetzen, in der sie aus ihrem alten
|
||||
Leben gerissen wurden und mit Freunden und Feinden auf engstem Raum
|
||||
eingesperrt sind, während andere Freunde und Geliebte irgendwo da
|
||||
draussen sind.
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
· Spiel in verschiedenen Akten bei denen die Eskalation etwas
|
||||
gesteuert wird, sodass jeder bis zum Schluss noch spielen kann.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span class="letzte-gelegenheit1-text041">Konzepte</span>
|
||||
<br />
|
||||
<span> · Du kannst was Du darstellen kannst</span>
|
||||
<br />
|
||||
<span> · Vorgeschriebene Charaktere und Beziehungen</span>
|
||||
<br />
|
||||
<span> · Play to Lose</span>
|
||||
<br />
|
||||
<span> · Play to Lift</span>
|
||||
<br />
|
||||
<span> · IT Respekt vor IT Waffen</span>
|
||||
<br />
|
||||
<span> · Spielintensitäts Steigerungs- und Verringerrungssignale</span>
|
||||
<br />
|
||||
<span> · Workshops vor und Feedback nach dem Spiel</span>
|
||||
<br />
|
||||
<br />
|
||||
<span class="letzte-gelegenheit1-text058">Was bespielt wird</span>
|
||||
<br />
|
||||
<span> · Angst</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="raw1p3e"></span>
|
||||
</span>
|
||||
<span>Hass</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="raw6nuf"></span>
|
||||
</span>
|
||||
<span>Liebe</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawokmj"></span>
|
||||
</span>
|
||||
<span>Eifersucht</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawqsqr"></span>
|
||||
</span>
|
||||
<span>Intrige</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="raw9f2x"></span>
|
||||
</span>
|
||||
<span>Loyalität</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawupki"></span>
|
||||
</span>
|
||||
<span>Verrat</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="raw7nor"></span>
|
||||
</span>
|
||||
<span>Geheimnisse lüften</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="raw6g7k"></span>
|
||||
</span>
|
||||
<span>Mord</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawhosm"></span>
|
||||
</span>
|
||||
<span>Diebstahl</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="raw8ttb"></span>
|
||||
</span>
|
||||
<span>Machtkampf</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="raw5foj"></span>
|
||||
</span>
|
||||
<span>Rache/Vergebung</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawvclt"></span>
|
||||
</span>
|
||||
<span>Wahnsinn</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawnxk3"></span>
|
||||
</span>
|
||||
<span>Gerechtigkeit</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawfjen"></span>
|
||||
</span>
|
||||
<span>Gruppe vs. Individuum</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawamad"></span>
|
||||
</span>
|
||||
<span>Flucht in Drogenkonsum/-missbrauch</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawegw6"></span>
|
||||
</span>
|
||||
<span>Diskriminierung von Kriminellen</span>
|
||||
<br />
|
||||
<br />
|
||||
<span class="letzte-gelegenheit1-text111">Was nicht bespielt wird</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawlwyj"></span>
|
||||
</span>
|
||||
<span>Sexismus</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawlg86"></span>
|
||||
</span>
|
||||
<span>
|
||||
Rassismus (stattdessen werden kulturelle Differenzen vergrössert)
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span class="letzte-gelegenheit1-text120">Preise</span>
|
||||
<br />
|
||||
<span>Solidaritätsticket: 20.- CHF</span>
|
||||
<br />
|
||||
<span>Normalticket: 40.- CHF</span>
|
||||
<br />
|
||||
<span>Sponsorticket: 60.- CHF</span>
|
||||
<br />
|
||||
<span>Sponsorticket-Plus: 80.- CHF</span>
|
||||
<br />
|
||||
<span>
|
||||
Schäden, deren Fahrlässigkeit/Schuld bestimmt werden können, werden
|
||||
vom Verursacher getragen. Ansonsten tragen den Schaden alle Anwesenden
|
||||
solidarisch.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span class="letzte-gelegenheit1-text133">Verpflegung</span>
|
||||
<br />
|
||||
<span>
|
||||
OT Snacks stehen jederzeit im OT Raum zur Verfügung, für Spielende die
|
||||
sich nicht nur IT ernähren können/wollen.
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawtw5t"></span>
|
||||
</span>
|
||||
<span>Samstag OT Mittagessen (vor Time-In)</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawxzel"></span>
|
||||
</span>
|
||||
<span>
|
||||
Samstag IT Abendessen (gefriergetrocknetes IT Essen "Meals Ready
|
||||
to Eat")
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawbfdj"></span>
|
||||
</span>
|
||||
<span>
|
||||
Sonntag IT Frühstück (gefriergetrocknetes IT Essen "Meals Ready
|
||||
to Eat", z.B. Porridge)
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
·
|
||||
<span v-html="rawtw6k"></span>
|
||||
</span>
|
||||
<span>Sonntag OT Mittagessen (nach Time-Out)</span>
|
||||
<br />
|
||||
<br />
|
||||
<span class="letzte-gelegenheit1-text150">Standort Run 1</span>
|
||||
<br />
|
||||
<span>Zivilschutzanlage</span>
|
||||
<br />
|
||||
<span>Chilegass 8</span>
|
||||
<br />
|
||||
<span>8484 Weisslingen</span>
|
||||
<br />
|
||||
<span>Parkplatz: https://goo.gl/maps/KgqAwRdw8pJSdmjTA</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>Standort Run 2</span>
|
||||
<br />
|
||||
<span>Blablabla</span>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
<div class="letzte-gelegenheit1-container2">
|
||||
<p class="letzte-gelegenheit1-description1">Ablauf</p>
|
||||
</div>
|
||||
<div class="letzte-gelegenheit1-get-started button">
|
||||
<span class="letzte-gelegenheit1-text169">Anmeldung</span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="letzte-gelegenheit1-dotted-line"></section>
|
||||
<div class="letzte-gelegenheit1-category">
|
||||
<div class="letzte-gelegenheit1-header">
|
||||
<span class="footer-header">Kontakt</span>
|
||||
</div>
|
||||
<div class="letzte-gelegenheit1-links">
|
||||
<span class="footer-link">hermann@mitoffenemvisier.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="letzte-gelegenheit1-dotted-line1"></section>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppNavbar from '../components/navbar'
|
||||
|
||||
export default {
|
||||
name: 'LetzteGelegenheit1',
|
||||
components: {
|
||||
AppNavbar,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
rawqglq: ' ',
|
||||
raw78pk: ' ',
|
||||
rawusca: ' ',
|
||||
raw668e: ' ',
|
||||
rawub19: ' ',
|
||||
raw1n1s: ' ',
|
||||
raw1p3e: ' ',
|
||||
raw6nuf: ' ',
|
||||
rawokmj: ' ',
|
||||
rawqsqr: ' ',
|
||||
raw9f2x: ' ',
|
||||
rawupki: ' ',
|
||||
raw7nor: ' ',
|
||||
raw6g7k: ' ',
|
||||
rawhosm: ' ',
|
||||
raw8ttb: ' ',
|
||||
raw5foj: ' ',
|
||||
rawvclt: ' ',
|
||||
rawnxk3: ' ',
|
||||
rawfjen: ' ',
|
||||
rawamad: ' ',
|
||||
rawegw6: ' ',
|
||||
rawlwyj: ' ',
|
||||
rawlg86: ' ',
|
||||
rawtw5t: ' ',
|
||||
rawxzel: ' ',
|
||||
rawbfdj: ' ',
|
||||
rawtw6k: ' ',
|
||||
}
|
||||
},
|
||||
|
||||
metaInfo: {
|
||||
title: 'Letzte-Gelegenheit1 - MitOffenemVisier',
|
||||
meta: [
|
||||
{
|
||||
property: 'og:title',
|
||||
content: 'Letzte-Gelegenheit1 - MitOffenemVisier',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.letzte-gelegenheit1-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/pexels-luca-dross-5976404-1500w.jpg");
|
||||
}
|
||||
.letzte-gelegenheit1-heading {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 64px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
}
|
||||
.letzte-gelegenheit1-caption {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 20px;
|
||||
font-family: Poppins;
|
||||
line-height: 30px;
|
||||
}
|
||||
.letzte-gelegenheit1-footer {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 120px;
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-threeunits);
|
||||
justify-content: center;
|
||||
}
|
||||
.letzte-gelegenheit1-container1 {
|
||||
flex: 0 0 auto;
|
||||
width: 1080px;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.letzte-gelegenheit1-description {
|
||||
color: rgb(194, 198, 204);
|
||||
width: auto;
|
||||
align-self: center;
|
||||
font-family: Poppins;
|
||||
line-height: 28px;
|
||||
}
|
||||
.letzte-gelegenheit1-text004 {
|
||||
font-weight: 700;
|
||||
}
|
||||
.letzte-gelegenheit1-text009 {
|
||||
font-weight: 700;
|
||||
}
|
||||
.letzte-gelegenheit1-text030 {
|
||||
font-weight: 700;
|
||||
}
|
||||
.letzte-gelegenheit1-text041 {
|
||||
font-weight: 700;
|
||||
}
|
||||
.letzte-gelegenheit1-text058 {
|
||||
font-weight: 700;
|
||||
}
|
||||
.letzte-gelegenheit1-text111 {
|
||||
font-weight: 700;
|
||||
}
|
||||
.letzte-gelegenheit1-text120 {
|
||||
font-weight: 700;
|
||||
}
|
||||
.letzte-gelegenheit1-text133 {
|
||||
font-weight: 700;
|
||||
}
|
||||
.letzte-gelegenheit1-text150 {
|
||||
font-weight: 700;
|
||||
}
|
||||
.letzte-gelegenheit1-container2 {
|
||||
flex: 0 0 auto;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.letzte-gelegenheit1-description1 {
|
||||
color: rgb(194, 198, 204);
|
||||
width: auto;
|
||||
align-self: center;
|
||||
font-family: Poppins;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
}
|
||||
.letzte-gelegenheit1-get-started {
|
||||
display: flex;
|
||||
background-color: #80FF44;
|
||||
}
|
||||
.letzte-gelegenheit1-text169 {
|
||||
color: rgb(12, 16, 12);
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
.letzte-gelegenheit1-dotted-line {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
width: 100%;
|
||||
border: 2px dashed rgba(120, 120, 120, 0.4);
|
||||
height: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.letzte-gelegenheit1-category {
|
||||
gap: var(--dl-space-space-unit);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.letzte-gelegenheit1-header {
|
||||
gap: var(--dl-space-space-unit);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.letzte-gelegenheit1-links {
|
||||
gap: var(--dl-space-space-unit);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.letzte-gelegenheit1-dotted-line1 {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
width: 100%;
|
||||
border: 2px dashed rgba(120, 120, 120, 0.4);
|
||||
height: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
.letzte-gelegenheit1-heading {
|
||||
text-align: left;
|
||||
}
|
||||
.letzte-gelegenheit1-caption {
|
||||
text-align: left;
|
||||
}
|
||||
.letzte-gelegenheit1-get-started {
|
||||
flex: 1;
|
||||
}
|
||||
.letzte-gelegenheit1-dotted-line {
|
||||
display: none;
|
||||
}
|
||||
.letzte-gelegenheit1-dotted-line1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px) {
|
||||
.letzte-gelegenheit1-heading {
|
||||
font-size: 40px;
|
||||
}
|
||||
.letzte-gelegenheit1-caption {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 16px;
|
||||
font-family: Poppins;
|
||||
line-height: 24px;
|
||||
}
|
||||
.letzte-gelegenheit1-get-started {
|
||||
padding-top: var(--dl-space-space-unit);
|
||||
padding-bottom: var(--dl-space-space-unit);
|
||||
}
|
||||
}
|
||||
@media(max-width: 479px) {
|
||||
.letzte-gelegenheit1-heading {
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
634
src/views/rosenteufel1.vue
Normal file
634
src/views/rosenteufel1.vue
Normal file
|
|
@ -0,0 +1,634 @@
|
|||
<template>
|
||||
<div class="rosenteufel1-container">
|
||||
<app-navbar rootClassName="navbar-root-class-name"></app-navbar>
|
||||
<h1 class="rosenteufel1-heading">Rosenteufel</h1>
|
||||
<span class="rosenteufel1-caption">
|
||||
<span>Kurzgeschichte</span>
|
||||
<br />
|
||||
</span>
|
||||
<footer class="rosenteufel1-footer">
|
||||
<div class="rosenteufel1-container1">
|
||||
<p class="rosenteufel1-description">
|
||||
<span>
|
||||
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 wart im letzten Jahr...
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Vogt Eberhardt: “Edler von Petz, habt Dank um Eure schnelle Peitsch zu
|
||||
Ross. S eilt, der Bot kaum angekomm’n, doch bereits geschehn in
|
||||
letzter Woch.”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Ritter von Petz: “Gott’s Segen. Wie Euch zu dien’n, durchlaucht?”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Vogt Eberhardt: “Im Nord herrsch Brand und Stank. Räuberband
|
||||
wahrscheinch, nicht zu schätz woher. Leichen sein gesetzt ins Ufer,
|
||||
ein Blum obendrein. So gefund ein Kind. Rest ausgegraben, all vom
|
||||
selben Weiler. S’ist im Weiler Immerthain...”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>Der Ritter im Wege sich erkundigt...</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>Köhler: “In Immerthain?”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Ritter von Petz: “Stottert ich? Willst du des meines Blutes Wege mit
|
||||
Steinen pflastern oder daraufe legen. Fahret fort, sonst kostet’s dich
|
||||
mehr als mein Geduld.”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Köhler: “Entschuld mein Entsetz Edler, nur wisst, der Teufel treibt
|
||||
dort sein Feuer. Die nicht ermordert flohen mit aller Hab. Nur wenige
|
||||
blieben. Möge sich der Herr ihnen erbarmen...”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Ritter von Petz greift ihm mit seinem rechten Panzerhandschuh am
|
||||
Kragen: “Lass den Frevel, des schnellsten Wegs sollst du mich weisen!”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Köhler: “Verzeiht’s mir Edler, verzeiht’s. Der schnellste Weg führt
|
||||
durch den Kammertwald. Hie
|
||||
<span v-html="rawbj2h"></span>
|
||||
</span>
|
||||
<span>
|
||||
wo ich zeig überm Pfad. Zwei Tag, ein Nacht. Aber... Edler, bei Gotts
|
||||
Gnad, ich wärt kein gut
|
||||
<span v-html="raw9fqu"></span>
|
||||
</span>
|
||||
<span>
|
||||
Christ Euch ohne Warn lass schreiten. Seit Geschehnem ist hie keiner
|
||||
entlang. Wer weiss was
|
||||
</span>
|
||||
<br />
|
||||
<span>Geziefer dort treibt...”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Ritter von Petz: “Tieft den Zinken nun. Hast getan was gesagt. Wartet
|
||||
mein Kommen in einem
|
||||
<span v-html="rawp7lp"></span>
|
||||
</span>
|
||||
<span>
|
||||
Dutzend Tag – nicht spät. Sollt ich kehr, so ritz ich dies Holz mit
|
||||
eir Botschaft. Andernfalls
|
||||
<span v-html="rawuivc"></span>
|
||||
</span>
|
||||
<span>berichtet meins Schicksal.”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>Köhler verneigt sich: “Gott mit Euch.”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Ritter von Petz dreht sich: “Auf jetzt, Gefolg. Noch die letzten
|
||||
Schritte nicht geschritten.”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>Doch s dauert nicht lang...</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Knappe von Jachstett: “Herr, der Pfad’s dunkel, doch kaum erst zu
|
||||
Mittag gebrochen. Noch fall zu
|
||||
<span v-html="rawy42x"></span>
|
||||
</span>
|
||||
<span>Tod bevor eins Feinds Kling mich blickt.”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Knecht Troffecht: “Ja edler Herr und Wurzeln überall, s Maultier und
|
||||
Eur Ross sich oft vertritt,
|
||||
<span v-html="rawr0kf"></span>
|
||||
</span>
|
||||
<span>könnt knacks s Glenk.”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Magd Ute: “Will nicht fächern den Ärger, aber wenn Gotts ehrl’ch
|
||||
Tugend g’wahr, Wagens Achs
|
||||
<span v-html="rawfp1o"></span>
|
||||
</span>
|
||||
<span>könnt brech in Mitt.”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>Knappe von Jachstett: “Edler Herr...”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Ritter dreht zu Rück, zeigt mit grüstet Finger, all’s hält ein: “So
|
||||
zügle er seine Zunge, der sich
|
||||
<span v-html="rawi0rh"></span>
|
||||
</span>
|
||||
<span>
|
||||
gewagt meins Gfährten zu schwörn! So halt er den Mund der nur
|
||||
striegelt und Dung sticht, um
|
||||
<span v-html="rawu8sd"></span>
|
||||
</span>
|
||||
<span>
|
||||
seines Lebens kein Sorg! Und so bleibe sie still solang sie noch eines
|
||||
Brots erbetteln möcht. Ihr
|
||||
<span v-html="rawv26y"></span>
|
||||
</span>
|
||||
<span>all seid feig und Kloss an mei’m Bein.”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>Der Ritter sich schlicht’, die traurig Gsicht beäug.</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
“So kehr er um der sich des Wegs nicht mutig, aber versichre, dass
|
||||
kein Gnad zeig wem wieder
|
||||
<span v-html="raw88kx"></span>
|
||||
</span>
|
||||
<span>
|
||||
erblick! Wer weiss wieviel noch gemordt währn ihr quängelt wie
|
||||
neugeborns, nackts Kindlein.
|
||||
<span v-html="rawkene"></span>
|
||||
</span>
|
||||
<span>
|
||||
Erinnert Eberhardts Wort: Acht tot in acht Nacht. Sieht mein
|
||||
Stundglas. Seit hee s rieselt. Ich
|
||||
<span v-html="rawqvbp"></span>
|
||||
</span>
|
||||
<span>
|
||||
gedreht jed Stund. Nach zehn weiter Dreh unds letzt Korn gerieselt s
|
||||
des nächsten arm Seel
|
||||
<span v-html="rawqj3j"></span>
|
||||
</span>
|
||||
<span>
|
||||
dessen euch verantwort. So zügelt und schluckt der schwächend
|
||||
Quängelei.”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
S wart still für lange Stund, bis zum Abendfeuer. S Nacht, einzig
|
||||
Licht von Flamm durch einig
|
||||
<span v-html="rawuaw0"></span>
|
||||
</span>
|
||||
<span>Stämm bricht, man schaut kein zwanzg Schritt weit.</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Knappe von Jachstett leis zum Knecht Troffecht: “Seltsam Gräusch,
|
||||
erhorch.”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Knecht Troffecht bleicher Schaur übern Rück: “D-d-d-der Teufel is’s?”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>Magd Ute, d Supp rührnd, flüstert zu: “Was war?”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Knappe von Jachstett die Achsel zuck, sich erhebt und zu Ritter von
|
||||
Petz schreit’, der dabei sein
|
||||
<span v-html="raw93z1"></span>
|
||||
</span>
|
||||
<span>Kling zu schärf.</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Knappe von Jachstett: “Edler Herr, gehört Geräusch vom Walde. S der
|
||||
Teufel wir när schreit. Uns
|
||||
<span v-html="rawqahd"></span>
|
||||
</span>
|
||||
<span>
|
||||
verdammt hie auf Glut mit barem Fuss. Bei Gott, Euch verwerf nicht den
|
||||
Mut zu gehn in wackren
|
||||
<span v-html="rawno21"></span>
|
||||
</span>
|
||||
<span>
|
||||
Kampf. Aber schauet nur ins Gsicht von einfach Leut, Knecht und Magd.
|
||||
Beid mit Angst, des
|
||||
<span v-html="rawxmov"></span>
|
||||
</span>
|
||||
<span>
|
||||
Herrn kein Mittel. So lässt hie in sicher, nicht drohn ihrets Blut.
|
||||
Schon meiner mir erbarme, aber
|
||||
<span v-html="rawvh99"></span>
|
||||
</span>
|
||||
<span>deren Leben verworfen sobald in selbe Flammen waten.”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Ritter von Petz aber nicht der Zunge, nur sein Kling weiterschärf.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Morg früh der Knapp verlorn. Kein Spur wart gsehn, nur sein Hab
|
||||
schwund mit ihm. Ritter lässt sein
|
||||
<span v-html="rawa8d5"></span>
|
||||
</span>
|
||||
<span>Harnisch von Knecht Troffecht anbring.</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Knecht Troffecht: “Edler Herr, wisst wo sich Herrn von Jachstett
|
||||
treibt?”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Ritter von Petz geradeaus schreitend: “Der sich seins Entscheids
|
||||
bereun wird.”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Unds wart kein weiter Wort gesproch, bis zum Weiler angekomm. Am Ufer,
|
||||
man sah, s wart ein
|
||||
<span v-html="rawuvry"></span>
|
||||
</span>
|
||||
<span>
|
||||
pechschwarz Mantel gehüllt Gestalt, Kapuz über Gesicht hängend. S
|
||||
leert eins Hands Sand über
|
||||
<span v-html="rawad7t"></span>
|
||||
</span>
|
||||
<span>
|
||||
einen Sandhaufen der bereits eins Manns lang wie breit. Ritter zittert
|
||||
erst, reisst die Zügel in
|
||||
<span v-html="raws4ln"></span>
|
||||
</span>
|
||||
<span>
|
||||
Knechts Hand, schleicht so gut sein Harnisch’s vermag. Sein Eisen in
|
||||
Höh, in tiefer Sonn s blinkt.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>Ritter von Petz: “Schmeck Gotts Gericht, Elender!”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Ein Stich und Gestalt fällt. Magd Ute eilt her. Ritter dreht die
|
||||
Gestalt mit panzerm Fuss. Magd
|
||||
<span v-html="rawx6d4"></span>
|
||||
</span>
|
||||
<span>
|
||||
schrickt, Händ vorm Mund.
|
||||
<span v-html="rawt673"></span>
|
||||
</span>
|
||||
<span>
|
||||
Ritter von Petz schaut zur Magd, wartet und schaut dann zum Knecht.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Ritter spricht zur Magd,
|
||||
<span v-html="rawra3v"></span>
|
||||
</span>
|
||||
<span>
|
||||
kommt zum Knecht mit seufz: “Aufgab’s vollbracht. Des Teufels bedarfs
|
||||
kein Grab, ihn lässt nur
|
||||
<span v-html="rawpz5d"></span>
|
||||
</span>
|
||||
<span>
|
||||
rotten solangs ihm möglich, sein Höll auf Erd. Wir nun kehren und
|
||||
vielleicht des Knapp einholn.”
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Magd Ute taugte keiner Worte, Knecht Troffecht verwirrt. Doch zu
|
||||
widersetzen wärt der letzt
|
||||
<span v-html="rawdsba"></span>
|
||||
</span>
|
||||
<span>Gedank und so sie kehrten wider für restlich Tagesstund.</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
In Nacht keiner ein Aug zugetan. Des Ritters Kling noch rot, er sie
|
||||
nicht sauber gefragt und der
|
||||
<span v-html="rawrwdr"></span>
|
||||
</span>
|
||||
<span>
|
||||
Knecht viel zu blass als ihm vorzukommen. Letztlich doch die Augen
|
||||
sich schlossen. Doch
|
||||
<span v-html="raw1vis"></span>
|
||||
</span>
|
||||
<span>
|
||||
wachten nur noch Ritter und Knecht. Des Ritters Petz Kling noch immer
|
||||
rot; des Knechts Haut
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
noch immer weiss und nass. Dieses Mal der Knecht nicht wagte zu fragen
|
||||
der Verschwundenen.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
S
|
||||
<span v-html="raw9a8a"></span>
|
||||
</span>
|
||||
<span>
|
||||
musst sein bereits früh Mittag doch der Wald noch alls dunkelt. So
|
||||
gepackt die Sachen der Ritter
|
||||
<span v-html="rawcfga"></span>
|
||||
</span>
|
||||
<span>
|
||||
seines Schrittes eilig. Doch der Knecht stramm stehend sich nicht
|
||||
bewegt.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>Ritter von Petz: “Los jetzt, wir müssen schnell zurück!”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Schnell? Wieso? Die Tat wart doch vollbracht und noch viele Tag ins
|
||||
Holz zu ritzen.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Der Knecht blickt zurück. Ritter greift zur Klinge. Knecht rennt. Er
|
||||
rennt und rennt, so schnell er
|
||||
<span v-html="rawsf76"></span>
|
||||
</span>
|
||||
<span>
|
||||
kann. Ritter hinterher, ohne Harnisch flink, flinker als der Knecht.
|
||||
Doch der Knecht nicht stumpf
|
||||
<span v-html="rawvxbv"></span>
|
||||
</span>
|
||||
<span>
|
||||
und so bricht in den dunklen Wald. Seine Fährte der Ritter rasch
|
||||
verlorn.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Ritter von Petz: “Komm her! Wer soll sonst meine Habe tragen! So mache
|
||||
rasch und dir tue
|
||||
<span v-html="raw3en2"></span>
|
||||
</span>
|
||||
<span>nichts! Troffecht! Troffecht daher!”</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Doch sein Stimm bald verblasst. Ich kam zum Weiler, klein Leut bereits
|
||||
gestanden um die düstre
|
||||
<span v-html="rawnf00"></span>
|
||||
</span>
|
||||
<span>
|
||||
Gstalt. Daneben ein weiterer, gleicher Haufen mit einer weissen Ros in
|
||||
Mitt. Zehn Häufen, all
|
||||
<span v-html="rawthwj"></span>
|
||||
</span>
|
||||
<span>
|
||||
geschmückt mit weisser Ros. All bis auf der vord Gstalt. Kindsvolk
|
||||
starrte mir.
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span>
|
||||
Ausser Atem ich
|
||||
<span v-html="rawdi45"></span>
|
||||
</span>
|
||||
<span>
|
||||
auf meine Knie mich stütz. Frau und Mann vom Weiler trat zuher. Sie
|
||||
starrten; auch kalt und
|
||||
<span v-html="rawxuy5"></span>
|
||||
</span>
|
||||
<span>
|
||||
hilflos wie Kind. Ich schritt nach vorn: In die Händ des Toten seh,
|
||||
weiss Ros. Ins Gesicht des
|
||||
<span v-html="rawovmb"></span>
|
||||
</span>
|
||||
<span>
|
||||
Toten blick. Beulen zierten’s. Hässliche Beulen. Der Teufel aber wart
|
||||
woanders...
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<section class="rosenteufel1-dotted-line"></section>
|
||||
<div class="rosenteufel1-category">
|
||||
<div class="rosenteufel1-header">
|
||||
<span class="footer-header">Kontakt</span>
|
||||
</div>
|
||||
<div class="rosenteufel1-links">
|
||||
<span class="footer-link">hermann@mitoffenemvisier.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="rosenteufel1-dotted-line1"></section>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppNavbar from '../components/navbar'
|
||||
|
||||
export default {
|
||||
name: 'Rosenteufel1',
|
||||
components: {
|
||||
AppNavbar,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
rawbj2h: ' ',
|
||||
raw9fqu: ' ',
|
||||
rawp7lp: ' ',
|
||||
rawuivc: ' ',
|
||||
rawy42x: ' ',
|
||||
rawr0kf: ' ',
|
||||
rawfp1o: ' ',
|
||||
rawi0rh: ' ',
|
||||
rawu8sd: ' ',
|
||||
rawv26y: ' ',
|
||||
raw88kx: ' ',
|
||||
rawkene: ' ',
|
||||
rawqvbp: ' ',
|
||||
rawqj3j: ' ',
|
||||
rawuaw0: ' ',
|
||||
raw93z1: ' ',
|
||||
rawqahd: ' ',
|
||||
rawno21: ' ',
|
||||
rawxmov: ' ',
|
||||
rawvh99: ' ',
|
||||
rawa8d5: ' ',
|
||||
rawuvry: ' ',
|
||||
rawad7t: ' ',
|
||||
raws4ln: ' ',
|
||||
rawx6d4: ' ',
|
||||
rawt673: ' ',
|
||||
rawra3v: ' ',
|
||||
rawpz5d: ' ',
|
||||
rawdsba: ' ',
|
||||
rawrwdr: ' ',
|
||||
raw1vis: ' ',
|
||||
raw9a8a: ' ',
|
||||
rawcfga: ' ',
|
||||
rawsf76: ' ',
|
||||
rawvxbv: ' ',
|
||||
raw3en2: ' ',
|
||||
rawnf00: ' ',
|
||||
rawthwj: ' ',
|
||||
rawdi45: ' ',
|
||||
rawxuy5: ' ',
|
||||
rawovmb: ' ',
|
||||
}
|
||||
},
|
||||
|
||||
metaInfo: {
|
||||
title: 'Rosenteufel1 - MitOffenemVisier',
|
||||
meta: [
|
||||
{
|
||||
property: 'og:title',
|
||||
content: 'Rosenteufel1 - MitOffenemVisier',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rosenteufel1-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/pexels-luca-dross-5976404-1500w.jpg");
|
||||
}
|
||||
.rosenteufel1-heading {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 64px;
|
||||
align-self: center;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
}
|
||||
.rosenteufel1-caption {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 20px;
|
||||
align-self: center;
|
||||
font-family: Poppins;
|
||||
line-height: 30px;
|
||||
}
|
||||
.rosenteufel1-footer {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
flex: 1;
|
||||
width: 1080px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 120px;
|
||||
padding-left: var(--dl-space-space-oneandhalfunits);
|
||||
padding-right: var(--dl-space-space-oneandhalfunits);
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--dl-space-space-threeunits);
|
||||
justify-content: center;
|
||||
}
|
||||
.rosenteufel1-container1 {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.rosenteufel1-description {
|
||||
color: #ffffff;
|
||||
width: auto;
|
||||
align-self: center;
|
||||
font-family: Poppins;
|
||||
line-height: 28px;
|
||||
}
|
||||
.rosenteufel1-dotted-line {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
width: 100%;
|
||||
border: 2px dashed rgba(120, 120, 120, 0.4);
|
||||
height: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.rosenteufel1-category {
|
||||
gap: var(--dl-space-space-unit);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.rosenteufel1-header {
|
||||
gap: var(--dl-space-space-unit);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.rosenteufel1-links {
|
||||
gap: var(--dl-space-space-unit);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.rosenteufel1-dotted-line1 {
|
||||
gap: var(--dl-space-space-fiveunits);
|
||||
width: 100%;
|
||||
border: 2px dashed rgba(120, 120, 120, 0.4);
|
||||
height: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
.rosenteufel1-heading {
|
||||
text-align: left;
|
||||
}
|
||||
.rosenteufel1-caption {
|
||||
text-align: left;
|
||||
}
|
||||
.rosenteufel1-dotted-line {
|
||||
display: none;
|
||||
}
|
||||
.rosenteufel1-dotted-line1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px) {
|
||||
.rosenteufel1-heading {
|
||||
font-size: 40px;
|
||||
}
|
||||
.rosenteufel1-caption {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 16px;
|
||||
font-family: Poppins;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
@media(max-width: 479px) {
|
||||
.rosenteufel1-heading {
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
86
src/views/ssse-trume1.vue
Normal file
86
src/views/ssse-trume1.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="ssse-trume1-container">
|
||||
<app-navbar rootClassName="navbar-root-class-name"></app-navbar>
|
||||
<h1 class="ssse-trume1-heading">
|
||||
<span>Süsse Träume</span>
|
||||
<br />
|
||||
</h1>
|
||||
<span class="ssse-trume1-caption">
|
||||
<span>Fantasy Mini-LARP</span>
|
||||
<br />
|
||||
</span>
|
||||
<app-footer rootClassName="footer-root-class-name"></app-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppNavbar from '../components/navbar'
|
||||
import AppFooter from '../components/footer'
|
||||
|
||||
export default {
|
||||
name: 'SsseTrume1',
|
||||
components: {
|
||||
AppNavbar,
|
||||
AppFooter,
|
||||
},
|
||||
metaInfo: {
|
||||
title: 'Ssse-Trume1 - MitOffenemVisier',
|
||||
meta: [
|
||||
{
|
||||
property: 'og:title',
|
||||
content: 'Ssse-Trume1 - MitOffenemVisier',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ssse-trume1-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: #0F0F0F;
|
||||
}
|
||||
.ssse-trume1-heading {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 64px;
|
||||
font-style: normal;
|
||||
font-family: Poppins;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ssse-trume1-caption {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 20px;
|
||||
font-family: Poppins;
|
||||
line-height: 30px;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
.ssse-trume1-heading {
|
||||
text-align: left;
|
||||
}
|
||||
.ssse-trume1-caption {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px) {
|
||||
.ssse-trume1-heading {
|
||||
font-size: 40px;
|
||||
}
|
||||
.ssse-trume1-caption {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 16px;
|
||||
font-family: Poppins;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
@media(max-width: 479px) {
|
||||
.ssse-trume1-heading {
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
20
vue.config.js
Normal file
20
vue.config.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
css: {
|
||||
loaderOptions: {
|
||||
css: {
|
||||
url: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
chainWebpack: config => {
|
||||
config.plugin('copy').tap(args => {
|
||||
const UNESCAPED_GLOB_SYMBOLS_RE = /(\\?)([()*?[\]{|}]|^!|[!+@](?=\())/g;
|
||||
const publicDir = path.resolve(process.VUE_CLI_SERVICE.context, 'public').replace(/\\/g, '/');
|
||||
const escapePublicDir= publicDir.replace(UNESCAPED_GLOB_SYMBOLS_RE, '\\$2');
|
||||
args[0].patterns[0].globOptions.ignore = args[0].patterns[0].globOptions.ignore.map(i => i.replace(publicDir, escapePublicDir));
|
||||
return args;
|
||||
});
|
||||
}
|
||||
};
|
||||
Loading…
Reference in a new issue