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

Theme: Initial commit.

Browse source 
This was forked from `pub/wporg-main` and `pub/wporg-plugins`, and then customized.
This commit is contained in:
Ian Dunn 2019-09-24 14:37:41 -07:00
commit de191e098b
No known key found for this signature in database
GPG key ID: 99B971B50343CBCB
38 changed files with 4532 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,150 @@
body.page-about {
overflow-x: hidden;
.entry-header {
padding: ms( 4 ) ms( 1 );
text-align: center;
.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;
}
}
.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( 480px ) {
height: 610px;
.parallelogram {
height: 336px;
padding: 7rem 0;
width: 400px;
}
}
@include breakpoint( 640px ) {
height: 580px;
.parallelogram {
height: 315px;
padding: 5rem 0;
width: 480px;
&:before {
font-size: ms( 14 );
height: 84px;
width: 84px;
}
}
}
@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;
}
}
}