@leuffen/themejs1 3.0.2 → 3.0.4

package/embed.scss

@@ -1,19 +1,2 @@
 @import "src/default/loader";
 
-body {
-    min-height: 5000vh; // 3000vh is enough to make sure the page scrolls to correct position on reload
-    opacity: 0;
-    transition: opacity 0.25s;
-}
-
-body.loaded {
-    min-height: unset;
-    opacity: 1;
-}
-
-body > * {
-  display: none;
-}
-body.loaded > * {
-  display: block;
-}

package/embed.ts

@@ -0,0 +1,3 @@
+import {initLoader} from "./src/helper/loader";
+
+initLoader()

package/index.dev.ts

@@ -1,3 +1,6 @@
 
-import "./themes/styles.dev"
+import "./theme1.scss"
+import "./src.dev/dev.scss"
 
+import "./themes/theme1/theme1.dev"
+import "@micx/lib-js";

package/index.scss

@@ -1,6 +1,5 @@
 @import "sections/defaults";
 @import "sections/sections";
 @import "elements/elements";
-@import "themes/_general/root-format";
 @import "@leuffen/isl-base/style";
 

package/index.ts

@@ -1,5 +1,7 @@
-import "@leuffen/jodastyle";
 export * from "./sections/sections";
 export * from "./elements/elements";
 export * from "@leuffen/isl-base";
