@leuffen/themejs1 7.0.3 → 8.0.2

package/dist/elements/hero-slide/hero-slide.js

@@ -3,7 +3,7 @@ Joda.registerTemplate("hero-slide",
 // language=HTML
 `
 
-        <article class="hero-slide :: mobile :xl: desktop">
+        <article class="hero-slide :: mobile :lg: desktop">
             <slot></slot>
         </article>
 

package/dist/sections/cta-base/cta-base.js

@@ -5,7 +5,7 @@ Joda.registerTemplate("cta-base",
 
         <section class="tjs__cta-base">
             <div class="[[layout.container]]">
-                <slot></slot>
+                <slot class="heading-style-default"></slot>
             </div>
         </section>
     `);

package/dist/sections/cta-form/cta-form.js

@@ -5,7 +5,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/dist/sections/hero-max/hero-max.js

@@ -3,11 +3,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/dist/sections/hero-title-small/hero-title-small.js

@@ -3,11 +3,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/dist/sections/sec-card-2col/sec-card-2col.js

@@ -7,12 +7,12 @@ Joda.registerTemplate("sec-card-2col",
             <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/dist/sections/sec-legal-content/sec-legal-content.js

@@ -3,7 +3,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/dist/sections/sec-multi-card/sec-multi-card.js

@@ -20,7 +20,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/dist/sections/sec-testimonial-ribbon/sec-testimonial-ribbon.js

@@ -3,21 +3,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/dist/sections/sections.d.ts

@@ -14,3 +14,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/dist/sections/sections.js

@@ -14,3 +14,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/dist/sections/subheader/subheader.d.ts

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

package/dist/sections/subheader/subheader.js

@@ -0,0 +1,15 @@
+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/elements/_background-color.scss

@@ -15,3 +15,7 @@
 .bg-soft-dark {
     background-color: $soft-dark !important;
 }
+
+.bg-accent {
+    background-color: $accent !important;
+}

package/elements/_image-list.scss

@@ -0,0 +1,39 @@
+
+
+ul.image-list {
+    --layout-columns: 3;
+    --layout-image-height: 64px;
+    --layout-min-width: 200px;
+
+    display: flex;
+    flex-direction: row;
+
+    flex-wrap: wrap;
+    padding-left: 0;
+
+    list-style: none;
+    &>li {
+        padding: 10px;
+        min-width: var(--layout-min-width);
+
+        flex: 1 1 calc(100% / var(--layout-columns));
+
+        // Center text vertically
+        display: flex;
+        align-items: center;
+        img {
+            height: var(--layout-image-height);
+            width: var(--layout-image-height);
+            border-radius: 100%;
+            padding: 4px;
+            border: 1px solid #ccc;
+            background-color: white;
+            object-fit: cover;
+            float: left;
+            margin-right: 10px;
+        }
+
+    }
+
+
+}

package/elements/elements.scss

@@ -5,3 +5,4 @@
 @import "hero-slide/hero-slide";
 @import "button-group/button-group";
 @import "text-format";
+@import "image-list";

package/elements/hero-slide/hero-slide.scss

@@ -6,7 +6,7 @@
     --layout-text-shadow: 0 0 2px rgba(255, 255, 255, 1);
     --layout-align-self: center;
     --layout-justify-self: center;
-    --layout-cols: 6;
+    --layout-cols: 12;
 
     --layout-y-adjust: 25%;
     --layout-x-adjust: 25%;
@@ -35,6 +35,10 @@
     }
     &.mobile {
         width: 100%;
+
+        .btn {
+            width: 100%;
+        }
     }
 
 

package/elements/hero-slide/hero-slide.ts

