@leuffen/themejs1 5.0.1 → 5.0.4

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

@@ -1,11 +1,13 @@
 import {Joda} from "@leuffen/jodastyle";
 
 
+
+
 Joda.registerTemplate("sec-card-2col",
     // language=HTML
     `
 
-        <div class="tjs__sec-card-2col">
+        <section class="tjs__sec-card-2col">
             <div class="tjs__sec-card-2col--container [[layout.container]]">
                 <div class="row [[layout.order === 'reverse' ? 'flex-row-reverse': '']] [[layout.mobile_reverse === 'yes' ? ':: flex-row-reverse :lg:': '']]">
                     <div class="tjs__sec-card-2col--col-start tjs__section-text">
@@ -16,5 +18,5 @@ Joda.registerTemplate("sec-card-2col",
                     </div>
                 </div>
             </div>
-        </div>
+        </section>
     `);

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

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

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

@@ -1,6 +1,7 @@
 
 .tjs__sec-multi-card {
 
+
     padding: var(--t-section-padding);
 
     background: var(--t-section-background);
@@ -10,13 +11,57 @@
         text-align: center;
         padding-bottom: 40px;
     }
-     .card {
 
-    }
 
 
-    .row .section-h3 {
-        --joda-class: col;
-        --joda-use: #e-card-default;
+
+    &__item {
+        @extend .col;
+
+        .wrapper {
+
+
+
+
+            border: 1px solid var(--t-section-border-color);
+            border-radius: var(--t-section-border-radius);
+            overflow: hidden;
+            background-color: white;
+            height: 100%;
+            min-width: 300px;
+
+            --aspect-ratio: var(--layout-aspect-ratio, 16 / 9);
+
+
+
+
+
+            .tjs__sec-multi-card__item-img {
+                &:empty {
+                    display: none;
+                }
+
+                width: 100%;
+                aspect-ratio: var(--aspect-ratio);
+                display: block;
+                overflow: hidden;
+                img {
+
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+
+
+            }
+
+            .tjs__sec-multi-card__item__body {
+                @extend  .p-4;
+                height: 100%;
+            }
+        }
+
     }
+
+
 }

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

@@ -1,6 +1,22 @@
 import {Joda} from "@leuffen/jodastyle";
 
+Joda.registerTemplate("sec-multi-card__item",
+    // language=HTML
+    `
+        <div class="col tjs__sec-multi-card__item">
+            <div class="wrapper">
+
+                <slot class="tjs__sec-multi-card__item-img" data-select="img"></slot>
+
+
+                <div class="tjs__sec-multi-card__item__body text-format">
+                    <slot></slot>
+                </div>
+            </div>
 
+        </div>
+    `
+);
 Joda.registerTemplate("sec-multi-card",
     // language=HTML
     `
@@ -10,9 +26,7 @@ Joda.registerTemplate("sec-multi-card",
                 <slot data-select=":scope > .content"></slot>
             </div>
             <div class="container">
-                <div class="row g-3 row-cols-1 row-cols-lg-[[ layout.cols ?? 3 ]]">
-                    <slot data-select=":scope > .children > *" data-replace=""></slot>
-                </div>
+                <slot class="row g-3 row-cols-1 row-cols-lg-[[ layout.cols ?? 3 ]]" data-select=":scope > .children > *"  data-child-layout="use: #sec-multi-card__item"></slot>
             </div>
         </div>
     `);

package/sections/sections.scss

@@ -12,3 +12,4 @@
 @import "sec-card-feature/sec-card-feature";
 @import "hero-title-small/hero-title-small";
 @import "cta-form/cta-form";
+@import "image-gallery1/image-gallery1";

package/sections/sections.ts

@@ -11,3 +11,4 @@ import "./sec-multi-card/sec-multi-card";
 import "./sec-card-feature/sec-card-feature";
 import "./hero-title-small/hero-title-small";
 import "./cta-form/cta-form";
+import "./image-gallery1/image-gallery1";

package/themes/theme2/index.scss

@@ -0,0 +1,201 @@
+@import "../../variables";
+@import "../_mixins/default-element-format";
+
+
+$primary: #de7924 !default;
+$success: #22b573 !default;
+$danger: #bf1c0a !default;
+$warning: #bf760a !default;
+$dark: #483c32 !default;
+$background-primary: lighten($primary, 40%) !default;
+$background-accent: rgba(87, 45, 15, 0.20) !default;
+
+$content-offset-top: 100px !default;
+$content-height-adjustment: 200px !default;
+
+$font-size-base: 1.2rem !default;
+$line-height-base: 1.2 !default;
+$paragraph-margin-bottom: 1.5rem !default;
+
+$minibar-text-color: black !default;
+$minibar-color: transparent !default;
+
+$section-border-radius: 25px !default;
+
+$background: rgba(189, 172, 155, 0.34) !default;
+$text-color: #483c32 !default ;
+
+$border-radius: 25px !default;
+
+$text-dark: #fff !default;
+$background-dark: $text-color !default;
+$section-border-color: transparent !default;
+$header-text-transform: unset !default;
+
+
+:root {
+    --layout-container: container;
+
+
+
+    --t-border-radius: #{$section-border-radius};
+    --t-background-footer: #{$background-footer};
+    --t-text-footer: #{$text-footer};
+    --t-footer-header-color: #{$text-footer};
+    --t-section-border-color: #{$section-border-color};
+    --t-background-dark: #{$background-dark};
+    --t-text-dark: #{$text-dark};
+    --t-header-dark: #{$text-dark};
+    --t-link-dark: #{$text-dark};
+}
+.theme1 {
+    @include default-element-format();
+    --t-background: #{$background};
+    color: var(--t-text-color);
+    background: var(--t-background);
+
+
+    h1,h2,h3,h4,h5 {
+        color: var(--t-text-color);
+    }
+
+    font-size: $font-size-base;
+    h1 {
+        font-size: 2.4em;
+        line-height: 1.2em;
+    }
+    h2, h3,h4,h5 {
+        line-height: 1.2em;
+
+    }
+    h3,h4,h5 {
+        font-size: 1.15em;
+    }
+
+    p {
+        line-height: 1.4em;
+    }
+
+
+
+    table > tbody > tr > td {
+        background: transparent;
+    }
+
+    .tjs__section-text {
+        h2:has(+ blockquote) {
+            text-transform: var(--t-header-text-transform, uppercase);
+            font-weight: bold;
+            font-size: 16px;
+            color: var(--t-text-color-primary) !important;
+            margin: var(--t-paragraf-margin);
+        }
+
+        h2, blockquote > p {
+            font-size: 1.9em;
+            line-height: 1.2em;
+            color: var(--t-text-color) !important;
+            margin: var(--t-header-margin, 0 0 20px 0);
+            hyphens: manual;
+        }
+
+        .table {
+            --bs-table-color: var(--t-text-color);
+        }
+
+        *:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .section {
+        blockquote p {
+            font-size: 2.3em;
+        }
+    }
+
+
+    .card-body {
+        h3 {
+            font-weight: bold;
+        }
+        color: var(--t-text-color);
+    }
+
+
+
+    --t-background-footer: #fff;
+    --t-section-background: transparent;
+    --t-section-background-primary: #{$background-primary};
+    --t-text-background: #fff;
+    --t-text-color: #{$text-color};
+    --t-text-background-light: var(--t-background);
+    --t-text-color-accent: var(--bs-gray-900);
+    --t-text-color-primary: var(--bs-primary);
+
+
+    --t-header-margin: 0 0 20px 0;
+    --t-paragraf-margin: 0 0 20px 0;
+
+    --t-section-padding: 40px 0;
+    --t-section-inner-padding: 3rem;
+
+    .tjs__sec-legal-content {
+        padding-top: 100px;
+    }
+
+    section:last-child {
+        padding-bottom: 0;
+    }
+
+    //    background: var(--bs-light);
+
+    a.btn.btn-primary {
+        color: white !important;
+    }
+    input.btn.btn-primary {
+        color: white !important;
+    }
+
+    .btn {
+        border-radius: $border-radius;
+    }
+
+    map {
+        --joda-class: ":: aspect-1x1 :lg: aspcect-16x9";
+    }
+
+
+    .title_image {
+        background: linear-gradient(180deg, rgba(230,225,221,1) 0%, rgba(245,240,236,1) 35%, rgba(238,238,238,1) 100%);;
+        & > img {
+            object-position: 80% 0;
+            object-fit: contain;
+        }
+    }
+
+    .as__accordion {
+        border: 1px solid var(--bs-gray-100);
+        --as-accordion-open-bg: #fff;
+        h3 {
+            padding-top: 10px;
+            padding-bottom: 10px;
+        }
+        .section-h3 {
+            border: 1px solid var(--bs-gray-200);
+            background-color: var(--bs-gray-100);
+        }
+        .content {
+            background-color: #fff;
+            p {
+                margin: 20px 20px 20px 0;
+            }
+        }
+
+    }
+
+
+}
+.openhours {
+    --joda-class: "table table-borderless";
+}

package/themes/theme2/theme1.dev.ts

@@ -0,0 +1,127 @@
+import {JodaDescriptionManager} from "@leuffen/jodastyle";
+
+let html =`
+
+<nav layout="use: #navbar-blox">
+    <div class="brand">Logo</div>
+    <ul class="nav-bar-main">
+        <li><a href="#home">Hello World</a></li>
+    </ul>
+    <ul class="nav-menu">
+        <li><a href="#home">Home</a></li>
+    </ul>
+</ul>
+</nav>
+
+# Willkommen bei <br>Dr. med. XXX XXX
+{: layout="use: #hero-max"}
+
+
+![Neuronen Hintergrundbild](https://cdn.leuffen.de//leu-stock/v2/7/121-46_gfedcba/AdobeStock_354842358.webp)
+
+Facharzt für Neurologie <br> Facharzt für Psychiatrie
+
+
+## Hero Section
+{: layout="use: #hero-ribbon"}
+
+
+
+
+### Notfall?
+
+Sie erreichen den ärztlichen Notdienst unter der Telefon-Nr: [116 117](tel:+49116117)
+
+### Termine & Rezeptabholung
+
+Wir sind eine **Terminpraxis**. Für Terminvergaben, Anfragen und Rezeptabholungen beachten Sie bitte
+die Öffnungszeiten des Empfangs.
+
+### Öffnungszeiten Empfang
+
+{% include el/openhours.html %}
+
+
+## Über mich
+{: layout="use: #sec-card-2col"}
+
+> Dr. med. X. Kelloggs
+
+![Bild Dr. med. XXX Kelloggs](https://cdn.leuffen.de//leu-stock/v2/26/c_gfedcba/AdobeStock_172186647.webp){: style="padding: 4rem"}
+
+### Werdegang
+
+Berufstätigkeit in der Neurologie, Psychiatrie, Inneren Medizin und Orthopädie.
+
+Zuletzt klinisch tätig als Oberarzt einer neurologischen Rehaklinik. Seit 2001 tätig als niedergelassener Neurologe
+und Psychiater.
+
+Focus Empfehlung: 2017, 2018, 2019
+
+
+
+## Medizinischer Schwerpunkt
+{: layout="use: #sec-multi-card; cols:2"}
+
+### Neurologie
+
+Interessengebiete:
+
+- Schlaganfall und Arteriosklerose
+- Parkinsonerkrankung
+- Gedächtnisstörung
+- Prävention und Ernährungsmedizin bei neurologischen Erkrankungen
+
+*Bitte beachten: Bei speziellen Medikamenten für Multiple Sklerose und Myasthenie wenden Sie sich bitte an ein
+spezialisiertes neurologisches Zentrum.*
+
+Apparative Untersuchungen:
+
+- Farbduplexsonographie der hirnversorgenden Halsgefäße
+- Messung der Nervenleitgeschwindigkeit bei Verdacht auf Karpaltunnelsyndrom, Polyneuropathie und Ulnaris-Neuropathie
+
+Beispiele für häufigere Beschwerden: Schwäche und Lähmung. Taubheit und Missempfindungen. Schwindel,
+Gleichgewichtsstörungen und Gangstörungen. Bewusstseinsstörung. Zittern. Kopfschmerzen und sonstige Schmerzen. Änderung des
+Denkvermögens und der Sprache.
+
+
+### Psychiatrie
+
+- Psychiatrische Diagnostik und Behandlung
+- Interessengebiet: Prävention und Ernährungsmedizin bei psychischen Erkrankungen
+
+Beispiele für häufigere Beschwerden: Anspannung, Unruhe, Reizbarkeit, aufdrängende Gedanken, Grübeln,
+Vermeidung, Ängste, Panikanfälle. Vegetative Beschwerden wie Herzklopfen, Atembeschwerden, Schwitzen, Schwindel, usw. Schlafstörungen.
+Änderung der Stimmung, des Antriebs, des Denkvermögens, der Wahrnehmung und des Verhaltens.
+
+---
+{: .hr}
+
+Bei Vorliegen einer Notlage und akuter Beschwerden: wenden Sie sich bitte direkt an die Aufnahme einer
+Klinik. Empfehlung für weitere Informationen: [www.neurologen-und-psychiater-im-netz.org](https://www.neurologen-und-psychiater-im-netz.org)
+
+
+
+
+
+
+
+
+## Kontakt aufnehmen
+{: layout="use: #cta-base"}
+
+[Kontakt](/kontakt)
+
+
+`;
+
+JodaDescriptionManager.addClass("page",
+    "theme2",
+    "theme2",
+    html,
+    []
+    ,
+    {
+        bodyClasses: ["theme2"]
+    }
+);

package/elements/e-card-default/e-card-default.scss

@@ -1,45 +0,0 @@
-@import "bootstrap/scss/bootstrap";
-
-.tjs__e-card-default {
-
-    border: 1px solid var(--t-section-border-color);
-    border-radius: var(--t-section-border-radius);
-    overflow: hidden;
-    background-color: white;
-    height: 100%;
-    min-width: 300px;
-
-    &.card {
-        height: 100%;
-    }
-
-    --aspect-ratio: var(--layout-aspect-ratio, 16 / 9);
-
-
-
-
-
-    .tjs__e-card-default__img {
-        &>slot:empty {
-            display: none;
-        }
-        &> slot {
-            width: 100%;
-            aspect-ratio: var(--aspect-ratio);
-            display: block;
-            overflow: hidden;
-            img {
-
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-            }
-        }
-
-    }
-
-    .tjs__e-card-default__body {
-        @extend  .p-4;
-        height: 100%;
-    }
-}

package/elements/e-card-default/e-card-default.ts

@@ -1,16 +0,0 @@
-import {Joda} from "@leuffen/jodastyle";
-
-
-Joda.registerTemplate("e-card-default",
-    // language=HTML
-    `
-        <div class="tjs__e-card-default">
-            <div class="tjs__e-card-default__img">
-                <slot data-select="img"></slot>
-            </div>
-
-            <div class="tjs__e-card-default__body text-format">
-                <slot></slot>
-            </div>
-        </div>
-    `);