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

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

View file

@ -0,0 +1,25 @@
// Defined here so we can use `ms`.
$size__spacing-unit: ms( 4 );
.wp-block-image {
// this shouldn't apply to all images, just .alignfull ?
// but then the design calls for the images to be allignful on mobile, but not on desktop, so.... wtf?
// need a new alignment setting that says "alignfull-on-mobile-but-constrain-on-desktop" ?
// maybe this impacts how you do the has-background pullquote and other paragraphs, too, since they're also aligned fully on mobile.
/* Make it fill 100% of the screen */
position: relative;
left: -#{ $size__spacing-unit };
width: calc( 100% + ( 2 * #{ $size__spacing-unit } ) );
max-width: calc( 100% + ( 2 * #{ $size__spacing-unit} ) );
clear: both;
@include breakpoint( $breakpoint-desktop ) {
position: inherit;
left: inherit;
width: inherit;
max-width: inherit;
clear: inherit;
}
}

View file

@ -7,5 +7,5 @@
@import "../../../pub/wporg/css/objects/links";
@import "../../../pub/wporg/css/objects/notices";
@import "buttons";
@import "parallelogram";
@import "image";
@import "site-header";

View file

@ -1,68 +0,0 @@
.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;
}
}
}