mirror of
https://github.com/WordPress/five-for-the-future.git
synced 2025-07-07 11:15:44 +03:00
Move blocks and block styles to the correct places in the CSS structure
There should be no visual changes
This commit is contained in:
parent
ef8c78f4f3
commit
e6b3fbd989
10 changed files with 52 additions and 45 deletions
25
themes/wporg-5ftf/css/objects/_image.scss
Normal file
25
themes/wporg-5ftf/css/objects/_image.scss
Normal 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;
|
||||
}
|
||||
}
|
|
@ -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";
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue