@leuffen/themejs1 4.0.2 → 5.0.1

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.
@@ -12,16 +12,28 @@
12
12
  max-height: 60vh;
13
13
  min-height: 250px;
14
14
  width: 100%;
15
- padding-bottom: 40px
16
- }
15
+ padding-bottom: 40px;
17
16
 
18
- .imagewrapper > img {
19
- object-fit: cover;
20
- object-position: center center;
21
- width: 100%;
22
- height: 100%;
17
+ &:has(slot:empty) {
18
+ visibility: hidden;
19
+ min-height: 0;
20
+ height: 0;
21
+ }
22
+
23
+ & > slot {
24
+ width: 100%;
25
+ height: 100%;
26
+
27
+ & > img, & > div {
28
+ object-fit: cover;
29
+ object-position: center center;
30
+ width: 100%;
31
+ height: 100%
32
+ }
33
+ }
23
34
  }
24
35
 
36
+
25
37
  h1 {
26
38
  padding: 20px;
27
39
  }
@@ -7,7 +7,7 @@ Joda.registerTemplate("hero-title-small",
7
7
 
8
8
  <div class="tjs__hero-title-small">
9
9
  <div class="imagewrapper">
10
- <slot data-select="img" data-replace="true"></slot>
10
+ <slot data-select="img, .top"></slot>
11
11
  </div>
12
12
 
13
13
  <slot></slot>
@@ -23,16 +23,18 @@
23
23
  --joda-class: p-4 p-lg-5 ;
24
24
  }
25
25
 
26
+
27
+
26
28
  .row > .tjs__sec-card-2col--col-start {
27
- --joda-class: "col-12 col-md-6 p-4 p-lg-5 order-2 order-md-1";
29
+ --joda-class: "col-12 col-lg-6 p-4 p-lg-5 order-2 order-lg-1";
28
30
  }
29
31
 
30
32
 
