@leuffen/themejs1 5.0.1 → 5.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/_tpl/pages/termin-redirect.de.md +21 -0
  2. package/_variables.scss +1 -1
  3. package/elements/elements.scss +0 -1
  4. package/elements/elements.ts +0 -1
  5. package/index.scss +2 -0
  6. package/package.json +4 -4
  7. package/sections/cta-base/cta-base.ts +2 -2
  8. package/sections/cta-form/cta-form.ts +11 -9
  9. package/sections/footer-base/footer-base.scss +13 -1
  10. package/sections/footer-base/footer-base.ts +3 -3
  11. package/sections/hero-max/hero-max.ts +3 -2
  12. package/sections/image-gallery1/image-gallery1.scss +87 -0
  13. package/sections/image-gallery1/image-gallery1.ts +22 -0
  14. package/sections/sec-card-2col/sec-card-2col.scss +1 -1
  15. package/sections/sec-card-2col/sec-card-2col.ts +4 -2
  16. package/sections/sec-legal-content/sec-legal-content.ts +3 -2
  17. package/sections/sec-multi-card/sec-multi-card.scss +50 -5
  18. package/sections/sec-multi-card/sec-multi-card.ts +17 -3
  19. package/sections/sections.scss +1 -0
  20. package/sections/sections.ts +1 -0
  21. package/elements/e-card-default/e-card-default.scss +0 -45
  22. package/elements/e-card-default/e-card-default.ts +0 -16
package/_tpl/pages/termin-redirect.de.md ADDED
@@ -0,0 +1,21 @@
1
+ ---
2
+ description: ""
3
+ icon: bi bi-phone
4
+ lang: de
5
+ layout: article
6
+ order: 80
7
+ permalink: /termin
8
+ pid: pages/termin
9
+ ptags:
10
+ - nav
11
+ published: true
12
+ short_title: Termin vereinbaren
13
+ skipHead: false
14
+ title: Termin vereinbaren
15
+ type: article
16
+ ---
17
+
18
+ <script>
19
+ window.location.href = "{{site.data.general.termin_url}}";
20
+ </script>
21
+
package/_variables.scss CHANGED
@@ -13,7 +13,7 @@ $danger: #bf1c0a !default;
13
13
  $warning: #bf760a !default;
14
14
  $dark: #006837 !default;
15
15
 
16
- $background: #802020 !default;
16
+ $background: rgba(217, 217, 217, 0.24) !default;
17
17
  $background-primary: #b7eaf9 !default;
18
18
  $background-accent: #ddd !default;
19
19
 
package/elements/elements.scss CHANGED
@@ -1,3 +1,2 @@
1
1
  @import "liweco";
2
- @import "e-card-default/e-card-default";
3
2
  @import "e-form/e-form";
package/elements/elements.ts CHANGED
@@ -1,2 +1 @@
1
- export * from "./e-card-default/e-card-default";
2
1
  export * from "./e-form/e-form";
package/index.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import "bootstrap";
2
+
1
3
  @import "sections/defaults";
2
4
  @import "sections/sections";
3
5
  @import "elements/elements";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leuffen/themejs1",
3
- "version": "5.0.1",
3
+ "version": "5.0.3",
4
4
 
5
5
  "description": "",
6
6
  "license": "proprietary",
@@ -27,10 +27,10 @@
27
27
  ],
28
28
  "author": "",
29
29
  "dependencies": {
30
- "@leuffen/jodastyle": "^2.0.2",
30
+ "@leuffen/jodastyle": "^3.0.2",
31
31
  "@kasimirjs/embed": "^1.0.8",
32
- "@leuffen/isl-base": "^1.0.9",
33
- "@leuffen/liscom": "^1.0.2",
32
+ "@leuffen/isl-base": "^2.0.2",
33
+ "@leuffen/liscom": "^2.0.1",
34
34
  "@leuffen/liweco-base": "^2.0.2",
35
35
  "bootstrap": "^5.3.0"
36
36
  },
