@leuffen/themejs1 6.0.3 → 6.1.0

package/_tpl/pages/index.de.md

@@ -15,7 +15,7 @@ _schiller_instructions: "Ändere die Texte und Bilder. Füge am Ende die CTA ein
 ---
 
 # Willkommen bei Ihrer <br>Augenpraxis B. Mustermann
-{: layout="use: #hero-max; cols:2; class: box"}
+{: layout="use: #hero-max; cols:6; class: box"}
 
 ![](cdn:///leu-stock/v/26/1920x1280_1200x800_992x661_768x512_480x320_256x256/AdobeStock_114414482.avif_jpeg)
 {: .background}
@@ -92,9 +92,11 @@ Unsere Lasertherapie wird zur Behandlung von verschiedenen Augenerkrankungen ein
 ## Ein erfahrener Augenarzt für Ihre Gesundheit
 {: layout="use: #sec-card-2col"}
 
+> Ihr vertrauensvoller Ansprechpartner
+
 ![](cdn:///leu-stock/v/64/1920x1280_1200x800_992x661_768x512_480x320_256x256/AdobeStock_495434983.avif_jpeg)
 
-> Ihr vertrauensvoller Ansprechpartner
+
 
 Dr. Osman ist ein erfahrener Facharzt für Augenheilkunde und spezialisiert auf die Behandlung von Makuladegeneration und anderen Netzhauterkrankungen.
 

package/_tpl/pages/ueber-uns.de.md

@@ -19,9 +19,10 @@ type: article
 ## Ein kompetentes Team für Ihre Augengesundheit
 {: layout="use: #sec-card-2col"}
 
+> Ein Team mit Leidenschaft
+
 ![](https://cdn.leuffen.de//leu-stock/v2/60/418-279_gfedcba/AdobeStock_99592855.webp)
 
-> Ein Team mit Leidenschaft
 
 In unserer Praxis werden Sie von Augenarzt Bassel Osman behandelt. Er ist ein erfahrener Facharzt für Augenheilkunde. Unterstützt wird er durch ein intensiv geschultes und langjährig erfahrenes Team von medizinischen Fachangestellten, spezialisiert auf Makuladiagnostik und Lasertherapie. 
 

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

@@ -1,7 +1,7 @@
 ---
 description: ""
 icon: bi bi-phone
-image: https://cdn.leuffen.de//leu-stock/v2/59/72-35_gfedcba/calendar-flat-lay-dates-and-schedules-2022-11-08-05-25-21-utc.webp
+image: https://cdn.leuffen.de//leu-stock/v2/94/c_gfedcba/AdobeStock_102663778.webp
 lang: de
 layout: article
 order: 70

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

@@ -1,7 +1,7 @@
 ---
 description: ""
 icon: bi bi-phone
-image: https://cdn.leuffen.de//leu-stock/v2/93/c_gfedcba/AdobeStock_57857048_1_.webp
+image: hhttps://cdn.leuffen.de//leu-stock/v2/59/72-35_gfedcba/calendar-flat-lay-dates-and-schedules-2022-11-08-05-25-21-utc.webp
 lang: de
 layout: article
 order: 71
@@ -18,7 +18,7 @@ type: article
 
 > Jetzt Termin anfragen
 
-![](https://cdn.leuffen.de//leu-stock/v2/93/c_gfedcba/AdobeStock_57857048_1_.webp)
+![](https://cdn.leuffen.de//leu-stock/v2/58/140-89_gfedcba/calendar-2022-11-14-06-54-22-utc.webp)
 
 
 [Termin für Vorsorgekoloskopie / Lebersprechstunde über ClickDoc online buchen](https://clickdoc.de/cd-de/institution/Eberswalde/Gastroenterologische%20Praxis%20Eberswalde/ab6becf5-bdef-4a8b-880f-685f135b5591){: target="_blanc"}.

package/_variables.scss

@@ -13,6 +13,12 @@ $danger:    #bf1c0a !default;
 $warning:   #bf760a !default;
 $dark:      #006837 !default;
 
+$soft-primary: lighten($primary, 40%) !default;
+$soft-success: lighten($success, 40%) !default;
+$soft-danger: lighten($danger, 50%) !default;
+$soft-warning: lighten($warning, 50%) !default;
+$soft-dark: lighten($dark, 40%) !default;
+
 $background: rgba(217, 217, 217, 0.24) !default;
 $background-primary:        #b7eaf9 !default;
 $background-accent:         #ddd    !default;
@@ -38,7 +44,7 @@ $text-footer: $text-color !default;
 $background-footer: $background !default;
 
 
-$background-dark: #000 !default;
+$background-dark: #3b3b3b !default;
 $text-dark: #fff !default;
 $border-color: #999 !default;
 

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

@@ -5,11 +5,11 @@ jodastyle_1.Joda.registerTemplate("hero-max",
 // language=HTML
 `
 
-        <section class="tjs__hero-max [[layout.class]] [[layout.autoheight === false ? '' : 'tjs__hero-max--autoheight' ]] :: mobile :lg: desktop">
+        <section class="tjs__hero-max [[layout.class]] [[layout.autoheight === false ? '' : 'tjs__hero-max--autoheight' ]] :: mobile :xxl: desktop">
             <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">
+                <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>
@@ -19,4 +19,6 @@ jodastyle_1.Joda.registerTemplate("hero-max",
             </div>
         </section>
 
-    `);
+    `, {
+    cols: "6",
+});

package/dist/sections/infobox/infobox.d.ts

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

package/dist/sections/infobox/infobox.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jodastyle_1 = require("@leuffen/jodastyle");
+jodastyle_1.Joda.registerTemplate("infobox", 
+// language=HTML
+`
+
+        <div class="tjs-infobox alert bg-soft-[[layout.type]] d-flex mb-3" tabindex="0">
+            <i style="width: 48px; height: 48px" class="text-[[layout.type]] me-3 bi [[layout.icon]] h1"></i>
+            <div>
+                <slot></slot>
+
+
+            </div>
+        </div>
+    `, {
+    type: "success", icon: "bi-info-circle-fill"
+});

package/dist/sections/sections.d.ts

@@ -11,3 +11,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";
+import "./infobox/infobox";

package/dist/sections/sections.js

@@ -13,3 +13,4 @@ require("./sec-card-feature/sec-card-feature");
 require("./hero-title-small/hero-title-small");
 require("./cta-form/cta-form");
 require("./image-gallery1/image-gallery1");
+require("./infobox/infobox");

package/elements/_background-color.scss

@@ -0,0 +1,17 @@
+
+
+.bg-soft-primary {
+    background-color: $soft-primary !important;
+}
+.bg-soft-success {
+    background-color: $soft-success !important;
+}
+.bg-soft-danger {
+    background-color: $soft-danger !important;
+}
+.bg-soft-warning {
+    background-color: $soft-warning !important;
+}
+.bg-soft-dark {
+    background-color: $soft-dark !important;
+}

package/elements/_list-style.scss

@@ -0,0 +1,81 @@
+
+.list-check-circle, ul.list-check-circle {
+    padding-left: 1.25rem;
+
+    ul {
+        padding-left: 1.26rem;
+
+    }
+
+    li {
+        font-size: inherit;
+        line-height: inherit;
+        padding-left: 1rem;
+        list-style-type: none;
+        position: relative;
+
+        &:not(&:nth-last-child(1)) {
+            margin-bottom: 10px;
+        }
+
+        &:before {
+            content: " ";
+            display: block;
+            border: solid 12px $primary;
+            border-radius: 12px;
+            height: 0;
+            width: 0;
+            position: absolute;
+            left: -20px;
+            top: 40%;
+            margin-top: -9px;
+        }
+        &:after {
+            content: " ";
+            display: block;
+            width: 7px;
+            height: 14px;
+            border: solid #fff;
+            border-width: 0 0.2em 0.2em 0;
+            position: absolute;
+            left: -12px;
+            top: 40%;
+            margin-top: -5px;
+            transform: rotate(45deg);
+        }
+    }
+}
+
+.list-check, ul.list-check {
+    padding-left: 1.25rem;
+
+    ul {
+        padding-left: 1.26rem;
+
+    }
+
+    li {
+        font-size: inherit;
+        line-height: inherit;
+        padding-left: 1rem;
+        list-style-type: none;
+        position: relative;
+
+        &:not(&:nth-last-child(1)) {
+            margin-bottom: 10px;
+        }
+
+        &:before {
+            content: "";
+            position: absolute;
+            left: -12px;
+            top: 40%;
+            margin-top: -5px;
+            width: 7px;
+            height: 14px;
+            border: solid $primary;
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg);
+        }
+    }
+}

package/elements/elements.scss

@@ -1,2 +1,4 @@
 @import "liweco";
+@import "background-color";
+@import "list-style";
 @import "e-form/e-form";

package/late.scss

@@ -2,3 +2,4 @@
 @import "themes/_vendor/font-bootstrap-icons";
 @import "themes/_vendor/font-ubuntu";
 @import "themes/_vendor/font-garamond";
+@import "themes/_vendor/font-opensans-condensed";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leuffen/themejs1",
-  "version": "6.0.3",
+  "version": "6.1.0",
 
   "description": "",
   "license": "proprietary",

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

@@ -10,6 +10,7 @@
         &>slot {
             display: block;
             position: relative;
+            min-height: 66vh;
             aspect-ratio: var(--layout-image-ratio, 5 / 4);
         }
         & > slot > img {
@@ -38,7 +39,7 @@
             }
 
         }
-
+        min-height: var(--layout-min-height, 400px);
         position: relative;
         &.tjs__hero-max--autoheight {
             height: calc(100vh - var(--t-fullsize-modifier, 200px));
@@ -85,6 +86,9 @@
         font-size: calc(1.5em + 1vw);
     }
 
+    .slideshow:empty {
+        display: none;
+    }
 
     h1.glow {
         color: white;
@@ -100,10 +104,11 @@
 
 
     .tjs__hero-max--section-text {
-        --joda-class: "col-12 col-lg-7";
     }
 
     .offsetmodifier {
         height: 100px;
     }
+
+
 }

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

@@ -5,11 +5,11 @@ Joda.registerTemplate("hero-max",
     // language=HTML
     `
 
-        <section class="tjs__hero-max [[layout.class]] [[layout.autoheight === false ? '' : 'tjs__hero-max--autoheight' ]] :: mobile :lg: desktop">
+        <section class="tjs__hero-max [[layout.class]] [[layout.autoheight === false ? '' : 'tjs__hero-max--autoheight' ]] :: mobile :xxl: desktop">
             <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">
+                <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>
@@ -19,4 +19,6 @@ Joda.registerTemplate("hero-max",
             </div>
         </section>
 
-    `);
+    `, {
+    cols: "6",
+    });

package/sections/infobox/infobox.scss

@@ -0,0 +1,13 @@
+
+
+.tjs-infobox {
+
+
+
+    h3 {
+        margin-top: 1rem;
+    }
+
+}
+
+

package/sections/infobox/infobox.ts

@@ -0,0 +1,18 @@
+import {Joda} from "@leuffen/jodastyle";
+
+
+Joda.registerTemplate("infobox",
+    // language=HTML
+    `
+
+        <div class="tjs-infobox alert bg-soft-[[layout.type]] d-flex mb-3" tabindex="0">
+            <i style="width: 48px; height: 48px" class="text-[[layout.type]] me-3 bi [[layout.icon]] h1"></i>
+            <div>
+                <slot></slot>
+
+
+            </div>
+        </div>
+    `, {
+    type: "success", icon: "bi-info-circle-fill"
+    });

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

@@ -5,6 +5,11 @@
     background: var(--t-section-background);
 
 
+    .tjs__sec-card-2col--col-start > slot > .children > *:last-child {
+        margin-bottom: 0 !important;
+    }
+
+
     map.aside {
         --joda-class: "";
         display: block;
@@ -67,6 +72,12 @@
         padding: 0;
     }
 
+    h3 {
+        margin-top: 1.5rem;
+        font-size: 1.2em;
+        font-weight: 600;
+    }
+
 }
 
 .tjs__sec-card-2col.desktop:nth-of-type(odd) .row {

package/sections/sections.scss

@@ -13,3 +13,4 @@
 @import "hero-title-small/hero-title-small";
 @import "cta-form/cta-form";
 @import "image-gallery1/image-gallery1";
+@import "infobox/infobox";

package/sections/sections.ts

@@ -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";
+import "./infobox/infobox";

package/themes/_vendor/font-opensans-condensed.scss

@@ -0,0 +1,30 @@
+@font-face {
+    font-family: "Open Sans Condensed";
+    src: url("https://cdn.leuffen.de/global/fonts/opensans/condensed/OpenSans_Condensed-Light.woff?v=1.101") format("woff");
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+
+}
+
+/* END Light */
+/* BEGIN Light Italic */
+@font-face {
+    font-family: "Open Sans Condensed";
+    src: url("https://cdn.leuffen.de/global/fonts/opensans/condensed/OpenSans_Condensed-LightItalic.woff?v=1.101") format("woff");
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+
+}
+
+/* END Light Italic */
+/* BEGIN Regular */
+@font-face {
+    font-family: "Open Sans Condensed";
+    src: url("https://cdn.leuffen.de/global/fonts/opensans/condensed/OpenSans_Condensed-Regular.woff?v=1.101") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+
+}