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-13 13:55:44 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move blocks and block styles to the correct places in the CSS structure

Browse source 
There should be no visual changes
This commit is contained in:
Kelly Dwan 2019-10-02 15:54:45 -04:00
parent ef8c78f4f3
commit e6b3fbd989
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
10 changed files with 52 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

68
themes/wporg-5ftf/css/utilities/_group.scss Normal file
View file

@ -0,0 +1,68 @@
.parallelogram-container {
width: 80%;
margin-left: 10%;
margin-right: 10%;
> .wp-block-group__inner-container {
@include breakpoint($breakpoint-tablet) {
display: flex;
}
}
.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 {
color: #fff;
margin: 0 auto;
opacity: 0.9;
padding: 4.7rem 0;
text-align: center;
// probably need to remove that negative margin from the has-background block? it's shouldn't apply here really, so need to rethink why have it and best way to address that
// or maybe just refine how it's implemented, like making sure that have padding to replace margin, and no position:relative crap
@include breakpoint( $breakpoint-tablet ) {
transform: skew(-15deg);
&:first-child {
position: relative;
top: 40px;
z-index: 2;
}
&:last-child {
z-index: 1;
padding-left: 40px;
// todo the first and second child aren't overlapping as much as they used to, what changed?
}
&:before {
font-size: ms(12);
height: 64px;
position: relative;
right: 1rem;
transform: skew(15deg);
width: 64px;
}
> * {
transform: skew(15deg);
}
> .wp-block-group__inner-container {
width: 60%;
margin: 0 auto;
}
}
}

8
themes/wporg-5ftf/css/utilities/_paragraph.scss Normal file
View file

@ -0,0 +1,8 @@
p.is-style-wporg-tldr {
color: $color__text-heading;
font-style: italic;
@include breakpoint( $breakpoint-tablet ) {
text-align: center;
}
}

2
themes/wporg-5ftf/css/utilities/_utilities.scss
View file

@ -0,0 +1,2 @@
@import "group";
@import "paragraph";