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

Single Pledge: Add intro message to pledges for clarity.

Browse source
This commit is contained in:
Ian Dunn 2021-04-30 12:55:55 -07:00
parent 325a6d71e2
commit 7174ae2fb6
No known key found for this signature in database
GPG key ID: 99B971B50343CBCB
16 changed files with 222 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

1
themes/wporg-5ftf/css/components/_my-pledges.scss
View file

@ -2,7 +2,6 @@ body.page.page-my-pledges {
// Expand archive content area to full-width of header.
.site-content .site-main {
padding: 0 10px;
max-width: $size__site-main;
}

4
themes/wporg-5ftf/css/components/_page.scss
View file

@ -14,10 +14,10 @@ body.page:not(.home) {
}
.entry-content {
padding: 0 0 ms( 10 );
padding-top: 0;
}
.entry-footer {
padding: ms( 10 ) 0;
padding: ms( 10 ) ms(2);
}
}

60
themes/wporg-5ftf/css/components/_pledge-contributors.scss
View file

@ -1,4 +1,8 @@
.pledge-contributors {
display: flex;
flex-wrap: wrap;
list-style: none;
margin-left: 0;
h3 {
margin-top: 0;
@ -6,60 +10,20 @@
color: $color__text-lighter;
}
li {
width: 100px;
height: 100px;
margin: 0 1em 1em 0;
}
.pledge-contributor__avatar {
display: inline-block;
background: $color-gray-light-700;
margin-right: 4px;
margin-bottom: 4px;
border-radius: $avatar__border-radius;
img {
vertical-align: middle;
}
}
&.has-contrib-names {
margin: ms(2) 0;
list-style: none;
li {
display: inline-block;
margin: 0 20px 40px 0;
width: calc( 50% - 15px );
&:nth-of-type(2n) {
margin-right: 0;
}
@include breakpoint( $breakpoint-small ) {
margin-right: 48px;
width: calc( 33% - 33px );
&:nth-of-type(2n) {
margin-right: 48px;
}
&:nth-of-type(3n) {
margin-right: 0;
}
}
}
li:first-child:last-child {
width: 100%;
margin-right: 0;
a {
max-width: 280px;
}
}
.pledge-contributor__avatar {
margin-bottom: 20px;
}
.pledge-contributor__name {
display: block;
text-align: center;
border-radius: $avatar__border-radius;
}
}
}

19
themes/wporg-5ftf/css/components/_pledge-list.scss
View file

@ -3,7 +3,6 @@ body.search.search-results {
// Expand archive content area to full-width of header.
.site-content .site-main {
padding: 0 10px;
max-width: $size__site-main;
}
@ -82,7 +81,7 @@ body.search.search-results {
grid-row: 2;
}
}
@include breakpoint( $breakpoint-tablet ) {
grid-template-columns: 330px auto;
}
@ -92,4 +91,20 @@ body.search.search-results {
font-size: ms(2);
font-weight: 400;
}
.pledge-contributors {
li {
width: 40px;
height: 40px;
margin: 0 5px 5px 0;
}
.pledge-contributor__avatar {
border-radius: calc( #{$avatar__border-radius} / 3.75 );
img {
border-radius: calc( #{$avatar__border-radius} / 3.75 );
}
}
}
}

82
themes/wporg-5ftf/css/components/_pledge-single.scss
View file

@ -2,33 +2,38 @@ body.single.single-5ftf_pledge {
// Expand archive content area to full-width of header.
.site-content .site-main {
padding: 0 10px;
max-width: $size__site-main;
}
.entry-header {
margin: ms(12) 0;
margin: 0;
padding-bottom: ms(4);
border-bottom: 1px solid $color-gray-light-500;
text-align: center;
@include breakpoint( $breakpoint-mobile ) {
display: flex;
align-items: center;
> div {
flex: auto;
}
.entry-image {
max-width: 330px;
}
}
@include breakpoint( 0, $breakpoint-mobile ) {
text-align: center;
}
.entry-image {
margin-top: ms(2);
.pledge-introduction {
background-color: $color-gray-light-200;
padding: 1em;
font-size: 1.5em;
p {
max-width: 525px; /* Keep it on two lines, ala https://stackoverflow.com/q/61923996/450127 */
margin: 1em auto;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
@ -46,12 +51,53 @@ body.single.single-5ftf_pledge {
margin-bottom: 0;
}
.entry-image__logo {
background: transparent;
.has-post-thumbnail .pledge-introduction {
padding-bottom: 2em;
}
.pledge-company-description {
max-width: $size__content-width;
.has-post-thumbnail .pledge-company-summary {
position: relative;
top: -30px;
}
.entry-image__logo {
background: transparent;
padding: 0;
img {
background-color: white;
max-width: 330px;
border-radius: 10px;
border: 5px solid white;
}
}
.entry-content {
h2 {
margin-top: 0;
}
@include breakpoint( $breakpoint-tablet ) {
display: grid;
grid-template-areas:
"about contributions"
"contributors contributors"
;
grid-template-columns: calc( 50% - 40px ) calc( 50% - 40px );
grid-gap: 80px;
.pledge-company-description {
grid-area: about;
}
.pledge-company-contributions {
grid-area: contributions;
}
.pledge-company-contributors {
grid-area: contributors;
}
}
}
.team-grid {

4
themes/wporg-5ftf/css/components/_site-content.scss
View file

@ -7,8 +7,8 @@
.site-main {
margin: 0 auto ms(8);
padding: 0 ms( 2 );
padding: 0 ms( 4 );
max-width: calc( #{ $size__content-width } + #{ ms( 2 ) * 2 } );
}
}
}
}

12
themes/wporg-5ftf/css/components/_team-badges.scss
View file

@ -7,13 +7,12 @@
flex-wrap: wrap;
margin: 0;
list-style: none;
li {
display: flex;
align-items: center;
margin: 0 0 1em;
width: 25%;
min-width: 10em;
margin: 0 1em .5em 0;
width: 100%;
}
div.dashicons {
@ -26,9 +25,10 @@
}
}
@include breakpoint( 0, $breakpoint-small ) {
@include breakpoint( 30em ) {
li {
width: 100%;
width: calc( 50% - 1em);
min-width: 10em;
}
}
}