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 02:45:43 +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

167
themes/wporg-5ftf/css/components/_about.scss
View file

@ -1,150 +1,49 @@
body.page-about {
overflow-x: hidden;
body.page-about .entry-content {
.wp-block-pullquote.is-style-solid-color {
@extend .has-wporg-blue-background-color;
.entry-header {
padding: ms( 4 ) ms( 1 );
text-align: center;
blockquote {
@extend .has-wporg-white-color;
.entry-title {
font-size: ms( 12 );
line-height: 1;
margin: 2rem auto 1rem;
@include breakpoint( 0, 480px ) {
font-size: ms( 10 );
}
}
.entry-description {
color: rgba( 255, 255, 255, 0.8 );
font-size: ms( 2 );
font-weight: 300;
margin: -.4rem auto 2rem;
max-width: 100%;
border: none;
}
}
.shapes {
height: 480px;
margin: 4rem 0;
position: relative;
.parallelogram {
height: 260px;
width: 310px;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
&.technology {
background-color: darken( #0073aa, 2% );
top: 0;
left: 0;
z-index: 1;
&:hover,
&:focus,
&:active {
background-color: darken( #0073aa, 12% );;
}
}
&.community {
background-color: #67598e;
right: 0;
bottom: 0;
&:hover,
&:focus,
&:active {
background-color: darken( #67598e, 10% );
}
}
h3, p {
margin: 0;
transform: skew( 15deg );
}
@include breakpoint( $breakpoint-tablet ) {
> p,
> h1,
> h2,
> h3,
> h4,
> h5,
> h6,
> .wp-block-quote,
> .wp-block-media-text,
> .wp-block-button {
margin-left: 40%;
}
@include breakpoint( 480px ) {
height: 610px;
.parallelogram {
height: 336px;
padding: 7rem 0;
width: 400px;
}
p.is-style-wporg-tldr {
margin-left: auto;
}
@include breakpoint( 640px ) {
height: 580px;
.wp-block-pullquote.is-style-solid-color {
@extend .is-style-default !optional;
//@extend .has-wporg-white-background-color; // todo compile error
background-color: white !important; // todo why does this need !important? it shouldn't
.parallelogram {
height: 315px;
padding: 5rem 0;
width: 480px;
position: absolute;
top: 800px;
left: 0;
width: 40%;
&:before {
font-size: ms( 14 );
height: 84px;
width: 84px;
}
blockquote {
color: $color__text-heading !important; // todo why does this need !important?
border-left: none;
}
}
@include breakpoint( 768px ) {
height: 323px;
margin: 4rem 0;
.parallelogram {
height: 282px;
padding: 4rem 0;
width: 430px;
&.technology {
left: auto;
right: 45%;
top: 40px;
}
&.community {
bottom: auto;
left: 45%;
}
}
}
@include breakpoint( 1024px ) {
height: 420px;
.parallelogram {
height: 380px;
padding: 6rem 0;
width: 580px;
&.technology {
right: 43%;
}
&.community {
left: 43%;
}
&:before {
font-size: ms( 16 );
height: 108px;
width: 108px;
}
}
}
}
.areas {
h3 {
@extend h4;
// todo works in front end, but need it in editor-styles too. maybe b/c targeting body.page-about?
}
}
}