@leuffen/themejs1 6.1.34 → 7.0.2

package/font/ubuntu.scss

@@ -3,3 +3,6 @@
 
 $font-family-base: 'Ubuntu', sans-serif;
 $font-size-base: 1rem !default;
+
+$font-family-headeer: $font-family-base !default;
+$font-size-header: 1.8rem !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leuffen/themejs1",
-  "version": "6.1.34",
+  "version": "7.0.2",
 
   "description": "",
   "license": "proprietary",
@@ -54,17 +54,19 @@
   ],
   "author": "",
   "dependencies": {
-    "@leuffen/jodastyle": "^3.0.9",
-    "@kasimirjs/embed": "^1.0.8",
-    "@leuffen/isl-base": "^3.0.4",
-    "@leuffen/liscom": "^2.0.8",
-    "@leuffen/liscom-loader": "^1.0.6",
-    "@leuffen/liweco-base": "^2.0.2",
+    "@leuffen/jodastyle": "^3.1.2",
+    "@kasimirjs/embed": "^1.0.23",
+    "@leuffen/isl-base": "^3.0.7",
+    "@leuffen/liscom": "^2.0.10",
+    "@leuffen/liscom-loader": "^1.0.9",
+    "@leuffen/liweco-base": "^2.0.3",
     "@micx/lib-js": "^1.0.22",
     "bootstrap": "^5.3.0"
+
+
+
   },
   "devDependencies": {
-    "@micx/lib-js": "^1.0.18",
     "@kasimirjs/kit-bootstrap": "^1.0.4",
     "markdown-it": "^13.0.1",
     "markdown-it-attrs": "^4.1.6",

package/sections/_defaults.scss

@@ -3,7 +3,13 @@
     --t-background-footer: #{$background-footer};
     --t-section-background: transparent;
     --t-section-background-accent: #{$background-accent};
-    --t-section-background-primary: #D6EED9;
+    --t-section-background-primary: #{$soft-primary};
+
+
+    --t-font-family-base: #{$font-family-base};
+    --t-font-family-header: #{$font-family-header};
+
+
 
     --t-section-border-color: #{$section-border-color};
     --t-section-border-radius: #{$section-border-radius};
@@ -27,5 +33,9 @@
     --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};
 
 }

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

@@ -43,6 +43,11 @@
             }
 
         }
+
+        .tjs__hero-max--container {
+            height: 100%;
+        }
+
         min-height: var(--layout-min-height, 400px);
         position: relative;
         &.tjs__hero-max--autoheight {
@@ -87,33 +92,18 @@
 
 
 
-    h1 {
-        font-size: calc(1.5em + 1vw);
-    }
 
     .slideshow:empty {
         display: none;
     }
 
-    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);
-    }
+    slot.content{
+        display: grid;
 
-
-    .tjs-_hero-max--inner-wrapper {
-        position: relative;
-        width: 100%;
         height: 100%;
     }
 
 
-    .tjs__hero-max--section-text {
-    }
-
-    .offsetmodifier {
-        height: 100px;
-    }
 
 
 }

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

