@leuffen/themejs1 8.2.58 → 8.2.60

package/_tpl/_root/docs/_layouts/3_1_navbar.html

@@ -15,41 +15,52 @@ layout: 2_script
 </nav-->
 
 
-<nav layout="use: #navbar-switch1">
+<nte-navbar class="fixed autoborder autoshadow" scroll-threshold="500">
+    <nte-navbar-line class="hide-on-scroll">
+        <nte-nav class="style-undecorated size-sm" style="font-size: 1.2rem;">
+            <ul>
+                <li>
+                    <a href="/kontakt" aria-label="Anschrift"><i class="bi bi-geo-alt-fill "></i><span class="d-none d-xl-block"> {{ site.data.general.street }}, {{ site.data.general.city }}</span></a>
+                </li>
+                <li>
+                    <a href="tel:{{site.data.general.phone1 }}" aria-label="Telefonnummer - jetzt anrufen"><i class="bi bi-telephone-fill "></i><span class="d-none d-xl-block"> {{ site.data.general.phone1_text }}</span></a>
+                </li>
+                <li>
+                    <a href="{% if site.data.general.termin_url %}{{site.data.general.termin_url}}{% else %}/online-termin{% endif %}" target="_blank" aria-label="Termin vereinbaren"><i class="bi bi-calendar-plus-fill "></i><span class="d-none d-xl-block"> Termin vereinbaren</span></a>
+                </li>
+            </ul>
+        </nte-nav>
+    </nte-navbar-line>
+    <nte-navbar-line>
 
-    <div class="brand" style="margin-right: 20px;z-index: 0">
-        <a href="/">
+
+        <!-- Navbar Brand -->
+        <a slot="brand" href="/">
             <!--img src="/assets/logo256.svg" alt="{{ site.data.general.logoalt }}" height="64" class="p-1 loader-image" style="float:left"-->
             <div style="font-size: 1.1em;float:right" class="m-2 text-black">
-                <div style="font-size: 1.1em">{{ site.data.general.fachrichtung}}</div>
                 <div style="font-size: 1.6em">{{ site.data.general.logoalt }}</div>
+                <div style="font-size: 1.1em">{{ site.data.general.fachrichtung}}</div>
             </div>
         </a>
-    </div>
-    <!-- Brand mit Überhöhe -->
-    <!--div class="brand position-absolute" style="margin-right: 20px;top:20px; z-index: 0;">
-        <a href="/">
-            <img src="/assets/logo128t.svg" alt="{{ site.data.general.logoalt }}" height="135" class="p-1" style="float:left;margin-top: -15px">
 
-        </a>
-    </div-->
-
-    <ul class="navbar-top">
-        <li>
-            <a href="/kontakt" aria-label="Anschrift"><i class="bi bi-geo-alt-fill text-primary"></i><span class=":: d-none :xl:"> {{ site.data.general.street }}, {{ site.data.general.city }}</span></a>
-        </li>
-        <li>
-            <a href="tel:{{site.data.general.phone1 }}" aria-label="Telefonnummer - jetzt anrufen"><i class="bi bi-phone-fill text-primary"></i><span class=":: d-none :xl:"> {{ site.data.general.phone1_text }}</span></a>
-        </li>
-        <li>
-            <a href="{% if site.data.general.termin_url %}{{site.data.general.termin_url}}{% else %}/online-termin{% endif %}" target="_blank" aria-label="Termin vereinbaren"><i class="bi bi-calendar-check-fill text-primary"></i><span class=":: d-none :xl:"> Termin vereinbaren</span></a>
-        </li>
-    </ul>
+        <!-- Image: -->
+        <!--a href="/" slot="brand"><img src="/assets/logo128t.svg" alt="{{ site.data.general.logoalt }}" height="84" class="p-1 loader-image" ></a-->
+
+        <nte-nav class="nav-horizontal" mode="master" breakpoint="9999px" transfer-to="#navSidebar">
+            <span slot="menu-text">Menü</span>
+            <ul>
+                {% include el/navbar.html ptag="nav" %}
+            </ul>
+        </nte-nav>
+    </nte-navbar-line>
+</nte-navbar>
+
+<nte-offcanvas id="navSidebar">
+    <nte-burger slot="header" data-nt-dismiss="offcanvas" open></nte-burger>
+    <nte-nav class="nav-vertical"></nte-nav>
+</nte-offcanvas>
+
 
-    <ul class="navbar-main">
-        {% include el/navbar.html ptag="nav" %}
-    </ul>
-</nav>
 
 
 {{ content }}

package/_tpl/_root/package.json

@@ -9,7 +9,9 @@
     ],
     "author": "",
     "dependencies": {
-        "@leuffen/themejs1": "^8.0.6"
+        "@leuffen/themejs1": "^8.0.6",
+        "@nextrap/nte-nav": "^0.2.25",
+        "@nextrap/style-base": "^1.1.5"
     },
     "devDependencies": {
     }

package/_tpl/_root/src/nextrap-bridge.scss

@@ -0,0 +1,15 @@
+@forward "variables";
+
+@use "@nextrap/style-base" with (
+    $primary: $primary,
+    $accent: $accent
+);
+
+@import "@nextrap/nte-nav";
+
+nte-navbar-line {
+    --background: #404040;
+    nte-nav {
+        --text-color: #fff;
+    }
+}

package/_tpl/_root/src/style_custom.scss

@@ -2,8 +2,11 @@
 // Select font here
 @import "@leuffen/themejs1/font/ubuntu";
 
+// Variables and Nextrap Bridge
 @import "_variables";
+@import "./nextrap-bridge.scss";
 
+// The main theme
 @import "@leuffen/themejs1/theme1";
 @import "@leuffen/themejs1";
 

package/font/urbanist-opensans.scss

@@ -0,0 +1,8 @@
+@import "../themes/_vendor/font-opensans";
+@import "../themes/_vendor/font-urbanist";
+
+$font-family-base: 'Open Sans', sans-serif;
+$font-size-base: 1.0rem !default;
+
+$font-family-header: 'Urbanist', sans-serif !default;
+$font-size-header: 2.8rem !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leuffen/themejs1",
-  "version": "8.2.58",
+  "version": "8.2.60",
   "description": "",
   "license": "proprietary",
   "main": "./index.js",

package/themes/_vendor/font-urbanist.scss

@@ -0,0 +1,21 @@
+@font-face {
+  font-family: "Urbanist";
+  src: url("https://cdn.leuffen.de/global/fonts/urbanist/Urbanist-Bold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Urbanist";
+  src: url("https://cdn.leuffen.de/global/fonts/urbanist/Urbanist-Regular.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Urbanist";
+  src: url("https://cdn.leuffen.de/global/fonts/urbanist/Urbanist-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}