tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-07-14 22:35:45 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use columns block for the parallelogram style (#16)

Browse source 
This avoids the complex mutliply-nested blocks and makes the block style less reliant on a custom class. On mid-sized screens, we switch to plain horizontally-overlapping rectangles, and on small screens we stack the columns, and vertically-overlap.

Also, remove the parallelogram styles from the editor display. The skew and positioning don't work well in the editor context.
This commit is contained in:
Kelly Dwan 2019-10-03 15:09:06 -04:00 • committed by GitHub
parent f8558fe9c2
commit e20a834cb0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 160 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

93
themes/wporg-5ftf/css/style-editor.css
View file

@ -446,52 +446,41 @@ input.download-button.button-hero:active[type="submit"],
background-color: #FFFFFF;
}
.parallelogram-container {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
@media screen and (min-width: 768px) {
.parallelogram-container > .wp-block-group__inner-container {
display: flex;
}
}
.parallelogram-container .wp-block-group__inner-container .is-style-wporg-parallelogram:last-child .wp-block-group__inner-container {
/*
* Adjust for the overlapping parralelograms, so that the text in this one appears to be more aligned to
* its container.
*/
position: relative;
left: 10px;
}
/*
* Not just doing `@extend .parallelogram` b/c want to split between breakpoints, which that doesn't do.
*/
.is-style-wporg-parallelogram {
.is-style-wporg-parallelogram .wp-block-column {
background: black;
color: #fff;
margin: 0 auto;
margin: 0;
opacity: 0.9;
padding: 4.7rem 0;
padding: 4.7rem 3rem;
text-align: center;
mix-blend-mode: multiply;
}
.is-style-wporg-parallelogram .wp-block-column:nth-of-type(2n+1) {
background: #1E8CBE;
}
.is-style-wporg-parallelogram .wp-block-column:nth-of-type(2n) {
background: #826EB4;
}
@media screen and (min-width: 768px) {
.is-style-wporg-parallelogram {
.is-style-wporg-parallelogram .wp-block-column {
transform: skew(-15deg);
}
.is-style-wporg-parallelogram:first-child {
.is-style-wporg-parallelogram .wp-block-column:first-child {
position: relative;
top: 40px;
left: 30px;
z-index: 2;
}
.is-style-wporg-parallelogram:last-child {
.is-style-wporg-parallelogram .wp-block-column:last-child {
position: relative;
z-index: 1;
padding-left: 40px;
right: 30px;
padding-left: 4rem;
}
.is-style-wporg-parallelogram:before {
.is-style-wporg-parallelogram .wp-block-column:before {
font-size: ms(12);
height: 64px;
position: relative;
@ -499,12 +488,27 @@ input.download-button.button-hero:active[type="submit"],
transform: skew(15deg);
width: 64px;
}
.is-style-wporg-parallelogram > * {
.is-style-wporg-parallelogram .wp-block-column > * {
transform: skew(15deg);
}
.is-style-wporg-parallelogram > .wp-block-group__inner-container {
width: 60%;
margin: 0 auto;
}
@media screen and (min-width: 600px) and (max-width: 767px) {
.is-style-wporg-parallelogram .wp-block-column {
padding: 3rem 2rem;
flex-basis: calc(50% + 0.5rem);
}
.is-style-wporg-parallelogram .wp-block-column:nth-of-type(n+2) {
margin-left: -1rem;
}
}
@media screen and (max-width: 599px) {
.is-style-wporg-parallelogram .wp-block-column {
padding: 2rem;
}
.is-style-wporg-parallelogram .wp-block-column:nth-of-type(n+2) {
margin-top: -1rem;
}
}
@ -539,4 +543,21 @@ p.is-style-wporg-tldr {
}
}
@media screen and (min-width: 768px) {
.block-editor-block-list__block-edit .is-style-wporg-parallelogram .wp-block-column {
transform: skew(0);
}
.block-editor-block-list__block-edit .is-style-wporg-parallelogram .wp-block-column:last-child {
position: static;
z-index: auto;
top: auto;
left: auto;
right: auto;
padding-left: 0;
}
.block-editor-block-list__block-edit .is-style-wporg-parallelogram .wp-block-column > * {
transform: skew(0);
}
}
/*# sourceMappingURL=style-editor.css.map */