Try to fix mobile menu for Home page

This commit is contained in:
OpenVisor 2024-04-26 21:57:09 +02:00
parent 79a70f12ff
commit 5c4baa6f60
10 changed files with 959 additions and 30 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View file

@ -32,7 +32,7 @@
<br /> <br />
<span> <span>
 ·  ·
<span v-html="rawnpvn"></span> <span v-html="rawk84l"></span>
</span> </span>
<span> <span>
Intensive Momente und Emotionen ermöglichen, die in Erinnerung Intensive Momente und Emotionen ermöglichen, die in Erinnerung
@ -42,7 +42,7 @@
<br /> <br />
<span> <span>
 ·  ·
<span v-html="rawe9wp"></span> <span v-html="rawr5ug"></span>
</span> </span>
<span> <span>
Persönliche Auseinandersetzungen der Spieler mit nicht Persönliche Auseinandersetzungen der Spieler mit nicht
@ -53,7 +53,7 @@
<br /> <br />
<span> <span>
 ·  ·
<span v-html="raw5e4n"></span> <span v-html="rawwv0g"></span>
</span> </span>
<span> <span>
Interne Charakterentwicklung oder -verfestigung durch externe Interne Charakterentwicklung oder -verfestigung durch externe
@ -63,14 +63,14 @@
<br /> <br />
<span> <span>
 ·  ·
<span v-html="rawpf7y"></span> <span v-html="rawhqbz"></span>
</span> </span>
<span>Dilemmata mit sich selbst und mit anderen.</span> <span>Dilemmata mit sich selbst und mit anderen.</span>
<br /> <br />
<br /> <br />
<span> <span>
 ·  ·
<span v-html="raww60b"></span> <span v-html="rawp0k1"></span>
</span> </span>
<span> <span>
Weder dauernder Zusammenhalt noch konstanter Konflikt, sondern Weder dauernder Zusammenhalt noch konstanter Konflikt, sondern
@ -254,7 +254,7 @@
<br /> <br />
<span> <span>
Wir werden das Wir werden das
<span v-html="rawmw5k"></span> <span v-html="rawkm7u"></span>
</span> </span>
<router-link to="/larpkonzept" class="info-box-navlink"> <router-link to="/larpkonzept" class="info-box-navlink">
Open Visor Larpkonzept Open Visor Larpkonzept
@ -518,7 +518,7 @@
<br /> <br />
<span> <span>
Parkplatz: Parkplatz:
<span v-html="raw2kz5"></span> <span v-html="rawisrq"></span>
</span> </span>
<a <a
href="https://goo.gl/maps/KgqAwRdw8pJSdmjTA" href="https://goo.gl/maps/KgqAwRdw8pJSdmjTA"
@ -1458,13 +1458,13 @@ export default {
}, },
data() { data() {
return { return {
rawnpvn: ' ', rawk84l: ' ',
rawe9wp: ' ', rawr5ug: ' ',
raw5e4n: ' ', rawwv0g: ' ',
rawpf7y: ' ', rawhqbz: ' ',
raww60b: ' ', rawp0k1: ' ',
rawmw5k: ' ', rawkm7u: ' ',
raw2kz5: ' ', rawisrq: ' ',
} }
}, },
} }

View file

@ -983,7 +983,6 @@ export default {
.navigation-root-class-name10 { .navigation-root-class-name10 {
max-width: 1200px; max-width: 1200px;
} }
@media(max-width: 991px) { @media(max-width: 991px) {
.navigation-navbar-interactive { .navigation-navbar-interactive {
padding-bottom: var(--dl-space-space-twounits); padding-bottom: var(--dl-space-space-twounits);

View file

@ -8,7 +8,7 @@
<h1 class="row1-header1"> <h1 class="row1-header1">
<span> <span>
Leitung der Justizvollzugsanstalt Leitung der Justizvollzugsanstalt
<span v-html="raw0cwz"></span> <span v-html="rawwy96"></span>
</span> </span>
<br /> <br />
</h1> </h1>
@ -125,7 +125,7 @@ export default {
}, },
data() { data() {
return { return {
raw0cwz: ' ', rawwy96: ' ',
} }
}, },
} }

View file

@ -75,7 +75,7 @@
Tabellen und Graphen auf Notizzettel. Die Wärter mussten Jenatsch schon Tabellen und Graphen auf Notizzettel. Die Wärter mussten Jenatsch schon
mehrmals dafür bestrafen, als Jenatsch diese trotz Warnungen überall mehrmals dafür bestrafen, als Jenatsch diese trotz Warnungen überall
wieder liegen liess. wieder liegen liess.
<span v-html="rawizt7"></span> <span v-html="rawqagw"></span>
</span> </span>
<span>Ab und zu spielt Jenatsch Karten mit Collins und Krüger.</span> <span>Ab und zu spielt Jenatsch Karten mit Collins und Krüger.</span>
<br /> <br />
@ -122,7 +122,7 @@ export default {
}, },
data() { data() {
return { return {
rawizt7: ' ', rawqagw: ' ',
} }
}, },
} }