package/sections/cta-base/cta-base.ts CHANGED
@@ -4,9 +4,9 @@ Joda.registerTemplate("cta-base",
4
4
  // language=HTML
5
5
  `
6
6
 
7
- <div class="tjs__cta-base">
7
+ <section class="tjs__cta-base">
8
8
  <div class="[[layout.container]]">
9
9
  <slot></slot>
10
10
  </div>
11
- </div>
11
+ </section>
12
12
  `);
package/sections/cta-form/cta-form.ts CHANGED
@@ -3,18 +3,20 @@ import {Joda} from "@leuffen/jodastyle";
3
3
  Joda.registerTemplate("cta-form",
4
4
  // language=HTML
5
5
  `
6
- <form class="tjs__cta-form" data-micx-formmail-preset="default" data-micx-formmail-sent-message="E-Mail erfolgreich gesendet!">
7
- <div class="container">
8
- <slot data-select=":scope h2"></slot>
9
- </div>
10
- <div class="wrapper">
6
+ <section class="tjs__cta-form">
7
+ <form data-micx-formmail-preset="default" data-micx-formmail-sent-message="E-Mail erfolgreich gesendet!">
11
8
  <div class="container">
12
- <div class="row g-3">
13
- <slot data-select=".section-hr" data-replace=""></slot>
9
+ <slot data-select=":scope h2"></slot>
10
+ </div>
11
+ <div class="wrapper">
12
+ <div class="container">
13
+ <div class="row g-3">
14
+ <slot data-select=".section-hr" data-replace=""></slot>
14
15
 
16
+ </div>
15
17
  </div>
16
18
  </div>
17
- </div>
18
19
 
19
- </form>
20
+ </form>
21
+ </section>
20
22
  `);
package/sections/footer-base/footer-base.scss CHANGED
@@ -45,6 +45,14 @@
45
45
  overflow: hidden;
46
46
  border-top: 1px solid var(--t-section-background);
47
47
  text-align: center;
48
+
49
+ img {
50
+ filter: grayscale(100%);
51
+ &:hover {
52
+ filter: grayscale(0%);
53
+ }
54
+ }
55
+
48
56
  }
49
57
  h3 {
50
58
  margin-top: 20px;
@@ -71,8 +79,12 @@
71
79
  }
72
80
  }
73
81
  .content {
74
- --joda-class: ":: border-bottom :xl: border-end";
82
+ border-right: 1px solid var(--t-section-border-color);
83
+ &:last-of-type {
84
+ border-right: none;
85
+ }
75
86
  }
87
+
76
88
  .content:last-of-type {
77
89
  --joda-class: unset;
78
90
  }
package/sections/footer-base/footer-base.ts CHANGED
@@ -4,14 +4,14 @@ Joda.registerTemplate("footer-base",
4
4
  // language=HTML
5
5
  `
6
6
 
7
- <div class="tjs__footer-base [[layout.class]]">
7
+ <footer class="tjs__footer-base [[layout.class]]">
8
8
  <div class="[[layout.container]] h-100">
9
9
  <div class="row">
10
- <slot data-select=".section-h3 > .content" data-class=":: col-12 :xl: col"></slot>
10
+ <slot data-select=".section-h3 > .content" data-child-class=":: col-12 :xl: col"></slot>
11
11
  </div>
12
12
  </div>
13
13
  <div class="subfooter">
14
14
  <slot data-select="#minifooter"></slot>
15
15
  </div>
16
- </div>
16
+ </footer>
17
17
  `);
