Optimize textbalken for kandidierenden page (#655)

verdigado · Jul 12, 2024 · 1f1c5e1 · 1f1c5e1
1 parent 11d6959
commit 1f1c5e1
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 {