From 2f74ebc4ef69457b67fddc722845414e2b15a0cd Mon Sep 17 00:00:00 2001 From: Alexander Bigga Date: Fri, 12 Jul 2024 11:14:23 +0200 Subject: [PATCH] Optimize textbalken for kandidierenden page --- assets/css/editor-style.css | 101 ++++++++++++++++++++++-------------- sass/_colors.scss | 6 +-- sass/_typography.scss | 30 ++++------- sass/wp-blocks/column.scss | 43 ++++++++++----- sass/wp-blocks/group.scss | 8 ++- sass/wp-blocks/table.scss | 5 -- src/next-events/render.php | 2 +- 7 files changed, 112 insertions(+), 83 deletions(-) diff --git a/assets/css/editor-style.css b/assets/css/editor-style.css index 0223414c..3950c7a8 100644 --- 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,6 +149,7 @@ h3, .has-huge-font-size { font-size: 45px; line-height: 1.3em; + margin-top: 0; } h2, @@ -158,27 +157,32 @@ h3, .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,18 +338,17 @@ 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; } @@ -343,16 +356,26 @@ p a { .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 index 8885c985..e3dd786b 100644 --- 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 index 08f3be8b..c98b03e0 100644 --- 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,28 +170,12 @@ 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: ""; @@ -194,14 +183,14 @@ h6, 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 index 9734bfc9..bd5a25a6 100644 --- 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 index d7728889..3f3a9217 100644 --- 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 index ecfa555a..e2a984fa 100644 --- 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 { diff --git a/src/next-events/render.php b/src/next-events/render.php index af37216c..734f5543 100644 --- a/src/next-events/render.php +++ b/src/next-events/render.php @@ -17,7 +17,7 @@ } $sunflower_return = sprintf( - '
+ '

%s

%s