31
33
  .row > .tjs__sec-card-2col--col-end {
32
34
 
33
- --joda-class: "col-12 col-md-6 order-1 order-md-2";
34
- &:has(> .aside) {
35
- --joda-class: "col-12 col-md-6 order-2 order-md-1";
35
+ --joda-class: "col-12 col-lg-6 order-1 order-lg-2";
36
+ &:has(> slot > .aside) {
37
+ --joda-class: "col-12 col-lg-6 order-3 order-lg-1";
36
38
  }
37
39
  slot {
38
40
  display: block;
@@ -49,7 +51,9 @@
49
51
 
50
52
 
51
53
  .tjs__sec-card-2col--container {
52
- border: 1px solid var(--bs-gray-500);
54
+ border: 1px solid var(--t-section-border-color);
55
+ border-radius: var(--t-section-border-radius);
56
+ overflow: hidden;
53
57
  background-color: white;
54
58
  padding: 0;
55
59
  }
@@ -58,5 +62,5 @@
58
62
 
59
63
  .section-h2:nth-of-type(odd) .tjs__sec-card-2col .row {
60
64
  flex-direction: row-reverse;
61
- --joda-class: "flex-row-reverse";
65
+ //--joda-class: "flex-row-reverse";
62
66
  }
@@ -7,7 +7,7 @@ Joda.registerTemplate("sec-card-2col",
7
7
 
8
8
  <div class="tjs__sec-card-2col">
9
9
  <div class="tjs__sec-card-2col--container [[layout.container]]">
10
- <div class="row [[layout.order === 'reverse' ? 'flex-row-reverse': '']]">
10
+ <div class="row [[layout.order === 'reverse' ? 'flex-row-reverse': '']] [[layout.mobile_reverse === 'yes' ? ':: flex-row-reverse :lg:': '']]">
11
11
  <div class="tjs__sec-card-2col--col-start tjs__section-text">
12
12
  <slot></slot>
13
13
  </div>
@@ -6,7 +6,8 @@
6
6
 
7
7
  .inner-wrapper {
8
8
 
9
- border: 1px solid var(--bs-gray-500);
9
+ border: 1px solid var(--t-section-border-color);
10
+ border-radius: var(--t-section-border-radius);
10
11
  background-color: white;
11
12
  padding: var(--t-section-inner-padding);
12
13
 
@@ -0,0 +1,30 @@
1
+ @font-face {
2
+ font-family: 'Garamond';
3
+ font-style: normal;
4
+ font-weight: 400;
5
+ font-display: swap;
6
+ src: url("https://cdn.leuffen.de/global/fonts/garamond/font/AGaramondPro-Regular.woff2");
7
+ }
8
+ @font-face {
9
+ font-family: 'Garamond';
10
+ font-style: italic;
11
+ font-weight: 400;
12
+ font-display: swap;
13
+ src: url("https://cdn.leuffen.de/global/fonts/garamond/font/AGaramondPro-Italic.woff2");
14
+ }
15
+ @font-face {
16
+ font-family: 'Garamond';
17
+ font-style: normal;
18
+ font-weight: 500;
19
+ font-display: swap;
20
+ src: url("https://cdn.leuffen.de/global/fonts/garamond/font/AGaramondPro-Bold.woff2");
21
+ }
22
+
23
+
24
+ @font-face {
25
+ font-family: 'Garamond';
26
+ font-style: italic;
27
+ font-weight: 500;
28
+ font-display: swap;
29
+ src: url("https://cdn.leuffen.de/global/fonts/garamond/font/AGaramondPro-BoldItalic.woff2");
30
+ }
@@ -3,10 +3,22 @@
3
3
 
4
4
  :root {
5
5
  --layout-container: container;
6
+
7
+
8
+
9
+ --t-border-radius: #{$section-border-radius};
10
+ --t-background-footer: #{$background-footer};
11
+ --t-text-footer: #{$text-footer};
12
+ --t-footer-header-color: #{$text-footer};
13
+ --t-section-border-color: #{$section-border-color};
14
+ --t-background-dark: #{$background-dark};
15
+ --t-text-dark: #{$text-dark};
16
+ --t-header-dark: #{$text-dark};
17
+ --t-link-dark: #{$text-dark};
6
18
  }
7
19
  .theme1 {
8
20
  @include default-element-format();
9
-
21
+ --t-background: #{$background};
10
22
  color: var(--t-text-color);
11
23
  background: var(--t-background);
12
24
 
@@ -15,12 +27,14 @@
15
27
  color: var(--t-text-color);
16
28
  }
17
29
 
30
+ font-size: $font-size-base;
18
31
  h1 {
19
32
  font-size: 2.4em;
20
33
  line-height: 1.2em;
21
34
  }
22
35
  h2, h3,h4,h5 {
23
36
  line-height: 1.2em;
37
+
24
38
  }
25
39
  h3,h4,h5 {
26
40
  font-size: 1.15em;
@@ -30,16 +44,23 @@
30
44
  line-height: 1.4em;
31
45
  }
32
46
 
47
+
48
+
49
+ table > tbody > tr > td {
50
+ background: transparent;
51
+ }
52
+
33
53
  .tjs__section-text {
34
- h2 {
35
- text-transform: uppercase;
54
+ h2:has(+ blockquote) {
55
+ text-transform: var(--t-header-text-transform, uppercase);
36
56
  font-weight: bold;
37
57
  font-size: 16px;
38
58
  color: var(--t-text-color-primary) !important;
39
59
  margin: var(--t-paragraf-margin);
40
60
  }
41
- blockquote > p {
42
- font-size: 2.1em;
61
+
62
+ h2, blockquote > p {
63
+ font-size: 1.9em;
43
64
  line-height: 1.2em;
44
65
  color: var(--t-text-color) !important;
45
66
  margin: var(--t-header-margin, 0 0 20px 0);
@@ -69,15 +90,13 @@
69
90
  color: var(--t-text-color);
70
91
  }
71
92
 
72
- font-size: 1.1rem;
73
93
 
74
- --t-background: #f5f5f5;
94
+
75
95
  --t-background-footer: #fff;
76
96
  --t-section-background: transparent;
77
- --t-section-background-accent: #e7e7eb;
78
97
  --t-section-background-primary: #{$background-primary};
79
98
  --t-text-background: #fff;
80
- --t-text-color: #707070;
99
+ --t-text-color: #{$text-color};
81
100
  --t-text-background-light: var(--t-background);
82
101
  --t-text-color-accent: var(--bs-gray-900);
83
102
  --t-text-color-primary: var(--bs-primary);
@@ -107,7 +126,7 @@
107
126
  }
108
127
 
109
128
  .btn {
110
- border-radius: 0;
129
+ border-radius: $border-radius;
111
130
  }
112
131
 
113
132
  map {