Update layout

This commit is contained in:
philipp lang 2024-10-09 19:36:44 +02:00
parent a994ca6f77
commit 838b5a1cd2
29 changed files with 312 additions and 307 deletions

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
.DS_Store .DS_Store
.idea .idea
node_modules node_modules
/assets/

View File

@ -1,19 +1,20 @@
[viewBag] [viewBag]
title = "Kluft & Aufnäher" title = "Kluft & Aufnäher"
url = "/service/kluft-aufnaeher" url = "/service/kluft-aufnaeher"
layout = "sections" layout = "stufen"
is_hidden = 0 is_hidden = 0
navigation_hidden = 0 navigation_hidden = 0
sections[0][heading] = "Wie komme ich an eine Kluft?" groups[0][header] = "Wie komme ich an eine Kluft?"
sections[0][content] = "<p>Die Kluft bestellst du in der Regel selbst direkt beim <a href=\"https://www.ruesthaus.de/dpsg-artikel/pfadfinderkluft/hemden-blusen/\" rel=\"noopener noreferrer\" target=\"_blank\">Rüsthaus</a> in der für dich passenden Größe. Wir empfehlen die langärmlige Kluft, da sie für die meisten Zwecke besser geeignet ist als eine kurzärmlige.</p> groups[0][content] = "<p>Die Kluft bestellst du in der Regel selbst direkt beim <a href=\"https://www.ruesthaus.de/dpsg-artikel/pfadfinderkluft/hemden-blusen/\" rel=\"noopener noreferrer\" target=\"_blank\">Rüsthaus</a> in der für dich passenden Größe. Wir empfehlen die langärmlige Kluft, da sie für die meisten Zwecke besser geeignet ist als eine kurzärmlige.</p>
<p>Es gibt häufig auch günstigere Angebote von gebrauchten Kluften - z.B. bei <a href=\"https://www.ebay-kleinanzeigen.de/\" rel=\"noopener noreferrer\" target=\"_blank\">Ebay Kleinanzeigen</a>. Jedoch trägst du eine Kluft i.d.R. mehrere Jahre bis sie dir nicht mehr passt. Daher ist es auf jeden Fall eine gute Investition.</p> <p>Es gibt häufig auch günstigere Angebote von gebrauchten Kluften - z.B. bei <a href=\"https://www.ebay-kleinanzeigen.de/\" rel=\"noopener noreferrer\" target=\"_blank\">Ebay Kleinanzeigen</a>. Jedoch trägst du eine Kluft i.d.R. mehrere Jahre bis sie dir nicht mehr passt. Daher ist es auf jeden Fall eine gute Investition.</p>
<p>Du bekommst nur das Hemd in Blanko - also ohne Aufnäher und Halstuch. Wir empfehlen dir zudem, ein <a href=\"https://nextcloud.stammsilva.de/s/eKGQrK39abfcZB3\" rel=\"noopener noreferrer\" target=\"_blank\">Standard-Aufnäher-Paket</a> direkt bei uns zu kaufen nachdem du deine Kluft angeschafft hast. Mehr dazu weiter unten.</p>" <p>Du bekommst nur das Hemd in Blanko - also ohne Aufnäher und Halstuch. Wir empfehlen dir zudem, ein <a href=\"https://nextcloud.stammsilva.de/s/eKGQrK39abfcZB3\" rel=\"noopener noreferrer\" target=\"_blank\">Standard-Aufnäher-Paket</a> direkt bei uns zu kaufen nachdem du deine Kluft angeschafft hast. Mehr dazu weiter unten.</p>"
sections[0][subcontent] = "" groups[0][contact_mail] = ""
sections[0][image] = "" groups[0][align] = "right"
sections[1][heading] = "Welche Aufnäher gehören auf die Kluft?" groups[0][image] = ""
sections[1][content] = "<p>Es gibt 6 Aufnäher, die standardmäßig <strong>auf jeder Kluft an vorgesehenen Positionen sein müssen</strong>. Dies wären die folgenden:</p> groups[1][header] = "Welche Aufnäher gehören auf die Kluft?"
groups[1][content] = "<p>Es gibt 6 Aufnäher, die standardmäßig <strong>auf jeder Kluft an vorgesehenen Positionen sein müssen</strong>. Dies wären die folgenden:</p>
<ul> <ul>
<li>Stammesabzeichen \"Stamm Silva\" auf rechter Tasche</li> <li>Stammesabzeichen \"Stamm Silva\" auf rechter Tasche</li>
@ -22,13 +23,16 @@ sections[1][content] = "<p>Es gibt 6 Aufnäher, die standardmäßig <strong>auf
<li>Bezirkslogo \"DPSG Bergisch Land\" auf linker Tasche</li> <li>Bezirkslogo \"DPSG Bergisch Land\" auf linker Tasche</li>
<li>Weltbundlilie lila auf linker Taschen-Abdeckung</li> <li>Weltbundlilie lila auf linker Taschen-Abdeckung</li>
<li>Darüber: ICCS</li> <li>Darüber: ICCS</li>
</ul>" </ul>
sections[1][subcontent] = "<p>Du findest im Schaubild die passenden Aufnäher und die Positionen markiert. Diese Aufnäher kannst du (mit Ausnahme des Stufenabzeichens) <strong>als ein Paket direkt bei der Gruppenstunde bei uns vor Ort</strong> für 7.30 € kaufen. Melde dich dazu einfach bei deinem*r Gruppenleitenden. Das Stufenabzeichen gibt's hingegen beim Versprechen.</p>
<p>Du findest im Schaubild die passenden Aufnäher und die Positionen markiert. Diese Aufnäher kannst du (mit Ausnahme des Stufenabzeichens) <strong>als ein Paket direkt bei der Gruppenstunde bei uns vor Ort</strong> für 7.30 € kaufen. Melde dich dazu einfach bei deinem*r Gruppenleitenden. Das Stufenabzeichen gibt's hingegen beim Versprechen.</p>
<p><a href=\"https://nextcloud.stammsilva.de/s/eKGQrK39abfcZB3\" rel=\"noopener noreferrer\" target=\"_blank\">Hier geht's zur Preisliste.</a></p>" <p><a href=\"https://nextcloud.stammsilva.de/s/eKGQrK39abfcZB3\" rel=\"noopener noreferrer\" target=\"_blank\">Hier geht's zur Preisliste.</a></p>"
sections[1][image] = "/seiten/positionen.jpg" groups[1][contact_mail] = ""
sections[2][heading] = "Kann ich andere Aufnäher aufnähen?" groups[1][align] = "right"
sections[2][content] = "<p>Es gibt noch viele andere bunte Abzeichen in jeglicher Form, die du auf Lagern erwerben, dir selbst zulegen oder auch mit anderen Pfadfinder*innen tauschen kannst.</p> groups[1][image] = "/seiten/positionen.jpg"
groups[2][header] = "Kann ich andere Aufnäher aufnähen?"
groups[2][content] = "<p>Es gibt noch viele andere bunte Abzeichen in jeglicher Form, die du auf Lagern erwerben, dir selbst zulegen oder auch mit anderen Pfadfinder*innen tauschen kannst.</p>
<p>Wo du die aufnähst ist völlig egal. Und auch die Menge an Aufnähern kannst du selbst bestimmen.</p> <p>Wo du die aufnähst ist völlig egal. Und auch die Menge an Aufnähern kannst du selbst bestimmen.</p>
@ -42,17 +46,18 @@ sections[2][content] = "<p>Es gibt noch viele andere bunte Abzeichen in jegliche
<p>Spreche dazu einfach mit deinem*r Gruppenleitenden.</p> <p>Spreche dazu einfach mit deinem*r Gruppenleitenden.</p>
<p>Wenn du Aufnäher gerne haben willst, die wir aber noch nicht haben, spreche uns auch gerne an.</p>" <p>Wenn du Aufnäher gerne haben willst, die wir aber noch nicht haben, spreche uns auch gerne an.</p>"
sections[2][subcontent] = "" groups[2][contact_mail] = ""
sections[2][image] = "" groups[2][align] = "right"
sections[3][heading] = "Wo bekomme ich das Halstuch / Stufenabzeichen her und wie viel kostet das?" groups[2][image] = ""
sections[3][content] = "<p>Das Halstuch und das Stufenabzeichen gibt es beim <strong>Versprechen</strong>. Dies wird in der Regel alle zwei Jahre abgelegt wenn ihr in eine neue Altersstufe aufsteigt.</p> groups[3][header] = "Wo bekomme ich das Halstuch / Stufenabzeichen her und wie viel kostet das?"
groups[3][content] = "<p>Das Halstuch und das Stufenabzeichen gibt es beim <strong>Versprechen</strong>. Dies wird in der Regel alle zwei Jahre abgelegt wenn ihr in eine neue Altersstufe aufsteigt.</p>
<p>Die Kosten hierfür sind durch den Jahresbeitrag gedeckt, sodass ihr hierfür alle zwei Jahre ein Stufenabzeichen und ein Halstuch bekommt. Lediglich bei Verlust muss dieses nachgekauft werden. Der Halstuchknoten muss einmalig extra erworben werden, denn den behälst du i.d.R. ein Leben lang.</p> <p>Die Kosten hierfür sind durch den Jahresbeitrag gedeckt, sodass ihr hierfür alle zwei Jahre ein Stufenabzeichen und ein Halstuch bekommt. Lediglich bei Verlust muss dieses nachgekauft werden. Der Halstuchknoten muss einmalig extra erworben werden, denn den behälst du i.d.R. ein Leben lang.</p>
<p>Außerdem kannst du bei uns unabhängig von deinem Stufen-Halstuch ein Stammeshalstuch zum Preis von 20 € erwerben.</p>" <p>Außerdem kannst du bei uns unabhängig von deinem Stufen-Halstuch ein Stammeshalstuch zum Preis von 20 € erwerben.</p>"
sections[3][subcontent] = "" groups[3][contact_mail] = ""
sections[3][image] = "/seiten/halstuch.png" groups[3][align] = "right"
groups[3][image] = "/seiten/halstuch.png"
header_image = "header/weinberg.jpg" header_image = "header/weinberg.jpg"
show_submenu = 1 show_submenu = 0
== ==
<p>Das beige Hemd was wir alle tragen wird "Kluft" genannt. Jeder Pfadfinder sollte eine Kluft besitzen. Daher gibt es hier eine kleine FAQ-Sektion zur Kluft.</p>

