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

Theme: Add WIP styles for About page.

Browse source
This commit is contained in:
Ian Dunn 2019-09-26 15:34:24 -07:00
parent 7b45a8c1c1
commit a197adc6e2
No known key found for this signature in database
GPG key ID: 99B971B50343CBCB
13 changed files with 285 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

16
themes/wporg-5ftf/css/objects/_buttons.scss
View file

@ -1,3 +1,17 @@
input[type="submit"] {
@extend .button;
}
}
.wp-block-button {
@extend .button;
display: inline-block;
height: auto;
margin-bottom: 1rem;
}
.wp-block-button__link {
background: none;
color: $color__link-button;
text-decoration: none;
}

73
themes/wporg-5ftf/css/objects/_parallelogram.scss
View file

@ -1,23 +1,68 @@
.parallelogram {
.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;
display: block;
margin: 0 auto;
opacity: 0.9;
padding: 4.7rem 0;
position: absolute;
text-align: center;
transform: skew( -15deg) ;
&:before {
font-size: ms( 12 );
height: 64px;
position: relative;
right: 1rem;
transform: skew( 15deg );
width: 64px;
}
// 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
> * {
transform: skew( 15deg );
@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;
}
}
}

2
themes/wporg-5ftf/css/objects/_site-header.scss
View file

@ -22,7 +22,7 @@
.site-description {
color: #fff;
max-width: ms( 32 );
max-width: 100%;
padding: 11px 0;
}
}