@leuffen/themejs1 7.0.1 → 7.0.3

package/elements/_text-format.scss

@@ -0,0 +1,3 @@
+.address {
+    white-space: pre-wrap;
+}

package/elements/button-group/button-group.scss

@@ -0,0 +1,31 @@
+
+.tjs-button-group {
+
+    --layout-gap: 1rem;
+    // --layout-breakpoint: 1024px; Not Working on media query
+
+    &>slot {
+        display: flex;
+        flex-wrap: wrap;
+
+        &>* {
+            width: 100%;
+        }
+        p {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            @media (width < 500px) {
+                flex-direction: column;
+            }
+            align-items: stretch;
+            gap: var(--layout-gap);
+            &>* {
+                flex-grow: 1;
+
+            }
+        }
+
+    }
+
+}

package/elements/button-group/button-group.ts

@@ -0,0 +1,10 @@
+import {Joda} from "@leuffen/jodastyle";
+
+
+Joda.registerTemplate("button-group",
+    // language=HTML
+    `
+        <div class="tjs-button-group">
+            <slot></slot>
+        </div>
+    `);

package/elements/elements.scss

@@ -2,3 +2,6 @@
 @import "background-color";
 @import "list-style";
 @import "e-form/e-form";
+@import "hero-slide/hero-slide";
+@import "button-group/button-group";
+@import "text-format";

package/elements/elements.ts

@@ -1 +1,3 @@
 export * from "./e-form/e-form";
+export * from "./hero-slide/hero-slide";
+export * from "./button-group/button-group";

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

@@ -0,0 +1,44 @@
+
+
+.hero-slide {
+
+    --layout-box-color: rgba(255, 255, 255, 0.8);
+    --layout-text-shadow: 0 0 2px rgba(255, 255, 255, 1);
+    --layout-align-self: center;
+    --layout-justify-self: center;
+    --layout-cols: 6;
+
+    --layout-y-adjust: 25%;
+    --layout-x-adjust: 25%;
+
+    align-self: var(--layout-align-self);
+    justify-self: var(--layout-justify-self);
+
+
+
+    &.desktop {
+        margin-top: var(--layout-y-adjust);
+        margin-left: var(--layout-x-adjust);
+        width: calc(100% / 12 * var(--layout-cols));
+        &.box {
+            padding: 10px;
+            background-color: var(--layout-box-color);
+        }
+
+        &.glow {
+            &>slot {
+                &>h1,h2,h3,&>p {
+                    text-shadow: var(--layout-text-shadow);
+                }
+            }
+        }
+    }
+    &.mobile {
+        width: 100%;
+    }
+
+
+
+
+
+}

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

@@ -0,0 +1,21 @@
+import {Joda} from "@leuffen/jodastyle";
+
+Joda.registerTemplate("hero-slide",
+    // language=HTML
+    `
+
+        <article class="hero-slide :: mobile :xl: desktop">
+            <slot></slot>
+        </article>
+
+    `,
+    {
+        cols: 6
+    },
+    {
+        onAfterConnectedCallback: (el) => {
+
+        }
+    }
+
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leuffen/themejs1",
-  "version": "7.0.1",
+  "version": "7.0.3",
 
   "description": "",
   "license": "proprietary",
@@ -54,17 +54,15 @@
   ],
   "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.1.10",
+    "@leuffen/liweco-base": "^2.0.3",
     "@micx/lib-js": "^1.0.22",
-    "bootstrap": "^5.3.0"
-  },
-  "devDependencies": {
-    "@micx/lib-js": "^1.0.18",
+    "bootstrap": "^5.3.0",
+
     "@kasimirjs/kit-bootstrap": "^1.0.4",
     "markdown-it": "^13.0.1",
     "markdown-it-attrs": "^4.1.6",
@@ -79,6 +77,10 @@
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
+
+  },
+  "devDependencies": {
+
   },
   "scripts": {
     "make.mjs": "tsc -d",

package/sections/_defaults.scss

@@ -3,7 +3,7 @@
     --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};
@@ -34,5 +34,8 @@
     --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

@@ -28,7 +28,9 @@
         padding: 20px; // Make the clickable area bigger
         margin: -20px; // Make the clickable area bigger
         z-index: 3;
-        opacity: 0.6;transform: scale(1); transition: all 0.1s ease-in-out;
+        transition: all 0.1s ease-in-out;
+        opacity: 0.7;
+        transform: scale(1);
         div {
             width: 35px;
             height: 3px;

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

@@ -17,159 +17,133 @@
 
     --layout-bg-default: transparent;
     --layout-bg-sticky: #fff;
-    --layout-bg-sticky-shadow: 0px 1px 2px #000;
+    --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));
 
-    background-color: var(--layout-bg-default);
-    position: absolute;
-    top: 0;
-    width: 100vw;
-    height: auto;
-    z-index: 999;
 
-    .brand img {
-        height: auto;
-
-        width: 50%;
+    --e-zoom-ratio: var(--layout-zoom-ratio);
+    @media (width < 750px) {
+        --e-zoom-ratio: var(--layout-zoom-ratio-mobile);
     }
 
-    &.scrolled img.brand {
-        width: auto;
-        height: 80px;
-
-    }
 
 
-    &>.navbar__wrapper {
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: nowrap;
-        flex-direction: row;
 
-        & > *{
-            flex-grow: 1;
-            display: flex;
-            width: 33%;
+    &>.e--spacer {
+        @media (width < 750px) {
+            height: var(--layout-spacer-height-mobile);
         }
-        &>.navbar__logo {
-            transition: all 0.5s ease-in-out;
-            align-items: center;
-            justify-content: center;
-            display: flex;
+        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);
 
-            img {
-                height: var(--layout-image-height);
-                transition: all 0.25s ease-in-out;
-                width: auto;  transform: translateY(50%) scale(2);
-                max-width: 70vw;
-            }
+        position: absolute;
+        top: 0;
+        width: 100vw;
+        height: auto;
+        z-index: 999;
 
-        }
-        @import "burger-menu";
+        .brand img {
+            height: auto;
 
-    }
+            width: 50%;
+        }
 
-    transition: background-color 0.2s ease-in-out;
 
+        &.unscrolled {
 
 
-    &.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);
         }
-    }
 
+        &.scrolled {
+            box-shadow: var(--layout-bg-sticky-shadow);
+            img.brand {
+                width: auto;
+                height: 80px;
 
+            }
+        }
 
-    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;
+
+        transform: translateY(0);
+        transition: all 0.3s ease-in-out;
+        &.scrollup {
+            transform: translateY(-100%);
         }
-        &>.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);
-                    }
-                }
-            }
+        &>.navbar__wrapper {
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: nowrap;
+            flex-direction: row;
 
-            &>.menu-header {
-                width: 100%;
-                border-bottom: 1px solid rgba(255, 255,255,0.5);
+            & > *{
+                flex-grow: 1;
                 display: flex;
-                align-content: center;
-                justify-content: end;
-
-                &>svg {
-                    cursor: pointer;
-                    margin: 20px;
-                    color: $white;
-                    height: 38px;
-                    width: 38px;
+                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";
+
         }
 
-    }
 
-    &.sidebar {
-        aside {
-            &>.backdrop {
-                transform: scale(100%);
-                -webkit-transform: scale(100%, 100%);
-            }
-            &>.menu {
-                transform: translateX(0%);
-            }
 
 
+
+        &.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";
+
+
 }