View File

@ -1,11 +0,0 @@
[headAssets]
==
<!doctype html>
<html lang="it">
{% partial 'shared/head' %}
<body class="font-sans">
{% partial 'shared/header' %}
{% page %}
{% partial 'shared/footer' %}
</body>
</html>

View File

@ -6,14 +6,7 @@ code = "mainmenu"
[staticMenu footmenu] [staticMenu footmenu]
code = "footmenu" code = "footmenu"
== ==
{% partial 'site/head' logo='logos/wappen.png' header_image='header/weinberg.jpg' %} {% partial 'shared/head' logo='logos/wappen.png' header_image='header/weinberg.jpg' %}
<h1 class="font-semibold font-arvo bg-primary-200 py-3"> {% partial 'ui/heading' %}
<div class="container text-primary-800 text-xl font-arvo flex items-baseline">
{{'dpsgstart' | sprite('w-8 h-4 text-dpsgred mr-2')}}
<span class="text-sm md:text-base font-semibold">
{{this.page.title}}
</span>
</div>
</h1>
{% page %} {% page %}
{% partial 'site/foot' %} {% partial 'shared/foot' %}

View File

@ -10,23 +10,11 @@ code=mainmenu
[staticMenu footmenu] [staticMenu footmenu]
code=footmenu code=footmenu
== ==
{% partial 'site/head' logo='logos/wappen.png' %} {% partial 'shared/head' logo='logos/wappen.png' %}
<h1 class="font-semibold font-arvo bg-primary-200 py-3"> {% partial 'ui/heading' %}
<div class="container text-primary-800 text-xl font-arvo flex items-baseline"> <div class="container">
{{'dpsgstart' | sprite('w-8 h-4 text-dpsgred mr-2')}} <div class="prose py-12 prose-sm max-w-none">
<span class="text-sm md:text-base font-semibold">
{{this.page.title}}
</span>
</div>
</h1>
<div class="container flex py-12">
<div class="flex-none w-64 mr-6 hidden navbar:block">
<div class="sticky top-6">
{% partial 'site/side.htm' %}
</div>
</div>
<div class="text-gray-800 c">
{% page %} {% page %}
</div> </div>
</div> </div>
{% partial 'site/foot' %} {% partial 'shared/foot' %}

