Optimize textbalken for kandidierenden page

verdigado · Jul 12, 2024 · 2f74ebc · 2f74ebc
1 parent 5e23a52
commit 2f74ebc
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 83 deletions.
diff --git a/assets/css/editor-style.css b/assets/css/editor-style.css
@@ -22,7 +22,7 @@
 	font-style: normal;
 	font-display: swap; }
 
-body {
+.editor-styles-wrapper {
 	font-family: "PTSans";
 	font-size: 1.1875rem;
 	line-height: 1.5;
@@ -107,39 +107,37 @@ body {
 	text-decoration: none;
 }
 
-h1.wp-block,
-h2.wp-block,
-h3.wp-block,
-.h1,
-.h2 {
+.editor-styles-wrapper h1.wp-block,
+.editor-styles-wrapper h2.wp-block,
+.editor-styles-wrapper h3.wp-block,
+.editor-styles-wrapper .h1,
+.editor-styles-wrapper .h2,
+.editor-styles-wrapper .h3 {
 	font-family: "GrueneType";
 }
 
-h1, .h1,
-.h1,
-.has-huge-font-size {
+.editor-styles-wrapper h1,
+.editor-styles-wrapper .h1,
+.editor-styles-wrapper .has-huge-font-size {
 	font-size: 36px;
 	line-height: 1.2em;
 }
 
-h2,
-.h2,
-.h2,
-.has-large-font-size {
+.editor-styles-wrapper h2,
+.editor-styles-wrapper .h2,
+.editor-styles-wrapper .has-large-font-size {
 	font-size: 27px;
 	line-height: 1.2em;
-	font-family: "GrueneType";
 }
 
-h3,
-.h3,
-.h3,
-.has-medium-font-size {
+.editor-styles-wrapper h3,
+.editor-styles-wrapper .h3,
+.editor-styles-wrapper .has-medium-font-size {
 	font-weight: 700;
 	font-size: 25px;
 }
 
-.has-white-background-color .h1, .h2, .h3 {
+.editor-styles-wrapper .has-white-background-color .h1, .h2, .h3 {
 	color: #005437;
 }
 
@@ -151,34 +149,40 @@ h3,
 	.has-huge-font-size {
 		font-size: 45px;
 		line-height: 1.3em;
+		margin-top: 0;
 	}
 
 	h2,
 	.h2,
 	.has-large-font-size {
 		font-size: 31px;
 		line-height: 1.3em;
+		margin-top: 0;
 	}
 
 	h3,
 	.h3,
 	.has-medium-font-size {
 		font-size: 27px;
+		margin-top: 0;
 	}
 
 	h4,
 	.h4 {
 		font-size: 27px;
+		margin-top: 0;
 	}
 
 	h5,
 	.h5 {
 		font-size: 25px;
+		margin-top: 0;
 	}
 
 	h6,
 	.h6 {
 		font-size: 22px;
+		margin-top: 0;
 	}
 }
 
@@ -293,28 +297,38 @@ p a {
 }
 
 /* add textbalken */
+.editor-styles-wrapper h1.textbalken,
+.editor-styles-wrapper .textbalken.h1,
+.editor-styles-wrapper h2.textbalken,
+.editor-styles-wrapper .textbalken.h2,
+.editor-styles-wrapper h3.textbalken,
+.editor-styles-wrapper .textbalken.h3,
+.editor-styles-wrapper h4.textbalken,
+.editor-styles-wrapper .textbalken.h4,
+.editor-styles-wrapper h5.textbalken,
+.editor-styles-wrapper .textbalken.h5,
+.editor-styles-wrapper h6.textbalken,
+.editor-styles-wrapper .textbalken.h6,
+.editor-styles-wrapper .h1.textbalken,
+.editor-styles-wrapper .h2.textbalken,
+.editor-styles-wrapper .h3.textbalken,
+.editor-styles-wrapper .h4.textbalken,
+.editor-styles-wrapper .h5.textbalken,
+.editor-styles-wrapper .h6.textbalken {
+	margin-bottom: 0;
+	padding: 0 1em;
+}
+
 .has-background.textbalken {
 	z-index: 0;
 	width: fit-content;
 	line-height: 150%;
 	position: relative;
-	padding: 0;
-}
-
-.has-background.textbalken.has-text-align-center {
-	margin: auto;
+	text-transform: uppercase;
 }
 
-.has-background.textbalken::after {
-	background: inherit;
-	content: "";
-	position: absolute;
-	top: 0;
-	right: -20px;
-	bottom: 0;
-	left: 0;
-	z-index: -1;
-	transform: skew(-12deg);
+.editor-styles-wrapper  .has-background.textbalken {
+	font-family: "GrueneType";
 }
 
 .has-background.textbalken::before {
@@ -324,35 +338,44 @@ p a {
 	top: 0;
 	right: 0;
 	bottom: 0;
-	left: -20px;
+	left: -9px;
 	z-index: -1;
 	transform: skew(-12deg);
+	transform-origin: bottom;
 }
 
 .has-background.textbalken.links-eins {
 	left: 1em;
-	margin-top: -0.5rem !important;
 }
 
 @media (max-width: 767.98px) {
-
 	.has-background.textbalken.links-eins {
 		left: 0.5em;
 	}
 }
 
 .has-background.textbalken.links-zwei {
 	left: 3em;
-	margin-top: -0.5rem !important;
 }
 
 @media (max-width: 767.98px) {
-
 	.has-background.textbalken.links-zwei {
 		left: 2.5em;
 	}
 }
 
+.wp-block-columns.no-gap.is-layout-flex {
+	gap: 0;
+}
+
+.wp-block-columns .wp-block-column p, .wp-block-columns .wp-block-column ul {
+	padding: 0 1em;
+}
+
+.wp-block-columns .wp-block-column p.textbalken, .wp-block-columns .wp-block-column ul.textbalken {
+	padding: 0 0.5em;
+}
+
 .stoerer {
 	width: 200px;
 	height: 200px;

diff --git a/sass/_colors.scss b/sass/_colors.scss
@@ -13,15 +13,15 @@
 
 @each $name, $code in $custom-colors {
     .has-#{$name}-color {
-        color: $code !important;
+        color: $code;
     }
 
     .has-#{$name}-background-color {
-        background-color: $code !important;
+        background-color: $code;
     }
 
     .has-#{$name}-hover-background-color:hover {
-        background-color: $code !important;
+        background-color: $code;
     }
 }
 

diff --git a/sass/_typography.scss b/sass/_typography.scss
@@ -12,6 +12,11 @@ h6,
 .h6 {
 
     word-break: break-word;
+
+    &.textbalken {
+        margin-bottom: 0;
+        padding: 0 1em;
+    }
 }
 
 .roofline {
@@ -165,43 +170,27 @@ h6,
     width: fit-content;
     line-height: 150%;
     position: relative;
-    padding: 0;
+    text-transform: uppercase;
 
     @include themed() {
         font-family: t("headingFont");
     }
 
-    &.has-text-align-center {
-        margin: auto;
-    }
-
-    &::after {
-        background: inherit;
-        content: "";
-        position: absolute;
-        top: 0;
-        right: -20px;
-        bottom: 0;
-        left: 0;
-        z-index: -1;
-        transform: skew(-12deg);
-    }
-
     &::before {
         background: inherit;
         content: "";
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
-        left: -20px;
+        left: -9px;
         z-index: -1;
         transform: skew(-12deg);
+        transform-origin: bottom;
     }
 
     &.links-eins {
         left: 1em;
-        margin-top: -0.5rem;
 
         @include media-breakpoint-down(md) {
             left: 0.5em;
@@ -210,12 +199,12 @@ h6,
 
     &.links-zwei {
         left: 3em;
-        margin-top: -0.5rem;
 
         @include media-breakpoint-down(md) {
             left: 2.5em;
         }
     }
+
 }
 
 .stoerer {
@@ -249,4 +238,3 @@ h6,
         top: 2rem;
     }
 }
-
diff --git a/sass/wp-blocks/column.scss b/sass/wp-blocks/column.scss
@@ -1,22 +1,41 @@
 .wp-block-columns {
     margin-bottom: 0;
-}
 
-.wp-block-column {
-    margin-bottom: 50px;
-}
+    .wp-block-column {
+        margin-bottom: 50px;
 
-:where(.wp-block-columns.no-gap.is-layout-flex) {
-    gap: 0 !important;
-}
+        .wp-block-group {
+            padding: 0;
+        }
+
+        .wp-block-table {
+
+            td,
+            th {
+                padding: 0.5em 1em;
+            }
+        }
+
+        p,
+        ul {
+            padding: 0 1em;
+
+            &.textbalken {
+                padding: 0 0.5em;
+            }
+        }
 
-.wp-block-column {
+        img {
+            width: 100%;
+            object-fit: cover;
+            border-radius: $border-radius;
+        }
+    }
 
-    img {
-        width: 100%;
-        object-fit: cover;
-        border-radius: $border-radius;
+    &.no-gap.is-layout-flex {
+        gap: 0;
     }
+
 }
 
 @include media-breakpoint-up(sm) {

diff --git a/sass/wp-blocks/group.scss b/sass/wp-blocks/group.scss
@@ -1,9 +1,12 @@
 .wp-block-group {
 
-    padding: 0;
     position: relative;
 
-    &.has-background {
+    &.is-layout-flex {
+        gap: 0;
+    }
+
+    &.alignfull.has-background {
         width: 100vw;
         display: flex;
         justify-content: center;
@@ -29,6 +32,7 @@
     &__inner-container {
         max-width: map-get($container-max-widths, "xl");
     }
+
 }
 
 .d-flex {

diff --git a/sass/wp-blocks/table.scss b/sass/wp-blocks/table.scss
@@ -1,10 +1,5 @@
 .wp-block-table {
 
-    th,
-    td {
-        padding: 1em 1em 1em 0;
-    }
-
     thead {
 
         tr {