@leuffen/themejs1 2.0.7 → 2.0.8

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

@@ -0,0 +1,28 @@
+.tjs__hero-title-small {
+    width: 100%;
+    align-items: center;
+    position: relative;
+    justify-content: center;
+    overflow: hidden;
+    text-align: center;
+
+
+    .imagewrapper {
+        aspect-ratio: 16 / 9;
+        max-height: 60vh;
+        min-height: 250px;
+        width: 100%;
+        padding-bottom: 40px
+    }
+
+    .imagewrapper > img {
+        object-fit: cover;
+        object-position: center center;
+        width: 100%;
+        height: 100%;
+    }
+
+    h1 {
+        padding: 20px;
+    }
+}

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

@@ -0,0 +1,15 @@
+import {Joda} from "@leuffen/jodastyle/src/joda";
+
+
+Joda.registerTemplate("hero-title-small",
+    // language=HTML
+    `
+
+    <div class="tjs__hero-title-small">
+        <div class="imagewrapper">
+            <slot data-select="img" data-replace="true"></slot>
+        </div>
+
+        <slot></slot>
+    </div>
+    `);

package/sections/navbar-blox/navbar-blox.scss

@@ -0,0 +1,177 @@
+
+
+.tjs__navbar-blox {
+    --height: 65px;
+    position: relative;
+    top: 0;
+    width: 100%;
+    z-index: 9999;
+    --hamburger-menu-display: none;
+    --hamburger-bar-color:  #aaa;
+
+
+
+    .firstline {
+        min-height: var(--height);
+        line-height: var(--height);
+        --joda-class: ":: d-block :lg: d-none";
+
+
+        .tjs__content {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
+    }
+
+
+    .tjs__row1 {
+        height: var(--height);
+
+        display: flex;
+        width: 100%;
+
+
+        &>.tjs__logo {
+            &.mobile {
+                display: none;
+            }
+            flex: 0 0 auto;
+            width: auto;
+            display: flex;
+        }
+
+        .tjs__row2 {
+            flex: 1 1 auto;
+            display: flex;
+            height: 100%;
+
+            &> .tjs__nav-main {
+                flex: 1 1 auto;
+
+                display: flex;
+                align-items: center;
+                align-content: center;
+
+                &> ul.nav-bar-main {
+                    display: flex;
+                    margin: 0;
+                    padding: 0;
+                    width: 100%;
+                    height: 100%;
+                    &>li {
+                        flex: 1 1 auto;
+                        width: 100%;
+                        display: flex;
+                        border-right: 1px solid var(--bs-gray-200);
+                        &:last-of-type {
+                            border-right: none;
+                        }
+
+                        align-content: center;
+                        align-items: center;
+
+                        padding: 0;
+                        list-style: none;
+                        text-decoration: none;
+                        text-align: center;
+                        a {
+                            width: 100%;
+                            text-decoration: none;
+                            color: inherit;
+                            i {
+                                color: var(--bs-primary);
+                                padding-right: 5px;
+                            }
+                        }
+                    }
+                }
+
+            }
+            &> .tjs__hamburger {
+                flex: 0 0 auto;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 70px;
+                height: 100%
+            }
+
+        }
+    }
+
+    .sidenav {
+         position: absolute;
+        right: 0;
+        z-index: 9999;
+        top: 0;
+        width: auto;
+        padding: 0;
+        background-color: white;
+        transform: scale(0%);
+        -webkit-transform: scale(0, 0);
+
+        transition: transform 0.3s ease-in-out;
+        box-shadow: 0px 1px 2px #00000029;
+
+        ul {
+            padding: 0;
+            margin: 0;
+            width: 350px;
+            max-width: 100vw;
+            &>li {
+                 list-style: none;
+                font-weight: bolder;
+                margin: 3px;
+                &>a {
+                    display: block;
+                    padding: 15px 30px;
+                    text-decoration: none;
+                    &:hover {
+                          background-color: var(--t-text-background-light);
+                    }
+                    &:focus {
+                        color: var(--t-text-color-primary);
+                    }
+                }
+            }
+        }
+
+    }
+
+    .line {
+
+
+        a {
+            color: var(--bs-gray-700);
+            font-weight: normal;
+            text-decoration: none;
+            i {
+                  color: var(--bs-primary);
+                border-radius: 100%;
+                width: 20px;
+                height: 20px;
+                --joda-class: ":: :xl: pe-2";
+            }
+        }
+        &.bordered {
+              border-right: 1px solid var(--bs-gray-200);
+            overflow: hidden;
+            --joda-class: "text-center";
+        }
+    }
+
+
+    .sidenav-positioner {
+        position: relative;
+    }
+
+}
+
+
+
+.nav-open .tjs__navbar-blox .sidenav {
+     transform: scale(100%);
+    -webkit-transform: scale(1, 1);
+
+}

package/sections/navbar-blox/navbar-blox.ts

@@ -0,0 +1,54 @@
+import {Joda} from "@leuffen/jodastyle/src/joda";
+
+
+Joda.registerTemplate("navbar-blox",
+    // language=HTML
+    `
+
+        <div class="tjs__navbar-blox">
+            <div class="wrapper">
+                <div class="firstline">
+                    <div class="tjs__content [[ layout.container ]]">
+                        <slot data-select=".brand" data-copy data-replace></slot>
+                    </div>
+                </div>
+
+                <div class="secondline" style="box-shadow: 0px 1px 2px #00000029;background: white">
+                    <div class="[[ layout.container ]]">
+                        <div class="tjs__row1">
+
+
+                            <div class="tjs__logo :: mobile :md: " href="/" aria-label="Home">
+                                <slot data-select=".brand" data-replace></slot>
+                            </div>
+
+
+
+                            <div class="tjs__row2">
+                                <div class="tjs__nav-main" >
+
+                                    <slot data-select=".nav-bar-main" data-replace></slot>
+
+                                </div>
+
+
+                                <div class="tjs__hamburger">
+                                    <div class="use-hamburger :: justify-content-center :lg: text-start"
+                                         style="display: flex; padding-right:20px; align-items: center; justify-content: right; height:100%;width:100%"></div>
+                                </div>
+                            </div>
+
+
+                        </div>
+                        <div class="sidenav-positioner">
+                            <div class="sidenav">
+                                <slot data-select=".nav-menu"></slot>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+    `);

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

@@ -0,0 +1,35 @@
+
+
+.tjs__sec-card-2col {
+    padding: var(--t-section-padding);
+    background: var(--t-section-background);
+
+
+    .row > .tjs__sec-card-2col--col-start  {
+        --joda-class: "col-12 col-md-6 p-4 p-lg-5 order-2 order-md-1";
+    }
+
+    .row > .tjs__sec-card-2col--col-end  {
+        --joda-class: "col-12 col-md-6 order-1 order-md-2";
+
+        img {
+            height: 100%;
+            width: 100%;
+            object-position: center center;
+            object-fit: cover;
+        }
+    }
+
+
+    .tjs__sec-card-2col--container {
+          border: 1px solid var(--bs-gray-500);
+        background-color: white;
+        padding: 0;
+    }
+
+}
+
+.section-h2:nth-of-type(odd) .tjs__sec-card-2col .row {
+    flex-direction: row-reverse;
+    --joda-class: "flex-row-reverse";
+}

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

@@ -0,0 +1,20 @@
+import {Joda} from "@leuffen/jodastyle/src/joda";
+
+
+Joda.registerTemplate("sec-card-2col",
+    // language=HTML
+    `
+
+        <div class="tjs__sec-card-2col">
+            <div class="tjs__sec-card-2col--container [[layout.container]]">
+                <div class="row">
+                    <div class="tjs__sec-card-2col--col-start col-12 col-md-6 text-format p-4 p-lg-5 order-2 order-md-1 tjs__section-text">
+                        <slot></slot>
+                    </div>
+                    <div class="tjs__sec-card-2col--col-end col-12 col-md-6 image-side order-1 order-md-2">
+                        <slot data-select="img, .children > .section-hr.aside" data-replace></slot>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `);

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

@@ -0,0 +1,35 @@
+
+
+.tjs__sec-card-feature {
+
+    padding: var(--t-section-padding);
+
+    background: var(--t-section-background);
+    .header_image {
+        aspect-ratio: 21 / 10;
+        width: 100%;
+        height: auto;
+    }
+
+    &.map .header_image {
+        aspect-ratio: 1/1;
+        max-height: 90vh;
+
+    }
+
+     .header_image > img {
+        object-fit: cover;
+        object-position: center center;
+        width: 100%;
+        height: 100%;
+
+    }
+
+    & > .container {
+        border: 1px solid var(--bs-gray-500);
+        border-bottom: 4px solid var(--bs-gray-500);
+        background-color: white;
+        padding: 0;
+    }
+
+}

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

@@ -0,0 +1,22 @@
+import {Joda} from "@leuffen/jodastyle/src/joda";
+
+
+Joda.registerTemplate("sec-card-feature",
+    // language=HTML
+    `
+        <div class="tjs__sec-card-feature [[layout.class]]">
+            <div class="container">
+                <div class="header_image">
+                    <slot data-select=":scope > .content img, map" data-replace></slot>
+                </div>
+                <div class="row">
+                    <div class="col-12 col-lg-6 text-format p-4 p-lg-5 tjs__section-text">
+                        <slot></slot>
+                    </div>
+                    <div class="col-12 col-lg-6 text-format p-4 p-lg-5">
+                        <slot data-select=":scope > .children"></slot>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `);

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

@@ -0,0 +1,46 @@
+
+
+.tjs__sec-legal-content {
+    background: var(--t-section-background);
+    padding: var(--t-section-padding);
+
+    .inner-wrapper {
+
+        border: 1px solid var(--bs-gray-500);
+        background-color: white;
+        padding: var(--t-section-inner-padding);
+
+
+        .tjs__section-text {
+
+            // Between 12px and 16px depending on the screen size
+            font-size: 1.0rem;
+
+            h1 {
+                margin: 0 0 40px 0;
+                // make uppercase
+                font-size: 2.5em;
+                text-transform: uppercase;
+            }
+            h2 {
+                color: var(--t-text-color) !important;
+                margin: 100px 0 40px 0;
+                font-size: 1.6em;
+                border-bottom: 1px solid var(--bs-gray-200);
+                 text-transform: uppercase;
+            }
+            h3 {
+                color: var(--t-text-color) !important;
+                margin: 60px 0 30px 0;
+                font-size: 1.4em;
+                font-weight: bold;
+                 text-transform: uppercase;
+            }
+            p.address {
+                white-space: pre-wrap;
+            }
+        }
+    }
+
+
+}

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

@@ -0,0 +1,20 @@
+import {Joda} from "@leuffen/jodastyle/src/joda";
+
+
+Joda.registerTemplate("sec-legal-content",
+    // language=HTML
+    `
+
+        <div 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">
+                            <div class="tjs__section-text">
+                                <slot></slot>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `);

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

@@ -0,0 +1,22 @@
+
+.tjs__sec-multi-card {
+
+    padding: var(--t-section-padding);
+
+    background: var(--t-section-background);
+
+
+    .header {
+        text-align: center;
+        padding-bottom: 40px;
+    }
+     .card {
+
+    }
+
+
+    .row .section-h3 {
+        --joda-class: col;
+        --joda-use: #e-card-default;
+    }
+}

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

@@ -0,0 +1,18 @@
+import {Joda} from "@leuffen/jodastyle/src/joda";
+
+
+Joda.registerTemplate("sec-multi-card",
+    // language=HTML
+    `
+
+        <div class="tjs__sec-multi-card">
+            <div class="container header">
+                <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>
+            </div>
+        </div>
+    `);

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

@@ -0,0 +1,52 @@
+.tjs__sec-testimonial-ribbon {
+    padding: var(--t-section-padding);
+
+    background-color: var(--t-section-background);
+
+    &.mobile {
+        padding-top: 40px;
+    }
+
+    &.mobile > .tjs__sec-testimonial-ribbon--wrapper {
+        margin-top: 75px;
+
+        .image-round {
+            width: 150px;
+            height: 150px;
+            position: relative;
+            top: -150px;
+            margin-bottom: -150px;
+        }
+    }
+
+    h2 {
+        display: none;
+    }
+
+    & > .tjs__sec-testimonial-ribbon--wrapper {
+        padding-top: 40px;
+        padding-bottom: 40px;
+        background-color: var(--t-section-background-primary);
+        font-size: 1.2em;
+        font-style: italic;
+        letter-spacing: 1px;
+
+        & > .tjs__sec-testimonial-ribbon--container {
+            margin-top: 40px;
+        }
+    }
+
+
+    .text-format {
+
+    }
+
+    .image-round img {
+        border-radius: 100%;
+        border: 2px solid white;
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+    }
+}
+

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

@@ -0,0 +1,26 @@
+import {Joda} from "@leuffen/jodastyle/src/joda";
+
+
+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>
+                        <div class="col-lg-9 text-format :: :lg: my-auto">
+                            <slot></slot>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    `);

package/sections/sections.scss

@@ -0,0 +1,14 @@
+
+@import "defaults";
+@import "navbar-blox/navbar-blox.scss";
+@import "sec-legal-content/sec-legal-content";
+@import "sec-testimonial-ribbon/sec-testimonial-ribbon";
+@import "sec-card-2col/sec-card-2col";
+@import "hero-max/hero-max";
+@import "hero-ribbon/hero-ribbon";
+@import "footer-base/footer-base";
+@import "cta-base/cta-base";
+@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";

package/sections/sections.ts

@@ -0,0 +1,13 @@
+
+import "./navbar-blox/navbar-blox";
+import "./sec-legal-content/sec-legal-content";
+import "./sec-testimonial-ribbon/sec-testimonial-ribbon";
+import "./sec-card-2col/sec-card-2col";
+import "./hero-max/hero-max";
+import "./hero-ribbon/hero-ribbon";
+import "./footer-base/footer-base";
+import "./cta-base/cta-base";
+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";