View File

@ -1,38 +0,0 @@
[staticPage]
useContent = 1
default = 0
[secondmenu]
[staticMenu mainmenu]
code = "mainmenu"
[staticMenu footmenu]
code = "footmenu"
[eventform]
==
{% partial 'site/head' logo='logos/friedenslicht.png' %}
<h1 class="font-semibold font-arvo bg-primary-200 py-3">
<div class="container text-primary-800 text-xl font-arvo flex items-baseline">
{{'dpsgstart' | sprite('w-8 h-4 text-dpsgred mr-2')}}
<span class="text-sm md:text-base font-semibold">
{{this.page.title}}
</span>
</div>
</h1>
<div class="container flex items-center flex-col py-12">
<div class="mt-8 flex flex-col lg:flex-row items-start">
<div class="c text-gray-800 text-lg">
{% page %}
</div>
<div class="p-6 lg:ml-6 flex-none w-full lg:w-72 shadow rounded-lg bg-white">
<h3 class="c">Anmeldung zur Friedenslicht-Aktion 2022</h3>
<div class="mt-5">
{% component 'eventform' %}
</div>
</div>
</div>
</div>
{% partial 'site/foot' %}

View File

@ -15,21 +15,14 @@ logo = "logos/facebook-slider.png"
code=footmenu code=footmenu
== ==
{% partial 'shared/head' logo='logos/wappen.png' %} {% partial 'shared/head' logo='logos/wappen.png' %}
<h1 class="font-semibold font-arvo bg-primary-200 py-3"> {% partial 'ui/heading' %}
<div class="container text-primary-800 text-xl font-arvo flex items-baseline">
{{'dpsgstart' | sprite('w-8 h-4 text-dpsgred mr-2')}}
<span class="text-sm md:text-base font-semibold">
{{this.page.title}}
</span>
</div>
</h1>
<div class="container flex items-center flex-col py-12"> <div class="container flex items-center flex-col py-12">
<img {{'seiten/dpsgstart.png' | resize}}> <img {{'seiten/dpsgstart.png' | resize}}>
<div class="text-gray-800 c text-lg mt-8"> <div class="text-gray-800 prose text-center mt-8">
{% page %} {% page %}
</div> </div>
<h2 class="mt-12 text-center font-arvo font-semibold text-2xl text-primary-700">Neuigkeiten</h2> <h2 class="mt-12 text-center font-arvo font-semibold text-2xl text-sky-900">Neuigkeiten</h2>
{% component 'facebookpagefeed' %} {% component 'facebookpagefeed' %}
</div> </div>

View File

@ -1,52 +0,0 @@
[staticPage]
useContent = 1
default = 0
[secondmenu]
[staticMenu mainmenu]
code=mainmenu
[staticMenu footmenu]
code=footmenu
==
{% partial 'site/head' logo='logos/wappen.png' %}
<h1 class="font-semibold font-arvo bg-primary-200 py-3">
<div class="container text-primary-800 text-xl font-arvo flex items-baseline">
{{'dpsgstart' | sprite('w-8 h-4 text-dpsgred mr-2')}}
<span class="text-sm md:text-base font-semibold">
{{this.page.title}}
</span>
</div>
</h1>
<div class="container flex py-12">
<div class="flex-none w-64 mr-6 hidden navbar:block">
<div class="sticky top-6">
{% partial 'site/side.htm' %}
</div>
</div>
<div>
<div class="text-gray-800 c">
{% page %}
</div>
{repeater name="sections" tab="Sektionen" prompt="Neue Sektion"}
<div class="hidden">
{text name="heading" label="Überschrift"}{/text}
{richeditor name="content" label="Inhalt"}{/richeditor}
{richeditor name="subcontent" label="Unter Inhalt"}{/richeditor}
{mediafinder name="image" label="Bild"}{/mediafinder}
</div>
<h2 class="c">{{fields.heading}}</h2>
<div class="flex lg:space-x-3 flex-col lg:flex-row">
<div class="c">{{fields.content | raw}}</div>
{% if fields.image %}
<div class="w-64 flex-none mt-3 lg:mt-0">
<img {{fields.image|resize("original", "calc(100vw-3rem)|750:calc(100vw-20rem)|1024:256px")}} />
</div>
{% endif %}
</div>
<div class="c mt-6 lg:mt-3">{{fields.subcontent | raw}}</div>
{/repeater}
</div>
</div>
{% partial 'site/foot' %}