@@ -9,19 +9,13 @@ Joda.registerTemplate("hero-max",
             <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 :: :xxl: col-[[layout.cols]]">
-                            <div class="tjs__hero-max--section-text">
-                                <slot></slot>
-                            </div>
-                        </div>
-                    </div>
+                    <slot class="content" data-select=".slide || :scope > * "></slot>
                 </div>
             </div>
         </section>
 
     `,
     {
-        cols: "6",
         'aspect-ratio': "5/4",
     },
     {

package/sections/navbar-centerlogo/_burger-menu.scss

@@ -0,0 +1,48 @@
+.burger-menu {
+    position: relative;
+
+    height: 30px;
+
+
+    cursor: pointer;
+
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+
+
+    & > .burger-menu__text {
+        padding-right: 5px;
+        font-family: var(--t-font-family-header);
+        font-size: var(--t-font-size-header);
+        color: var(--t-text-color-primary);
+        @media (width < 768px) {
+            display: none;
+        }
+    }
+
+    & > .burger-menu__burger {
+        position: relative;
+        padding: 20px; // Make the clickable area bigger
+        margin: -20px; // Make the clickable area bigger
+        z-index: 3;
+        transition: all 0.1s ease-in-out;
+        opacity: 0.7;
+        transform: scale(1);
+        div {
+            width: 35px;
+            height: 3px;
+            background-color: var(--layout-burger-color);
+            margin: 6px 0;
+        }
+    }
+
+    &:hover > .burger-menu__burger {
+        opacity: 1;
+        transform: scale(1.1);
+
+    }
+
+}

package/sections/navbar-centerlogo/_sidebar.scss

@@ -0,0 +1,80 @@
+aside {
+    &>.backdrop {
+        position: fixed;
+        background-color: var(--nav-sidbar-backgrond-color, $primary);
+        opacity: 0.4;
+        top:0; bottom: 0; left: 0; right: 0;
+        width: 100%;
+        height: 100%;
+        transform: scale(0%);
+        -webkit-transform: scale(0, 0);
+        transition: all 0.1s ease-in-out;
+        z-index:9998;
+    }
+    &>.menu {
+
+
+        position: fixed;
+        top: 0; bottom: 0; right: 0;
+        width: 90vw;
+        max-width: 300px;
+        z-index: 9999;
+        transform: translateX(100%);
+        background-color: var(--nav-sidbar-backgrond-color, $primary);
+        // Do big black shadow
+        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+        transition: all 0.2s ease-in-out;
+
+        ul {
+            padding: 0;
+            margin: 0;
+            &>li {
+                list-style: none;
+                width: 100%;
+                &>a {
+                    &:hover {
+                        background-color: var(--nav-sidbar-backgrond-color-hover, darken($primary, 10%));
+                    }
+
+                    display: block;
+                    text-decoration: none;
+                    width: 100%;
+                    padding: 15px;
+                    color: $white;
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+                }
+            }
+        }
+
+        &>.menu-header {
+            width: 100%;
+            border-bottom: 1px solid rgba(255, 255,255,0.5);
+            display: flex;
+            align-content: center;
+            justify-content: end;
+
+            &>svg {
+                cursor: pointer;
+                margin: 20px;
+                color: $white;
+                height: 38px;
+                width: 38px;
+            }
+        }
+    }
+
+}
+
+&.sidebar {
+    aside {
+        &>.backdrop {
+            transform: scale(100%);
+            -webkit-transform: scale(100%, 100%);
+        }
+        &>.menu {
+            transform: translateX(0%);
+        }
+
+
+    }
+}

package/sections/navbar-centerlogo/navbar-centerlogo.scss

@@ -0,0 +1,149 @@
+@import "bootstrap/scss/functions";
+
+// 2. Include any default variable overrides here
+
+// 3. Include remainder of required Bootstrap stylesheets
+@import "bootstrap/scss/variables";
+
+// 4. Include any default map overrides here
+
+// 5. Include remainder of required parts
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+
+
+.navbar-centerlogo {
+
+    --layout-bg-default: transparent;
+    --layout-bg-sticky: #fff;
+    --layout-bg-sticky-shadow: 0px 1px 5px rgba(0, 0, 0, 0.6);
+    --layout-burger-color: var(--t-accent);
+    --layout-menu-color: var(--bs-primary);
+    --layout-image-height: 80px;
+    --layout-zoom-ratio: 2;
+    --layout-zoom-ratio-mobile: 1.3;
+    --layout-backdrop-height: 20px;
+
+    --layout-spacer-height: 0px;
+    --layout-spacer-color: rgba(255,255,255,1);
+    --layout-spacer-height-mobile: calc(var(--layout-image-height) * var(--layout-zoom-ratio-mobile));
+
+
+    --e-zoom-ratio: var(--layout-zoom-ratio);
+    @media (width < 750px) {
+        --e-zoom-ratio: var(--layout-zoom-ratio-mobile);
+    }
+
+
+
+
+    &>.e--spacer {
+        @media (width < 750px) {
+            height: var(--layout-spacer-height-mobile);
+        }
+        height: var(--layout-spacer-height);
+        position: relative;
+        background-color: var(--layout-spacer-color);
+
+    }
+    &>.e--backdrop {
+        position: absolute;
+        width: 100vw;
+        left: 0;
+        z-index: 9;
+        height: var(--layout-backdrop-height);
+        background: linear-gradient(180deg, var(--layout-spacer-color) 0%, rgba(0,0,0,0) 100%);
+    }
+    &>.navbar {
+        background-color: var(--layout-bg-default);
+
+        position: absolute;
+        top: 0;
+        width: 100vw;
+        height: auto;
+        z-index: 999;
+
+        .brand img {
+            height: auto;
+
+            width: 50%;
+        }
+
+
+        &.unscrolled {
+
+
+        }
+
+        &.scrolled {
+            box-shadow: var(--layout-bg-sticky-shadow);
+            img.brand {
+                width: auto;
+                height: 80px;
+
+            }
+        }
+
+
+        transform: translateY(0);
+        transition: all 0.3s ease-in-out;
+        &.scrollup {
+            transform: translateY(-100%);
+        }
+
+
+        &>.navbar__wrapper {
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: nowrap;
+            flex-direction: row;
+
+            & > *{
+                flex-grow: 1;
+                display: flex;
+                width: 33%;
+            }
+            &>.navbar__logo {
+                transition: all 0.5s ease-in-out;
+                align-items: center;
+                justify-content: center;
+                display: flex;
+
+
+                img {
+                    height: var(--layout-image-height);
+                    transition: all 0.25s ease-in-out;
+                    width: auto;  transform: translateY(50% ) scale(var(--e-zoom-ratio));
+                    max-width: 70vw;
+                }
+
+            }
+            @import "burger-menu";
+
+        }
+
+
+
+
+
+        &.scrolled {
+            height: var(--layout-scrolled-height);
+            position: fixed;
+            top: 0;
+            width: 100vw;
+            background-color: var(--layout-bg-sticky);
+            .navbar__logo img {
+                transform: translateY(0) scale(1);
+            }
+        }
+
+    }
+
+
+
+
+    @import "sidebar";
+
+
+}

package/sections/navbar-centerlogo/navbar-centerlogo.ts

@@ -0,0 +1,88 @@
+
+// language=HTML
+import {Joda, JodaDescriptionManager} from "@leuffen/jodastyle";
+
+const html = `
+
+    <nav class="navbar-centerlogo">
+        <div class="e--spacer"></div>
+        <div class="e--backdrop"></div>
+        <div class="navbar">
+            <div class="navbar__wrapper [[ layout.container ]]">
+                <slot class="" data-select="ul.navbar-top "></slot>
+
+                <slot class="navbar__logo" data-select="[[ layout.slot_logo_selector ]]"></slot>
+
+
+
+                <div class="burger-menu" onclick="this.closest('nav').classList.toggle('sidebar')">
+                    <div class="burger-menu__text">
+                        [[ layout.burger_text ]]
+                    </div>
+                    <div class="burger-menu__burger">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+        <aside>
+            <div class="backdrop" onclick="this.closest('nav').classList.remove('sidebar')"></div>
+            <div class="menu">
+                <div class="menu-header">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16"  onclick="this.closest('nav').classList.remove('sidebar')">
+                        <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
+                    </svg>
+                </div>
+                <slot data-select="ul.navbar-main" data-copy="1" data-child-class="isl-navbar-switch1__nav--items-item"></slot>
+            </div>
+        </aside>
+    </nav>
+
+`;
+
+Joda.registerTemplate(
+    "navbar-centerlogo",
+    html,
+    {
+        slot_logo_selector: ".brand",
+        burger_text: "Menü",
+        container: "container",
+
+        scrollup_position: 100
+    },
+    {
+        "onAfterAllTemplatesConnectedCallback": (element: HTMLElement) => {
+            // Query css variable --layout-scrollup from elment
+
+            // If the page is scrolled down, the navbar should be sticky
+            // Update this on scroll event
+            let lastY = 0;
+            let navbar = element.querySelector(".navbar")
+            let changer = () => {
+                if (window.scrollY > 1) {
+                    navbar.classList.add("scrolled");
+                    navbar.classList.remove("unscrolled");
+                } else {
+                    navbar.classList.remove("scrolled");
+                    navbar.classList.add("unscrolled");
+                }
+
+                let isScrollingUp = window.scrollY < lastY;
+                lastY = window.scrollY;
+
+                if (window.scrollY > 250 && ! isScrollingUp) {
+                    navbar.classList.add("scrollup");
+                } else {
+                    navbar.classList.remove("scrollup");
+                }
+
+            }
+
+            window.addEventListener("scroll", changer, {passive: true});
+            changer()
+        }
+    });

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

@@ -5,11 +5,39 @@
     background: var(--t-section-background);
 
 
+    --layout-title-aspect-ratio: 16 / 9;
+
+
+
     .tjs__sec-card-2col--col-start > slot > .children > *:last-child {
         margin-bottom: 0 !important;
     }
 
 
+
+    slot.title {
+        &:empty {
+            display: none;
+        }
+        display: block;
+        width: 100%;
+        text-align: center;
+
+        aspect-ratio: var(--layout-title-aspect-ratio);
+
+        object-fit: cover;
+        object-position: center center;
+        &>p {
+            display: contents;
+        }
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center center;
+        }
+    }
+
     map.aside {
         --joda-class: "";
         display: block;

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

@@ -10,13 +10,14 @@ Joda.registerTemplate(
 
         <section class="tjs__sec-card-2col [[layout.class]] :: mobile :lg: desktop">
             <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]]">
                         <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="img, .children > .section-hr.aside, .aside" [[layout.slideshow !== true ? 'data-limit="1"' : '' ]]></slot>
+                        <slot class="[[layout.slideshow === true ? 'slideshow' : '']]" data-select=".aside || img, .children > .section-hr.aside" [[layout.slideshow !== true ? 'data-limit="1"' : '' ]]></slot>
                     </div>
                 </div>
             </div>

package/sections/sec-testimonial-ribbon/sec-testimonial-ribbon.scss

@@ -1,7 +1,10 @@
 .tjs__sec-testimonial-ribbon {
-    padding: var(--t-section-padding);
 
-    background-color: var(--t-section-background);
+    --layout-bg: var(--t-section-background);
+    --layout-bg-ribbon: var(--t-soft-primary);
+
+    padding: var(--t-section-padding);
+    background-color: var(--layout-bg);
 
     &.mobile {
         padding-top: 40px;
@@ -26,7 +29,7 @@
     & > .tjs__sec-testimonial-ribbon--wrapper {
         padding-top: 40px;
         padding-bottom: 40px;
-        background-color: var(--t-section-background-primary);
+        background-color: var(--layout-bg-ribbon);
         font-size: 1.2em;
         font-style: italic;
         letter-spacing: 1px;

package/sections/sections.scss

@@ -1,6 +1,7 @@
 
 @import "defaults";
 @import "navbar-blox/navbar-blox.scss";
+@import "navbar-centerlogo/navbar-centerlogo.scss";
 @import "sec-legal-content/sec-legal-content";
 @import "sec-testimonial-ribbon/sec-testimonial-ribbon";
 @import "sec-card-2col/sec-card-2col";

package/sections/sections.ts

@@ -1,5 +1,6 @@
 
 import "./navbar-blox/navbar-blox";
+import "./navbar-centerlogo/navbar-centerlogo";
 import "./sec-legal-content/sec-legal-content";
 import "./sec-testimonial-ribbon/sec-testimonial-ribbon";
 import "./sec-card-2col/sec-card-2col";

package/themes/_vendor/font-cinzel.scss

@@ -0,0 +1,26 @@
+@font-face {
+    font-family: "Cinzel";
+    src: url("https://cdn.leuffen.de/global/fonts/cinzel/Cinzel-Regular.woff?v=1.101") format("woff");
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+
+}
+
+@font-face {
+    font-family: "Cinzel";
+    src: url("https://cdn.leuffen.de/global/fonts/cinzel/Cinzel-Bold.woff?v=1.101") format("woff");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+
+}
+
+@font-face {
+    font-family: "Cinzel";
+    src: url("https://cdn.leuffen.de/global/fonts/cinzel/Cinzel-Black.woff?v=1.101") format("woff");
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+
+}

package/themes/theme1/index.scss

@@ -55,6 +55,7 @@
             text-transform: var(--t-header-text-transform, uppercase);
             font-weight: bold;
             font-size: 16px;
+            font-family: var(--t-font-family-base);
             color: var(--t-text-color-primary) !important;
             margin: var(--t-paragraf-margin);
         }
@@ -62,6 +63,7 @@
         h2, blockquote > p {
             font-size: 1.9em;
             line-height: 1.2em;
+            font-family: var(--t-font-family-header);
             color: var(--t-text-color) !important;
             margin: var(--t-header-margin, 0 0 20px 0);
             hyphens: manual;
@@ -155,7 +157,7 @@
         }
         .content {
             background-color: #fff;
-            p {
+            p,ul,ol {
                 margin: 20px 20px 20px 0;
             }
         }

package/themes/theme2/index.scss

@@ -187,7 +187,7 @@ $header-text-transform: unset !default;
         }
         .content {
             background-color: #fff;
-            p {
+            p,ul,ol{
                 margin: 20px 20px 20px 0;
             }
         }