+import "@leuffen/jodastyle";
+
+
 

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@leuffen/themejs1",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "",
+  "license": "proprietary",
   "main": "./dist/index.js",
   "module": "./dist/index.module.js",
   "directories": {
@@ -24,13 +25,14 @@
   ],
   "author": "",
   "dependencies": {
-    "@leuffen/jodastyle": "^1.0.7",
+    "@leuffen/jodastyle": "^1.0.8",
     "@kasimirjs/embed": "^1.0.8",
     "@leuffen/isl-base": "^1.0.5",
     "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",
     "css-loader": "^6.7.1",

package/sections/_defaults.scss

@@ -10,6 +10,10 @@
     --t-text-color-accent: var(--bs-gray-900);
     --t-text-color-primary: var(--bs-primary);
 
+    --t-navbar-height: 88px;
+
+    /* What to substract from 100vh to start the next elemment after fullsize header */
+    --t-fullsize-modifier: 150px;
 
     --t-header-margin: 0 0 20px 0;
     --t-paragraf-margin: 0 0 20px 0;

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

@@ -40,7 +40,7 @@
 
         position: relative;
         &.tjs__hero-max--autoheight {
-            height: calc(100vh - 200px);
+            height: calc(100vh - var(--t-fullsize-modifier, 200px));
             min-height: var(--layout-min-height, 400px);
             max-height: var(--layout-max-height, 1000px);
         }

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

@@ -1,7 +1,7 @@
 
 
 .tjs__navbar-blox {
-    --height: 65px;
+    --height: var(--t-navbar-height, 64px);
     position: relative;
     top: 0;
     width: 100%;

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

@@ -12,7 +12,7 @@ Joda.registerTemplate("sec-card-2col",
                         <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>
+                        <slot data-select="img, .children > .section-hr.aside" data-replace data-limit="1"></slot>
                     </div>
                 </div>
             </div>

package/src/default/loader.scss

@@ -1,53 +1,98 @@
-html.loader::before {
-  content: "";
-  font-family: sans-serif;
-  font-size: 12px;
-  line-height: 10px;
-  position: fixed;
-  text-align: center;
-  color: white;
-  margin-top: 1px;
-    z-index: 2;
-  -webkit-animation: leu--site-loader 60s ease-out;
-  animation: leu--site-loader 30s ease-out;
-  display: block;
-  background-color: indianred;
-  height: 3px;
-  width: 35%;
+body > .loader > .loader-bar {
+    position: relative;
+    display: block;
+    background-color: lightgrey;
+    height: 3px;
+    width: 70vw;
+    max-width: 500px;
     top: 0;
+    z-index: 1;
+    margin-top: 25vh;
+    &::before {
+        content: "";
+        font-family: sans-serif;
+        font-size: 12px;
+        line-height: 10px;
+        position: relative;
+        text-align: center;
+        color: white;
+
+        z-index: 2;
+        -webkit-animation: leu--site-loader 60s ease-out;
+        animation: leu--site-loader 30s ease-out;
+        display: block;
+        background-color: indianred;
+        height: 100%;
+        width: 35%;
+        top: 0;
+    }
+}
+
+
+@keyframes leu--site-loader {
+    3% {
+        width: 75%;
+
+    }
+    5% {
+        width: 90%;
+    }
+    10% {
+        width: 95%;
+    }
+    100% {
+        width: 100%;
+    }
+}
+
+
+body {
+    min-height: 5000vh; // 3000vh is enough to make sure the page scrolls to correct position on reload
+}
+
+body.loaded {
+    min-height: unset;
+}
+
+body > joda-content {
+    opacity: 0;
+    transition: opacity 0.10s;
 }
+body.loaded > joda-content {
+    opacity: 1;
+}
+
 
-html.loader::after {
-    content: "";
-    font-family: sans-serif;
-    font-size: 12px;
-    line-height: 10px;
+body > .loader {
     position: fixed;
-    text-align: center;
-    color: white;
-    margin-top: 1px;
-    -webkit-animation: leu--site-loader 60s ease-out;
-    animation: leu--site-loader 60s ease-out;
-    display: block;
-    background-color: darkgray;
-    height: 3px;
+    z-index: -99;
     top: 0;
+    left: 0;
     width: 100%;
-    right: 0;
+    height: 100%;
+    background: #fff;
+    transition: opacity 0.15s;
+    display: flex !important;
+
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    opacity: 1;
+    flex-wrap: wrap;
+    flex-direction: column;
+
+    & > img {
+        flex-direction: column;
+        display: block !important;
+        height: auto !important;
+        width: 70vw !important;
+        max-width: 500px;
+
+    }
 }
 
-@keyframes leu--site-loader {
-  3% {
-    width: 75%;
-
-  }
-  5% {
-    width: 90%;
-  }
-  10% {
-    width: 95%;
-  }
-  100% {
-    width: 100%;
-  }
+body.loaded > .loader {
+    opacity: 0;
+    //display: none !important;
+    z-index: -99;
 }

package/src/helper/loader.ts

@@ -0,0 +1,27 @@
+import {hitIndex} from "../hit-index";
+
+console.time("loader");
+export function initLoader() {
+    let interval = setInterval(() => {
+        // Detect if body is loaded
+        if (document.querySelector("body")) {
+            // Cancel interval
+            clearInterval(interval);
+
+            let img = document.querySelector("img").cloneNode(true) as HTMLImageElement;
+            let loader = document.createElement("div");
+            loader.classList.add("loader");
+            loader.appendChild(img);
+            img.setAttribute("class", "");
+            img.setAttribute("loading", "eager");
+
+            let loaderBar = document.createElement("div");
+            loaderBar.classList.add("loader-bar");
+            loader.appendChild(loaderBar);
+
+            document.querySelector("body").appendChild(loader);
+        }
+    }, hitIndex === 1 ? 10 : 350); // Wait 350 on subsequent requests to prevent flickering
+}
+
+

package/src/hit-index.ts

@@ -0,0 +1,8 @@
+const indexName = "themejs_hit_index";
+let state = sessionStorage.getItem(indexName);
+if (state === null) {
+    sessionStorage.setItem(indexName, "0");
+}
+sessionStorage.setItem(indexName, "" + (parseInt(sessionStorage.getItem(indexName) ?? "0") + 1));
+
+export const hitIndex = parseInt(sessionStorage.getItem(indexName) ?? "0");

package/themes/{_general/root-format.scss → _mixins/default-element-format.scss}

@@ -1,51 +1,11 @@
-
-
-.tjs__root-format {
-
-
-
-    color: var(--t-text-color);
-    background: var(--t-background);
-
-    // General Section padding
-    section:last-of-type > * {
-        padding-bottom: 0;
-    }
-
+@mixin default-element-format() {
     section h2 {
         text-transform: uppercase;
-       // font-weight: bold;
+        // font-weight: bold;
 
         margin: var(--t-paragraf-margin);
     }
 
-    .tjs__section-text {
-        h2 {
-            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;
-            line-height: 1.2em;
-            color: var(--t-text-color) !important;
-            margin: var(--t-header-margin, 0 0 20px 0);
-            hyphens: manual;
-        }
-
-        .table {
-            --bs-table-color: var(--t-text-color);
-        }
-
-        *:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-
-
     ul > li  {
         color: var(--t-text-color);
         * {
@@ -106,5 +66,8 @@
             margin: 0;
         }
     }
+    section:last-of-type > * {
+        padding-bottom: 0;
+    }
 
 }

package/themes/theme1/index.scss

@@ -1,8 +1,15 @@
+@import "../../variables";
+@import "../_mixins/default-element-format";
 
 :root {
     --layout-container: container;
 }
 .theme1 {
+    @include default-element-format();
+
+    color: var(--t-text-color);
+    background: var(--t-background);
+
 
     h1,h2,h3,h4,h5 {
         color: var(--t-text-color);
@@ -23,6 +30,30 @@
         line-height: 1.4em;
     }
 
+    .tjs__section-text {
+        h2 {
+            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;
+            line-height: 1.2em;
+            color: var(--t-text-color) !important;
+            margin: var(--t-header-margin, 0 0 20px 0);
+            hyphens: manual;
+        }
+
+        .table {
+            --bs-table-color: var(--t-text-color);
+        }
+
+        *:last-child {
+            margin-bottom: 0;
+        }
+    }
 
     .section {
         blockquote p {
@@ -44,7 +75,7 @@
     --t-background-footer: #fff;
     --t-section-background: transparent;
     --t-section-background-accent: #e7e7eb;
-    --t-section-background-primary: #D6EED9;
+    --t-section-background-primary: #{$background-primary};
     --t-text-background: #fff;
     --t-text-color: #707070;
     --t-text-background-light: var(--t-background);

package/themes/theme1/theme1.dev.ts

@@ -0,0 +1,127 @@
+import {JodaDescriptionManager} from "@leuffen/jodastyle";
+
+let html =`
+
+<nav layout="use: #navbar-blox">
+    <div class="brand">Logo</div>
+    <ul class="nav-bar-main">
+        <li><a href="#home">Hello World</a></li>
+    </ul>
+    <ul class="nav-menu">
+        <li><a href="#home">Home</a></li>
+    </ul>
+</ul>
+</nav>
+
+# Willkommen bei <br>Dr. med. XXX XXX
+{: layout="use: #hero-max"}
+
+
+![Neuronen Hintergrundbild](https://cdn.leuffen.de//leu-stock/v2/7/121-46_gfedcba/AdobeStock_354842358.webp)
+
+Facharzt für Neurologie <br> Facharzt für Psychiatrie
+
+
+## Hero Section
+{: layout="use: #hero-ribbon"}
+
+
+
+
+### Notfall?
+
+Sie erreichen den ärztlichen Notdienst unter der Telefon-Nr: [116 117](tel:+49116117)
+
+### Termine & Rezeptabholung
+
+Wir sind eine **Terminpraxis**. Für Terminvergaben, Anfragen und Rezeptabholungen beachten Sie bitte
+die Öffnungszeiten des Empfangs.
+
+### Öffnungszeiten Empfang
+
+{% include el/openhours.html %}
+
+
+## Über mich
+{: layout="use: #sec-card-2col"}
+
+> Dr. med. X. Kelloggs
+
+![Bild Dr. med. XXX Kelloggs](https://cdn.leuffen.de//leu-stock/v2/26/c_gfedcba/AdobeStock_172186647.webp){: style="padding: 4rem"}
+
+### Werdegang
+
+Berufstätigkeit in der Neurologie, Psychiatrie, Inneren Medizin und Orthopädie.
+
+Zuletzt klinisch tätig als Oberarzt einer neurologischen Rehaklinik. Seit 2001 tätig als niedergelassener Neurologe
+und Psychiater.
+
+Focus Empfehlung: 2017, 2018, 2019
+
+
+
+## Medizinischer Schwerpunkt
+{: layout="use: #sec-multi-card; cols:2"}
+
+### Neurologie
+
+Interessengebiete:
+
+- Schlaganfall und Arteriosklerose
+- Parkinsonerkrankung
+- Gedächtnisstörung
+- Prävention und Ernährungsmedizin bei neurologischen Erkrankungen
+
+*Bitte beachten: Bei speziellen Medikamenten für Multiple Sklerose und Myasthenie wenden Sie sich bitte an ein
+spezialisiertes neurologisches Zentrum.*
+
+Apparative Untersuchungen:
+
+- Farbduplexsonographie der hirnversorgenden Halsgefäße
+- Messung der Nervenleitgeschwindigkeit bei Verdacht auf Karpaltunnelsyndrom, Polyneuropathie und Ulnaris-Neuropathie
+
+Beispiele für häufigere Beschwerden: Schwäche und Lähmung. Taubheit und Missempfindungen. Schwindel,
+Gleichgewichtsstörungen und Gangstörungen. Bewusstseinsstörung. Zittern. Kopfschmerzen und sonstige Schmerzen. Änderung des
+Denkvermögens und der Sprache.
+
+
+### Psychiatrie
+
+- Psychiatrische Diagnostik und Behandlung
+- Interessengebiet: Prävention und Ernährungsmedizin bei psychischen Erkrankungen
+
+Beispiele für häufigere Beschwerden: Anspannung, Unruhe, Reizbarkeit, aufdrängende Gedanken, Grübeln,
+Vermeidung, Ängste, Panikanfälle. Vegetative Beschwerden wie Herzklopfen, Atembeschwerden, Schwitzen, Schwindel, usw. Schlafstörungen.
+Änderung der Stimmung, des Antriebs, des Denkvermögens, der Wahrnehmung und des Verhaltens.
+
+---
+{: .hr}
+
+Bei Vorliegen einer Notlage und akuter Beschwerden: wenden Sie sich bitte direkt an die Aufnahme einer
+Klinik. Empfehlung für weitere Informationen: [www.neurologen-und-psychiater-im-netz.org](https://www.neurologen-und-psychiater-im-netz.org)
+
+
+
+
+
+
+
+
+## Kontakt aufnehmen
+{: layout="use: #cta-base"}
+
+[Kontakt](/kontakt)
+
+
+`;
+
+JodaDescriptionManager.addClass("page",
+    "theme1",
+    "theme1",
+    html,
+    []
+    ,
+    {
+        bodyClasses: ["theme1"]
+    }
+);