@leuffen/themejs1 7.0.2 → 8.0.2

package/sections/cta-form/cta-form.scss

@@ -1,20 +1,21 @@
 .tjs__cta-form {
-    padding: var(--t-section-padding);
+    --layout-padding: var(--t-section-padding);
+    --layout-background-color: var(--t-background-accent);
+
+    padding: var(--layout-padding);
+
+
     .invalid-feedback {
         padding-bottom: 30px   ;
     }
     .wrapper {
-        padding: var(--t-section-padding);
-        background: var(--t-section-background-accent);
+        padding: var(--layout-padding);
+        background: var(--layout-background-color);
         .row > div {
             --joda-class: "col-12 col-md-6";
         }
     }
-    h2 {
-         text-align: center;
-         margin-bottom: 40px;
 
-    }
     input, textarea, select {
         --joda-use: "input()";
     }

package/sections/cta-form/cta-form.ts

@@ -6,7 +6,7 @@ Joda.registerTemplate("cta-form",
         <section class="tjs__cta-form">
             <form  data-micx-formmail-preset="default" data-micx-formmail-sent-message="E-Mail erfolgreich gesendet!">
                 <div class="container">
-                    <slot data-select=":scope h2"></slot>
+                    <slot class="heading-style-default" data-select=":scope h2, :scope blockquote"></slot>
                 </div>
                 <div class="wrapper">
                     <div class="container">

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

@@ -3,7 +3,16 @@
 .tjs__hero-max {
     --s-box-background: rgba(255, 255, 255, 0.8);
 
-    --joda-class: ":: mobile :lg: desktop";
+    --layout-desktop-overlay1-background: none;
+    --layout-desktop-overlay2-background: none;
+    --layout-desktop-overlay3-background: none;
+    --layout-desktop-image-mask: none;
+
+    --layout-desktop-top-space: 200px;
+    --layout-desktop-min-height: 600px;
+    --layout-desktop-max-height: 1100px;
+
+    --joda-class: ":: mobile :xl: desktop";
     --layout-image-ratio: 16 / 10;
 
     &.mobile {
@@ -36,6 +45,25 @@
     }
     &.desktop {
 
+        .x-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .x-overlay1 {
+            background: var(--layout-desktop-overlay1-background);
+            z-index: 1; // Behind Image
+        }
+        .x-overlay2 {
+            background: var(--layout-desktop-overlay2-background);
+            z-index: 3;
+        }
+        .x-overlay3 {
+            background: var(--layout-desktop-overlay3-background);
+            z-index: 4;
+        }
         &.box {
             .content {
                 background: var(--s-box-background);
@@ -45,15 +73,16 @@
         }
 
         .tjs__hero-max--container {
+            margin-top: var(--layout-desktop-top-space, 200px);
             height: 100%;
         }
 
-        min-height: var(--layout-min-height, 400px);
+        min-height: var(--layout-desktop-min-height);
         position: relative;
         &.tjs__hero-max--autoheight {
             height: calc(100vh - var(--t-fullsize-modifier, 200px));
-            min-height: var(--layout-min-height, 400px);
-            max-height: var(--layout-max-height, 1000px);
+            min-height: var(--layout-desktop-min-height);
+            max-height: var(--layout-destkop-max-height);
         }
         &>slot {
             display: block;
@@ -66,12 +95,14 @@
                 object-fit: cover;
                 object-position: center center;
                 width: 100%;
+                -webkit-mask: var(--layout-desktop-image-mask, none);
+                mask: var(--layout-desktop-image-mask, none);
             }
         }
 
         & > .tjs__hero-max--out-wrapper {
             position: absolute;
-            z-index: 2;
+            z-index: 5;
             top: 0;
             bottom: 0;
             width: 100%;

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

@@ -5,11 +5,14 @@ Joda.registerTemplate("hero-max",
     // language=HTML
     `
 
-        <section class="tjs__hero-max [[layout.class]] [[layout.autoheight === false ? '' : 'tjs__hero-max--autoheight' ]] :: mobile :xxl: desktop">
+        <section class="tjs__hero-max [[layout.class]] [[layout.autoheight === false ? '' : 'tjs__hero-max--autoheight' ]] :: mobile :lg: desktop">
             <slot data-select="img.background, :scope>.content>p.background>img" class="slideshow"></slot>
+            <div class="x-overlay x-overlay1"></div>
+            <div class="x-overlay x-overlay2"></div>
+            <div class="x-overlay x-overlay3"></div>
             <div class="tjs__hero-max--out-wrapper ">
                 <div class="tjs__hero-max--container [[layout.container]] ">
-                    <slot class="content" data-select=".slide || :scope > * "></slot>
+                    <slot class="content heading-style-hero" data-select=".slide || :scope > * "></slot>
                 </div>
             </div>
         </section>

package/sections/hero-title-small/hero-title-small.scss

@@ -1,4 +1,15 @@
-.tjs__hero-title-small {
+.tjs-hero-title-small {
+
+    --layout-margin-top: 0;
+    --layout-margin-top-mobile: 0;
+
+
+    margin-top: var(--layout-margin-top);
+
+    @media (max-width: $breakpoint-mobile) {
+        margin-top: var(--layout-margin-top-mobile);
+    }
+
     width: 100%;
     align-items: center;
     position: relative;

package/sections/hero-title-small/hero-title-small.ts

@@ -5,11 +5,11 @@ Joda.registerTemplate("hero-title-small",
     // language=HTML
     `
 
-    <div class="tjs__hero-title-small">
+    <section class="tjs-hero-title-small">
         <div class="imagewrapper">
             <slot class="image-slot" data-select="img, .top"></slot>
         </div>
 
         <slot></slot>
-    </div>
+    </section>
     `);

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

@@ -16,8 +16,8 @@
     & > .burger-menu__text {
         padding-right: 5px;
         font-family: var(--t-font-family-header);
-        font-size: var(--t-font-size-header);
-        color: var(--t-text-color-primary);
+        font-size: var(--t-font-size-h5);
+        color: var(--t-primary);
         @media (width < 768px) {
             display: none;
         }

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

@@ -21,7 +21,7 @@
     --layout-burger-color: var(--t-accent);
     --layout-menu-color: var(--bs-primary);
     --layout-image-height: 80px;
-    --layout-zoom-ratio: 2;
+    --layout-zoom-ratio: 1.6;
     --layout-zoom-ratio-mobile: 1.3;
     --layout-backdrop-height: 20px;
 
@@ -31,15 +31,17 @@
 
 
     --e-zoom-ratio: var(--layout-zoom-ratio);
-    @media (width < 750px) {
+    --e-translatey: 70%;
+    @media (width < $breakpoint-mobile) {
         --e-zoom-ratio: var(--layout-zoom-ratio-mobile);
+        --e-translatey: 50%;
     }
 
 
 
 
     &>.e--spacer {
-        @media (width < 750px) {
+        @media (width < $breakpoint-mobile) {
             height: var(--layout-spacer-height-mobile);
         }
         height: var(--layout-spacer-height);
@@ -114,7 +116,9 @@
                 img {
                     height: var(--layout-image-height);
                     transition: all 0.25s ease-in-out;
-                    width: auto;  transform: translateY(50% ) scale(var(--e-zoom-ratio));
+                    width: auto;
+
+                    transform: translateY(var(--e-translatey)) scale(var(--e-zoom-ratio));
                     max-width: 70vw;
                 }
 

package/sections/navbar-switch2/navbar-switch2.scss

@@ -0,0 +1,274 @@
+@import "bootstrap/scss/functions";
+
+// 2. Include any default variable overrides here
+
+// 3. Include remainder of required Bootstrap stylesheets
+@import "bootstrap/scss/variables";
+
+// 4. Include any default map overrides here
+
+// 5. Include remainder of required parts
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+
+
+.isl-navbar-switch2 {
+
+
+    background: transparent;
+
+
+
+
+    img {
+        max-width: 100%;
+    }
+
+    &__top-bar {
+        margin-top: 15px;
+        margin-bottom: 15px;
+
+        ul {
+            display: flex;
+            justify-content: end;
+            margin-bottom: 0;
+            &>li {
+                list-style: none;
+                border-radius: 0;
+                padding: 7px 15px;
+
+                height: auto;
+                p {
+                    margin-bottom: 0;
+                    font-size: 15px;
+                    color: $black;
+                }
+                &:not(:last-child) {
+                   margin-right: 30px;
+                }
+                a {
+                       text-decoration: none;
+                   }
+            }
+        }
+    }
+
+    &__nav {
+        background: $white;
+        border-radius: 0;
+        width: 100%;
+        height: 80px;
+        align-content: center;
+        box-shadow: 0px 1px 2px #00000029;
+
+        overflow: hidden;
+        &--inner {
+            display: flex;
+            justify-content: end;
+            align-items: center;
+
+        }
+
+        &--logo {
+            margin-right: auto;
+
+
+        }
+
+        &--items {
+            display: flex;
+            margin-bottom: 0;
+
+            ul {
+                margin-bottom: 0;
+
+                li {
+                    list-style: none;
+                    display: inline-flex;
+                    a {
+
+                        font-size: 18px;
+                        font-weight: 500;
+                        margin-right: 2rem;
+                        height: 80px;
+                        line-height: 80px;
+                        color: var(--text-color, black);
+                        padding: 0 1rem;
+                        transition: 0.3s;
+                        text-decoration: none;
+
+                        @include media-breakpoint-down(lg) {
+                            margin-right: 0.5rem;
+                        }
+
+                        &:hover {
+                            background: $primary;
+                            color: $white;
+                        }
+                    }
+                }
+            }
+
+        }
+
+        &--mobile-menu {
+            position: relative;
+            width: 35px;
+            height: 30px;
+            opacity: 0.6;
+            cursor: pointer;
+
+            &-selector {
+                position: absolute;
+                padding: 20px; // Make the clickable area bigger
+                margin: -20px; // Make the clickable area bigger
+                z-index: 3;
+                div {
+                    width: 35px;
+                    height: 3px;
+                    background-color: black;
+                    margin: 6px 0;
+                }
+            }
+
+            &:hover {
+                opacity: 1;
+            }
+
+        }
+    }
+
+    &.floating {
+        position: absolute;
+        top:0;
+        left:0;
+        right:0;
+        z-index: 999;
+    }
+
+    &.mobile {
+
+        &.floating {
+            position: static;
+
+        }
+            .isl-navbar-switch2__top-bar {
+                justify-content: unset;
+
+                &--item {
+                    &:last-child {
+                        margin-left: auto;
+                    }
+                }
+            }
+
+
+
+
+            .isl-navbar-switch2__nav {
+                height: auto;
+                padding:  20px 10px 20px 0;
+
+                &--inner {
+                    justify-content: unset;
+                    padding-left: unset;
+                    padding-right: unset;
+                }
+
+                &--items {
+                    display: none;
+                }
+
+                &--logo {
+
+                }
+            }
+
+
+
+    }
+
+    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-switch2/navbar-switch2.ts

@@ -0,0 +1,47 @@
+
+// language=HTML
+import {Joda, JodaDescriptionManager} from "@leuffen/jodastyle";
+
+const html = `
+
+    <nav class="isl-navbar-switch2 :: mobile :xl:">
+
+        <div class="isl-navbar-switch2__top-bar container-xxl">
+            <slot data-select="ul.navbar-top"></slot>
+        </div>
+        <div class="isl-navbar-switch2__nav">
+            <div class="container-xl">
+                <div class="isl-navbar-switch2__nav--inner">
+                    <div class="isl-navbar-switch2__nav--logo">
+                        <slot data-select=".brand"></slot>
+                    </div>
+                    <div class="isl-navbar-switch2__nav--items :: d-none :xl: d-block">
+                        <slot data-select="ul.navbar-main" data-child-class="isl-navbar-switch2__nav--items-item"></slot>
+                    </div>
+                    <div class="isl-navbar-switch2__nav--mobile-menu :: :xl: d-none" >
+                        <div class="isl-navbar-switch2__nav--mobile-menu-selector" onclick="this.closest('nav').classList.toggle('sidebar')">
+                            <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">
+                <div class="menu-header">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16"  onclick="this.closest('nav').classList.remove('sidebar')">
+                        <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
+                    </svg>
+                </div>
+                <slot data-select="ul.navbar-main" data-copy="1" data-child-class="isl-navbar-switch2__nav--items-item"></slot>
+            </div>
+        </aside>
+    </nav>
+
+`;
+
+Joda.registerTemplate("navbar-switch2", html);

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

@@ -0,0 +1,73 @@
+import {defineSection, example, SectionLayoutGroup} from "../sections.def";
+
+
+defineSection('sec-card-2col', SectionLayoutGroup.Content)`
+
+This section displays a card with two columns. A Main column with the text or main content and a side column.
+
+The will be automatically pulled into the side-column. Additional side content can be specified by adding
+a .aside class to the element.
+
+This element can be used multiple times in the main content of a page. It should not be used more than 3 times
+in a row without a different section in between (due to the visual similarity).
+
+If a blockquote element is specified as first element, it will be used as a big callout header. Use this
+to highlight important information but keep it short (text size is .h1).
+
+`;
+
+
+example("Section with image and Accordion below the text.")`
+## Vorsorge
+{: layout="use: #sec-card-2col"}
+
+> Vorsorge ist die beste Medizin!
+
+![](https://cdn.leuffen.de//leu-stock/v2/76/c_gfedcba/AdobeStock_79790308.webp)
+
+Schützen Sie sich und Ihre Lieben durch regelmäßige Untersuchungen, präventive Maßnahmen und individuelle Beratung. Wir stehen Ihnen zur Seite, um potenzielle Gesundheitsrisiken frühzeitig zu erkennen und maßgeschneiderte Präventionspläne zu entwickeln.
+
+---
+{: layout="use: accordion()" class="mt-5"}
+
+### Gesundheits-Check-Up
+
+Der Gesundheits-Check-Up ist eine umfassende Untersuchung, die dazu dient, Krankheiten frühzeitig zu erkennen und zu behandeln. Dieser Check-Up ist für alle Patienten ab 35 Jahren alle drei Jahre und für HZV Patienten alle 2 Jahre empfohlen.
+
+### Hautkrebs-Früherkennung
+
+Die Hautkrebs-Früherkennung ist eine wichtige Maßnahme zur Früherkennung von Hautkrebs. Sie sollte ab dem 35. Lebensjahr regelmäßig durchgeführt werden. Dieser Check ist für alle Patienten alle zwei Jahre empfohlen.
+
+### Impfungen
+
+Impfungen sind eine wichtige Maßnahme zur Vorbeugung von Infektionskrankheiten. Wir beraten Sie gerne zu den empfohlenen Impfungen und führen diese in unserer Praxis durch. Für Impfungen ist kein Termin erforderlich. Kommen Sie einfach während der Sprechzeiten vorbei.
+
+
+`;
+
+
+example("Example with Header, Image on one side and Header Text and form on the other side.")`
+## Online Rezept
+{: layout="use: #sec-card-2col"}
+
+> Jetzt Wiederholungsrezept online anfragen
+
+![](https://cdn.leuffen.de//leu-stock/v2/96/c_gfedcba/AdobeStock_249986710.webp)
+
+Mit unserem Online-Rezeptformular können Sie bequem von zu Hause aus ein neues Rezept für Ihre Dauermedikation oder Folgerezepte anfordern.
+ **Bestellungen vor 10:00 Uhr können am Folgetag abgeholt werden.**
+
+---
+{: layout="use: #e-form" .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]
+[textarea name="Medikament" 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]
+
+`;
+