@leuffen/themejs1 7.0.3 → 8.0.3

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/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]
+
+`;
+

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

@@ -1,11 +1,24 @@
 
 
 .tjs__sec-card-2col {
+
+    --layout-border: 1px solid var(--t-section-border-color);
+    --layout-border-radius: var(--t-section-border-radius);
+    --layout-section-background: var(--t-section-background);
+    --layout-container-background: var(--t-container-background, white);
+    --layout-title-aspect-ratio: 16 / 9;
+
+    --layout-padding: 40px;
+    --layout-padding-mobile: 10px;
+
     padding: var(--t-section-padding);
-    background: var(--t-section-background);
+    background: var(--layout-section-background);
 
 
-    --layout-title-aspect-ratio: 16 / 9;
+
+    .row {
+        --bs-gutter-x: 0;
+    }
 
 
 
@@ -57,6 +70,9 @@
         --joda-class: p-4 p-lg-5;
     }
 
+    .aside-content {
+    }
+
 
     &.mobile.text-first {
         .row > .tjs__sec-card-2col--col-start {
@@ -66,6 +82,20 @@
 
     .row > .tjs__sec-card-2col--col-start {
         order: 99;
+
+    }
+
+    &.reverse {
+        &.mobile.text-first {
+            .row > .tjs__sec-card-2col--col-start {
+                order: 99;
+            }
+        }
+
+        .row > .tjs__sec-card-2col--col-start {
+            order: 1;
+
+        }
     }
 
 
@@ -92,18 +122,35 @@
     }
 
 
+
+
     .tjs__sec-card-2col--container {
-        border: 1px solid var(--t-section-border-color);
-        border-radius: var(--t-section-border-radius);
-        overflow: hidden;
-        background-color: white;
         padding: 0;
+        border: var(--layout-border);
+        border-radius: var(--layout-border-radius);
+        overflow: hidden;
+        background-color: var(--layout-container-background);
     }
 
-    h3 {
-        margin-top: 1.5rem;
-        font-size: 1.2em;
-        font-weight: 600;
+    // Padding
+    .tjs__sec-card-2col--col-end {
+        padding: var(--layout-padding);
+        &:has(> slot > img) {
+            padding: 0;
+        }
+    }
+
+    &.mobile .tjs__sec-card-2col--col-end {
+        padding: var(--layout-padding-mobile);
+    }
+
+
+
+    .tjs__sec-card-2col--col-start {
+        padding: var(--layout-padding);
+    }
+    &.mobile .tjs__sec-card-2col--col-start {
+        padding: var(--layout-padding-mobile);
     }
 
 }

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

@@ -12,12 +12,12 @@ Joda.registerTemplate(
             <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]]">
+                    <div class="tjs__sec-card-2col--col-start heading-style-flex :: 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=".aside || img, .children > .section-hr.aside" [[layout.slideshow !== true ? 'data-limit="1"' : '' ]]></slot>
+                        <slot class="[[layout.slideshow === true ? 'slideshow' : '']]" data-select=".aside || .aside-content || img, .children > .section-hr.aside" [[layout.slideshow !== true ? 'data-limit="1"' : '' ]]></slot>
                     </div>
                 </div>
             </div>

package/sections/sec-card-feature/sec-card-feature.def.ts

@@ -0,0 +1,47 @@
+import {defineSection, example, SectionLayoutGroup} from "../sections.def";
+
+
+defineSection('sec-card-feature', SectionLayoutGroup.Content)`
+
+A Feature Card Section with a large image on top and to columens of Text below. Should be used only
+once within a pages content. Best places at after 2-3 sec-card-2col elements.
+
+If a Blockquote is used as first element, it will be used as a big callout header. The h2 element will be
+smaller abouve the callout.
+
+`;
+
+
+example("Section with image image on top, header, callout and text on left and accordion on right.")`
+## Vorsorge für die ganze Familie
+{: layout="use: #sec-card-feature"}
+
+> Gesundheit für alle Altersgruppen
+
+Vorsorge ist für alle Altersgruppen wichtig. Ob Kinder, Jugendliche, Erwachsene oder Senioren - wir bieten für jede Altersgruppe passende Vorsorgeuntersuchungen an.
+
+Uns ist eine umfassende Aufklärung über die Möglichkeiten der Vorsorge und eine individuelle Beratung wichtig. Wir arbeiten eng mit Ihnen zusammen, um die bestmögliche Vorsorge für Ihre individuellen Bedürfnisse zu gewährleisten.
+
+[Jetzt Termin vereinbaren](/kontakt){: .btn .fw-bold .btn-secondary .mt-4}
+
+
+![](https://cdn.leuffen.de//leu-stock/v2/107/1315-877_gfedcba/AdobeStock_610198709.webp)
+
+---
+{: layout="use: accordion()"}
+
+### Akutversorgung von Kindern ab 6 Monaten
+
+Unsere Praxis legt besonderen Wert auf die Versorgung Ihrer jüngsten Familienmitglieder. Bei akuten Beschwerden und Krankheitsbildern steht das Wohl Ihres Kindes immer an erster Stelle. Kinder ab dem Alter von 6 Monaten benötigen eine spezielle Herangehensweise, die sowohl medizinisches Know-how als auch eine kindgerechte Behandlung beinhaltet. Unsere erfahrenen Fachkräfte nehmen sich ausreichend Zeit für Ihren Nachwuchs und sorgen dafür, dass er sich in unserer Praxis sicher und geborgen fühlt.
+
+### Jugendschutzuntersuchung
+
+Jeder Jugendliche steht im Laufe seiner Entwicklung vor neuen Herausforderungen und Veränderungen. Die Jugendschutzuntersuchung ist ein wichtiger Baustein, um sicherzustellen, dass junge Menschen gesund und wohlbehalten ins Berufsleben starten können. In unserer Praxis bieten wir diese Untersuchung an, die dazu dient, mögliche gesundheitliche Risiken frühzeitig zu erkennen und vorbeugende Maßnahmen zu treffen. Es ist unser Ziel, die körperliche und geistige Gesundheit Ihres Teenagers zu fördern und zu schützen.
+
+### Altersmedizinische Vorsorgeuntersuchungen
+
+Mit fortschreitendem Alter ändern sich die Bedürfnisse und Anforderungen an unsere Gesundheit. Unsere Praxis ist darauf spezialisiert, Sie bestmöglich durch diese Lebensphase zu begleiten. Mithilfe altersmedizinischer Vorsorgeuntersuchungen (geriatrisches Basisassessment) können wir frühzeitig Veränderungen und potenzielle Risikofaktoren erkennen. So sind wir in der Lage, Ihnen individuell angepasste Empfehlungen und Therapien anzubieten. Ihr Wohlbefinden und Ihre Lebensqualität stehen für uns immer im Vordergrund. Vertrauen Sie auf unsere Expertise und lassen Sie uns gemeinsam für Ihre Gesundheit sorgen.
+
+
+`;
+

package/sections/sec-legal-content/sec-legal-content.scss

@@ -1,9 +1,14 @@
 
 
-.tjs__sec-legal-content {
+.tjs-legal-content {
+    --layout-margin-top: 0;
+
+    margin-top: var(--layout-margin-top);
+
     background: var(--t-section-background);
     padding: var(--t-section-padding);
 
+
     .inner-wrapper {
 
         border: 1px solid var(--t-section-border-color);

package/sections/sec-legal-content/sec-legal-content.ts

@@ -5,7 +5,7 @@ Joda.registerTemplate("sec-legal-content",
     // language=HTML
     `
 
-        <section class="tjs__sec-legal-content :: mobile :lg:">
+        <section class="tjs-legal-content :: mobile :lg:">
             <div class="out-wrapper">
                 <div class="container p-0">
                     <div class="inner-wrapper :: p-4 :lg: p-5">

package/sections/sec-multi-card/sec-multi-card.def.ts

@@ -0,0 +1,58 @@
+import {defineSection, example, SectionLayoutGroup} from "../sections.def";
+
+
+defineSection('sec-multi-card', SectionLayoutGroup.Content)`
+
+A Header with callout and text followed by a card elements per h3 row with image on top.
+
+`;
+
+
+example("Leistungsübersicht auf Startseite mit Überschift, darunter 3 Columns mit Bild und Text. Danach eine Zeile mit einem Button zu den Leistungen")`
+## Unsere Leistungen
+{: layout="use: #sec-multi-card; cols:3"}
+
+### Vorsorge
+
+![](https://cdn.leuffen.de//leu-stock/v2/70/77-51_gfedcba/AdobeStock_87378997.webp)
+
+Wir bieten eine umfassende Vorsorgeuntersuchung an, um Krankheiten frühzeitig zu erkennen und zu behandeln.
+
+### Diagnostik
+
+![](https://cdn.leuffen.de//leu-stock/v2/22/460-307_gfedcba/AdobeStock_484261570.webp)
+
+Unsere Praxis ist mit modernsten Diagnosegeräten ausgestattet, um eine genaue und schnelle Diagnose zu gewährleisten.
+
+### Therapie
+
+![](https://cdn.leuffen.de//leu-stock/v2/9/1024-683_gfedcba/AdobeStock_417585744.webp)
+
+Wir bieten eine breite Palette von Therapien an, um eine effektive Behandlung zu gewährleisten.
+
+---
+{: .section-h2}
+
+
+[Unsere Leistungen](/leistungen){: .btn .btn-primary .btn-lg .mb-3}
+{: .text-center}
+
+
+`;
+
+example("Mitarbeiter mit jeweils 3 Cards nebeneinander. (kann beliebig lang werden). Hier ist der Header mittels .d-none ausgeblendet (falls vorher bereits ein Cards Element steht).")`
+## Unsere Mitarbeiter
+{: layout="use: #sec-multi-card; cols:3" .d-none}
+
+### Nicoleta Avrinte
+
+![Bild des Mitarbeiters](https://cdn.leuffen.de//mvz-marienmuenster-k72/v2/11/c_gfedcba/portraits-mvz-nicoleta-avrinte.webp)
+
+### Anika Engel
+
+![Bild des Mitarbeiters](https://cdn.leuffen.de//mvz-marienmuenster-k72/v2/10/c_gfedcba/portraits-mvz-anika-engel.webp)
+
+### Anika Meier
+
+![Bild des Mitarbeiters](https://cdn.leuffen.de//mvz-marienmuenster-k72/v2/9/c_gfedcba/portraits-mvz-anika-meier.webp)
+`;

package/sections/sec-multi-card/sec-multi-card.ts

@@ -22,7 +22,7 @@ Joda.registerTemplate("sec-multi-card",
     `
 
         <section class="tjs__sec-multi-card">
-            <div class="container header" style="--joda-on-empty-class: d-none;">
+            <div class="container header heading-style-default" style="--joda-on-empty-class: d-none;">
                 <slot class="tjs__section-text" data-select=":scope > .content"></slot>
             </div>
             <div class="container">

package/sections/sec-testimonial-ribbon/sec-testimonial-ribbon.def.ts

@@ -0,0 +1,29 @@
+import {defineSection, example, SectionLayoutGroup} from "../sections.def";
+
+
+defineSection('sec-testimonial-ribbon', SectionLayoutGroup.Content)`
+
+A section filling the screens full width with a round image of a person and a quote of this person.
+
+Only use maximum once per page. Do not use as last nor as first element on a page.
+
+The text of the header will not be shown.
+
+`;
+
+
+example("Statement of the doctor himself.")`
+
+## Testimonial
+{: layout="use: #sec-testimonial-ribbon"}
+
+![](https://cdn.leuffen.de//leu-stock/v2/73/991-661_gfedcba/AdobeStock_185581198.webp)
+
+„In unserer Praxis legen wir großen Wert auf eine individuelle und professionelle psychiatrische und psychotherapeutische Versorgung. Wir nutzen modernste Diagnoseverfahren und Behandlungsmethoden, um unseren Patienten die bestmögliche Unterstützung zu bieten. Unser Ziel ist es, dass sich jeder Patient bei uns gut aufgehoben und verstanden fühlt.“
+
+— Yigit Sinan, Facharzt für XXX
+
+
+
+`;
+

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

@@ -1,55 +1,93 @@
-.tjs__sec-testimonial-ribbon {
+.tjs-testimonial-ribbon {
 
-    --layout-bg: var(--t-section-background);
-    --layout-bg-ribbon: var(--t-soft-primary);
+
+    --layout-section-background: var(--t-background-primary);
+    --layout-image-size: 200px;
+    --layout-image-size-mobile: 120px;
+    --layout-section-padding: var(--layout-section-padding);
+
+
+    --layout-content-padding: 40px;
+
+    --layout-font-size: 1.3rem;
 
     padding: var(--t-section-padding);
     background-color: var(--layout-bg);
 
-    &.mobile {
-        padding-top: 40px;
-    }
 
-    &.mobile > .tjs__sec-testimonial-ribbon--wrapper {
-        margin-top: 75px;
 
-        .image-round {
-            width: 150px;
-            height: 150px;
-            position: relative;
-            top: -150px;
-            margin-bottom: -150px;
-        }
-    }
 
-    h2 {
-        display: none;
+
+    .x--wrapper {
+        background-color: var(--layout-section-background);
+
+        padding-top: var(--layout-section-padding);
+
     }
 
-    & > .tjs__sec-testimonial-ribbon--wrapper {
-        padding-top: 40px;
-        padding-bottom: 40px;
-        background-color: var(--layout-bg-ribbon);
-        font-size: 1.2em;
-        font-style: italic;
-        letter-spacing: 1px;
+    &.mobile .x--wrapper {
+        margin-top: calc(var(--layout-image-size-mobile) / 2);
+    }
+    .x--row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
 
-        & > .tjs__sec-testimonial-ribbon--container {
-            margin-top: 40px;
+    &.mobile {
+        .x--row {
+            flex-direction: column;
         }
     }
 
+    &.mobile div.x--image > slot{
+        margin-top: -50%;
+
+    }
+    &.mobile div.x--image {
+        padding: 0;
+    }
+    &.mobile div.x--image > slot {
+        border: 4px solid var(--layout-section-background);
+    }
+    div.x--image {
+
+        position: relative;
+        padding: var(--layout-content-padding);
+        &>slot {
 
-    .text-format {
+            display: block;
+            width: var(--layout-image-size);
+            height: var(--layout-image-size);
+            border: 1px solid white;
+            border-radius: 100%;
+            &>img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                border-radius: 100%;
+            }
+        }
 
     }
+    slot.x--text {
+        padding: var(--layout-content-padding);
+        display: block;
+        h2,h3 {
+            display: none;
+        }
 
-    .image-round img {
-        border-radius: 100%;
-        border: 2px solid white;
-        object-fit: cover;
-        width: 100%;
-        height: 100%;
+
+        p {
+            font-size: var(--layout-font-size);
+            line-height: 1.5;
+            font-weight: lighter;
+            font-style: italic;
+        }
+        p:last-child {
+            margin-bottom: 0;
+            font-weight: normal;
+        }
     }
 }
 

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

@@ -5,21 +5,17 @@ Joda.registerTemplate("sec-testimonial-ribbon",
     // language=HTML
     `
 
-        <div class="tjs__sec-testimonial-ribbon :: mobile :lg:">
-            <div class="tjs__sec-testimonial-ribbon--wrapper">
-                <div class="tjs__sec-testimonial-ribbon--container [[layout.container]] :: :xl: mt-0">
-                    <div class="row">
-                        <div class="col-lg-3 image-round mx-auto ::  :xl: my-auto">
-                            <div class="ratio ratio-1x1">
-                                <slot data-select="img" data-replace=""></slot>
-                            </div>
+        <div class="tjs-testimonial-ribbon :: mobile :lg:">
+            <div class="x--wrapper">
+                <div class="x--container [[layout.container]] :: :xl:">
 
+                    <div class="x--row">
+                        <div class="x--image">
+                            <slot class="" data-select="img"></slot>
                         </div>
-                        <div class="col-lg-9 text-format :: :lg: my-auto">
-                            <slot></slot>
-                        </div>
 
-                    </div>
+                        <slot class="x--text"></slot>
+
                 </div>
             </div>
         </div>

package/sections/sections-export.ts

@@ -0,0 +1,24 @@
+import * as fs from "fs";
+
+import "./_pages/index.def";
+import "./_pages/about.def";
+import "./_pages/leistungen1.def";
+import "./_pages/leistungen2.def";
+import "./sec-card-2col/sec-card-2col.def";
+import "./sec-card-feature/sec-card-feature.def";
+import "./sec-multi-card/sec-multi-card.def";
+import "./sec-testimonial-ribbon/sec-testimonial-ribbon.def";
+import "./cta-base/cta-base.def";
+
+
+
+import {SECTIONS} from "./sections.def";
+
+fs.writeFile(__dirname + "/../_tpl/sections.def.json", JSON.stringify(SECTIONS, null, 2), (err) => {
+    if (err) {
+        console.error(err);
+        return;
+    }
+    console.log("File has been created");
+});
+