Skip to content

Commit

Permalink
Update editor CSS to show almost the same on editor and frontend (#672)
Browse files Browse the repository at this point in the history 
* Show styled layout in backend editor

* Fix documentation linked image in footer

* Fix padding of paragraphs in columns

* Update editor CSS to show almost the same on editor and frontend

* Update templates for startseite and kandidierende
  • Loading branch information
@albig
albig committed Jul 17, 2024
1 parent 392ed85 commit 9cd717e
Show file tree
Hide file tree
Showing 11 changed files with 234 additions and 151 deletions.
98 changes: 82 additions & 16 deletions assets/css/editor-style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,12 +117,15 @@
border-radius: 15px;
}

.editor-styles-wrapper .wp-block-button__link {
border-radius: 0 !important;
.wp-block-button__link {
font-family: "PTSans";
background-color: #008939 !important;
background-color: #008939;
color: #fff;
text-transform: uppercase;
font-size: 1rem;
border-radius: 3px;
}

.wp-block-pullquote{
border-top: 0;
border-bottom: 0;
Expand Down Expand Up @@ -229,6 +232,11 @@
}
}

.styled-layout .wp-block-group {
padding-top: 100px;
padding-bottom: 100px;
}

/* Main column width */
.wp-block {
max-width: 860px;
Expand All @@ -244,18 +252,18 @@
max-width: none;
}

.same-height .wp-block-column .wp-block-image img {
max-height: 200px;
}

@media (min-width: 1200px) {
.same-height .wp-block-column img {
.same-height .wp-block-column .wp-block-image img {
max-height: 230px;
}
}

@media (min-width: 576px) {
.same-height .wp-block-column img {
max-height: 200px;
.wp-block-column {
margin-bottom: 0;
}
}

.wp-block-column img {
width: 100%;
object-fit: cover;
Expand All @@ -279,12 +287,6 @@ p a {
margin: 3px 0 0 0;
}

.notice p {
font-size: 90%;
padding: 0;
}


/* customize RSS block */
.wp-block-rss {
padding: unset;
Expand Down Expand Up @@ -459,3 +461,67 @@ p a {
top: 2rem;
}
}

/* styled layout */
.styled-layout .wp-block-group {
padding-top: 100px;
padding-bottom: 100px;
}

@media (max-width: 767.98px) {
.styled-layout .wp-block-group {
padding-top: 50px;
padding-bottom: 50px;
}
}

.styled-layout .wp-block-group.wp-block-group-is-layout-flow > h2, .styled-layout .wp-block-group.wp-block-group-is-layout-flow > .h2,
.styled-layout .wp-block-group .wp-block-group__inner-container > h2,
.styled-layout .wp-block-group .wp-block-group__inner-container > .h2 {
margin-bottom: 70px;
}

.styled-layout .site-main {
margin-bottom: 0;
}

/* next-events block */
.wp-block-group {
position: relative;
}
.wp-block-group__inner-container {
max-width: 1200px;
position: relative;
}

.next-events {
background-image: url("../img/sunflower1.jpg");
background-size: cover;
background-position: top;
}
.sunflower-has-background-dim > * {
z-index: 30;
}

.sunflower-has-background-dim::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 20;
opacity: 0.3;
background-color: #000;
}
.wp-block-group.alignfull.has-background {
width: 100vw;
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: 5vw;
padding-right: 5vw;
}
12 changes: 6 additions & 6 deletions functions/block-patterns/elemente/programm.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<!-- wp:group {"align":"wide","backgroundColor":"white"} -->
<div class="wp-block-group alignwide has-white-background-color has-background" id="full-width"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<!-- wp:group {"align":"full","backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-white-background-color has-background"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":337,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://sunflower-theme.de/demo/wp-content/uploads/sites/6/2021/03/jan-huber-4OhFZSAT3sw-unsplash_red-1024x620.jpg" alt="" class="wp-image-337"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"className":"h1"} -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"className":"h1"} -->
<h2 class="wp-block-heading h1">Unser Programm<br>für Musterstadt</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Subheadline Lorem ipsum dolor sit amet. Subheadline Lorem ipsum dolor sit amet.Subheadline Lorem ipsum dolor sit amet.Subheadline Lorem ipsum dolor sit amet.<br><a href="http://localhost/demo/?page_id=56">weiterlesen</a></p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br><a href="http://localhost/demo/?page_id=56">weiterlesen</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
Expand Down
12 changes: 4 additions & 8 deletions functions/block-patterns/elemente/themen.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!-- wp:group {"backgroundColor":"white","className":"same-height"} -->
<div class="wp-block-group same-height has-white-background-color has-background"><!-- wp:heading {"textAlign":"center","className":"h1"} -->
<!-- wp:group {"align":"wide","className":"same-height","backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide same-height has-white-background-color has-background"><!-- wp:heading {"textAlign":"center","className":"h1"} -->
<h2 class="wp-block-heading has-text-align-center h1">Unsere Themen</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":116,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-style-default"><img src="https://sunflower-theme.de/demo/wp-content/uploads/sites/6/2021/01/shed-bicycle-bike-old-wooden-shack-336505-1024x680.jpg" alt="Shed Bicycle Bike Old Wooden Shack - Free-Photos / Pixabay" class="wp-image-116"/></figure>
<!-- /wp:image -->
Expand All @@ -17,10 +17,6 @@ <h4 class="wp-block-heading h2 mt-4">Verkehr</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://sunflower-theme.de/demo/category/aktuelles/">Mehr erfahren</a></div>
Expand Down
10 changes: 5 additions & 5 deletions functions/block-patterns/elemente/werde-aktiv.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- wp:group {"style":{"color":{"text":"#ffffff","background":"#163c29"}}} -->
<div class="wp-block-group has-text-color has-background" style="color:#ffffff;background-color:#163c29"><!-- wp:heading {"textAlign":"center","className":"h1"} -->
<!-- wp:group {"align":"full","style":{"color":{"text":"#ffffff","background":"#163c29"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:#ffffff;background-color:#163c29"><!-- wp:heading {"textAlign":"center","className":"h1"} -->
<h2 class="wp-block-heading has-text-align-center h1">Werde aktiv</h2>
<!-- /wp:heading -->

Expand All @@ -9,15 +9,15 @@ <h2 class="wp-block-heading has-text-align-center h1">Werde aktiv</h2>

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://sunflower-theme.de/demo/sunflower_event/" rel="">Termine</a></div>
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="?post_type=sunflower_event" rel="">Termine</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://sunflower-theme.de/demo/kontakt/">Spenden</a></div>
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="spenden">Spenden</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://sunflower-theme.de/demo/kontakt/">Mitglied werden</a></div>
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="/kontakt/">Mitglied werden</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->
Loading

0 comments on commit 9cd717e

Please sign in to comment.