@leuffen/themejs1 4.0.3 → 5.0.1

package/_tpl/pages/kontakt-anfahrt-maps-top.de.md

@@ -0,0 +1,61 @@
+---
+description: "\U0001F4CD Finden Sie uns in Freudenstadt-Wittlensweiler! \U0001F697\U0001F6B2\U0001F68C
+  Leichte Anfahrt mit Auto, Fahrrad oder Bus. Barrierefreier Zugang. \U0001F4E7 Kontaktieren
+  Sie uns jetzt!"
+icon: bi bi-phone
+header: '<map class="top" style="--joda-use: map()"></map>'
+lang: de
+layout: article
+order: 99
+permalink: /kontakt
+pid: pages/kontakt-anfahrt
+ptags:
+- nav
+published: true
+skipHead: false
+title: Kontakt & Anfahrt
+type: article
+_schiller_instructions: ""
+---
+## Ihre Hausarztpraxis in Freudenstadt-Wittlensweiler
+{: layout="use: #sec-card-2col; mobile_reverse: no"}
+
+
+{% include el/address.html %}
+
+
+---
+{: layout="use: accordion()" .aside}
+
+### [i class="bi bi-bus-front-fill text-primary"] Anfahrt mit dem Bus
+
+Die Bushaltestelle "Freudenstadt-Wittlensweiler, Kirche" befindet ca. 150 Meter von der Praxis entfernt.
+
+Sie erreichen uns über die lokalen Verkehrslinien. 
+
+Zugang barrierefrei im Erdgeschoss.
+
+
+### [i class="bi bi-car-front-fill text-primary"] Anfahrt mit dem Auto
+
+Parkplätze sind in der Nähe der Praxis vorhanden. 
+
+Zugang barrierefrei im Erdgeschoss.
+
+
+
+## Schreiben Sie uns. Wir melden uns umgehend bei Ihnen.
+{: layout="use: #cta-form"}
+
+
+---
+
+[input type="text"  name="Name" required .mb-3]
+[input type="email" name="E-Mail" .mb-3]
+[input type="tel" name="Telefon" .mb-3]
+
+---
+
+[textarea name="Ihre Nachricht" required .mb-3 style="height: 120px;"]
+[input type="checkbox" name="Datenschutz" label="Ich akzeptiere die Datenschutzbestimmungen" required .mb-3]
+[input type="submit" name="Absenden" value="Absenden" class="btn btn-primary" .my-3]

package/_tpl/pages/kontakt-anfahrt.de.md

@@ -54,5 +54,5 @@ Anfahrtsbeschreibung mit dem Auto
 ---
 
 [textarea name="Ihre Nachricht" required .mb-3 style="height: 120px;"]
-[input type="checkbox" name="Ihre Nachricht" label="Ich akzeptiere die Datenschutzbestimmungen" required .mb-3]
+[input type="checkbox" name="Datenschutz" label="Ich akzeptiere die Datenschutzbestimmungen" required .mb-3]
 [input type="submit" name="Absenden" value="Absenden" class="btn btn-primary" .my-3]

package/_variables.scss

@@ -13,6 +13,7 @@ $danger:    #bf1c0a !default;
 $warning:   #bf760a !default;
 $dark:      #006837 !default;
 
+$background: #802020 !default;
 $background-primary:        #b7eaf9 !default;
 $background-accent:         #ddd    !default;
 
@@ -26,8 +27,20 @@ $paragraph-margin-bottom:   1.5rem !default;
 $minibar-text-color:        black !default;
 $minibar-color:             transparent !default;
 
+$section-border-radius:             0 !default;
 $border-radius:             0 !default;
 
+$section-border-color:      #ddd !default;
 
+$text-color: #707070 !default;
 
+$text-footer: $text-color !default;
+$background-footer: $background !default;
+
+
+$background-dark: #000 !default;
+$text-dark: #fff !default;
+$border-color: #999 !default;
+
+$header-text-transform: uppercase !default;
 

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

