@leuffen/themejs1 7.0.2 → 8.0.2

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");
+});
+

package/sections/sections.def.ts

@@ -0,0 +1,57 @@
+
+
+
+
+export type SectionExample = {
+    description: string,
+    code: string
+}
+
+export type Section = {
+    name: string,
+    group: SectionLayoutGroup,
+    description: string,
+    layout_options: Map<string, string>,
+    examples : SectionExample[]
+}
+
+const general = `
+Nutze die Beispiele im folgenden json-Code als Referenz, wie und welche Sections angelegt werden können (achte auf die Kramdown anweisungen in {: ...}. Diese müssen mit angegeben werden):`;
+
+
+type TaggedTemplateLiteral<T> = (strings: TemplateStringsArray, ...values: any[]) => T;
+
+export var SECTIONS = {
+    general,
+    available_sections: [],
+};
+var currentSection = null;
+
+export enum SectionLayoutGroup {
+   Hero = "Hero",
+    Content = "Content",
+    ContentElements = "Content-Elements",
+    Footer = "Footer",
+    CTA = "Call-To-Action(CTA)",
+    Page = "Page",
+}
+
+
+export function defineSection(name: string, group : SectionLayoutGroup) : TaggedTemplateLiteral<{name: string, description: string}> {
+    return (strings: TemplateStringsArray, ...values: any[]) => {
+        SECTIONS.available_sections.push(currentSection = {name, group, description: strings.join(''), layout_options: new Map(), examples: []});
+        return {name,  description: strings.join('')};
+    }
+}
+
+
+
+export function example(description: string) : TaggedTemplateLiteral<{example : SectionExample}> {
+    return (strings: TemplateStringsArray, ...values: any[]) => {
+        let curExample = {description, code: strings.join('')};
+        currentSection.examples.push(curExample);
+        return {example : curExample};
+    }
+}
+
+

package/sections/sections.scss

@@ -1,7 +1,10 @@
 
 @import "defaults";
+@import "typography";
+
 @import "navbar-blox/navbar-blox.scss";
 @import "navbar-centerlogo/navbar-centerlogo.scss";
+@import "navbar-switch2/navbar-switch2";
 @import "sec-legal-content/sec-legal-content";
 @import "sec-testimonial-ribbon/sec-testimonial-ribbon";
 @import "sec-card-2col/sec-card-2col";
@@ -15,3 +18,4 @@
 @import "cta-form/cta-form";
 @import "image-gallery1/image-gallery1";
 @import "infobox/infobox";
+@import "subheader/subheader";

package/sections/sections.ts

@@ -1,6 +1,7 @@
 
 import "./navbar-blox/navbar-blox";
 import "./navbar-centerlogo/navbar-centerlogo";
+import "./navbar-switch2/navbar-switch2";
 import "./sec-legal-content/sec-legal-content";
 import "./sec-testimonial-ribbon/sec-testimonial-ribbon";
 import "./sec-card-2col/sec-card-2col";
@@ -14,3 +15,4 @@ import "./hero-title-small/hero-title-small";
 import "./cta-form/cta-form";
 import "./image-gallery1/image-gallery1";
 import "./infobox/infobox";
+import "./subheader/subheader";

package/sections/subheader/subheader.scss

@@ -0,0 +1,27 @@
+
+
+.tjs-subheader {
+    --layout-background: var(--t-soft-primary);
+    --layout-padding: 25px;
+
+
+    padding: var(--t-section-padding);
+
+    &>.x-wrapper {
+        padding: 0;
+        &>.x-inner {
+            text-align: center;
+            color: var(--t-primary);
+            background: var(--layout-background);
+            padding: var(--layout-padding);
+        }
+    }
+    slot {
+        &>div.content {
+            &>*:last-child {
+                margin-bottom: 0;
+            }
+        };
+    }
+
+}

package/sections/subheader/subheader.ts

@@ -0,0 +1,17 @@
+import {Joda} from "@leuffen/jodastyle";
+
+
+Joda.registerTemplate("subheader",
+    // language=HTML
+    `
+
+        <div class="tjs-subheader">
+            <div class="x-wrapper [[layout.container]]">
+                <div class="x-inner">
+                    <slot></slot>
+                </div>
+            </div>
+        </div>
+    `, {
+        container: "container"
+    });

package/themes/_defaults/_headering-style-flex.scss

@@ -0,0 +1,36 @@
+
+.heading-style-flex {
+    h2:has(+ blockquote) {
+        text-transform: var(--t-header-text-transform, uppercase);
+        font-size: var(--t-font-size-base);
+        font-family: var(--t-font-family-base);
+        color: var(--t-accent) !important;
+        margin-bottom: var(--t-paragraf-margin-bottom);
+        font-weight: bold;
+    }
+
+    h2 + blockquote > p {
+        font-size: var(--t-font-size-h2);
+        line-height: var(--t-line-height-header);
+        font-family: var(--t-font-family-header);
+        color: var(--t-primary) !important;
+        margin: var(--t-header-margin, 0 0 20px 0);
+        hyphens: manual;
+    }
+
+    h1:has(+ blockquote) {
+
+        font-size: var(--t-font-size-h4);
+        color: var(--t-accent) !important;
+        margin-bottom: var(--t-paragraf-margin-bottom);
+    }
+
+    h1 + blockquote > p {
+        font-size: var(--t-font-size-h1);
+        color: var(--t-primary) !important;
+        line-height: var(--t-line-height-header);
+
+        margin: var(--t-header-margin, 0 0 20px 0);
+        hyphens: manual;
+    }
+}

package/themes/_defaults/_headering-style-hero.scss

@@ -0,0 +1,23 @@
+
+.heading-style-hero {
+
+
+    h1:has(+ blockquote) {
+
+        font-size: var(--t-font-size-h4);
+        color: var(--t-accent) !important;
+        margin-bottom: 0;
+        font-family: var(--t-font-family-header);
+
+    }
+
+    h1 + blockquote > p {
+        font-size: var(--t-font-size-h1);
+        color: var(--t-primary) !important;
+        line-height: var(--t-line-height-header);
+        font-family: var(--t-font-family-header);
+
+        margin: var(--t-header-margin, 0 0 20px 0);
+        hyphens: manual;
+    }
+}