View File

@ -10,38 +10,33 @@ code=mainmenu
[staticMenu footmenu] [staticMenu footmenu]
code=footmenu code=footmenu
== ==
{% partial 'site/head' logo='logos/wappen.png' %} {% partial 'shared/head' logo='logos/wappen.png' %}
<h1 class="font-semibold font-arvo bg-primary-200 py-3"> {% partial 'ui/heading' %}
<div class="container text-primary-800 text-xl font-arvo flex items-baseline">
{{'dpsgstart' | sprite('w-8 h-4 text-dpsgred mr-2')}}
<span class="text-sm md:text-base font-semibold">
{{this.page.title}}
</span>
</div>
</h1>
<div class="container flex py-12 items-start"> <div class="container flex py-12 items-start">
<div class="text-gray-800 c"> <div class="text-gray-800 c">
{% page %} {% page %}
{repeater name="groups" tab="Gruppen" prompt="Neuer Eintrag"} {repeater name="groups" tab="Gruppen" prompt="Neuer Eintrag"}
<div class="flex flex-col sm:flex-row items-baseline mt-10 first:mt-0">
<h2 class="text-xl font-arvo font-semibold text-sky-900 mr-4">{text name="header" label="Überschrift"}{/text}</h2>
<a href="mailto:{{html_email(fields.contact_mail)}}" class="bg-sky-100 text-sky-900 text-sm p-1">{{html_email(fields.contact_mail)}}</a>
</div>
<div class="flex mt-4 {% if fields.align == 'left' %} flex-col-reverse md:flex-row-reverse {% else %} flex-col-reverse md:flex-row {% endif %} ">
<div class="{% if fields.align == 'left' %} ml-0 md:ml-4 mt-5 md:mt-0 {% else %} mr-0 md:mr-4 mt-5 md:mt-0 {% endif %}">
<div class="prose prose-sm max-w-none">{richeditor name="content" label="Inhalt" hidden}{/richeditor}</div>
</div>
{% if fields.image %}
<div class="flex-none h-auto md:h-64 w-48 md:w-64">
<img {{fields.image | resize('original', '80px|768:256px')}} class="w-full h-full object-contain object-top">
</div>
{% endif %}
</div>
<div class="hidden"> <div class="hidden">
{text name="contact_mail" label="E-Mail"}{/text} {text name="contact_mail" label="E-Mail"}{/text}
{radio name="align" label="Ausrichtung des Bildes" options="right:Rechts|left:Links"}{/radio} {radio name="align" label="Ausrichtung des Bildes" options="right:Rechts|left:Links"}{/radio}
{mediafinder name="image" label="Bild" span="left"}{/mediafinder} {mediafinder name="image" label="Bild" span="left"}{/mediafinder}
</div> </div>
<div class="flex {% if fields.align == 'left' %} flex-col-reverse md:flex-row-reverse {% else %} flex-col-reverse md:flex-row {% endif %} items-center mt-10">
<div class="{% if fields.align == 'left' %} ml-0 md:ml-4 {% else %} mr-0 md:mr-4 {% endif %}">
<div class="flex flex-col sm:flex-row items-baseline">
<h2 class="text-lg font-arvo font-semibold text-primary-700 mr-4">{text name="header" label="Überschrift"}{/text}</h2>
<a href="mailto:{{html_email(fields.contact_mail)}}" class="bg-primary-100 text-primary-500 text-sm p-1">{{html_email(fields.contact_mail)}}</a>
</div>
<div class="c">{richeditor name="content" label="Inhalt" hidden}{/richeditor}</div>
</div>
<div class="flex-none">
<img {{fields.image | resize('original', '80px|768:256px')}} class="w-20 md:w-64 h-20 md:h-64 object-contain">
</div>
</div>
{/repeater} {/repeater}
</div> </div>
</div> </div>
{% partial 'site/foot' %} {% partial 'shared/foot' %}

View File

@ -148,10 +148,8 @@ items:
title: 'Kluft & Aufnäher' title: 'Kluft & Aufnäher'
nesting: 0 nesting: 0
type: static-page type: static-page
url: null
code: '' code: ''
reference: service-kluft-aufnaeher reference: service-kluft
cmsPage: null
replace: 0 replace: 0
viewBag: viewBag:
isHidden: '0' isHidden: '0'
@ -172,9 +170,13 @@ items:
isExternal: '0' isExternal: '0'
- -
title: Anmeldung title: Anmeldung
nesting: false
type: cms-page type: cms-page
url: null
code: '' code: ''
reference: event-index reference: event-index
cmsPage: null
replace: false
viewBag: viewBag:
isHidden: '0' isHidden: '0'
cssClass: '' cssClass: ''

View File

@ -1,17 +1,17 @@
static-pages: static-pages:
index: { } index: {}
stamm: stamm:
stamm-geschichte: { } stamm-geschichte: {}
stamm-dpsg: { } stamm-dpsg: {}
stamm-gemeinde-und-pfarrverband: { } stamm-gemeinde-und-pfarrverband: {}
stamm-bezirk-bergisch-land: { } stamm-bezirk-bergisch-land: {}
stamm-pfadfindergesetz: { } stamm-pfadfindergesetz: {}
kontakt: { } kontakt: {}
stufen: { } stufen: {}
service: service:
service-anmeldung: { } service-anmeldung: {}
service-kluft-aufnaeher: { } service-materialverleih: {}
service-materialverleih: { } service-kluft: {}
service-wichtige-downloads: { } service-wichtige-downloads: {}
datenschutzerklaerung: { } datenschutzerklaerung: {}
impressum: { } impressum: {}