@@ -2,7 +2,9 @@
 
 .tjs__e-card-default {
 
-    border: 1px solid var(--bs-gray-500);
+    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;
@@ -13,17 +15,27 @@
 
     --aspect-ratio: var(--layout-aspect-ratio, 16 / 9);
 
-    .tjs__e-card-default__img {
-        width: 100%;
-        aspect-ratio: var(--aspect-ratio);
-        display: block;
-        overflow: hidden;
-        img {
 
+
+
+
+    .tjs__e-card-default__img {
+        &>slot:empty {
+            display: none;
+        }
+        &> slot {
             width: 100%;
-            height: 100%;
-            object-fit: cover;
+            aspect-ratio: var(--aspect-ratio);
+            display: block;
+            overflow: hidden;
+            img {
+
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
         }
+
     }
 
     .tjs__e-card-default__body {

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

@@ -6,7 +6,7 @@ Joda.registerTemplate("e-card-default",
     `
         <div class="tjs__e-card-default">
             <div class="tjs__e-card-default__img">
-                <slot data-select="img" data-replace></slot>
+                <slot data-select="img"></slot>
             </div>
 
             <div class="tjs__e-card-default__body text-format">

package/late.scss

@@ -1,3 +1,4 @@
 /* Very imporant for Pagespeed: Load fonts last */
 @import "themes/_vendor/font-bootstrap-icons";
 @import "themes/_vendor/font-ubuntu";
+@import "themes/_vendor/font-garamond";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leuffen/themejs1",
-  "version": "4.0.3",
+  "version": "5.0.1",
 
   "description": "",
   "license": "proprietary",
@@ -27,9 +27,9 @@
   ],
   "author": "",
   "dependencies": {
-    "@leuffen/jodastyle": "^1.0.8",
+    "@leuffen/jodastyle": "^2.0.2",
     "@kasimirjs/embed": "^1.0.8",
-    "@leuffen/isl-base": "^1.0.5",
+    "@leuffen/isl-base": "^1.0.9",
     "@leuffen/liscom": "^1.0.2",
     "@leuffen/liweco-base": "^2.0.2",
     "bootstrap": "^5.3.0"

package/sections/_defaults.scss

@@ -1,15 +1,21 @@
 :root {
-    --t-background: #f5f5f5;
-    --t-background-footer: #fff;
+    --t-background: #{$background};
+    --t-background-footer: #{$background-footer};
     --t-section-background: transparent;
-    --t-section-background-accent: #e7e7eb;
+    --t-section-background-accent: #{$background-accent};
     --t-section-background-primary: #D6EED9;
+
+    --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: var(--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 */

package/sections/footer-base/footer-base.scss

@@ -1,5 +1,18 @@
 .tjs__footer-base {
+
+
+
+    &.dark {
+        background-color: var(--t-background-dark);
+        color: var(--t-text-dark);
+
+        a {
+            color: var(--t-text-dark);
+        }
+    }
+
     background-color: var(--t-background-footer);
+    color: var(--t-text-footer);
     width: 100%;
     min-height: 100px;
     overflow: hidden;
@@ -9,6 +22,7 @@
     border-top: 4px solid var(--t-section-background-accent);
     border-bottom: 4px solid var(--t-section-background-accent);
 
+
     .row {
         margin: 0;
 
@@ -17,8 +31,15 @@
         }
     }
 
+    a {
+        opacity: 0.8;
+        transition: opacity 0.2s ease-in-out;
+        &:hover {
+            opacity: 1;
+        }
+    }
+
     .subfooter {
-        background: var(--t-background);
         width: 100%;
         padding: 20px;
         overflow: hidden;
@@ -30,7 +51,7 @@
         margin-bottom: 5px;
         font-size: 1em;
         text-transform: uppercase;
-        color: var(--bs-gray);
+        color: var(--t-header-color);
         font-weight: bold;
     }
     .container-fluid .content {

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

@@ -85,8 +85,10 @@
     }
 
 
-
-
+    h1.glow {
+        color: white;
+        text-shadow: 0 0 10px var(--t-text-color), 0 0 20px var(--t-text-color), 0 0 30px var(--t-text-color), 0 0 40px var(--t-text-color), 0 0 50px var(--t-text-color), 0 0 60px var(--t-text-color), 0 0 70px var(--t-text-color);
+    }
 
 
 

package/sections/hero-title-small/hero-title-small.scss

@@ -12,16 +12,28 @@
         max-height: 60vh;
         min-height: 250px;
         width: 100%;
-        padding-bottom: 40px
-    }
+        padding-bottom: 40px;
 
-    .imagewrapper > img {
-        object-fit: cover;
-        object-position: center center;
-        width: 100%;
-        height: 100%;
+        &:has(slot:empty) {
+            visibility: hidden;
+            min-height: 0;
+            height: 0;
+        }
+
+        & > slot {
+            width: 100%;
+            height: 100%;
+
+            & > img, & > div {
+                object-fit: cover;
+                object-position: center center;
+                width: 100%;
+                height: 100%
+            }
+        }
     }
 
+
     h1 {
         padding: 20px;
     }

package/sections/hero-title-small/hero-title-small.ts

@@ -7,7 +7,7 @@ Joda.registerTemplate("hero-title-small",
 
     <div class="tjs__hero-title-small">
         <div class="imagewrapper">
-            <slot data-select="img" data-replace="true"></slot>
+            <slot data-select="img, .top"></slot>
         </div>
 
         <slot></slot>

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

@@ -23,16 +23,18 @@
         --joda-class: p-4 p-lg-5 ;
     }
 
+
+
     .row > .tjs__sec-card-2col--col-start  {
-        --joda-class: "col-12 col-md-6 p-4 p-lg-5 order-2 order-md-1";
+        --joda-class: "col-12 col-lg-6 p-4 p-lg-5 order-2 order-lg-1";
     }
 
 
     .row > .tjs__sec-card-2col--col-end  {
 
-        --joda-class: "col-12 col-md-6 order-1 order-md-2";
-        &:has(> .aside) {
-            --joda-class: "col-12 col-md-6 order-2 order-md-1";
+        --joda-class: "col-12 col-lg-6 order-1 order-lg-2";
+        &:has(> slot > .aside) {
+            --joda-class: "col-12 col-lg-6 order-3 order-lg-1";
         }
         slot {
             display: block;
@@ -49,7 +51,9 @@
 
 
     .tjs__sec-card-2col--container {
-          border: 1px solid var(--bs-gray-500);
+          border: 1px solid var(--t-section-border-color);
+        border-radius: var(--t-section-border-radius);
+        overflow: hidden;
         background-color: white;
         padding: 0;
     }
@@ -58,5 +62,5 @@
 
 .section-h2:nth-of-type(odd) .tjs__sec-card-2col .row {
     flex-direction: row-reverse;
-    --joda-class: "flex-row-reverse";
+    //--joda-class: "flex-row-reverse";
 }

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

@@ -7,7 +7,7 @@ Joda.registerTemplate("sec-card-2col",
 
         <div class="tjs__sec-card-2col">
             <div class="tjs__sec-card-2col--container [[layout.container]]">
-                <div class="row [[layout.order === 'reverse' ? 'flex-row-reverse': '']]">
+                <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">
                         <slot></slot>
                     </div>

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

@@ -6,7 +6,8 @@
 
     .inner-wrapper {
 
-        border: 1px solid var(--bs-gray-500);
+        border: 1px solid var(--t-section-border-color);
+        border-radius: var(--t-section-border-radius);
         background-color: white;
         padding: var(--t-section-inner-padding);
 

package/themes/_vendor/font-garamond.scss

@@ -0,0 +1,30 @@
+@font-face {
+  font-family: 'Garamond';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.leuffen.de/global/fonts/garamond/font/AGaramondPro-Regular.woff2");
+}
+@font-face {
+    font-family: 'Garamond';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.leuffen.de/global/fonts/garamond/font/AGaramondPro-Italic.woff2");
+}
+@font-face {
+    font-family: 'Garamond';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.leuffen.de/global/fonts/garamond/font/AGaramondPro-Bold.woff2");
+}
+
+
+@font-face {
+    font-family: 'Garamond';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.leuffen.de/global/fonts/garamond/font/AGaramondPro-BoldItalic.woff2");
+}

package/themes/theme1/index.scss

@@ -3,10 +3,22 @@
 
 :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);
 
@@ -15,12 +27,14 @@
         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;
@@ -30,16 +44,23 @@
         line-height: 1.4em;
     }
 
+
+
+    table > tbody > tr > td {
+        background: transparent;
+    }
+
     .tjs__section-text {
-        h2 {
-            text-transform: uppercase;
+        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);
         }
-        blockquote > p {
-            font-size: 2.1em;
+
+        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);
@@ -69,15 +90,13 @@
         color: var(--t-text-color);
     }
 
-    font-size: 1.1rem;
 
-    --t-background: #f5f5f5;
+
     --t-background-footer: #fff;
     --t-section-background: transparent;
-    --t-section-background-accent: #e7e7eb;
     --t-section-background-primary: #{$background-primary};
     --t-text-background: #fff;
-    --t-text-color: #707070;
+    --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);
@@ -107,7 +126,7 @@
     }
 
     .btn {
-        border-radius: 0;
+        border-radius: $border-radius;
     }
 
     map {