@leuffen/themejs1 7.0.3 → 8.0.3

package/sections/sections.def.ts

@@ -0,0 +1,57 @@
+
+
+
+
+export type SectionExample = {
+    description: string,
+    code: string
+}
+
+export type Section = {
+    name: string,
+    group: SectionLayoutGroup,
+    description: string,
+    layout_options: Map<string, string>,
+    examples : SectionExample[]
+}
+
+const general = `
+Nutze die Beispiele im folgenden json-Code als Referenz, wie und welche Sections angelegt werden können (achte auf die Kramdown anweisungen in {: ...}. Diese müssen mit angegeben werden):`;
+
+
+type TaggedTemplateLiteral<T> = (strings: TemplateStringsArray, ...values: any[]) => T;
+
+export var SECTIONS = {
+    general,
+    available_sections: [],
+};
+var currentSection = null;
+
+export enum SectionLayoutGroup {
+   Hero = "Hero",
+    Content = "Content",
+    ContentElements = "Content-Elements",
+    Footer = "Footer",
+    CTA = "Call-To-Action(CTA)",
+    Page = "Page",
+}
+
+
+export function defineSection(name: string, group : SectionLayoutGroup) : TaggedTemplateLiteral<{name: string, description: string}> {
+    return (strings: TemplateStringsArray, ...values: any[]) => {
+        SECTIONS.available_sections.push(currentSection = {name, group, description: strings.join(''), layout_options: new Map(), examples: []});
+        return {name,  description: strings.join('')};
+    }
+}
+
+
+
+export function example(description: string) : TaggedTemplateLiteral<{example : SectionExample}> {
+    return (strings: TemplateStringsArray, ...values: any[]) => {
+        let curExample = {description, code: strings.join('')};
+        currentSection.examples.push(curExample);
+        return {example : curExample};
+    }
+}
+
+

package/sections/sections.scss

@@ -1,5 +1,7 @@
 
 @import "defaults";
+@import "typography";
+
 @import "navbar-blox/navbar-blox.scss";
 @import "navbar-centerlogo/navbar-centerlogo.scss";
 @import "navbar-switch2/navbar-switch2";
@@ -16,3 +18,4 @@
 @import "cta-form/cta-form";
 @import "image-gallery1/image-gallery1";
 @import "infobox/infobox";
+@import "subheader/subheader";

package/sections/sections.ts

@@ -15,3 +15,4 @@ import "./hero-title-small/hero-title-small";
 import "./cta-form/cta-form";
 import "./image-gallery1/image-gallery1";
 import "./infobox/infobox";
+import "./subheader/subheader";

package/sections/subheader/subheader.scss

@@ -0,0 +1,27 @@
+
+
+.tjs-subheader {
+    --layout-background: var(--t-soft-primary);
+    --layout-padding: 25px;
+
+
+    padding: var(--t-section-padding);
+
+    &>.x-wrapper {
+        padding: 0;
+        &>.x-inner {
+            text-align: center;
+            color: var(--t-primary);
+            background: var(--layout-background);
+            padding: var(--layout-padding);
+        }
+    }
+    slot {
+        &>div.content {
+            &>*:last-child {
+                margin-bottom: 0;
+            }
+        };
+    }
+
+}

package/sections/subheader/subheader.ts

@@ -0,0 +1,17 @@
+import {Joda} from "@leuffen/jodastyle";
+
+
+Joda.registerTemplate("subheader",
+    // language=HTML
+    `
+
+        <div class="tjs-subheader">
+            <div class="x-wrapper [[layout.container]]">
+                <div class="x-inner">
+                    <slot></slot>
+                </div>
+            </div>
+        </div>
+    `, {
+        container: "container"
+    });

package/themes/_defaults/_headering-style-flex.scss

@@ -0,0 +1,36 @@
+
+.heading-style-flex {
+    h2:has(+ blockquote) {
+        text-transform: var(--t-header-text-transform, uppercase);
+        font-size: var(--t-font-size-base);
+        font-family: var(--t-font-family-base);
+        color: var(--t-accent) !important;
+        margin-bottom: var(--t-paragraf-margin-bottom);
+        font-weight: bold;
+    }
+
+    h2 + blockquote > p {
+        font-size: var(--t-font-size-h2);
+        line-height: var(--t-line-height-header);
+        font-family: var(--t-font-family-header);
+        color: var(--t-primary) !important;
+        margin: var(--t-header-margin, 0 0 20px 0);
+        hyphens: manual;
+    }
+
+    h1:has(+ blockquote) {
+
+        font-size: var(--t-font-size-h4);
+        color: var(--t-accent) !important;
+        margin-bottom: var(--t-paragraf-margin-bottom);
+    }
+
+    h1 + blockquote > p {
+        font-size: var(--t-font-size-h1);
+        color: var(--t-primary) !important;
+        line-height: var(--t-line-height-header);
+
+        margin: var(--t-header-margin, 0 0 20px 0);
+        hyphens: manual;
+    }
+}