package/sections/hero-max/hero-max.ts CHANGED
@@ -5,7 +5,7 @@ Joda.registerTemplate("hero-max",
5
5
  // language=HTML
6
6
  `
7
7
 
8
- <div class="tjs__hero-max [[layout.class]] [[layout.autoheight === false ? '' : 'tjs__hero-max--autoheight' ]]">
8
+ <section class="tjs__hero-max [[layout.class]] [[layout.autoheight === false ? '' : 'tjs__hero-max--autoheight' ]] :: mobile :lg: desktop">
9
9
  <slot data-select="img.background, :scope>.content>p.background>img" class="slideshow"></slot>
10
10
  <div class="tjs__hero-max--out-wrapper ">
11
11
  <div class="tjs__hero-max--container [[layout.container]]">
@@ -17,5 +17,6 @@ Joda.registerTemplate("hero-max",
17
17
  </div>
18
18
  </div>
19
19
  </div>
20
- </div>
20
+ </section>
21
+
21
22
  `);
package/sections/image-gallery1/image-gallery1.scss ADDED
@@ -0,0 +1,87 @@
1
+
2
+
3
+ .tjs-image-gallery1 {
4
+ padding: var(--t-section-padding);
5
+ background: var(--t-section-background);
6
+
7
+ &__header {
8
+ text-align: center;
9
+ padding-bottom: 40px;
10
+ &:empty {
11
+ display: none;
12
+ }
13
+ }
14
+
15
+ &__images {
16
+ display: flex;
17
+ flex-wrap: wrap;
18
+ width: 100%;
19
+ ul {
20
+ margin: 0;
21
+
22
+ &> li {
23
+ list-style: none;
24
+ margin: 0;
25
+ }
26
+ }
27
+
28
+
29
+ }
30
+
31
+ &__images-image {
32
+
33
+
34
+ flex-grow: 3;
35
+ transform: scale(100%);
36
+ transition: transform 0.2s ease-in-out;
37
+ min-width: 300px;
38
+ padding: 5px;
39
+ display: inline-block;
40
+ img {
41
+ &:hover {
42
+
43
+
44
+ }
45
+ border-radius: var(--t-section-border-radius);
46
+ width: 100%;
47
+ height: 100%;
48
+ object-fit: cover;
49
+ object-position: center center;
50
+ }
51
+ }
52
+
53
+ &.mobile &__images-image {
54
+ width: 100%;
55
+ height: auto;
56
+ aspect-ratio: 16/9;
57
+ }
58
+
59
+ &__images-image:last-child {
60
+ width: 50%;
61
+ height: auto;
62
+ aspect-ratio: 16/9;
63
+ flex-grow: 3;
64
+ }
65
+
66
+ &__images-image:nth-child(1n) {
67
+ width: 75%;
68
+ height: auto;
69
+ aspect-ratio: 16/9;
70
+ }
71
+ &__images-image:nth-child(2n) {
72
+ width: 25%;
73
+ aspect-ratio: 2/1;
74
+ }
75
+ &__images-image:nth-child(3n) {
76
+ width: 25%;
77
+ aspect-ratio: 5/4;
78
+ }
79
+ &__images-image:nth-child(4n) {
80
+ width: 25%;
81
+ aspect-ratio: 2/1;
82
+ }
83
+ &__images-image:nth-child(5n) {
84
+ width: 50%;
85
+ aspect-ratio: 2/1;
86
+ }
87
+ }
package/sections/image-gallery1/image-gallery1.ts ADDED
@@ -0,0 +1,22 @@
1
+ import {Joda} from "@leuffen/jodastyle";
2
+
3
+
4
+ Joda.registerTemplate("image-gallery1__images-image",
5
+ // language=HTML
6
+ `
7
+
8
+ <slot class="tjs-image-gallery1__images-image" data-select="img"></slot>
9
+
10
+ `);
11
+
12
+
13
+ Joda.registerTemplate("image-gallery1",
14
+ // language=HTML
15
+ `
16
+
17
+ <section class="tjs-image-gallery1 container :: mobile :lg: desktop">
18
+ <slot class="tjs-image-gallery1__header"></slot>
19
+ <slot class="tjs-image-gallery1__images" data-select="ul > li" data-child-layout="use: #image-gallery1__images-image"></slot>
20
+ </section>
21
+
22
+ `);
package/sections/sec-card-2col/sec-card-2col.scss CHANGED
@@ -60,7 +60,7 @@
60
60
 