17
partials/button.htm Executable file
View File

@ -0,0 +1,17 @@
description = "Button"
[viewBag]
snippetCode = "button"
snippetName = "Button"
snippetProperties[href][title] = "href"
snippetProperties[href][type] = "string"
snippetProperties[href][default] = ""
snippetProperties[href][options][] = ""
snippetProperties[label][title] = "label"
snippetProperties[label][type] = "string"
snippetProperties[label][default] = ""
snippetProperties[label][options][] = ""
==
<a href="{{href}}" class="border-2 border-sky-500 rounded-lg shadow px-4 py-2 inline-block mt-2 mb-2 leading-none hover:bg-sky-100 transition duration-300 no-underline" target="_BLANK">
{{label}}
</a>

View File

@ -0,0 +1,29 @@
<div class="relative">
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-6 pb-16 pt-5">
{% for post in __SELF__.posts %}
<a href="{{post.href}}" class="flex flex-col h-full box shadow-lg hover:shadow-2xl rounded-xl overflow-hidden bg-sky-50" target="_BLANK">
{% if post.featuredImage %}
<img {{ post.featuredImage | resize('box', 'calc(100vw - 1.5rem)|640:calc(50vw - 1.5rem)|1024:calc(33vw - 1.5rem)|1152:360px') }} class="object-cover w-full h-48">
{% endif %}
<div class="flex items-end justify-between px-6 py-3">
{% if __SELF__.logo %}
<script type="text/html" data-lazy data-src="logo">
<img src="{{__SELF__.logo|media}}" class="w-8">
</script>
<div data-dest="logo"></div>
{% endif %}
<div class="text-xs text-gray-500">{{post.created_at | human}}</div>
</div>
<div class="flex-grow p-6 pt-0 prose prose-sm max-w-none text-gray-600">
{{post.intro}} …
</div>
<div class="flex px-6 py-3 items-center border border-t">
{% partial 'ui/sprite' icon=post.page.icon class='w-6 h-6 mr-3 fill-current text-sky-700' %}
<span class="text-sm text-gray-600">Beitrag anschauen</span>
</div>
</a>
{% endfor %}
</div>
</div>

View File

@ -2,24 +2,33 @@
== ==
</main> </main>
<footer class="py-12 bg-white"> <footer class="py-12 bg-white border-t-4 border-sky-200">
<div class="container"> <div class="container">
<div class="flex flex-col md:flex-row -mx-6"> <div class="grid gap-5 md:grid-cols-[repeat(4,max-content)] justify-between">
<div class="px-6 md:self-center"> <div>
<img class="w-20 h-auto mr-6" {{'logos/wappen.png' | resize('original', '128|1280:192|1536:256')}}> <img class="w-20 h-auto mr-6" {{'logos/wappen.png' | resize('original', '128|1280:192|1536:256')}}>
</div> </div>
<div class="flex flex-col px-6 mt-6 md:mt-0"> <div>
<h3 class="font-arvo text-primary-700 text-lg mb-3">Links</h3> <h3 class="font-arvo text-sky-900 text-lg mb-3">Links</h3>
{% for link in footmenu.menuItems %} {% for link in footmenu.menuItems %}
{% partial 'ui/menulink' title=link.title active=link.isActive link=link.url class=class blank=link.blank %} {% partial 'ui/menulink' title=link.title active=link.isActive link=link.url class=class blank=link.blank %}
{% endfor %} {% endfor %}
</div> </div>
<div class="px-6 mt-6 md:mt-0"> <div>
<h3 class="font-arvo text-primary-700 text-lg mb-3">Kontakt</h3> <h3 class="font-arvo text-sky-900 text-lg mb-3">Kontakt</h3>
<p>DPSG Stamm Silva</p> <p>DPSG Stamm Silva</p>
<p>Adolf-Kolping-Str 47</p> <p>Adolf-Kolping-Str 47</p>
<p>42719 Solingen</p> <p>42719 Solingen</p>
<p><a class="font-semibold text-primary-700 mt-2 block" href="mailto:{{html_email('post@stamm-silva.de')}}">{{html_email('post@stamm-silva.de')}}</a></p> <p><a class="font-semibold text-sky-900 mt-2 block" href="mailto:{{html_email('post@stamm-silva.de')}}">{{html_email('post@stamm-silva.de')}}</a></p>
</div>
<div class="flex justify-evenly xs:justify-start xs:space-x-10">
<a href="https://www.facebook.com/stammsilva" target="_BLANK" class="rounded-full w-10 h-10 flex items-center justify-center bg-sky-200 hover:bg-sky-300 duration-300">
{% partial 'ui/sprite' icon='facebook' class='w-6 h-6 text-sky-900' %}
</a>
<a href="https://www.instagram.com/dpsg_stamm_silva/" target="_BLANK" class="rounded-full w-10 h-10 flex items-center justify-center bg-sky-200 hover:bg-sky-300 duration-300">
{% partial 'ui/sprite' icon='instagram' class='w-6 h-6 text-sky-900' %}
</a>
</div> </div>
</div> </div>
</div> </div>

View File