@@ -4,7 +4,7 @@ Joda.registerTemplate("hero-slide",
     // language=HTML
     `
 
-        <article class="hero-slide :: mobile :xl: desktop">
+        <article class="hero-slide :: mobile :lg: desktop">
             <slot></slot>
         </article>
 

package/font/cinzel-opensans.scss

@@ -3,7 +3,7 @@
 @import "../themes/_vendor/font-cinzel";
 
 $font-family-base: 'Open Sans', sans-serif;
-$font-size-base: 1rem !default;
+//$font-size-base: 1rem !default;
 
 $font-family-header: 'Cinzel', serif !default;
-$font-size-header: 1.8rem !default;
+//$font-size-header: 1.8rem !default;

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@leuffen/themejs1",
-  "version": "7.0.3",
-
+  "version": "8.0.2",
   "description": "",
   "license": "proprietary",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "exports": {
-     ".": [
+    ".": [
       "./dist/index.js",
-       "./index.ts",
+      "./index.ts",
       "./index.scss"
     ],
     "./index": [
@@ -18,9 +17,9 @@
       "./index.scss"
     ],
     "./embed": [
-        "./dist/embed.js",
-        "./embed.ts",
-        "./embed.scss"
+      "./dist/embed.js",
+      "./embed.ts",
+      "./embed.scss"
     ],
     "./index.dev": [
       "./dist/index.dev.js"
@@ -31,6 +30,7 @@
     "./theme1": [
       "./theme1.scss"
     ],
+    "./themes/": "./themes/",
     "./font/": "./font/"
   },
   "directories": {
@@ -47,28 +47,29 @@
     "/elements",
     "/sections",
     "/_tpl",
-    "*.scss"
+    "*.scss",
+    "*.json"
   ],
   "workspaces": [
     "workspaces/*"
   ],
   "author": "",
   "dependencies": {
-    "@leuffen/jodastyle": "^3.1.2",
     "@kasimirjs/embed": "^1.0.23",
+    "@kasimirjs/kit-bootstrap": "^1.0.4",
     "@leuffen/isl-base": "^3.0.7",
+    "@leuffen/jodastyle": "^3.1.2",
     "@leuffen/liscom": "^2.0.10",
     "@leuffen/liscom-loader": "^1.1.10",
     "@leuffen/liweco-base": "^2.0.3",
     "@micx/lib-js": "^1.0.22",
+    "@types/node": "^20.12.12",
     "bootstrap": "^5.3.0",
-
-    "@kasimirjs/kit-bootstrap": "^1.0.4",
-    "markdown-it": "^13.0.1",
-    "markdown-it-attrs": "^4.1.6",
     "css-loader": "^6.7.1",
     "dart-sass": "^1.25.0",
     "esbuild-loader": "^2.20.0",
+    "markdown-it": "^13.0.1",
+    "markdown-it-attrs": "^4.1.6",
     "mini-css-extract-plugin": "^2.6.1",
     "raw-loader": "^4.0.2",
     "sass": "^1.56.1",
@@ -77,14 +78,15 @@
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
-
-  },
-  "devDependencies": {
-
   },
   "scripts": {
     "make.mjs": "tsc -d",
     "build": "npm run make.mjs",
     "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "ts-node": "^10.9.2",
+    "tsx": "^4.10.3",
+    "typescript": "^5.4.5"
   }
 }

package/sections/_defaults.scss

@@ -1,41 +1,12 @@
-:root {
-    --t-background: #{$background};
-    --t-background-footer: #{$background-footer};
-    --t-section-background: transparent;
-    --t-section-background-accent: #{$background-accent};
-    --t-section-background-primary: #{$soft-primary};
 
 
-    --t-font-family-base: #{$font-family-base};
-    --t-font-family-header: #{$font-family-header};
 
+section:last-child {
+    padding-bottom: 0;
+}
 
-
-    --t-section-border-color: #{$section-border-color};
-    --t-section-border-radius: #{$section-border-radius};
-
-    --t-text-background: #fff;
-    --t-text-color: #707070;
-    --t-text-background-light: var(--t-background);
-    --t-text-color-accent: var(--bs-gray-900);
-    --t-text-color-primary: var(--bs-primary);
-    --t-header-text-transform: #{$header-text-transform};
-
-    --t-border-color: #{$border-color};
-    --t-navbar-height: 88px;
-
-    /* What to substract from 100vh to start the next elemment after fullsize header */
-    --t-fullsize-modifier: #{$hero-fullsize-modifier};
-
-    --t-header-margin: 0 0 20px 0;
-    --t-paragraf-margin: 0 0 20px 0;
-
-    --t-section-padding: 40px 0;
-    --t-section-inner-padding: 3rem;
-
-    --t-accent: #{$accent};
-    --t-primary: #{$primary};
-    --t-soft-primary: #{$soft-primary};
-    --t-soft-accent: #{$soft-accent};
-
+div.content {
+    &>p:last-child {
+        margin-bottom: 0;
+    }
 }

package/sections/_pages/about.def.ts

@@ -0,0 +1,137 @@
+import {defineSection, example, SectionLayoutGroup} from "../sections.def";
+
+defineSection('about', SectionLayoutGroup.Page)`
+
+This is a examples of a whole page with multiple sections. It is the index site of the website.
+
+
+`;
+
+
+example("Startsite with a mix of sections.")`
+## Unser Team
+{: layout="use: #sec-card-2col"}
+
+> Zahnmedizin in der Engelstraße
+
+![](https://cdn.leuffen.de//shomann-k68/v2/18/a_gfedcba/Gruppenbild-Treppe-mit-Aerzten-1x1.webp)
+
+Unsere Zahnarztpraxis wurde 1978 in Lünen-Süd gegründet. 10 Jahre später erfolgte der Umzug in unser jetziges Domizil in die Engelstraße. Unser Behandlerteam Dr. Nicole Lehnert, Konstantinos Naziris, Dr. Steffen Homann und Anna Stammer setzen jeden Tag alles daran, Ihnen die bestmögliche zahnmedizinische Versorgung zu bieten.
+
+
+
+## Testimonial
+{: layout="use: #sec-testimonial-ribbon"}
+
+![](https://cdn.leuffen.de//shomann-k68/v2/26/249-205_gfedcba/Naziris_Stammer_Edit.webp)
+
+„Es ist uns wichtig keine unpersönlichen Medizin-Dienstleister zu sein. Für unser Praxis-Team ist die fürsorgliche und persönliche Betreuung unserer Patientinnen und Patienten ebenso wichtig wie die professionelle Behandlung. Wir kümmern uns deshalb nicht nur um die Gesundheit der Zähne, sondern richten unser Augenmerk auf den ganzen Menschen, auf die Zusammenhänge zwischen Zahngesundheit und Allgemeinbefinden.“
+
+— Konstantinos Naziris und Anna Stammer
+
+## Ihr Zahnarzt
+{: layout="use: #sec-card-2col"}
+
+> Konstantinos Naziris
+
+![Bild des Teams](https://cdn.leuffen.de//shomann-k68/v2/22/c_gfedcba/Naziris-Portrait.webp)
+
+|----|--------------------------------------------------------------------|
+| Studium der Zahnmedizin  | 1993 - 1999 in Bukarest |
+| Weiterbildung  | 2007 - 2010 Fachrichtung Parodontologie an der Universität Witten/Herdecke |
+| Behandlungsschwerpunkte  | Kieferorthopädie |
+| Mitgliedschaft  | DGB (Deutsche Gesellschaft für Parodontologie) |
+{: .table}
+
+## Ihre Zahnärztin
+{: layout="use: #sec-card-2col"}
+
+> Dr. Nicole Lehnert
+
+![Bild des Teams](https://cdn.leuffen.de//shomann-k68/v2/1/4625-3083_gfedcba/Dr-Nicole-Lehnert.webp)
+
+|----|--------------------------------------------------------------------|
+| Zahntechnische Ausbildung  | 1986 bis 1988 in Witten |
+| Studium der Zahnmedizin  | 1988 bis 1994 in Frankfurt/Main |
+| Promotion  | 1999 zum Dr.med.dent |
+| Assistenzarztzeit  | in kieferorthopädischer und Mund-Kiefer- und Gesichtschirurgischer Praxis in Lüdenscheid |
+| Fortbildungen  | Kieferorthopädie und Kinderbehandlung |
+{: .table}
+
+## Ihr Zahnarzt
+{: layout="use: #sec-card-2col"}
+
+> Dr. Steffen Homann
+
+![Bild des Teams](https://cdn.leuffen.de//shomann-k68/v2/4/c_gfedcba/Dr-Steffen-Homann.webp)
+
+|----|--------------------------------------------------------------------|
+| Studium der Zahnmedizin  | 2010 bis 2015 an der Julius-Maximilians-Universität Würzburg |
+| Promotionsstudium  | 2016 bis 2020 an der Ruprecht-Karls-Universität Heidelberg |
+| Tätigkeit  | 2017 bis 2022 als angestellter Zahnarzt bei Zahnarztpraxis Dr. Wündrich und Kollegen in Bammental bei Heidelberg |
+| Promotion  | 2020 zum Dr.med.dent zum Thema der epigenetischen Regulation von Plattenepithelkarzinomen der Kopf- und Halsregion |
+| Curriculum Implantologie  | 2021 9+2 der Deutschen Gesellschaft für Orale Implantologie (DGOI) |
+{: .table}
+
+## Ihre Zahnärztin
+{: layout="use: #sec-card-2col"}
+
+> Anna Stammer
+
+![Bild des Teams](https://cdn.leuffen.de//shomann-k68/v2/3/4676-3117_gfedcba/Zahnaerztin-Anna-Stammer.webp)
+
+|----|--------------------------------------------------------------------|
+| Studium der Zahnmedizin  | 2003 bis 2009 an der Uni Witten/Herdecke |
+| Mitarbeit  | vor Ort in einem zahnärztlichen Hilfsprojekt in Gambia (Afrika) |
+| Anstellung  | seit 2018 in unserer Praxis |
+| Vorherige Tätigkeit  | als angestellte Zahnärztin und Schulzahnärztin |
+| Fortbildungen  | in verschiedenen Bereichen der Zahnmedizin (u.a. Kinderbehandlung, Gutachtertätigkeit) |
+| Curriculum Craniomandibuläre Dysfunktion(CMD)  | 2013 Haranni-Klinik Herne |
+{: .table}
+
+
+## Praxisteam
+{: layout="use: #sec-multi-card; cols:3;aspect-ratio: 5/4;"}
+
+### Birgit und Beate
+
+![](https://cdn.leuffen.de//shomann-k68/v2/8/c_gfedcba/Birgit_Beate.webp)
+
+
+### Meggie, Jana und Jana
+
+![](https://cdn.leuffen.de//shomann-k68/v2/11/c_gfedcba/Meggie_Jana_Jana.webp)
+
+
+### Saskia und Amela
+
+![](https://cdn.leuffen.de//shomann-k68/v2/24/c_gfedcba/Saskia-und-Amela.webp)
+
+
+### Bahar und Kim
+
+![](https://cdn.leuffen.de//shomann-k68/v2/9/c_gfedcba/Bahar_Kim.webp)
+
+
+### Kim und Jana
+
+![](https://cdn.leuffen.de//shomann-k68/v2/7/c_gfedcba/Kim_Jana.webp)
+
+## Zahntechniker
+{: layout="use: #sec-multi-card; cols:3"}
+
+### Theodoros Naziris
+
+![](https://cdn.leuffen.de//shomann-k68/v2/21/c_gfedcba/Zahntechniker-Theodoros-Naziris.webp)
+
+
+
+## Kontakt
+{: layout="use: #cta-base"}
+
+Informationen zu Behandlungen, Sprechstundenzeiten und Kontaktdaten finden Sie auf den nachfolgenden Seiten.
+
+[Unsere Leistungen](/leistungen)
+[Online Termin vereinbaren](/online-termin#online-termin-vereinbaren)
+[Kontakt](/kontakt)
+`;