package/themes/_defaults/_headering-style-hero.scss

@@ -0,0 +1,23 @@
+
+.heading-style-hero {
+
+
+    h1:has(+ blockquote) {
+
+        font-size: var(--t-font-size-h4);
+        color: var(--t-accent) !important;
+        margin-bottom: 0;
+        font-family: var(--t-font-family-header);
+
+    }
+
+    h1 + blockquote > p {
+        font-size: var(--t-font-size-h1);
+        color: var(--t-primary) !important;
+        line-height: var(--t-line-height-header);
+        font-family: var(--t-font-family-header);
+
+        margin: var(--t-header-margin, 0 0 20px 0);
+        hyphens: manual;
+    }
+}

package/themes/_defaults/_sprechzeiten-table-highlight.scss

@@ -0,0 +1,28 @@
+
+
+table.openhours {
+    --layout-row-padding: 5px;
+    width: 100%;
+    color: var(--t-primary);
+    &>tbody {
+        &>tr {
+            td {
+               padding-top: var(--layout-row-padding);
+               padding-bottom: var(--layout-row-padding);
+            }
+
+            border-bottom: 1px solid var(--t-soft-primary);
+            &>td:nth-child(1) {
+                font-weight: bold;
+                padding-right: 0;
+            }
+            &>td:nth-child(2) {
+                text-align: right;
+            }
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+    }
+
+}

package/themes/genne/index.scss

@@ -0,0 +1,91 @@
+
+
+$primary: #354b68 !default;
+$soft-primary: #dbe2e7 !default;
+$accent: #9C8B58 !default;
+$soft-secondary: #F8F8F9 !default;
+
+$background: white !default;
+$background-primary:  #F8F8F9 !default;
+$background-accent: $soft-primary !default;
+
+@import "../_defaults/headering-style-flex";
+@import "../_defaults/headering-style-hero";
+@import "../_defaults/sprechzeiten-table-highlight";
+
+:root {
+    --layout-container: container;
+    --layout-soft-background: #{$soft-secondary};
+}
+html body .tjs__hero-max {
+    --t-background-footer: #fff;
+    --t-section-background: transparent;
+    --t-text-background: #fff;
+    --t-text-background-light: var(--t-background);
+    --t-text-color-accent: var(--bs-gray-900);
+    --t-text-color-primary: var(--bs-primary);
+
+    --t-header-margin: 0 0 20px 0;
+    --t-paragraf-margin: 0 0 20px 0;
+
+    --t-section-padding: 40px 0;
+    --t-section-inner-padding: 3rem;
+
+    // linear gradient from top white to black
+    --layout-desktop-overlay1-background: linear-gradient(180deg, rgba(255,255,255,1) 20%, var(--t-soft-primary) 100%);
+    --layout-desktop-overlay3-background: linear-gradient(180deg, rgba(255,255,255,1) 20%, rgba(0,0,0,0) 100%);
+    --layout-desktop-image-mask: linear-gradient(-90deg, rgba(255,255,255,1) 30%, rgba(0,0,0,0) 100%);
+}
+
+.as__accordion .content p {
+    margin-right: 1rem;
+}
+.as__accordion .content p:last-child {
+    margin-bottom: 1rem;
+}
+
+section.tjs__sec-card-2col {
+    --t-section-background: transparent;
+    --layout-container-background: var(--t-background-primary);
+    --layout-border: 0px;
+
+    .box {
+        background-color: white;
+        padding: 20px;
+        margin-bottom: 20px;
+
+        // Hide empty news section
+        &:has(liweco-news.no-news) {
+            display: none;
+        }
+    }
+
+}
+
+section.tjs__sec-testimonial-ribbon {
+    --layout-bg:  var(--t-background-primary)
+
+}
+
+section.tjs-hero-title-small {
+    --layout-margin-top: 200px;
+    --layout-margin-top-mobile: 20px;
+}
+
+section.tjs-legal-content {
+    --layout-margin-top: 200px;
+}
+
+.tjs__sec-multi-card__item,.tjs__sec-card-2col {
+    img {
+        filter: grayscale(70%);
+        transition: all 0.8s ease-in-out;
+    }
+    &:hover {
+        img {
+            filter: grayscale(0%);
+        }
+    }
+}
+
+

package/themes/theme1/index.scss

@@ -1,6 +1,9 @@
 @import "../../variables";
 @import "../_mixins/default-element-format";
 
+
+
+
 :root {
     --layout-container: container;
 

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": false,
+    "declaration": true,
+    "module": "es6",
+    "target": "es6",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+
+
+    "emitDecoratorMetadata": true,
+    "moduleResolution": "node",
+    "lib": [
+      "es2021",
+      "dom"
+    ],
+
+  },
+  "include": [
+    "src/**/*",
+    "*"
+  ],
+  "exclude": [
+    "./test"
+  ]
+}