61
61
  }
62
62
 
63
- .section-h2:nth-of-type(odd) .tjs__sec-card-2col .row {
63
+ .tjs__sec-card-2col:nth-of-type(odd) .row {
64
64
  flex-direction: row-reverse;
65
65
  //--joda-class: "flex-row-reverse";
66
66
  }
package/sections/sec-card-2col/sec-card-2col.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import {Joda} from "@leuffen/jodastyle";
2
2
 
3
3
 
4
+
5
+
4
6
  Joda.registerTemplate("sec-card-2col",
5
7
  // language=HTML
6
8
  `
7
9
 
8
- <div class="tjs__sec-card-2col">
10
+ <section class="tjs__sec-card-2col">
9
11
  <div class="tjs__sec-card-2col--container [[layout.container]]">
10
12
  <div class="row [[layout.order === 'reverse' ? 'flex-row-reverse': '']] [[layout.mobile_reverse === 'yes' ? ':: flex-row-reverse :lg:': '']]">
11
13
  <div class="tjs__sec-card-2col--col-start tjs__section-text">
@@ -16,5 +18,5 @@ Joda.registerTemplate("sec-card-2col",
16
18
  </div>
17
19
  </div>
18
20
  </div>
19
- </div>
21
+ </section>
20
22
  `);
package/sections/sec-legal-content/sec-legal-content.ts CHANGED
@@ -5,7 +5,7 @@ Joda.registerTemplate("sec-legal-content",
5
5
  // language=HTML
6
6
  `
7
7
 
8
- <div class="tjs__sec-legal-content :: mobile :lg:">
8
+ <section class="tjs__sec-legal-content :: mobile :lg:">
9
9
  <div class="out-wrapper">
10
10
  <div class="container p-0">
11
11
  <div class="inner-wrapper :: p-4 :lg: p-5">
@@ -15,6 +15,7 @@ Joda.registerTemplate("sec-legal-content",
15
15
  </div>
16
16
  </div>
17
17
  </div>
18
+
18
19
  </div>
19
- </div>
20
+ </section>
20
21
  `);
package/sections/sec-multi-card/sec-multi-card.scss CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  .tjs__sec-multi-card {
3
3
 
4
+
4
5
  padding: var(--t-section-padding);
5
6
 
6
7
  background: var(--t-section-background);
@@ -10,13 +11,57 @@
10
11
  text-align: center;
11
12
  padding-bottom: 40px;
12
13
  }
13
- .card {
14
14
 
15
- }
16
15
 
17
16
 
18
- .row .section-h3 {
19
- --joda-class: col;
20
- --joda-use: #e-card-default;
17
+
18
+ &__item {
19
+ @extend .col;
20
+
21
+ .wrapper {
22
+
23
+
24
+
25
+
26
+ border: 1px solid var(--t-section-border-color);
27
+ border-radius: var(--t-section-border-radius);
28
+ overflow: hidden;
29
+ background-color: white;
30
+ height: 100%;
31
+ min-width: 300px;
32
+
33
+ --aspect-ratio: var(--layout-aspect-ratio, 16 / 9);
34
+
35
+
36
+
37
+
38
+
39
+ .tjs__sec-multi-card__item-img {
40
+ &:empty {
41
+ display: none;
42
+ }
43
+
44
+ width: 100%;
45
+ aspect-ratio: var(--aspect-ratio);
46
+ display: block;
47
+ overflow: hidden;
48
+ img {
49
+
50
+ width: 100%;
51
+ height: 100%;
52
+ object-fit: cover;
53
+ }
54
+
55
+
56
+ }
57
+
58
+ .tjs__sec-multi-card__item__body {
59
+ @extend .p-4;
60
+ height: 100%;
61
+ }
62
+ }
63
+
21
64
  }
65
+
66
+
22
67
  }
package/sections/sec-multi-card/sec-multi-card.ts CHANGED
@@ -1,6 +1,22 @@
1
1
  import {Joda} from "@leuffen/jodastyle";
2
2
 
3
+ Joda.registerTemplate("sec-multi-card__item",
4
+ // language=HTML
5
+ `
6
+ <div class="col tjs__sec-multi-card__item">
7
+ <div class="wrapper">
8
+
9
+ <slot class="tjs__sec-multi-card__item-img" data-select="img"></slot>
10
+
11
+
12
+ <div class="tjs__sec-multi-card__item__body text-format">
13
+ <slot></slot>
14
+ </div>
15
+ </div>
3
16
 
17
+ </div>
18
+ `
19
+ );
4
20
  Joda.registerTemplate("sec-multi-card",
5
21
  // language=HTML
6
22
  `
@@ -10,9 +26,7 @@ Joda.registerTemplate("sec-multi-card",
10
26
  <slot data-select=":scope > .content"></slot>
11
27
  </div>
12
28
  <div class="container">
13
- <div class="row g-3 row-cols-1 row-cols-lg-[[ layout.cols ?? 3 ]]">
14
- <slot data-select=":scope > .children > *" data-replace=""></slot>
15
- </div>
29
+ <slot class="row g-3 row-cols-1 row-cols-lg-[[ layout.cols ?? 3 ]]" data-select=":scope > .children > *" data-child-layout="use: #sec-multi-card__item"></slot>
16
30
  </div>
17
31
  </div>
18
32
  `);
package/sections/sections.scss CHANGED
@@ -12,3 +12,4 @@
12
12
  @import "sec-card-feature/sec-card-feature";
13
13
  @import "hero-title-small/hero-title-small";
14
14
  @import "cta-form/cta-form";
15
+ @import "image-gallery1/image-gallery1";
package/sections/sections.ts CHANGED
@@ -11,3 +11,4 @@ import "./sec-multi-card/sec-multi-card";
11
11
  import "./sec-card-feature/sec-card-feature";
12
12
  import "./hero-title-small/hero-title-small";
13
13
  import "./cta-form/cta-form";
14
+ import "./image-gallery1/image-gallery1";
package/elements/e-card-default/e-card-default.scss DELETED
@@ -1,45 +0,0 @@
1
- @import "bootstrap/scss/bootstrap";
2
-
3
- .tjs__e-card-default {
4
-
5
- border: 1px solid var(--t-section-border-color);
6
- border-radius: var(--t-section-border-radius);
7
- overflow: hidden;
8
- background-color: white;
9
- height: 100%;
10
- min-width: 300px;
11
-
12
- &.card {
13
- height: 100%;
14
- }
15
-
16
- --aspect-ratio: var(--layout-aspect-ratio, 16 / 9);
17
-
18
-
19
-
20
-
21
-
22
- .tjs__e-card-default__img {
23
- &>slot:empty {
24
- display: none;
25
- }
26
- &> slot {
27
- width: 100%;
28
- aspect-ratio: var(--aspect-ratio);
29
- display: block;
30
- overflow: hidden;
31
- img {
32
-
33
- width: 100%;
34
- height: 100%;
35
- object-fit: cover;
36
- }
37
- }
38
-
39
- }
40
-
41
- .tjs__e-card-default__body {
42
- @extend .p-4;
43
- height: 100%;
44
- }
45
- }
package/elements/e-card-default/e-card-default.ts DELETED
@@ -1,16 +0,0 @@
1
- import {Joda} from "@leuffen/jodastyle";
2
-
3
-
4
- Joda.registerTemplate("e-card-default",
5
- // language=HTML
6
- `
7
- <div class="tjs__e-card-default">
8
- <div class="tjs__e-card-default__img">
9
- <slot data-select="img"></slot>
10
- </div>
11
-
12
- <div class="tjs__e-card-default__body text-format">
13
- <slot></slot>
14
- </div>
15
- </div>
16
- `);