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

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 {