@ -16,7 +16,4 @@
</head> </head>
<body class="flex flex-col min-h-screen bg-back bg-gray-100" {{bodyTag}}> <body class="flex flex-col min-h-screen bg-back bg-gray-100" {{bodyTag}}>
{% partial 'shared/header' logo=logo %} {% partial 'shared/header' logo=logo %}
<main class="flex-grow font-sans"> <main class="flex-grow font-sans">

View File

@ -1,5 +1,5 @@
[staticMenu mainmenu] [staticMenu mainmenu]
code = "hauptmenu" code = "mainmenu"
== ==
function onEnd() { function onEnd() {
$this['baseMenuTitle'] = config('app.name'); $this['baseMenuTitle'] = config('app.name');
@ -7,17 +7,7 @@ function onEnd() {
$this['activeMenuTitle'] = collect($this['menuItems'])->filter(fn ($entry) => ($entry->isChildActive || $entry->isActive) && count($entry->items))->first()?->title ?: config('app.name'); $this['activeMenuTitle'] = collect($this['menuItems'])->filter(fn ($entry) => ($entry->isChildActive || $entry->isActive) && count($entry->items))->first()?->title ?: config('app.name');
} }
== ==
<nav class="bg-cyan-900"> <nav class="bg-sky-900 inactive group h-14 border-b-4 border-red-900" x-data="{ open: false, active: {{activeMenuIndex}}, maintitle: '{{activeMenuTitle}}' }" :class="{'active': open === true, 'inactive': open === false, 'issubmenu': active !== null}">
<div x-data="{ open: false, active: {{activeMenuIndex}}, maintitle: '{{activeMenuTitle}}' }" :class="{'active': open === true, 'inactive': open === false, 'issubmenu': active !== null}"
class="inactive container items-center group flex [@media(min-width:900px)]:hidden"
>
<nav class="flex items-center justify-between h-12 bg-primary-700">
<a href="#" @click.prevent="open = true" data-backstop-navbar-toggle>
{% partial 'ui/sprite' icon='menu' class='w-5 h-5 fill-current text-cyan-100' %}
</a>
</nav>
<div class="flex items-start fixed top-0 left-0 w-full h-full z-50 duration-300 <div class="flex items-start fixed top-0 left-0 w-full h-full z-50 duration-300
group-[.active]:visible group-[.active]:bg-black/50 group-[.active]:visible group-[.active]:bg-black/50
@ -26,40 +16,40 @@ function onEnd() {
<nav class="w-64 h-full relative overflow-y-auto overflow-x-hidden shadow-2xl bg-gray-900 duration-300 flex flex-col <nav class="w-64 h-full relative overflow-y-auto overflow-x-hidden shadow-2xl bg-gray-900 duration-300 flex flex-col
group-[.inactive]:-left-64 group-[.active]:left-0 group-[.inactive]:-left-64 group-[.active]:left-0
"> ">
<div class="sticky top-0 z-10 bg-gray-800 text-white flex justify-between items-center p-4"> <div class="sticky top-0 z-10 bg-gray-800 text-white flex justify-between items-center h-16 px-4">
<a href="#" @click.prevent="active = null; maintitle='{{baseMenuTitle}}'" class="absolute -left-6 duration-300 group-[.issubmenu]:left-3"> <a href="#" @click.prevent="active = null; maintitle='{{baseMenuTitle}}'" class="absolute -left-6 duration-300 group-[.issubmenu]:left-3">
{% partial 'ui/sprite' icon='chevron' class='w-4 h-4 text-cyan-100 rotate-90 relative left-0 duration-200 relative' %} {% partial 'ui/sprite' icon='chevron' class='w-4 h-4 text-blue-100 rotate-90 relative left-0 duration-200 relative' %}
</a>
<span class="duration-300 ml-0 font-semibold font-arvo text-blue-100 font-goudy text-2xl ml-0 group-[.issubmenu]:ml-6" x-text="maintitle"></span>
<a href="/">
<img class="w-8 h-auto" {{'logos/wappen.png' | resize('original', '128|1280:192|1536:256')}}>
</a> </a>
<span class="duration-300 ml-0 font-semibold font-barlow text-cyan-100 font-goudy text-2xl ml-0 group-[.issubmenu]:ml-6" x-text="maintitle"></span>
</div> </div>
<div class="pt-4 relative grow"> <div class="pt-4 relative grow">
<div class="flex flex-col duration-300 relative right-0 group-[.issubmenu]:right-full"> <div class="flex flex-col duration-300 relative right-0 group-[.issubmenu]:right-full">
{% for index, link in menuItems %} {% for index, link in menuItems %}
<a href="{% if link.items | length %}#{% else %}{{link.url}}{% endif %}" {% if link.items | length %}@click.prevent="active = {{index}}; maintitle='{{link.title}}'"{% endif %} class="px-4 flex items-center justify-between group/sublink font-goudy text-cyan-100 text-lg py-3 active:bg-gray-800 hover:bg-gray-800 duration-200"> <a href="{% if link.items | length %}#{% else %}{{link.url}}{% endif %}" {% if link.items | length %}@click.prevent="active = {{index}}; maintitle='{{link.title}}'"{% endif %} class="px-4 flex items-center justify-between group/sublink font-goudy text-blue-100 text-lg py-3 active:bg-gray-800 hover:bg-gray-800 duration-200">
<span>{{link.title}}</span> <span>{{link.title}}</span>
{% if link.items | length %} {% if link.items | length %}
{% partial 'sprite' icon='chevron' class='w-3 h-3 relative left-0 -rotate-90 text-cyan-100 duration-200 group-hover/sublink:left-1 relative' %} {% partial 'ui/sprite' icon='chevron' class='w-3 h-3 relative left-0 -rotate-90 text-blue-100 duration-200 group-hover/sublink:left-1 relative' %}
{% endif %} {% endif %}
</a> </a>
{% endfor %} {% endfor %}
</div> </div>
{% for index, link in menuItems %} {% for index, link in menuItems %}
<div class="overflow-x-hidden overflow-y-auto absolute pt-4 top-0 w-full h-full left-full duration-300" :class="{'left-full': active !== {{index}}, 'left-0': active === {{index}} }"> <div class="overflow-x-hidden overflow-y-auto absolute pt-4 top-0 w-full h-full left-full duration-300" :class="{'left-full': active !== {{index}}, 'left-0': active === {{index}} }">
{% for sublink in link.items %} {% for sublink in link.items %}
<a href="{{sublink.url}}" class="px-4 flex items-center justify-between font-goudy text-blue-100 text-lg py-3 active:bg-gray-800 hover:bg-gray-800 duration-200 {% if sublink.isActive %} font-bold text-white {% endif %}">
<a href="{{sublink.url}}" class="px-4 flex items-center justify-between font-goudy text-cyan-100 text-lg py-3 active:bg-gray-800 hover:bg-gray-800 duration-200 {% if sublink.isActive %} font-bold text-white {% endif %}">
{{sublink.title}} {{sublink.title}}
</a> </a>
<div class="ml-5 border-l border-gray-800"> <div class="ml-5 border-l border-gray-800">
{% for subsublink in sublink.items %} {% for subsublink in sublink.items %}
<a href="{{subsublink.url}}" class="px-4 flex items-center justify-between text-cyan-100 text-sm py-3 active:bg-gray-800 hover:bg-gray-800 duration-200 {% if subsublink.isActive %} font-bold text-white {% endif %}"> <a href="{{subsublink.url}}" class="px-4 flex items-center justify-between text-blue-100 text-sm py-3 active:bg-gray-800 hover:bg-gray-800 duration-200 {% if subsublink.isActive %} font-bold text-white {% endif %}">
{{subsublink.title}} {{subsublink.title}}
</a> </a>
{% endfor %} {% endfor %}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
@ -71,52 +61,41 @@ function onEnd() {
<svg class="w-6 h-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" /></svg> <svg class="w-6 h-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" /></svg>
</a> </a>
</div> </div>
<div class="container items-center flex h-full [@media(min-width:900px)]:hidden">
<nav class="flex items-center justify-between h-12">
<a href="#" @click.prevent="open = true">
{% partial 'ui/sprite' icon='menu' class='w-5 h-5 fill-current text-blue-100' %}
</a>
</nav>
</div> </div>
<div class="container hidden [@media(min-width:900px)]:flex space-x-3 items-center"> <div class="container hidden [@media(min-width:900px)]:flex justify-center relative z-50 space-x-3 h-full">
{% for item in menuItems %} {% for item in menuItems %}
<div class="relative group"> <div class="relative group/parent h-full">
<a class="h-14 text-xl text-cyan-100 hover:bg-cyan-700 duration-200 flex items-center px-6" <a class="h-full text-xl text-blue-100 hover:bg-sky-800 duration-200 flex items-center px-6"
href="{% if item.items | length > 0 %}#{% else %}{{ item.url }}{% endif %}" {% if item.viewBag.isExternal %} target="_BLANK" {% endif %} href="{% if item.items | length > 0 %}#{% else %}{{ item.url }}{% endif %}" {% if item.viewBag.isExternal %} target="_BLANK" {% endif %}
> >
{{ item.title }} {{ item.title }}
{% if item.items|length %} {% if item.items|length %}
{% partial 'sprite' icon='chevron' class='w-3 h-3 ml-2 relative top-[0.15rem] text-cyan-100 relative left-0 duration-200 relative' %} {% partial 'ui/sprite' icon='chevron' class='w-3 h-3 ml-2 relative top-[0.15rem] text-blue-100 relative left-0 duration-200 relative' %}
{% endif %} {% endif %}
</a> </a>
{% if item.items | length > 0 %} {% if item.items | length > 0 %}
<div class="absolute py-4 bg-blue-400 hidden group-hover:block rounded-b-xl shadow-xl"> <div class="absolute w-[250px] left-[50%] ml-[-125px] hidden group-hover/parent:block">
{% for subitem in item.items %} <svg preserveAspectRatio="none" viewBox="0 0 100 100" class="relative z-60 text-blue-50 mt-2 w-8 h-4 absolute left-1/2 -ml-4">
<a class="block px-6 duration-200 hover:bg-blue-500 py-2 text-teal-50" href="{{ subitem.url }}">{{ subitem.title }}</a> <path d="M0,100 L100,100 L50,0" fill="currentColor" />
{% endfor %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
<nav class="bg-primary-700 border-b-4 border-solid border-dpsgred justify-center hidden navbar:flex">
{% for item in mainmenu.menuItems | nothidden %}
<div class="relative group">
<a class="font-sans text-white text-xl py-3 px-4 transition-color duration-100 hover:bg-primary-600 block" href="{{item.url}}">{{item.title}}</a>
{% if item.items | length %}
<div class="absolute z-10 pt-5 left-1/2 w-64 -ml-32 hidden group-hover:block">
<div class="bg-white rounded-lg shadow-xl flex flex-col py-4 relative">
<div class="absolute top-0 -mt-3 flex justify-center w-full">
<svg viewBox="0 0 26 16" class="fill-current text-white" width="26" height="16">
<path d="M0,16 L26,16 L13,0 L0,16"></path>
</svg> </svg>
</div> <div class="py-4 bg-blue-50 rounded-xl shadow-2xl">
{% for subitem in item.items | nothidden %} {% for subitem in item.items %}
<a href="{{subitem.url}}" class="text-center px-4 hover:bg-gray-100 py-2">{{subitem.title}}</a> <a class="block px-6 duration-200 hover:bg-blue-200 py-2 text-neutral-800 text-center" href="{{ subitem.url }}">{{ subitem.title }}</a>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
{% endfor %} {% endfor %}
</nav> </div>
</nav> </nav>
<div class="relative"> <div class="relative">

8
partials/ui/heading.htm Normal file
View File

@ -0,0 +1,8 @@
<h1 class="font-semibold font-arvo bg-cyan-200 py-3">
<div class="container text-cyan-900 text-xl font-arvo flex items-baseline">
{% partial 'ui/sprite' icon='dpsgstart' class='w-8 h-4 text-red-900 mr-2' %}
<span class="text-sm md:text-base font-semibold">
{{this.page.title}}
</span>
</div>
</h1>

View File

@ -1,4 +1,4 @@
<a href="{{link}}" {% if alpineAction %} @click.prevent="{{alpineAction}}" {% endif %} {% if alpineClass %} :class="{{alpineClass | raw}}" {% endif %} class="{% if class %} {{class}} {% endif %} flex items-center hover:text-dpsgred" {% if blank %} target="_BLANK" {% endif %}> <a href="{{link}}" {% if alpineAction %} @click.prevent="{{alpineAction}}" {% endif %} {% if alpineClass %} :class="{{alpineClass | raw}}" {% endif %} class="{% if class %} {{class}} {% endif %} flex items-center hover:text-red-900" {% if blank %} target="_BLANK" {% endif %}>
{{'chevron' | sprite('text-dpsgred w-3 h-3 transform -rotate-90 mr-2') | raw }} {% partial 'ui/sprite' icon='chevron' class='text-red-900 w-3 h-3 transform -rotate-90 mr-2' %}
<span>{{title}}</span> <span>{{title}}</span>
</a> </a>

View File

@ -7,8 +7,15 @@
@import '_tailwind-utilities.css'; @import '_tailwind-utilities.css';
/*@import "_custom-utilities.css";*/ /*@import "_custom-utilities.css";*/
@import './fonts.css';
@layer components { @layer components {
.container { .container {
@apply max-w-[1440px] mx-auto px-6 md:px-10; @apply max-w-[1440px] mx-auto px-6 md:px-10;
} }
} }
.prose h2,
.prose h3 {
@apply text-sky-800 font-arvo;
}

17
resources/css/fonts.css Normal file
View File

@ -0,0 +1,17 @@
/* arvo-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Arvo';
font-style: normal;
font-weight: 400;
src: url('../fonts/arvo-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/noto-sans-v36-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 407.437 407.437" style="enable-background:new 0 0 407.437 407.437;" xml:space="preserve">
<polygon fill="currentColor" points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 639 B

View File

@ -0,0 +1 @@
<svg viewBox="0 0 100 50"><path fill="currentColor" d="M0 0h15l15 25-15 25H0l15-25L0 0M30 0h15l15 25-15 25H30l15-25L30 0M85 0h15L85 25l15 25H85L70 25 85 0"/></svg>

After

Width:  |  Height:  |  Size: 164 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve">
<path fill="currentColor" d="M288 176v-64c0-17.664 14.336-32 32-32h32V0h-64c-53.024 0-96 42.976-96 96v80h-64v80h64v256h96V256h64l32-80h-96z"/>
</svg>

After

Width:  |  Height:  |  Size: 280 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"><path fill="currentColor" d="M288 176v-64c0-17.664 14.336-32 32-32h32V0h-64c-53.024 0-96 42.976-96 96v80h-64v80h64v256h96V256h64l32-80h-96z"/></svg>

After

Width:  |  Height:  |  Size: 274 B

View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve">
<path fill="currentColor" d="M352 0H160C71.648 0 0 71.648 0 160v192c0 88.352 71.648 160 160 160h192c88.352 0 160-71.648 160-160V160C512 71.648 440.352 0 352 0zm112 352c0 61.76-50.24 112-112 112H160c-61.76 0-112-50.24-112-112V160C48 98.24 98.24 48 160 48h192c61.76 0 112 50.24 112 112v192z"/>
<path fill="currentColor" d="M256 128c-70.688 0-128 57.312-128 128s57.312 128 128 128 128-57.312 128-128-57.312-128-128-128zm0 208c-44.096 0-80-35.904-80-80 0-44.128 35.904-80 80-80s80 35.872 80 80c0 44.096-35.904 80-80 80z"/>
<circle fill="currentColor" cx="393.6" cy="118.4" r="17.056"/>
</svg>

After

Width:  |  Height:  |  Size: 727 B

1
resources/icons/menu.svg Executable file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>

After

Width:  |  Height:  |  Size: 121 B

View File

@ -1,7 +1,26 @@
module.exports = { module.exports = {
content: ['./**/*.htm'], content: ['./**/*.htm'],
theme: { theme: {
extend: {}, extend: {
colors: {
sky: {
900: 'hsl(206.9, 100.0%, 17.1%)',
}, },
plugins: [], red: {
900: 'hsl(352.4, 85.5%, 27.1%)',
},
cyan: {
200: 'hsl(197.0, 100.0%, 82.0%)',
},
},
screens: {
xs: '414px',
},
},
fontFamily: {
sans: ['Noto Sans', 'ui-sans-serif'],
arvo: ['Arvo', 'ui-sans-serif'],
},
},
plugins: [require('@tailwindcss/typography')],
}; };