sync

elements/download-links/download-links.scss

@@ -0,0 +1,70 @@
+.tjs__download-links {
+
+    --layout-link-width: 200px; // gewünschte Breite
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch; // sorgt dafür, dass alle a-Elemente die gleiche Höhe haben
+    slot {
+        display: flex;gap: 10px;
+        a {
+            display: inline-flex;
+            flex-direction: column;
+            justify-content: space-between; // um sicherzustellen, dass der Inhalt korrekt verteilt ist
+            width: var(--layout-link-width); // gewünschte Breite
+            text-align: center;
+            padding: 10px;
+            border: 1px solid #ccc;
+            transition: transform 0.3s ease, background-color 0.3s ease;
+            position: relative;
+
+
+            height: 100%;
+
+            &:hover {
+                transform: scale(1.05);
+                &::before {
+                    background-color: rgba(120, 0, 0, 0.4);
+                }
+            }
+
+            text-decoration: none;
+            color: inherit;
+
+            img {
+                width: 100%;
+                height: 200px; // gewünschte Höhe
+                object-fit: cover;
+                margin-bottom: 10px;
+                display: block;
+            }
+
+            strong {
+                display: block;
+                font-size: 18px;
+                margin-bottom: 5px;
+            }
+
+            &::before {
+                content: "";
+                position: absolute;
+                z-index: 20;
+                top: 10px;
+                right: 10px;
+                left: 10px;
+                height: 200px;
+                background-color: rgba(120, 0, 0, 0.2);
+                mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filetype-pdf" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM1.6 11.85H0v3.999h.791v-1.342h.803q.43 0 .732-.173.305-.175.463-.474a1.4 1.4 0 0 0 .161-.677q0-.375-.158-.677a1.2 1.2 0 0 0-.46-.477q-.3-.18-.732-.179m.545 1.333a.8.8 0 0 1-.085.38.57.57 0 0 1-.238.241.8.8 0 0 1-.375.082H.788V12.48h.66q.327 0 .512.181.185.183.185.522m1.217-1.333v3.999h1.46q.602 0 .998-.237a1.45 1.45 0 0 0 .595-.689q.196-.45.196-1.084 0-.63-.196-1.075a1.43 1.43 0 0 0-.589-.68q-.396-.234-1.005-.234zm.791.645h.563q.371 0 .609.152a.9.9 0 0 1 .354.454q.118.302.118.753a2.3 2.3 0 0 1-.068.592 1.1 1.1 0 0 1-.196.422.8.8 0 0 1-.334.252 1.3 1.3 0 0 1-.483.082h-.563zm3.743 1.763v1.591h-.79V11.85h2.548v.653H7.896v1.117h1.606v.638z"/></svg>');
+                mask-size: contain;
+                mask-position: center center;
+                mask-repeat: no-repeat;
+            }
+        }
+
+        div {
+            margin-top: 10px;
+            font-size: 14px;
+            color: #666;
+        }
+    }
+
+}

elements/download-links/download-links.ts

@@ -0,0 +1,11 @@
+import {Joda} from "@leuffen/jodastyle";
+
+
+Joda.registerTemplate("download-links",
+    // language=HTML
+    `
+        <div class="tjs__download-links [[layout.class]]">
+            <slot data-select="a"></slot>
+            <slot></slot>
+        </div>
+    `);

elements/elements.scss

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

elements/elements.ts

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

package.json

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

sections/_typography.scss

@@ -23,6 +23,7 @@ h1, .h1 {
 h2, .h2 {
     font-family: var(--t-font-family-header);
     font-size: var(--t-font-size-h2);
+
 }
 h3, .h3 {
     font-size: var(--t-font-size-h3);

sections/navbar-centerlogo/navbar-centerlogo.scss

@@ -34,7 +34,7 @@
     --e-translatey: 70%;
     @media (width < $breakpoint-mobile) {
         --e-zoom-ratio: var(--layout-zoom-ratio-mobile);
-        --e-translatey: 50%;
+        --e-translatey: 25%;
     }
 
 

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

@@ -17,7 +17,7 @@ Joda.registerTemplate(
                     </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=".aside || .aside-content || img, .children > .section-hr.aside" [[layout.slideshow !== true ? 'data-limit="1"' : '' ]]></slot>
+                        <slot class="[[layout.slideshow === true ? 'slideshow' : '']]" data-select=".aside || .aside-content || img:not(.keep) || .children > .section-hr.aside" [[layout.slideshow !== true ? 'data-limit="1"' : '' ]]></slot>
                     </div>
                 </div>
             </div>

themes/theme1/index.scss

@@ -26,10 +26,14 @@
     background: var(--t-background);
 
 
-    h1,h2,h3,h4,h5 {
+    h1,h3,h4,h5 {
         color: var(--t-text-color);
     }
 
+    h2 {
+        color: var(--t-primary);
+    }
+
 
 
     table > tbody > tr > td {