View file

@ -1,6 +1,234 @@
<template> <template>
<div class="home-container"> <div class="home-container">
<app-navigation rootClassName="navigation-root-class-name11"></app-navigation> <nav class="home-navbar">
<header data-thq="thq-navbar" class="home-navbar-interactive">
<router-link to="/" class="home-navlink">
<img
alt="image"
src="7aa87256-d356-4d6b-b705-fd1ebc027e1a"
class="home-logo"
/>
</router-link>
<div data-thq="thq-navbar-nav" data-role="Nav" class="home-desktop-menu">
<nav data-thq="thq-navbar-nav-links" data-role="Nav" class="home-nav">
<router-link to="/" class="home-home nav-link">Home</router-link>
<router-link to="/ueber-uns" class="home-ueber-uns nav-link">
Über uns
</router-link>
<router-link to="/larpkonzept" class="home-larpkonzept nav-link">
Larpkonzept
</router-link>
<div data-thq="thq-dropdown" class="home-larps-dropdown list-item">
<div data-thq="thq-dropdown-toggle" class="home-dropdown-toggle">
<span class="home-larps nav-link">Larps</span>
<div data-thq="thq-dropdown-arrow" class="home-dropdown-arrow">
<svg viewBox="0 0 1024 1024" class="home-icon">
<path d="M426 726v-428l214 214z"></path>
</svg>
</div>
</div>
<ul data-thq="thq-dropdown-list" class="home-dropdown-list">
<router-link to="/letzte-gelegenheit">
<li data-thq="thq-dropdown" class="home-dropdown list-item">
<div
data-thq="thq-dropdown-toggle"
class="home-dropdown-toggle01"
>
<span class="home-letzte-gelegenheit">
Letzte Gelegenheit
</span>
</div>
</li>
</router-link>
<router-link to="/suesse-traeume">
<li data-thq="thq-dropdown" class="home-dropdown1 list-item">
<div
data-thq="thq-dropdown-toggle"
class="home-dropdown-toggle02"
>
<span class="home-suesse-traeume">Süsse Träume</span>
</div>
</li>
</router-link>
</ul>
</div>
<div
data-thq="thq-dropdown"
class="home-kurzgeschichten-dropdown list-item"
>
<div data-thq="thq-dropdown-toggle" class="home-dropdown-toggle03">
<span class="home-kurzgeschichten nav-link">Kurzgeschichten</span>
<div data-thq="thq-dropdown-arrow" class="home-dropdown-arrow1">
<svg viewBox="0 0 1024 1024" class="home-icon02">
<path d="M426 726v-428l214 214z"></path>
</svg>
</div>
</div>
<ul data-thq="thq-dropdown-list" class="home-dropdown-list1">
<router-link to="/ein-orden-fuer-eine-gute-tat">
<li data-thq="thq-dropdown" class="home-dropdown2 list-item">
<div
data-thq="thq-dropdown-toggle"
class="home-dropdown-toggle04"
>
<span class="home-ein-orden-fuer-eine-gute-tat">
Ein Orden für eine gute Tat
</span>
</div>
</li>
</router-link>
<router-link to="/rosenteufel">
<li data-thq="thq-dropdown" class="home-dropdown3 list-item">
<div
data-thq="thq-dropdown-toggle"
class="home-dropdown-toggle05"
>
<span class="home-rosenteufel">Rosenteufel</span>
</div>
</li>
</router-link>
</ul>
</div>
</nav>
</div>
<div data-thq="thq-burger-menu" class="home-burger-menu">
<svg viewBox="0 0 1024 1024" class="home-icon04">
<path
d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z"
></path>
</svg>
</div>
<div data-thq="thq-mobile-menu" class="home-mobile-menu">
<div data-thq="thq-mobile-menu-nav" data-role="Nav" class="home-nav1">
<div class="home-nav-top">
<div data-thq="thq-close-menu" class="home-menu-close">
<svg viewBox="0 0 1024 1024" class="home-icon06">
<path
d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
></path>
</svg>
</div>
</div>
<nav
data-thq="thq-mobile-menu-nav-links"
data-role="Nav"
class="home-nav-body"
>
<router-link to="/" class="home-nav-home nav-link">
Home
</router-link>
<router-link to="/ueber-uns" class="home-nav-ueber-uns nav-link">
Über uns
</router-link>
<router-link
to="/larpkonzept"
class="home-nav-larpkonzept nav-link"
>
Larpkonzept
</router-link>
<div data-thq="thq-dropdown" class="home-larps-dropdown1 list-item">
<div
data-thq="thq-dropdown-toggle"
class="home-dropdown-toggle06"
>
<span class="home-nav-larps nav-link">Larps</span>
<div data-thq="thq-dropdown-arrow" class="home-dropdown-arrow2">
<svg viewBox="0 0 1024 1024" class="home-icon08">
<path d="M426 726v-428l214 214z"></path>
</svg>
</div>
</div>
<ul data-thq="thq-dropdown-list" class="home-larps-dropdown-list">
<router-link to="/letzte-gelegenheit">
<li
data-thq="thq-dropdown"
class="home-letzte-gelegenheit-dropdown list-item"
>
<div
data-thq="thq-dropdown-toggle"
class="home-dropdown-toggle07"
>
<span class="home-letzte-gelegenheit1 nav-link">
Letzte Gelegenheit
</span>
</div>
</li>
</router-link>
<router-link to="/suesse-traeume">
<li
data-thq="thq-dropdown"
class="home-suesse-traeume-dropdown list-item"
>
<div
data-thq="thq-dropdown-toggle"
class="home-dropdown-toggle08"
>
<span class="home-suesse-traeume1 nav-link">
Süsse Träume
</span>
</div>
</li>
</router-link>
</ul>
</div>
<div
data-thq="thq-dropdown"
class="home-kurzgeschichten-dropdown1 list-item"
>
<div
data-thq="thq-dropdown-toggle"
class="home-dropdown-toggle09"
>
<span class="home-nav-kurzgeschichten nav-link">
Kurzgeschichten
</span>
<div data-thq="thq-dropdown-arrow" class="home-dropdown-arrow3">
<svg viewBox="0 0 1024 1024" class="home-icon10">
<path d="M426 726v-428l214 214z"></path>
</svg>
</div>
</div>
<ul
data-thq="thq-dropdown-list"
class="home-kurzgeschichten-dropdown-list"
>
<router-link to="/ein-orden-fuer-eine-gute-tat">
<li
data-thq="thq-dropdown"
class="home-ein-orden-fuer-eine-gute-tat-dropdown list-item"
>
<div
data-thq="thq-dropdown-toggle"
class="home-dropdown-toggle10"
>
<span class="home-ein-orden-fuer-eine-gute-tat1 nav-link">
Ein Orden für eine gute Tat
</span>
</div>
</li>
</router-link>
<router-link to="/rosenteufel">
<li
data-thq="thq-dropdown"
class="home-rosenteufel-dropdown list-item"
>
<div
data-thq="thq-dropdown-toggle"
class="home-dropdown-toggle11"
>
<span class="home-rosenteufel1 nav-link">
Rosenteufel
</span>
</div>
</li>
</router-link>
</ul>
</div>
</nav>
</div>
</div>
</header>
</nav>
<h1 class="home-heading site-title"> <h1 class="home-heading site-title">
<span>OpenVisor</span> <span>OpenVisor</span>
<br /> <br />
@ -111,14 +339,12 @@
</template> </template>
<script> <script>
import AppNavigation from '../components/navigation'
import VeranstaltungenListe from '../components/veranstaltungen-liste' import VeranstaltungenListe from '../components/veranstaltungen-liste'
import AppKontakt from '../components/kontakt' import AppKontakt from '../components/kontakt'
export default { export default {
name: 'Home', name: 'Home',
components: { components: {
AppNavigation,
VeranstaltungenListe, VeranstaltungenListe,
AppKontakt, AppKontakt,
}, },
@ -150,6 +376,637 @@ export default {
background-size: cover; background-size: cover;
background-image: url("/forest-background-luca-dross-1500w.jpg"); background-image: url("/forest-background-luca-dross-1500w.jpg");
} }
.home-navbar {
width: 100%;
}
.home-navbar-interactive {
width: 100%;
display: flex;
position: relative;
align-items: center;
padding-top: var(--dl-space-space-fourunits);
padding-left: var(--dl-space-space-threeunits);
padding-right: var(--dl-space-space-threeunits);
padding-bottom: var(--dl-space-space-fourunits);
justify-content: space-between;
}
.home-navlink {
display: contents;
}
.home-logo {
width: 100px;
object-fit: cover;
transition: 0.3s;
text-decoration: none;
}
.home-desktop-menu {
display: flex;
}
.home-nav {
gap: var(--dl-space-space-fourunits);
flex: 0 0 auto;
display: flex;
align-items: center;
flex-direction: row;
}
.home-home {
font-style: normal;
font-weight: 500;
line-height: 1.15;
text-decoration: none;
}
.home-ueber-uns {
font-style: normal;
font-weight: 500;
line-height: 1.15;
text-decoration: none;
}
.home-larpkonzept {
color: #ffffff;
font-style: normal;
font-family: Poppins;
font-weight: 500;
text-decoration: none;
}
.home-larps-dropdown {
cursor: pointer;
display: inline-block;
position: relative;
border-radius: var(--dl-radius-radius-radius2);
}
.home-dropdown-toggle {
fill: #595959;
color: #595959;
width: 100%;
display: inline-flex;
align-items: center;
padding-top: var(--dl-space-space-halfunit);
padding-left: 0px;
border-radius: var(--dl-radius-radius-radius2);
padding-right: 0px;
padding-bottom: var(--dl-space-space-halfunit);
}
.home-larps {
color: #ffffff;
font-style: normal;
text-align: center;
font-family: Poppins;
font-weight: 500;
margin-right: 4px;
vertical-align: middle;
}
.home-dropdown-arrow {
transition: 0.3s;
}
.home-icon {
fill: #ffffff;
width: 18px;
height: 18px;
margin-top: auto;
transition: 0.3s;
margin-bottom: auto;
}
.home-dropdown-list {
left: 0%;
width: max-content;
display: none;
z-index: 100;
position: absolute;
min-width: 100%;
transition: 0.3s;
align-items: stretch;
border-color: #D9D9D9;
border-width: 1px;
border-radius: var(--dl-radius-radius-radius4);
flex-direction: column;
list-style-type: none;
background-color: var(--dl-color-gray-white);
list-style-position: inside;
}
.home-dropdown {
cursor: pointer;
display: inline-block;
position: relative;
border-radius: var(--dl-radius-radius-radius2);
text-decoration: none;
}
.home-dropdown-toggle01 {
fill: #595959;
color: #595959;
width: 100%;
display: inline-flex;
transition: 0.3s;
align-items: center;
padding-top: var(--dl-space-space-halfunit);
padding-left: var(--dl-space-space-unit);
border-radius: var(--dl-radius-radius-radius4);
padding-right: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-halfunit);
}
.home-dropdown-toggle01:hover {
fill: #fff;
color: #fff;
background-color: #595959;
}
.home-letzte-gelegenheit {
width: 100%;
cursor: pointer;
display: flex;
font-size: 14px;
font-style: normal;
font-family: Poppins;
font-weight: 400;
}
.home-dropdown1 {
cursor: pointer;
display: inline-block;
position: relative;
border-radius: var(--dl-radius-radius-radius2);
text-decoration: none;
}
.home-dropdown-toggle02 {
fill: #595959;
color: #595959;
width: 100%;
display: inline-flex;
transition: 0.3s;
align-items: center;
padding-top: var(--dl-space-space-halfunit);
padding-left: var(--dl-space-space-unit);
border-radius: var(--dl-radius-radius-radius4);
padding-right: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-halfunit);
}
.home-dropdown-toggle02:hover {
fill: #fff;
color: #fff;
background-color: #595959;
}
.home-suesse-traeume {
width: 100%;
cursor: pointer;
display: flex;
font-size: 14px;
font-style: normal;
font-family: Poppins;
font-weight: 400;
}
.home-kurzgeschichten-dropdown {
cursor: pointer;
display: inline-block;
position: relative;
border-radius: var(--dl-radius-radius-radius2);
}
.home-dropdown-toggle03 {
fill: #595959;
color: #595959;
width: 100%;
display: inline-flex;
align-items: center;
padding-top: var(--dl-space-space-halfunit);
padding-left: 0px;
border-radius: var(--dl-radius-radius-radius2);
padding-right: 0px;
padding-bottom: var(--dl-space-space-halfunit);
}
.home-kurzgeschichten {
color: #ffffff;
font-style: normal;
text-align: center;
font-family: Poppins;
font-weight: 500;
margin-right: 4px;
vertical-align: middle;
}
.home-dropdown-arrow1 {
transition: 0.3s;
}
.home-icon02 {
fill: #ffffff;
width: 18px;
height: 18px;
margin-top: auto;
transition: 0.3s;
margin-bottom: auto;
}
.home-dropdown-list1 {
left: 0%;
width: max-content;
display: none;
z-index: 100;
position: absolute;
min-width: 100%;
transition: 0.3s;
align-items: stretch;
border-color: #D9D9D9;
border-width: 1px;
border-radius: var(--dl-radius-radius-radius4);
flex-direction: column;
list-style-type: none;
background-color: var(--dl-color-gray-white);
list-style-position: inside;
}
.home-dropdown2 {
cursor: pointer;
display: inline-block;
position: relative;
border-radius: var(--dl-radius-radius-radius2);
text-decoration: none;
}
.home-dropdown-toggle04 {
fill: #595959;
color: #595959;
width: 100%;
display: inline-flex;
transition: 0.3s;
align-items: center;
padding-top: var(--dl-space-space-halfunit);
padding-left: var(--dl-space-space-unit);
border-radius: var(--dl-radius-radius-radius4);
padding-right: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-halfunit);
}
.home-dropdown-toggle04:hover {
fill: #fff;
color: #fff;
background-color: #595959;
}
.home-ein-orden-fuer-eine-gute-tat {
width: 100%;
cursor: pointer;
display: flex;
font-size: 14px;
font-style: normal;
font-family: Poppins;
font-weight: 400;
}
.home-dropdown3 {
cursor: pointer;
display: inline-block;
position: relative;
border-radius: var(--dl-radius-radius-radius2);
text-decoration: none;
}
.home-dropdown-toggle05 {
fill: #595959;
color: #595959;
width: 100%;
display: inline-flex;
transition: 0.3s;
align-items: center;
padding-top: var(--dl-space-space-halfunit);
padding-left: var(--dl-space-space-unit);
border-radius: var(--dl-radius-radius-radius4);
padding-right: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-halfunit);
}
.home-dropdown-toggle05:hover {
fill: #fff;
color: #fff;
background-color: #595959;
}
.home-rosenteufel {
width: 100%;
cursor: pointer;
display: flex;
font-size: 14px;
font-style: normal;
font-family: Poppins;
font-weight: 400;
}
.home-burger-menu {
display: none;
align-items: center;
justify-content: center;
}
.home-icon04 {
fill: #ffffff;
width: 36px;
cursor: pointer;
height: 36px;
padding: 6px;
transition: 0.3s;
border-radius: 18px;
background-color: rgba(100, 100, 100, 0.4);
}
.home-icon04:hover {
opacity: 0.5;
}
.home-mobile-menu {
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
display: none;
padding: 32px;
z-index: 100;
position: absolute;
flex-direction: column;
justify-content: space-between;
background-color: rgba(0,0,0,0.8);
transition-duration: 0.5;
}
.home-nav1 {
display: flex;
align-items: flex-start;
flex-direction: column;
}
.home-nav-top {
width: auto;
display: flex;
align-items: flex-end;
margin-left: 90%;
justify-content: flex-end;
}
.home-menu-close {
display: flex;
}
.home-icon06 {
fill: #ffffff;
width: 30px;
cursor: pointer;
height: 30px;
margin-top: 30px;
transition: 0.3s;
margin-left: -30px;
}
.home-icon06:hover {
opacity: 0.5;
}
.home-nav-body {
flex: 0 0 auto;
display: flex;
margin-top: -30px;
align-items: flex-start;
margin-left: 30px;
flex-direction: column;
}
.home-nav-home {
font-style: normal;
font-family: Poppins;
font-weight: 500;
margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
.home-nav-ueber-uns {
font-style: normal;
font-family: Poppins;
font-weight: 500;
margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
.home-nav-larpkonzept {
font-style: normal;
font-family: Poppins;
font-weight: 500;
margin-bottom: var(--dl-space-space-unit);
text-decoration: none;
}
.home-larps-dropdown1 {
cursor: pointer;
display: inline-block;
position: relative;
border-radius: var(--dl-radius-radius-radius2);
}
.home-dropdown-toggle06 {
fill: #595959;
color: #595959;
width: 100%;
display: inline-flex;
align-items: center;
padding-top: var(--dl-space-space-halfunit);
padding-left: var(--dl-space-space-unit);
border-radius: var(--dl-radius-radius-radius2);
padding-right: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-halfunit);
}
.home-nav-larps {
font-size: 14px;
font-style: normal;
text-align: center;
font-family: Poppins;
font-weight: 500;
margin-right: 4px;
vertical-align: middle;
}
.home-dropdown-arrow2 {
transition: 0.3s;
}
.home-icon08 {
width: 18px;
height: 18px;
margin-top: auto;
transition: 0.3s;
margin-bottom: auto;
}
.home-larps-dropdown-list {
left: 0%;
width: max-content;
display: none;
z-index: 100;
position: absolute;
min-width: 100%;
transition: 0.3s;
align-items: stretch;
border-color: #D9D9D9;
border-width: 1px;
border-radius: var(--dl-radius-radius-radius4);
flex-direction: column;
list-style-type: none;
background-color: var(--dl-color-gray-white);
list-style-position: inside;
}
.home-letzte-gelegenheit-dropdown {
cursor: pointer;
display: inline-block;
position: relative;
border-radius: var(--dl-radius-radius-radius2);
text-decoration: none;
}
.home-dropdown-toggle07 {
fill: #595959;
color: #595959;
width: 100%;
display: inline-flex;
transition: 0.3s;
align-items: center;
padding-top: var(--dl-space-space-halfunit);
padding-left: var(--dl-space-space-unit);
border-radius: var(--dl-radius-radius-radius4);
padding-right: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-halfunit);
}
.home-dropdown-toggle07:hover {
fill: #fff;
color: #fff;
background-color: #595959;
}
.home-letzte-gelegenheit1 {
width: 100%;
cursor: pointer;
display: flex;
font-size: 14px;
font-style: normal;
font-family: Poppins;
font-weight: 400;
}
.home-suesse-traeume-dropdown {
cursor: pointer;
display: inline-block;
position: relative;
border-radius: var(--dl-radius-radius-radius2);
text-decoration: none;
}
.home-dropdown-toggle08 {
fill: #595959;
color: #595959;
width: 100%;
display: inline-flex;
transition: 0.3s;
align-items: center;
padding-top: var(--dl-space-space-halfunit);
padding-left: var(--dl-space-space-unit);
border-radius: var(--dl-radius-radius-radius4);
padding-right: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-halfunit);
}
.home-dropdown-toggle08:hover {
fill: #fff;
color: #fff;
background-color: #595959;
}
.home-suesse-traeume1 {
width: 100%;
cursor: pointer;
display: flex;
font-size: 14px;
font-style: normal;
font-family: Poppins;
font-weight: 400;
}
.home-kurzgeschichten-dropdown1 {
cursor: pointer;
display: inline-block;
position: relative;
border-radius: var(--dl-radius-radius-radius2);
}
.home-dropdown-toggle09 {
fill: #595959;
color: #595959;
width: 100%;
display: inline-flex;
align-items: center;
padding-top: var(--dl-space-space-halfunit);
padding-left: var(--dl-space-space-unit);
border-radius: var(--dl-radius-radius-radius2);
padding-right: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-halfunit);
}
.home-nav-kurzgeschichten {
font-size: 14px;
font-style: normal;
text-align: center;
font-family: Poppins;
font-weight: 500;
margin-right: 4px;
vertical-align: middle;
}
.home-dropdown-arrow3 {
transition: 0.3s;
}
.home-icon10 {
width: 18px;
height: 18px;
margin-top: auto;
transition: 0.3s;
margin-bottom: auto;
}
.home-kurzgeschichten-dropdown-list {
left: 0%;
width: max-content;
display: none;
z-index: 100;
position: absolute;
min-width: 100%;
transition: 0.3s;
align-items: stretch;
border-color: #D9D9D9;
border-width: 1px;
border-radius: var(--dl-radius-radius-radius4);
flex-direction: column;
list-style-type: none;
background-color: var(--dl-color-gray-white);
list-style-position: inside;
}
.home-ein-orden-fuer-eine-gute-tat-dropdown {
cursor: pointer;
display: inline-block;
position: relative;
border-radius: var(--dl-radius-radius-radius2);
text-decoration: none;
}
.home-dropdown-toggle10 {
fill: #595959;
color: #595959;
width: 100%;
display: inline-flex;
transition: 0.3s;
align-items: center;
padding-top: var(--dl-space-space-halfunit);
padding-left: var(--dl-space-space-unit);
border-radius: var(--dl-radius-radius-radius4);
padding-right: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-halfunit);
}
.home-dropdown-toggle10:hover {
fill: #fff;
color: #fff;
background-color: #595959;
}
.home-ein-orden-fuer-eine-gute-tat1 {
width: 100%;
cursor: pointer;
display: flex;
font-size: 14px;
font-style: normal;
font-family: Poppins;
font-weight: 400;
}
.home-rosenteufel-dropdown {
cursor: pointer;
display: inline-block;
position: relative;
border-radius: var(--dl-radius-radius-radius2);
text-decoration: none;
}
.home-dropdown-toggle11 {
fill: #595959;
color: #595959;
width: 100%;
display: inline-flex;
transition: 0.3s;
align-items: center;
padding-top: var(--dl-space-space-halfunit);
padding-left: var(--dl-space-space-unit);
border-radius: var(--dl-radius-radius-radius4);
padding-right: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-halfunit);
}
.home-dropdown-toggle11:hover {
fill: #fff;
color: #fff;
background-color: #595959;
}
.home-rosenteufel1 {
width: 100%;
cursor: pointer;
display: flex;
font-size: 14px;
font-style: normal;
font-family: Poppins;
font-weight: 400;
}
.home-heading { .home-heading {
font-size: 64px; font-size: 64px;
} }
@ -367,11 +1224,75 @@ export default {
line-height: 24px; line-height: 24px;
} }
@media(max-width: 991px) { @media(max-width: 991px) {
.home-navbar-interactive {
padding-bottom: var(--dl-space-space-twounits);
}
.home-desktop-menu {
display: none;
}
.home-nav {
gap: var(--dl-space-space-twounits);
justify-content: center;
}
.home-burger-menu {
display: flex;
}
.home-caption { .home-caption {
text-align: left; text-align: left;
} }
} }
@media(max-width: 767px) { @media(max-width: 767px) {
.home-dropdown-list {
display: none;
}
.home-dropdown-list1 {
display: none;
}
.home-nav-home {
color: #ffffff;
}
.home-nav-ueber-uns {
color: #ffffff;
}
.home-nav-larpkonzept {
color: #ffffff;
}
.home-nav-larps {
color: #ffffff;
font-size: 16px;
}
.home-icon08 {
fill: #ffffff;
}
.home-larps-dropdown-list {
display: none;
border-color: #000000;
background-color: rgb(41, 41, 41);
}
.home-letzte-gelegenheit1 {
color: #ffffff;
}
.home-suesse-traeume1 {
color: #ffffff;
}
.home-nav-kurzgeschichten {
color: #ffffff;
font-size: 16px;
}
.home-icon10 {
fill: #ffffff;
}
.home-kurzgeschichten-dropdown-list {
display: none;
border-color: #000000;
background-color: rgb(41, 41, 41);
}
.home-ein-orden-fuer-eine-gute-tat1 {
color: #ffffff;
}
.home-rosenteufel1 {
color: #ffffff;
}
.home-caption { .home-caption {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 16px; font-size: 16px;
@ -384,6 +1305,15 @@ export default {
} }
} }
@media(max-width: 479px) { @media(max-width: 479px) {
.home-navbar-interactive {
padding: var(--dl-space-space-unit);
}
.home-icon08 {
fill: #ffffff;
}
.home-icon10 {
fill: #ffffff;
}
.home-caption { .home-caption {
font-family: Poppins; font-family: Poppins;
} }

View file

@ -89,7 +89,7 @@
Geschlecht definiert die spielende Person. Es wird ein paar Geschlecht definiert die spielende Person. Es wird ein paar
Nichtspielercharaktere geben die von Helfern bespielt werden, zum Nichtspielercharaktere geben die von Helfern bespielt werden, zum
Beispiel Häftling Summers, der/die mit euch ins Beispiel Häftling Summers, der/die mit euch ins
<span v-html="rawgheo"></span> <span v-html="rawk68q"></span>
</span> </span>
<span>Spiel startet.</span> <span>Spiel startet.</span>
<br /> <br />
@ -149,7 +149,7 @@ export default {
}, },
data() { data() {
return { return {
rawgheo: ' ', rawk68q: ' ',
} }
}, },
metaInfo: { metaInfo: {

View file

@ -68,7 +68,7 @@
Aber... Edler, bei Gotts Gnad, ich wärt kein gut Christ Euch ohne Warn Aber... Edler, bei Gotts Gnad, ich wärt kein gut Christ Euch ohne Warn
lass schreiten. Seit Geschehnem ist hie kein einzger entlang. Wer weiss lass schreiten. Seit Geschehnem ist hie kein einzger entlang. Wer weiss
was was
<span v-html="rawyo4w"></span> <span v-html="raw4oii"></span>
</span> </span>
<span>Geziefer dort treibt...</span> <span>Geziefer dort treibt...</span>
<br /> <br />
@ -236,7 +236,7 @@
nicht sauber gefragt und der Knecht viel zu blass als ihm vorzukommen. nicht sauber gefragt und der Knecht viel zu blass als ihm vorzukommen.
Letztlich doch die Augen sich schlossen. Doch wachten nur noch Ritter Letztlich doch die Augen sich schlossen. Doch wachten nur noch Ritter
und Knecht. Des Ritters Petz Kling noch immer rot; des Knechts Haut und Knecht. Des Ritters Petz Kling noch immer rot; des Knechts Haut
<span v-html="rawa4a4"></span> <span v-html="rawfnli"></span>
</span> </span>
<span> <span>
noch immer weiss und nass. Dieses Mal der Knecht nicht wagte zu fragen noch immer weiss und nass. Dieses Mal der Knecht nicht wagte zu fragen
@ -287,7 +287,7 @@
zuher. Sie starrten; auch kalt und hilflos wie Kind. Ich schritt nach zuher. Sie starrten; auch kalt und hilflos wie Kind. Ich schritt nach
vorn: In die Händ des Toten seh, weiss Ros. Ins Gesicht des Toten blick. vorn: In die Händ des Toten seh, weiss Ros. Ins Gesicht des Toten blick.
Beulen ziertens. Hässliche Beulen. Der Teufel aber wart woanders... Beulen ziertens. Hässliche Beulen. Der Teufel aber wart woanders...
<span v-html="rawg5f7"></span> <span v-html="rawrsmz"></span>
</span> </span>
</span> </span>
</div> </div>
@ -307,9 +307,9 @@ export default {
}, },
data() { data() {
return { return {
rawyo4w: ' ', raw4oii: ' ',
rawa4a4: ' ', rawfnli: ' ',
rawg5f7: ' ', rawrsmz: ' ',
} }
}, },
metaInfo: { metaInfo: {