@leuffen/themejs1 7.0.1 → 7.0.2

package/_tpl/_root/.schiller-context.txt

@@ -77,3 +77,7 @@ Für HNO-Ärzte:
 ![Untersuchung des Ohrs durch Arzt](https://cdn.leuffen.de//leu-stock/v2/145/c_gfedcba/AdobeStock_176115459.webp)
 ![Untersuchung der Nase durch Arzt](https://cdn.leuffen.de//leu-stock/v2/146/92-63_gfedcba/AdobeStock_10636763.webp)
 ![Symbolbild Frau seitlich mit Ohr und Wellen](https://cdn.leuffen.de//leu-stock/v2/137/211-98_gfedcba/AdobeStock_170518761.webp)
+
+Für Hebammen und Frauenärzte:
+![Säugling in Windeln im Bett hell](https://cdn.leuffen.de//leu-stock/v2/175/c_gfedcba/AdobeStock_100664610.webp)
+![Schwangere Frauen im Kursraum](https://cdn.leuffen.de//leu-stock/v2/176/201-106_gfedcba/AdobeStock_616406996.webp)

package/_tpl/_root/docs/_includes/el/address.html

@@ -2,7 +2,9 @@
 {%- if site.data.general.name2 != null -%}{{site.data.general.name2}}<br>{%- endif -%}
 {{ site.data.general.street }} <br>
 {{ site.data.general.zip }} {{ site.data.general.city }}<br><br>
+{%- if site.data.general.phone1_text != null -%}
 <span>{% include do/trans.html val="Telefon" %}:</span> <b><a href="tel:{{site.data.general.phone1}}" title="Telefon" class="text-decoration-none">{{site.data.general.phone1_text}}</a></b><br>
+{%- endif -%}
 {%- if site.data.general.fax1_text != null -%}
 <span>{% include do/trans.html val="Telefax" %}:</span> <b>{{site.data.general.fax1_text}}</b><br>
 {%- endif -%}

package/_tpl/_root/docs/_layouts/legal/impressum.html

@@ -12,7 +12,7 @@ layout: legal
     {%- endif -%}
     {{site.data.general.street}}<br>
     {{site.data.general.zip}} {{site.data.general.city}}<br><br>
-    <span class="fw-bold">Konakt:</span><br>
+    <span class="fw-bold">Kontakt:</span><br>
     Telefon: <a href="tel:{{site.data.general.phone1}}">{{site.data.general.phone1_text}}</a><br>
     {% if site.data.general.fax1_text %}
     Telefax: {{site.data.general.fax1_text}}<br>

package/_tpl/_root/package.json

@@ -9,19 +9,8 @@
     ],
     "author": "",
     "dependencies": {
-        "@leuffen/themejs1": "^6.1.28"
+        "@leuffen/themejs1": "^7.0.1"
     },
     "devDependencies": {
-        "css-loader": "^6.7.1",
-        "dart-sass": "^1.25.0",
-        "esbuild-loader": "^2.20.0",
-        "mini-css-extract-plugin": "^2.6.1",
-        "raw-loader": "^4.0.2",
-        "sass": "^1.56.1",
-        "sass-loader": "^13.0.2",
-        "style-loader": "^3.3.1",
-        "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.1",
-        "webpack-dev-server": "^4.11.1"
     }
 }

package/_tpl/_root/src/_variables.scss

@@ -1,4 +1,4 @@
 
 
-$accent: #9c8b58;
-$primary: #354b68;
+$accent: #b83e8a;
+$primary: #008ea5;

package/_tpl/pages/hausarzt-index-singleleistung.de.md

@@ -19,15 +19,23 @@ body_class: ~
 title: ~
 type: website
 ---
-# Willkommen in der Hausarztpraxis Graß
-{: layout="use: #hero-max; cols:7; class: box"}
+---
+{: layout="use: #hero-max;"}
 
 ![](https://cdn.leuffen.de//leu-stock/v2/32/304-205_gfedcba/AdobeStock_138200241.webp)
 {: .background}
 
-[[i class="bi bi-calendar-plus-fill fs-3"]<br>Jetzt Termin vereinbaren](/termin){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;;hyphens: none;" target="_blank"}
-[[i class="bi bi-card-heading fs-3"]<br>Rezept online anfragen](/online-rezept){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;hyphens: none;"}
-[[i class="bi bi-box-arrow-up-right fs-3"]<br>Überweisung an Facharzt](/online-ueberweisung){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;hyphens: none;"}
+# Augenarzt<br>Prof. Dr. Daniel Salchow
+{: .section-h3 layout="use: #hero-slide; align-self: self-end; justify-self: left; x-adjust: 0%; y-adjust: 0% " .sec-box .sec-slide}
+
+---
+{: .section-h4 layout="use: #button-group"}
+[[i class="bi bi-house-add-fill fs-3"]<br>Jetzt als **neuer Patient** anmelden](/online-anmeldung){: .btn .btn-primary}
+[[i class="bi bi-calendar-plus-fill fs-3"]<br>Jetzt **Termin** vereinbaren](/termin){: .btn .btn-primary .text-center}
+
+[[i class="bi bi-card-heading fs-3"]<br>**Rezept** online anfragen](/online-rezept){: .btn .btn-primary .text-center }
+[[i class="bi bi-box-arrow-up-right fs-3"]<br>**Überweisung** an Facharzt](/online-ueberweisung){: .btn .btn-primary .text-center}
+[[i class="bi bi-camera-video-fill fs-3"]<br>**Videosprechstunde**](/online-videosprechstunde){: .btn .btn-primary .text-center}
 
 
 

package/_tpl/pages/hausarzt-index.de.md

@@ -16,13 +16,16 @@ body_class: ~
 title: ~
 type: website
 ---
-# Willkommen in der Hausarztpraxis Graß
-{: layout="use: #hero-max; cols:7; class: box"}
+---
+{: layout="use: #hero-max;"}
 
-![](https://cdn.leuffen.de//leu-stock/v2/63/c_gfedcba/AdobeStock_86161955.webp)
+![](https://cdn.leuffen.de//leu-stock/v2/32/304-205_gfedcba/AdobeStock_138200241.webp)
 {: .background}
 
-[[i class="bi bi-calendar-plus-fill fs-3"]<br>Jetzt Termin vereinbaren](/kontakt){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;;hyphens: none;"}
+# Augenarzt<br>Prof. Dr. Daniel Salchow
+{: .section-h3 layout="use: #hero-slide; align-self: self-end; justify-self: left; x-adjust: 0%; y-adjust: 0% " .sec-box .sec-slide}
+
+[[i class="bi bi-calendar-plus-fill fs-3"]<br>Jetzt Termin vereinbaren](/termin){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;;hyphens: none;" target="_blank"}
 [[i class="bi bi-card-heading fs-3"]<br>Rezept online anfragen](/online-rezept){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;hyphens: none;"}
 [[i class="bi bi-box-arrow-up-right fs-3"]<br>Überweisung an Facharzt](/online-ueberweisung){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;hyphens: none;"}
 

package/_tpl/pages/index-singlepage-frauenarzt.de.md

@@ -18,13 +18,19 @@ _schiller_instructions: Ändere die Texte und Bilder. Füge am Ende die CTA ein.
 _schiller_template: pages/index
 image: ""
 ---
-# Willkommen bei Ihrer Frauenarztpraxis Antje-Christina Permien
-{: layout="use: #hero-max; cols:7; class: box"}
+---
+{: layout="use: #hero-max;"}
 
-![Antje Christina Permien](https://cdn.leuffen.de//leu-stock/v2/32/304-205_gfedcba/AdobeStock_138200241.webp)
+![](https://cdn.leuffen.de//leu-stock/v2/32/304-205_gfedcba/AdobeStock_138200241.webp)
 {: .background}
 
-[Jetzt Termin online vereinbaren](/kontakt){: .btn .btn-primary .btn-lg}
+# Augenarzt<br>Prof. Dr. Daniel Salchow
+{: .section-h3 layout="use: #hero-slide; align-self: self-end; justify-self: left; x-adjust: 0%; y-adjust: 0% " .sec-box .sec-slide}
+
+[[i class="bi bi-calendar-plus-fill fs-3"]<br>Jetzt Termin vereinbaren](/termin){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;;hyphens: none;" target="_blank"}
+[[i class="bi bi-card-heading fs-3"]<br>Rezept online anfragen](/online-rezept){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;hyphens: none;"}
+[[i class="bi bi-box-arrow-up-right fs-3"]<br>Überweisung an Facharzt](/online-ueberweisung){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;hyphens: none;"}
+
 
 
 ## Headerbar

package/_tpl/pages/index.de.md

@@ -15,18 +15,22 @@ short_title: Home
 _schiller_instructions: "Ändere die Texte und Bilder. Füge am Ende die CTA ein. Gehe auf die im Context genannten Informationen ein. Entferne Links zu nicht vorhandenen Seiten."
 ---
 
-# Willkommen bei Ihrer <br>Augenpraxis B. Mustermann
-{: layout="use: #hero-max; cols:7; class: box"}
+---
+{: layout="use: #hero-max;"}
 
-![](cdn:///leu-stock/v/26/1920x1280_1200x800_992x661_768x512_480x320_256x256/AdobeStock_114414482.avif_jpeg)
+![](https://cdn.leuffen.de//leu-stock/v2/32/304-205_gfedcba/AdobeStock_138200241.webp)
 {: .background}
 
-[[i class="bi bi-calendar-plus-fill fs-3"]<br>Jetzt Termin vereinbaren](/kontakt){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;;hyphens: none;"}
+# Augenarzt<br>Prof. Dr. Daniel Salchow
+{: .section-h3 layout="use: #hero-slide; align-self: self-end; justify-self: left; x-adjust: 0%; y-adjust: 0% " .sec-box .sec-slide}
+
+[[i class="bi bi-calendar-plus-fill fs-3"]<br>Jetzt Termin vereinbaren](/termin){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;;hyphens: none;" target="_blank"}
 [[i class="bi bi-card-heading fs-3"]<br>Rezept online anfragen](/online-rezept){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;hyphens: none;"}
 [[i class="bi bi-box-arrow-up-right fs-3"]<br>Überweisung an Facharzt](/online-ueberweisung){: .btn .btn-primary .text-center .btn-lg .m-1 style="width:30%;min-width: 100px;hyphens: none;"}
 
 
 
+
 ## Headerbar
 {: layout="use: #hero-ribbon"}
 

package/_tpl/service/online-anmeldung.de.md

@@ -0,0 +1,49 @@
+---
+description: ""
+icon: bi bi-phone
+image: ~
+lang: de
+layout: article
+order: 71
+permalink: /online-anmeldung
+pid: service/online-anmeldung
+ptags: ~
+published: true
+skipHead: false
+body_class: ~
+title: Online Anmeldung
+type: article
+_schiller_template: service/online-termin
+_schiller_instructions: ""
+---
+## Anmeldung für Patienten
+{: layout="use: #sec-card-2col"}
+
+> Jetzt als Patient anmelden
+
+
+Wir freuen uns sehr über Ihr Interesse an unserer Praxis. Da wir noch dabei sind, die letzten Vorbereitungen für unsere Eröffnung zu treffen, bieten wir Ihnen die Möglichkeit, sich vorab zu registrieren. Sobald unsere Praxis eröffnet ist, werden wir uns umgehend bei Ihnen melden, um einen Termin zu vereinbaren.
+
+Bitte füllen Sie das untenstehende Formular mit Ihren persönlichen Daten aus. Ihre Daten werden selbstverständlich vertraulich behandelt und nur für interne Zwecke verwendet.
+
+
+---
+{: layout="use: #e-form" .aside .mt-5}
+
+
+[input type="text"  name="Name*" required .mb-3]
+[input type="date" name="Geburtsdatum*" required .mb-3]
+[input type="email" name="E-Mail*" required .mb-3]
+[input type="tel" name="Telefon*" required .mb-3]
+[input type="text" name="Krankenkasse (optional)"  .mb-3]
+[input type="text" name="Versicherungsnummer (optional)"  .mb-3]
+[textarea name="Ihre Nachricht (optional)" .mb-3 style="height: 120px;"]
+[input type="checkbox" name="Datenschutz" label="Ich akzeptiere die Datenschutzbestimmungen" required .mb-3]
+[input type="submit" value="Absenden" .btn .btn-primary .btn-lg .mt-3]
+
+
+
+## Erfahren Sie mehr über uns
+{: layout="use: #cta-base"}
+
+[Unsere Untersuchungen](/leistungen/untersuchungen.de.html) [Über Uns](/ueber-uns) [Kontakt](/kontakt)

package/_tpl/service/online-videosprechstunde.de.md

@@ -0,0 +1,55 @@
+---
+description: ""
+icon: bi bi-phone
+image: ~
+lang: de
+layout: article
+order: 71
+permalink: /online-videosprechstunde
+pid: service/online-videosprechstunde
+ptags: ~
+published: true
+skipHead: false
+body_class: ~
+title: Videosprechstunde
+type: article
+_schiller_template: service/online-videosprechstunde
+_schiller_instructions: ""
+---
+## Videosprechstunde
+{: layout="use: #sec-card-2col; mobile_reverse: yes "}
+
+> Bequem von zu Hause aus mit Ihrem Arzt sprechen!
+
+**Die Videosprechstunde ist nur für Patienten verfügbar, die bereits in unserer Praxis bekannt sind.**
+
+So funktioniert's:
+
+1. **Terminvereinbarung:** Nutzen Sie das nebenstehende Formular, um einen Termin für Ihre Videosprechstunde zu vereinbaren. Wählen Sie einfach das Datum und die Uhrzeit, die Ihnen am besten passen.
+2. **Bestätigung & Link:** Nach der Terminvereinbarung erhalten Sie eine Bestätigungs-E-Mail mit allen notwendigen Details sowie einem Link zur Videosprechstunde. Bitte bewahren Sie diese E-Mail sicher auf, da Sie den Link zum vereinbarten Termin benötigen.
+3. **Technische Vorbereitung:** Sollten Sie Fragen zur technischen Einrichtung haben oder Unterstützung benötigen, steht Ihnen unser Team gerne zur Verfügung. Klicken Sie einfach auf den untenstehenden Button, um zu unserem technischen Anbieter weitergeleitet zu werden, der Ihnen alle notwendigen Informationen zur Einrichtung und Nutzung des Videoanruf-Systems bereitstellt.
+4. **Ihre Sprechstunde:** Zum Zeitpunkt Ihrer Sprechstunde klicken Sie einfach auf den Link in Ihrer E-Mail, um Ihren Arzt virtuell zu treffen. Stellen Sie sicher, dass Sie eine stabile Internetverbindung haben und sich in einer ruhigen Umgebung befinden.
+
+
+### Termin für Videosprechstunde vereinbaren
+{: .sec-aside}
+
+---
+{: layout="use: #e-form" .section-h4  .mt-5}
+
+
+[input type="hidden"  name="Terminart" value="Videosprechstunde" required .mb-3]
+[input type="text"  name="Name" required .mb-3]
+[input type="date" name="Geburtsdatum" required .mb-3]
+[input type="email" name="E-Mail" required .mb-3]
+[input type="tel" name="Telefon" required .mb-3]
+[textarea name="Ihre Nachricht (optional)" .mb-3 style="height: 120px;"]
+[input type="checkbox" name="Datenschutz" label="Ich akzeptiere die Datenschutzbestimmungen" required .mb-3]
+[input type="submit" value="Absenden" .btn .btn-primary .btn-lg .mt-3]
+
+
+
+## Erfahren Sie mehr über uns
+{: layout="use: #cta-base"}
+
+[Unsere Untersuchungen](/leistungen/untersuchungen.de.html) [Über Uns](/ueber-uns) [Kontakt](/kontakt)

package/_variables.scss

@@ -8,6 +8,8 @@
 $font-family-base: sans-serif !default;
 $font-family-header: $font-family-base !default;
 
+//$enable-dark-mode: false !default;
+
 $accent:    #f19045 !default;
 $primary:   #a3979b !default;
 $success:   #22b573 !default;
@@ -15,6 +17,7 @@ $danger:    #bf1c0a !default;
 $warning:   #bf760a !default;
 $dark:      #006837 !default;
 
+$soft-accent: lighten($accent, 40%) !default;
 $soft-primary: lighten($primary, 40%) !default;
 $soft-success: lighten($success, 40%) !default;
 $soft-danger: lighten($danger, 50%) !default;

package/dist/elements/button-group/button-group.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/button-group/button-group.js

@@ -0,0 +1,8 @@
+import { Joda } from "@leuffen/jodastyle";
+Joda.registerTemplate("button-group", 
+// language=HTML
+`
+        <div class="tjs-button-group">
+            <slot></slot>
+        </div>
+    `);

package/dist/elements/elements.d.ts

@@ -1 +1,3 @@
 export * from "./e-form/e-form";
+export * from "./hero-slide/hero-slide";
+export * from "./button-group/button-group";

package/dist/elements/elements.js

@@ -1 +1,3 @@
 export * from "./e-form/e-form";
+export * from "./hero-slide/hero-slide";
+export * from "./button-group/button-group";

package/dist/elements/hero-slide/hero-slide.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/hero-slide/hero-slide.js

@@ -0,0 +1,15 @@
+import { Joda } from "@leuffen/jodastyle";
+Joda.registerTemplate("hero-slide", 
+// language=HTML
+`
+
+        <article class="hero-slide :: mobile :xl: desktop">
+            <slot></slot>
+        </article>
+
+    `, {
+    cols: 6
+}, {
+    onAfterConnectedCallback: (el) => {
+    }
+});

package/dist/sections/hero-max/hero-max.js

@@ -7,18 +7,12 @@ Joda.registerTemplate("hero-max",
             <slot data-select="img.background, :scope>.content>p.background>img" class="slideshow"></slot>
             <div class="tjs__hero-max--out-wrapper ">
                 <div class="tjs__hero-max--container [[layout.container]] ">
-                    <div class="tjs__hero-max--inner-wrapper :: :xxl: col-[[layout.cols]]">
-                            <div class="tjs__hero-max--section-text">
-                                <slot></slot>
-                            </div>
-                        </div>
-                    </div>
+                    <slot class="content" data-select=".slide || :scope > * "></slot>
                 </div>
             </div>
         </section>
 
     `, {
-    cols: "6",
     'aspect-ratio': "5/4",
 }, {
     onAfterConnectedCallback: (el) => {

package/dist/sections/navbar-centerlogo/navbar-centerlogo.js

@@ -2,26 +2,31 @@
 import { Joda } from "@leuffen/jodastyle";
 const html = `
 
-    <nav class="navbar-centerlogo navbar :: mobile :xl:">
-        <div class="navbar__wrapper [[ layout.container ]]">
-            <slot class="" data-select="ul.navbar-top "></slot>
+    <nav class="navbar-centerlogo">
+        <div class="e--spacer"></div>
+        <div class="e--backdrop"></div>
+        <div class="navbar">
+            <div class="navbar__wrapper [[ layout.container ]]">
+                <slot class="" data-select="ul.navbar-top "></slot>
 
-            <slot class="navbar__logo" data-select="[[ layout.slot_logo_selector ]]"></slot>
+                <slot class="navbar__logo" data-select="[[ layout.slot_logo_selector ]]"></slot>
 
-            <div class="burger-menu" onclick="this.closest('nav').classList.toggle('sidebar')">
-                <div class="burger-menu__text">
-                    [[ layout.burger_text ]]
-                </div>
-                <div class="burger-menu__burger">
-                    <div></div>
-                    <div></div>
-                    <div></div>
+
+
+                <div class="burger-menu" onclick="this.closest('nav').classList.toggle('sidebar')">
+                    <div class="burger-menu__text">
+                        [[ layout.burger_text ]]
+                    </div>
+                    <div class="burger-menu__burger">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
                 </div>
-            </div>
 
+            </div>
         </div>
 
-
         <aside>
             <div class="backdrop" onclick="this.closest('nav').classList.remove('sidebar')"></div>
             <div class="menu">
@@ -38,19 +43,35 @@ const html = `
 `;
 Joda.registerTemplate("navbar-centerlogo", html, {
     slot_logo_selector: ".brand",
-    burger_text: "Menu",
-    container: "container"
+    burger_text: "Menü",
+    container: "container",
+    scrollup_position: 100
 }, {
-    "onAfterConnectedCallback": (element) => {
+    "onAfterAllTemplatesConnectedCallback": (element) => {
+        // Query css variable --layout-scrollup from elment
         // If the page is scrolled down, the navbar should be sticky
         // Update this on scroll event
-        window.addEventListener("scroll", () => {
+        let lastY = 0;
+        let navbar = element.querySelector(".navbar");
+        let changer = () => {
             if (window.scrollY > 1) {
-                element.classList.add("scrolled");
+                navbar.classList.add("scrolled");
+                navbar.classList.remove("unscrolled");
+            }
+            else {
+                navbar.classList.remove("scrolled");
+                navbar.classList.add("unscrolled");
+            }
+            let isScrollingUp = window.scrollY < lastY;
+            lastY = window.scrollY;
+            if (window.scrollY > 250 && !isScrollingUp) {
+                navbar.classList.add("scrollup");
             }
             else {
-                element.classList.remove("scrolled");
+                navbar.classList.remove("scrollup");
             }
-        });
+        };
+        window.addEventListener("scroll", changer, { passive: true });
+        changer();
     }
 });

package/dist/sections/sec-card-2col/sec-card-2col.js

@@ -5,13 +5,14 @@ Joda.registerTemplate("sec-card-2col",
 
         <section class="tjs__sec-card-2col [[layout.class]] :: mobile :lg: desktop">
             <div class="tjs__sec-card-2col--container [[layout.container]]">
+                <slot class="title" data-select="img.title || .title > img"></slot>
                 <div class="row [[layout.order === 'reverse' ? 'flex-column-reverse': '']] [[layout.mobile_reverse === 'yes' ? ':: flex-column-reverse :lg:': '']]">
                     <div class="tjs__sec-card-2col--col-start tjs__section-text p-4 p-lg-5 :: col-12 :lg: col-[[layout.cols]]">
                         <slot></slot>
                     </div>
                     <div class="tjs__sec-card-2col--col-end image-side :: col-12 :lg: col-[[12 - layout.cols]] ">
 
-                        <slot class="[[layout.slideshow === true ? 'slideshow' : '']]" data-select="img, .children > .section-hr.aside, .aside" [[layout.slideshow !== true ? 'data-limit="1"' : '' ]]></slot>
+                        <slot class="[[layout.slideshow === true ? 'slideshow' : '']]" data-select=".aside || img, .children > .section-hr.aside" [[layout.slideshow !== true ? 'data-limit="1"' : '' ]]></slot>
                     </div>
                 </div>
             </div>

package/elements/_text-format.scss

@@ -0,0 +1,3 @@
+.address {
+    white-space: pre-wrap;
+}

package/elements/button-group/button-group.scss

@@ -0,0 +1,31 @@
+
+.tjs-button-group {
+
+    --layout-gap: 1rem;
+    // --layout-breakpoint: 1024px; Not Working on media query
+
+    &>slot {
+        display: flex;
+        flex-wrap: wrap;
+
+        &>* {
+            width: 100%;
+        }
+        p {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            @media (width < 500px) {
+                flex-direction: column;
+            }
+            align-items: stretch;
+            gap: var(--layout-gap);
+            &>* {
+                flex-grow: 1;
+
+            }
+        }
+
+    }
+
+}

package/elements/button-group/button-group.ts

@@ -0,0 +1,10 @@
+import {Joda} from "@leuffen/jodastyle";
+
+
+Joda.registerTemplate("button-group",
+    // language=HTML
+    `
+        <div class="tjs-button-group">
+            <slot></slot>
+        </div>
+    `);

package/elements/elements.scss

@@ -2,3 +2,6 @@
 @import "background-color";
 @import "list-style";
 @import "e-form/e-form";
+@import "hero-slide/hero-slide";
+@import "button-group/button-group";
+@import "text-format";

package/elements/elements.ts

@@ -1 +1,3 @@
 export * from "./e-form/e-form";
+export * from "./hero-slide/hero-slide";
+export * from "./button-group/button-group";

package/elements/hero-slide/hero-slide.scss

@@ -0,0 +1,44 @@
+
+
+.hero-slide {
+
+    --layout-box-color: rgba(255, 255, 255, 0.8);
+    --layout-text-shadow: 0 0 2px rgba(255, 255, 255, 1);
+    --layout-align-self: center;
+    --layout-justify-self: center;
+    --layout-cols: 6;
+
+    --layout-y-adjust: 25%;
+    --layout-x-adjust: 25%;
+
+    align-self: var(--layout-align-self);
+    justify-self: var(--layout-justify-self);
+
+
+
+    &.desktop {
+        margin-top: var(--layout-y-adjust);
+        margin-left: var(--layout-x-adjust);
+        width: calc(100% / 12 * var(--layout-cols));
+        &.box {
+            padding: 10px;
+            background-color: var(--layout-box-color);
+        }
+
+        &.glow {
+            &>slot {
+                &>h1,h2,h3,&>p {
+                    text-shadow: var(--layout-text-shadow);
+                }
+            }
+        }
+    }
+    &.mobile {
+        width: 100%;
+    }
+
+
+
+
+
+}

package/elements/hero-slide/hero-slide.ts

@@ -0,0 +1,21 @@
+import {Joda} from "@leuffen/jodastyle";
+
+Joda.registerTemplate("hero-slide",
+    // language=HTML
+    `
+
+        <article class="hero-slide :: mobile :xl: desktop">
+            <slot></slot>
+        </article>
+
+    `,
+    {
+        cols: 6
+    },
+    {
+        onAfterConnectedCallback: (el) => {
+
+        }
+    }
+
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leuffen/themejs1",
-  "version": "7.0.1",
+  "version": "7.0.2",
 
   "description": "",
   "license": "proprietary",
@@ -54,17 +54,19 @@
   ],
   "author": "",
   "dependencies": {
-    "@leuffen/jodastyle": "^3.0.9",
-    "@kasimirjs/embed": "^1.0.8",
-    "@leuffen/isl-base": "^3.0.4",
-    "@leuffen/liscom": "^2.0.8",
-    "@leuffen/liscom-loader": "^1.0.6",
-    "@leuffen/liweco-base": "^2.0.2",
+    "@leuffen/jodastyle": "^3.1.2",
+    "@kasimirjs/embed": "^1.0.23",
+    "@leuffen/isl-base": "^3.0.7",
+    "@leuffen/liscom": "^2.0.10",
+    "@leuffen/liscom-loader": "^1.0.9",
+    "@leuffen/liweco-base": "^2.0.3",
     "@micx/lib-js": "^1.0.22",
     "bootstrap": "^5.3.0"
+
+
+
   },
   "devDependencies": {
-    "@micx/lib-js": "^1.0.18",
     "@kasimirjs/kit-bootstrap": "^1.0.4",
     "markdown-it": "^13.0.1",
     "markdown-it-attrs": "^4.1.6",

package/sections/_defaults.scss

@@ -3,7 +3,7 @@
     --t-background-footer: #{$background-footer};
     --t-section-background: transparent;
     --t-section-background-accent: #{$background-accent};
-    --t-section-background-primary: #D6EED9;
+    --t-section-background-primary: #{$soft-primary};
 
 
     --t-font-family-base: #{$font-family-base};
@@ -34,5 +34,8 @@
     --t-section-inner-padding: 3rem;
 
     --t-accent: #{$accent};
+    --t-primary: #{$primary};
+    --t-soft-primary: #{$soft-primary};
+    --t-soft-accent: #{$soft-accent};
 
 }

package/sections/hero-max/hero-max.scss

@@ -43,6 +43,11 @@
             }
 
         }
+
+        .tjs__hero-max--container {
+            height: 100%;
+        }
+
         min-height: var(--layout-min-height, 400px);
         position: relative;
         &.tjs__hero-max--autoheight {
@@ -87,33 +92,18 @@
 
 
 
-    h1 {
-        font-size: calc(1.5em + 1vw);
-    }
 
     .slideshow:empty {
         display: none;
     }
 
-    h1.glow {
-        color: white;
-        text-shadow: 0 0 10px var(--t-text-color), 0 0 20px var(--t-text-color), 0 0 30px var(--t-text-color), 0 0 40px var(--t-text-color), 0 0 50px var(--t-text-color), 0 0 60px var(--t-text-color), 0 0 70px var(--t-text-color);
-    }
+    slot.content{
+        display: grid;
 
-
-    .tjs-_hero-max--inner-wrapper {
-        position: relative;
-        width: 100%;
         height: 100%;
     }
 
 
-    .tjs__hero-max--section-text {
-    }
-
-    .offsetmodifier {
-        height: 100px;
-    }
 
 
 }

package/sections/hero-max/hero-max.ts

@@ -9,19 +9,13 @@ Joda.registerTemplate("hero-max",
             <slot data-select="img.background, :scope>.content>p.background>img" class="slideshow"></slot>
             <div class="tjs__hero-max--out-wrapper ">
                 <div class="tjs__hero-max--container [[layout.container]] ">
-                    <div class="tjs__hero-max--inner-wrapper :: :xxl: col-[[layout.cols]]">
-                            <div class="tjs__hero-max--section-text">
-                                <slot></slot>
-                            </div>
-                        </div>
-                    </div>
+                    <slot class="content" data-select=".slide || :scope > * "></slot>
                 </div>
             </div>
         </section>
 
     `,
     {
-        cols: "6",
         'aspect-ratio': "5/4",
     },
     {

package/sections/navbar-centerlogo/_burger-menu.scss

@@ -28,7 +28,9 @@
         padding: 20px; // Make the clickable area bigger
         margin: -20px; // Make the clickable area bigger
         z-index: 3;
-        opacity: 0.6;transform: scale(1); transition: all 0.1s ease-in-out;
+        transition: all 0.1s ease-in-out;
+        opacity: 0.7;
+        transform: scale(1);
         div {
             width: 35px;
             height: 3px;

package/sections/navbar-centerlogo/_sidebar.scss

@@ -0,0 +1,80 @@
+aside {
+    &>.backdrop {
+        position: fixed;
+        background-color: var(--nav-sidbar-backgrond-color, $primary);
+        opacity: 0.4;
+        top:0; bottom: 0; left: 0; right: 0;
+        width: 100%;
+        height: 100%;
+        transform: scale(0%);
+        -webkit-transform: scale(0, 0);
+        transition: all 0.1s ease-in-out;
+        z-index:9998;
+    }
+    &>.menu {
+
+
+        position: fixed;
+        top: 0; bottom: 0; right: 0;
+        width: 90vw;
+        max-width: 300px;
+        z-index: 9999;
+        transform: translateX(100%);
+        background-color: var(--nav-sidbar-backgrond-color, $primary);
+        // Do big black shadow
+        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+        transition: all 0.2s ease-in-out;
+
+        ul {
+            padding: 0;
+            margin: 0;
+            &>li {
+                list-style: none;
+                width: 100%;
+                &>a {
+                    &:hover {
+                        background-color: var(--nav-sidbar-backgrond-color-hover, darken($primary, 10%));
+                    }
+
+                    display: block;
+                    text-decoration: none;
+                    width: 100%;
+                    padding: 15px;
+                    color: $white;
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+                }
+            }
+        }
+
+        &>.menu-header {
+            width: 100%;
+            border-bottom: 1px solid rgba(255, 255,255,0.5);
+            display: flex;
+            align-content: center;
+            justify-content: end;
+
+            &>svg {
+                cursor: pointer;
+                margin: 20px;
+                color: $white;
+                height: 38px;
+                width: 38px;
+            }
+        }
+    }
+
+}
+
+&.sidebar {
+    aside {
+        &>.backdrop {
+            transform: scale(100%);
+            -webkit-transform: scale(100%, 100%);
+        }
+        &>.menu {
+            transform: translateX(0%);
+        }
+
+
+    }
+}

package/sections/navbar-centerlogo/navbar-centerlogo.scss

@@ -17,159 +17,133 @@
 
     --layout-bg-default: transparent;
     --layout-bg-sticky: #fff;
-    --layout-bg-sticky-shadow: 0px 1px 2px #000;
+    --layout-bg-sticky-shadow: 0px 1px 5px rgba(0, 0, 0, 0.6);
     --layout-burger-color: var(--t-accent);
     --layout-menu-color: var(--bs-primary);
     --layout-image-height: 80px;
+    --layout-zoom-ratio: 2;
+    --layout-zoom-ratio-mobile: 1.3;
+    --layout-backdrop-height: 20px;
 
+    --layout-spacer-height: 0px;
+    --layout-spacer-color: rgba(255,255,255,1);
+    --layout-spacer-height-mobile: calc(var(--layout-image-height) * var(--layout-zoom-ratio-mobile));
 
-    background-color: var(--layout-bg-default);
-    position: absolute;
-    top: 0;
-    width: 100vw;
-    height: auto;
-    z-index: 999;
 
-    .brand img {
-        height: auto;
-
-        width: 50%;
+    --e-zoom-ratio: var(--layout-zoom-ratio);
+    @media (width < 750px) {
+        --e-zoom-ratio: var(--layout-zoom-ratio-mobile);
     }
 
-    &.scrolled img.brand {
-        width: auto;
-        height: 80px;
-
-    }
 
 
-    &>.navbar__wrapper {
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: nowrap;
-        flex-direction: row;
 
-        & > *{
-            flex-grow: 1;
-            display: flex;
-            width: 33%;
+    &>.e--spacer {
+        @media (width < 750px) {
+            height: var(--layout-spacer-height-mobile);
         }
-        &>.navbar__logo {
-            transition: all 0.5s ease-in-out;
-            align-items: center;
-            justify-content: center;
-            display: flex;
+        height: var(--layout-spacer-height);
+        position: relative;
+        background-color: var(--layout-spacer-color);
 
+    }
+    &>.e--backdrop {
+        position: absolute;
+        width: 100vw;
+        left: 0;
+        z-index: 9;
+        height: var(--layout-backdrop-height);
+        background: linear-gradient(180deg, var(--layout-spacer-color) 0%, rgba(0,0,0,0) 100%);
+    }
+    &>.navbar {
+        background-color: var(--layout-bg-default);
 
-            img {
-                height: var(--layout-image-height);
-                transition: all 0.25s ease-in-out;
-                width: auto;  transform: translateY(50%) scale(2);
-                max-width: 70vw;
-            }
+        position: absolute;
+        top: 0;
+        width: 100vw;
+        height: auto;
+        z-index: 999;
 
-        }
-        @import "burger-menu";
+        .brand img {
+            height: auto;
 
-    }
+            width: 50%;
+        }
 
-    transition: background-color 0.2s ease-in-out;
 
+        &.unscrolled {
 
 
-    &.scrolled {
-        height: var(--layout-scrolled-height);
-        position: fixed;
-        top: 0;
-        width: 100vw;
-        background-color: var(--layout-bg-sticky);
-        .navbar__logo img {
-            transform: translateY(0) scale(1);
         }
-    }
 
+        &.scrolled {
+            box-shadow: var(--layout-bg-sticky-shadow);
+            img.brand {
+                width: auto;
+                height: 80px;
 
+            }
+        }
 
-    aside {
-        &>.backdrop {
-            position: fixed;
-            background-color: var(--nav-sidbar-backgrond-color, $primary);
-            opacity: 0.4;
-            top:0; bottom: 0; left: 0; right: 0;
-            width: 100%;
-            height: 100%;
-            transform: scale(0%);
-            -webkit-transform: scale(0, 0);
-            transition: all 0.1s ease-in-out;
-            z-index:9998;
+
+        transform: translateY(0);
+        transition: all 0.3s ease-in-out;
+        &.scrollup {
+            transform: translateY(-100%);
         }
-        &>.menu {
 
 
-            position: fixed;
-            top: 0; bottom: 0; right: 0;
-            width: 90vw;
-            max-width: 300px;
-            z-index: 9999;
-            transform: translateX(100%);
-            background-color: var(--nav-sidbar-backgrond-color, $primary);
-            // Do big black shadow
-            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-            transition: all 0.2s ease-in-out;
-
-            ul {
-                padding: 0;
-                margin: 0;
-                &>li {
-                    list-style: none;
-                    width: 100%;
-                    &>a {
-                        &:hover {
-                            background-color: var(--nav-sidbar-backgrond-color-hover, darken($primary, 10%));
-                        }
-
-                        display: block;
-                        text-decoration: none;
-                        width: 100%;
-                        padding: 15px;
-                        color: $white;
-                        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-                    }
-                }
-            }
+        &>.navbar__wrapper {
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: nowrap;
+            flex-direction: row;
 
-            &>.menu-header {
-                width: 100%;
-                border-bottom: 1px solid rgba(255, 255,255,0.5);
+            & > *{
+                flex-grow: 1;
                 display: flex;
-                align-content: center;
-                justify-content: end;
-
-                &>svg {
-                    cursor: pointer;
-                    margin: 20px;
-                    color: $white;
-                    height: 38px;
-                    width: 38px;
+                width: 33%;
+            }
+            &>.navbar__logo {
+                transition: all 0.5s ease-in-out;
+                align-items: center;
+                justify-content: center;
+                display: flex;
+
+
+                img {
+                    height: var(--layout-image-height);
+                    transition: all 0.25s ease-in-out;
+                    width: auto;  transform: translateY(50% ) scale(var(--e-zoom-ratio));
+                    max-width: 70vw;
                 }
+
             }
+            @import "burger-menu";
+
         }
 
-    }
 
-    &.sidebar {
-        aside {
-            &>.backdrop {
-                transform: scale(100%);
-                -webkit-transform: scale(100%, 100%);
-            }
-            &>.menu {
-                transform: translateX(0%);
-            }
 
 
+
+        &.scrolled {
+            height: var(--layout-scrolled-height);
+            position: fixed;
+            top: 0;
+            width: 100vw;
+            background-color: var(--layout-bg-sticky);
+            .navbar__logo img {
+                transform: translateY(0) scale(1);
+            }
         }
+
     }
 
 
+
+
+    @import "sidebar";
+
+
 }

package/sections/navbar-centerlogo/navbar-centerlogo.ts

@@ -4,26 +4,31 @@ import {Joda, JodaDescriptionManager} from "@leuffen/jodastyle";
 
 const html = `
 
-    <nav class="navbar-centerlogo navbar :: mobile :xl:">
-        <div class="navbar__wrapper [[ layout.container ]]">
-            <slot class="" data-select="ul.navbar-top "></slot>
+    <nav class="navbar-centerlogo">
+        <div class="e--spacer"></div>
+        <div class="e--backdrop"></div>
+        <div class="navbar">
+            <div class="navbar__wrapper [[ layout.container ]]">
+                <slot class="" data-select="ul.navbar-top "></slot>
 
-            <slot class="navbar__logo" data-select="[[ layout.slot_logo_selector ]]"></slot>
+                <slot class="navbar__logo" data-select="[[ layout.slot_logo_selector ]]"></slot>
 
-            <div class="burger-menu" onclick="this.closest('nav').classList.toggle('sidebar')">
-                <div class="burger-menu__text">
-                    [[ layout.burger_text ]]
-                </div>
-                <div class="burger-menu__burger">
-                    <div></div>
-                    <div></div>
-                    <div></div>
+
+
+                <div class="burger-menu" onclick="this.closest('nav').classList.toggle('sidebar')">
+                    <div class="burger-menu__text">
+                        [[ layout.burger_text ]]
+                    </div>
+                    <div class="burger-menu__burger">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
                 </div>
-            </div>
 
+            </div>
         </div>
 
-
         <aside>
             <div class="backdrop" onclick="this.closest('nav').classList.remove('sidebar')"></div>
             <div class="menu">
@@ -44,20 +49,40 @@ Joda.registerTemplate(
     html,
     {
         slot_logo_selector: ".brand",
-        burger_text: "Menu",
-        container: "container"
+        burger_text: "Menü",
+        container: "container",
 
+        scrollup_position: 100
     },
     {
-        "onAfterConnectedCallback": (element: HTMLElement) => {
+        "onAfterAllTemplatesConnectedCallback": (element: HTMLElement) => {
+            // Query css variable --layout-scrollup from elment
+
             // If the page is scrolled down, the navbar should be sticky
             // Update this on scroll event
-            window.addEventListener("scroll", () => {
+            let lastY = 0;
+            let navbar = element.querySelector(".navbar")
+            let changer = () => {
                 if (window.scrollY > 1) {
-                    element.classList.add("scrolled");
+                    navbar.classList.add("scrolled");
+                    navbar.classList.remove("unscrolled");
                 } else {
-                    element.classList.remove("scrolled");
+                    navbar.classList.remove("scrolled");
+                    navbar.classList.add("unscrolled");
                 }
-            });
+
+                let isScrollingUp = window.scrollY < lastY;
+                lastY = window.scrollY;
+
+                if (window.scrollY > 250 && ! isScrollingUp) {
+                    navbar.classList.add("scrollup");
+                } else {
+                    navbar.classList.remove("scrollup");
+                }
+
+            }
+
+            window.addEventListener("scroll", changer, {passive: true});
+            changer()
         }
     });

package/sections/sec-card-2col/sec-card-2col.scss

@@ -5,11 +5,39 @@
     background: var(--t-section-background);
 
 
+    --layout-title-aspect-ratio: 16 / 9;
+
+
+
     .tjs__sec-card-2col--col-start > slot > .children > *:last-child {
         margin-bottom: 0 !important;
     }
 
 
+
+    slot.title {
+        &:empty {
+            display: none;
+        }
+        display: block;
+        width: 100%;
+        text-align: center;
+
+        aspect-ratio: var(--layout-title-aspect-ratio);
+
+        object-fit: cover;
+        object-position: center center;
+        &>p {
+            display: contents;
+        }
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center center;
+        }
+    }
+
     map.aside {
         --joda-class: "";
         display: block;

package/sections/sec-card-2col/sec-card-2col.ts

@@ -10,13 +10,14 @@ Joda.registerTemplate(
 
         <section class="tjs__sec-card-2col [[layout.class]] :: mobile :lg: desktop">
             <div class="tjs__sec-card-2col--container [[layout.container]]">
+                <slot class="title" data-select="img.title || .title > img"></slot>
                 <div class="row [[layout.order === 'reverse' ? 'flex-column-reverse': '']] [[layout.mobile_reverse === 'yes' ? ':: flex-column-reverse :lg:': '']]">
                     <div class="tjs__sec-card-2col--col-start tjs__section-text p-4 p-lg-5 :: col-12 :lg: col-[[layout.cols]]">
                         <slot></slot>
                     </div>
                     <div class="tjs__sec-card-2col--col-end image-side :: col-12 :lg: col-[[12 - layout.cols]] ">
 
-                        <slot class="[[layout.slideshow === true ? 'slideshow' : '']]" data-select="img, .children > .section-hr.aside, .aside" [[layout.slideshow !== true ? 'data-limit="1"' : '' ]]></slot>
+                        <slot class="[[layout.slideshow === true ? 'slideshow' : '']]" data-select=".aside || img, .children > .section-hr.aside" [[layout.slideshow !== true ? 'data-limit="1"' : '' ]]></slot>
                     </div>
                 </div>
             </div>

package/sections/sec-testimonial-ribbon/sec-testimonial-ribbon.scss

@@ -1,7 +1,10 @@
 .tjs__sec-testimonial-ribbon {
-    padding: var(--t-section-padding);
 
-    background-color: var(--t-section-background);
+    --layout-bg: var(--t-section-background);
+    --layout-bg-ribbon: var(--t-soft-primary);
+
+    padding: var(--t-section-padding);
+    background-color: var(--layout-bg);
 
     &.mobile {
         padding-top: 40px;
@@ -26,7 +29,7 @@
     & > .tjs__sec-testimonial-ribbon--wrapper {
         padding-top: 40px;
         padding-bottom: 40px;
-        background-color: var(--t-section-background-primary);
+        background-color: var(--layout-bg-ribbon);
         font-size: 1.2em;
         font-style: italic;
         letter-spacing: 1px;

package/themes/theme1/index.scss

@@ -157,7 +157,7 @@
         }
         .content {
             background-color: #fff;
-            p {
+            p,ul,ol {
                 margin: 20px 20px 20px 0;
             }
         }

package/themes/theme2/index.scss

@@ -187,7 +187,7 @@ $header-text-transform: unset !default;
         }
         .content {
             background-color: #fff;
-            p {
+            p,ul,ol{
                 margin: 20px 20px 20px 0;
             }
         }