Skip to content

Commit 1f1c5e1

Browse files
albigalbig
authored
Optimize textbalken for kandidierenden page (#655)
1 parent 11d6959 commit 1f1c5e1

File tree

7 files changed

+112
-83
lines changed

7 files changed

+112
-83
lines changed

‎assets/css/editor-style.css

+62-39
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
font-style: normal;
2323
font-display: swap; }
2424

25-
body {
25+
.editor-styles-wrapper {
2626
font-family: "PTSans";
2727
font-size: 1.1875rem;
2828
line-height: 1.5;
@@ -107,39 +107,37 @@ body {
107107
text-decoration: none;
108108
}
109109

110-
h1.wp-block,
111-
h2.wp-block,
112-
h3.wp-block,
113-
.h1,
114-
.h2 {
110+
.editor-styles-wrapper h1.wp-block,
111+
.editor-styles-wrapper h2.wp-block,
112+
.editor-styles-wrapper h3.wp-block,
113+
.editor-styles-wrapper .h1,
114+
.editor-styles-wrapper .h2,
115+
.editor-styles-wrapper .h3 {
115116
font-family: "GrueneType";
116117
}
117118

118-
h1, .h1,
119-
.h1,
120-
.has-huge-font-size {
119+
.editor-styles-wrapper h1,
120+
.editor-styles-wrapper .h1,
121+
.editor-styles-wrapper .has-huge-font-size {
121122
font-size: 36px;
122123
line-height: 1.2em;
123124
}
124125

125-
h2,
126-
.h2,
127-
.h2,
128-
.has-large-font-size {
126+
.editor-styles-wrapper h2,
127+
.editor-styles-wrapper .h2,
128+
.editor-styles-wrapper .has-large-font-size {
129129
font-size: 27px;
130130
line-height: 1.2em;
131-
font-family: "GrueneType";
132131
}
133132

134-
h3,
135-
.h3,
136-
.h3,
137-
.has-medium-font-size {
133+
.editor-styles-wrapper h3,
134+
.editor-styles-wrapper .h3,
135+
.editor-styles-wrapper .has-medium-font-size {
138136
font-weight: 700;
139137
font-size: 25px;
140138
}
141139

142-
.has-white-background-color .h1, .h2, .h3 {
140+
.editor-styles-wrapper .has-white-background-color .h1, .h2, .h3 {
143141
color: #005437;
144142
}
145143

@@ -151,34 +149,40 @@ h3,
151149
.has-huge-font-size {
152150
font-size: 45px;
153151
line-height: 1.3em;
152+
margin-top: 0;
154153
}
155154

156155
h2,
157156
.h2,
158157
.has-large-font-size {
159158
font-size: 31px;
160159
line-height: 1.3em;
160+
margin-top: 0;
161161
}
162162

163163
h3,
164164
.h3,
165165
.has-medium-font-size {
166166
font-size: 27px;
167+
margin-top: 0;
167168
}
168169

169170
h4,
170171
.h4 {
171172
font-size: 27px;
173+
margin-top: 0;
172174
}
173175

174176
h5,
175177
.h5 {
176178
font-size: 25px;
179+
margin-top: 0;
177180
}
178181

179182
h6,
180183
.h6 {
181184
font-size: 22px;
185+
margin-top: 0;
182186
}
183187
}
184188

@@ -293,28 +297,38 @@ p a {
293297
}
294298

295299
/* add textbalken */
300+
.editor-styles-wrapper h1.textbalken,
301+
.editor-styles-wrapper .textbalken.h1,
302+
.editor-styles-wrapper h2.textbalken,
303+
.editor-styles-wrapper .textbalken.h2,
304+
.editor-styles-wrapper h3.textbalken,
305+
.editor-styles-wrapper .textbalken.h3,
306+
.editor-styles-wrapper h4.textbalken,
307+
.editor-styles-wrapper .textbalken.h4,
308+
.editor-styles-wrapper h5.textbalken,
309+
.editor-styles-wrapper .textbalken.h5,
310+
.editor-styles-wrapper h6.textbalken,
311+
.editor-styles-wrapper .textbalken.h6,
312+
.editor-styles-wrapper .h1.textbalken,
313+
.editor-styles-wrapper .h2.textbalken,
314+
.editor-styles-wrapper .h3.textbalken,
315+
.editor-styles-wrapper .h4.textbalken,
316+
.editor-styles-wrapper .h5.textbalken,
317+
.editor-styles-wrapper .h6.textbalken {
318+
margin-bottom: 0;
319+
padding: 0 1em;
320+
}
321+
296322
.has-background.textbalken {
297323
z-index: 0;
298324
width: fit-content;
299325
line-height: 150%;
300326
position: relative;
301-
padding: 0;
302-
}
303-
304-
.has-background.textbalken.has-text-align-center {
305-
margin: auto;
327+
text-transform: uppercase;
306328
}
307329

308-
.has-background.textbalken::after {
309-
background: inherit;
310-
content: "";
311-
position: absolute;
312-
top: 0;
313-
right: -20px;
314-
bottom: 0;
315-
left: 0;
316-
z-index: -1;
317-
transform: skew(-12deg);
330+
.editor-styles-wrapper .has-background.textbalken {
331+
font-family: "GrueneType";
318332
}
319333

320334
.has-background.textbalken::before {
@@ -324,35 +338,44 @@ p a {
324338
top: 0;
325339
right: 0;
326340
bottom: 0;
327-
left: -20px;
341+
left: -9px;
328342
z-index: -1;
329343
transform: skew(-12deg);
344+
transform-origin: bottom;
330345
}
331346

332347
.has-background.textbalken.links-eins {
333348
left: 1em;
334-
margin-top: -0.5rem !important;
335349
}
336350

337351
@media (max-width: 767.98px) {
338-
339352
.has-background.textbalken.links-eins {
340353
left: 0.5em;
341354
}
342355
}
343356

344357
.has-background.textbalken.links-zwei {
345358
left: 3em;
346-
margin-top: -0.5rem !important;
347359
}
348360

349361
@media (max-width: 767.98px) {
350-
351362
.has-background.textbalken.links-zwei {
352363
left: 2.5em;
353364
}
354365
}
355366

367+
.wp-block-columns.no-gap.is-layout-flex {
368+
gap: 0;
369+
}
370+
371+
.wp-block-columns .wp-block-column p, .wp-block-columns .wp-block-column ul {
372+
padding: 0 1em;
373+
}
374+
375+
.wp-block-columns .wp-block-column p.textbalken, .wp-block-columns .wp-block-column ul.textbalken {
376+
padding: 0 0.5em;
377+
}
378+
356379
.stoerer {
357380
width: 200px;
358381
height: 200px;

‎sass/_colors.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313

1414
@each $name, $code in $custom-colors {
1515
.has-#{$name}-color {
16-
color: $code !important;
16+
color: $code;
1717
}
1818

1919
.has-#{$name}-background-color {
20-
background-color: $code !important;
20+
background-color: $code;
2121
}
2222

2323
.has-#{$name}-hover-background-color:hover {
24-
background-color: $code !important;
24+
background-color: $code;
2525
}
2626
}
2727

‎sass/_typography.scss

+9-21
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ h6,
1212
.h6 {
1313

1414
word-break: break-word;
15+
16+
&.textbalken {
17+
margin-bottom: 0;
18+
padding: 0 1em;
19+
}
1520
}
1621

1722
.roofline {
@@ -165,43 +170,27 @@ h6,
165170
width: fit-content;
166171
line-height: 150%;
167172
position: relative;
168-
padding: 0;
173+
text-transform: uppercase;
169174

170175
@include themed() {
171176
font-family: t("headingFont");
172177
}
173178

174-
&.has-text-align-center {
175-
margin: auto;
176-
}
177-
178-
&::after {
179-
background: inherit;
180-
content: "";
181-
position: absolute;
182-
top: 0;
183-
right: -20px;
184-
bottom: 0;
185-
left: 0;
186-
z-index: -1;
187-
transform: skew(-12deg);
188-
}
189-
190179
&::before {
191180
background: inherit;
192181
content: "";
193182
position: absolute;
194183
top: 0;
195184
right: 0;
196185
bottom: 0;
197-
left: -20px;
186+
left: -9px;
198187
z-index: -1;
199188
transform: skew(-12deg);
189+
transform-origin: bottom;
200190
}
201191

202192
&.links-eins {
203193
left: 1em;
204-
margin-top: -0.5rem;
205194

206195
@include media-breakpoint-down(md) {
207196
left: 0.5em;
@@ -210,12 +199,12 @@ h6,
210199

211200
&.links-zwei {
212201
left: 3em;
213-
margin-top: -0.5rem;
214202

215203
@include media-breakpoint-down(md) {
216204
left: 2.5em;
217205
}
218206
}
207+
219208
}
220209

221210
.stoerer {
@@ -249,4 +238,3 @@ h6,
249238
top: 2rem;
250239
}
251240
}
252-

‎sass/wp-blocks/column.scss

+31-12
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,41 @@
11
.wp-block-columns {
22
margin-bottom: 0;
3-
}
43

5-
.wp-block-column {
6-
margin-bottom: 50px;
7-
}
4+
.wp-block-column {
5+
margin-bottom: 50px;
86

9-
:where(.wp-block-columns.no-gap.is-layout-flex) {
10-
gap: 0 !important;
11-
}
7+
.wp-block-group {
8+
padding: 0;
9+
}
10+
11+
.wp-block-table {
12+
13+
td,
14+
th {
15+
padding: 0.5em 1em;
16+
}
17+
}
18+
19+
p,
20+
ul {
21+
padding: 0 1em;
22+
23+
&.textbalken {
24+
padding: 0 0.5em;
25+
}
26+
}
1227

13-
.wp-block-column {
28+
img {
29+
width: 100%;
30+
object-fit: cover;
31+
border-radius: $border-radius;
32+
}
33+
}
1434

15-
img {
16-
width: 100%;
17-
object-fit: cover;
18-
border-radius: $border-radius;
35+
&.no-gap.is-layout-flex {
36+
gap: 0;
1937
}
38+
2039
}
2140

2241
@include media-breakpoint-up(sm) {

‎sass/wp-blocks/group.scss

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
.wp-block-group {
22

3-
padding: 0;
43
position: relative;
54

6-
&.has-background {
5+
&.is-layout-flex {
6+
gap: 0;
7+
}
8+
9+
&.alignfull.has-background {
710
width: 100vw;
811
display: flex;
912
justify-content: center;
@@ -29,6 +32,7 @@
2932
&__inner-container {
3033
max-width: map-get($container-max-widths, "xl");
3134
}
35+
3236
}
3337

3438
.d-flex {

‎sass/wp-blocks/table.scss

-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
.wp-block-table {
22

3-
th,
4-
td {
5-
padding: 1em 1em 1em 0;
6-
}
7-
83
thead {
94

105
tr {

0 commit comments

Comments
 (0)