From bf7fdf79277eb967b8627f20be789d6f00b48e6d Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 28 Oct 2019 10:33:57 -0400 Subject: [PATCH] Update styles --- .../css/components/_components.scss | 1 + .../css/components/_entry-content.scss | 5 ++ .../css/components/_pledge-contributors.scss | 52 +++++++++++++++++++ .../css/components/_pledge-list.scss | 7 ++- .../css/components/_pledge-single.scss | 49 +++++++++++++++++ .../css/components/_site-content.scss | 2 +- themes/wporg-5ftf/css/objects/_pledge.scss | 26 ++-------- themes/wporg-5ftf/single-5ftf_pledge.php | 30 ++++++----- 8 files changed, 136 insertions(+), 36 deletions(-) create mode 100644 themes/wporg-5ftf/css/components/_pledge-contributors.scss diff --git a/themes/wporg-5ftf/css/components/_components.scss b/themes/wporg-5ftf/css/components/_components.scss index 44ad90d..32b5dce 100644 --- a/themes/wporg-5ftf/css/components/_components.scss +++ b/themes/wporg-5ftf/css/components/_components.scss @@ -23,6 +23,7 @@ @import "archive"; @import "entry-content"; @import "page"; +@import "pledge-contributors"; @import "pledge-list"; @import "pledge-single"; @import "site-content"; diff --git a/themes/wporg-5ftf/css/components/_entry-content.scss b/themes/wporg-5ftf/css/components/_entry-content.scss index 81743c9..76bb477 100644 --- a/themes/wporg-5ftf/css/components/_entry-content.scss +++ b/themes/wporg-5ftf/css/components/_entry-content.scss @@ -8,8 +8,13 @@ } h2 { + margin-top: ms(10); font-size: ms( 2 ); font-weight: 400; color: $color__text-heading; } + + > :first-child { + margin-top: 0; + } } diff --git a/themes/wporg-5ftf/css/components/_pledge-contributors.scss b/themes/wporg-5ftf/css/components/_pledge-contributors.scss new file mode 100644 index 0000000..f740d74 --- /dev/null +++ b/themes/wporg-5ftf/css/components/_pledge-contributors.scss @@ -0,0 +1,52 @@ +.pledge-contributors { + + h3 { + margin-top: 0; + font-size: ms(-1); + color: $color__text-lighter; + } + + .pledge-contributor__avatar { + display: inline-block; + background: $color-gray-light-700; + + img { + vertical-align: middle; + } + } + + &.has-contrib-names { + display: flex; + flex-wrap: wrap; + margin: ms(2) 0; + list-style: none; + justify-content: space-between; + + li { + margin: 0 auto 40px; + width: calc( 50% - 20px ); + + @include breakpoint( $breakpoint-small ) { + width: calc( 33% - 48px ); + min-width: 170px; + } + } + + li:first-child:last-child { + width: 100%; + + a { + max-width: 280px; + } + } + + .pledge-contributor__avatar { + margin-bottom: 20px; + } + + .pledge-contributor__name { + display: block; + text-align: center; + } + } +} diff --git a/themes/wporg-5ftf/css/components/_pledge-list.scss b/themes/wporg-5ftf/css/components/_pledge-list.scss index 82e440d..a7881d4 100644 --- a/themes/wporg-5ftf/css/components/_pledge-list.scss +++ b/themes/wporg-5ftf/css/components/_pledge-list.scss @@ -45,7 +45,7 @@ body.archive.post-type-archive-5ftf_pledge { } } } - + .page-header-controls { font-size: ms(-2); @@ -78,4 +78,9 @@ body.archive.post-type-archive-5ftf_pledge { grid-row: 2; } } + + .entry-title { + font-size: ms(2); + font-weight: 400; + } } diff --git a/themes/wporg-5ftf/css/components/_pledge-single.scss b/themes/wporg-5ftf/css/components/_pledge-single.scss index 91d0c12..d146f95 100644 --- a/themes/wporg-5ftf/css/components/_pledge-single.scss +++ b/themes/wporg-5ftf/css/components/_pledge-single.scss @@ -5,4 +5,53 @@ body.single.single-5ftf_pledge { padding: 0 10px; max-width: $size__site-main; } + + .entry-header { + margin: ms(12) 0; + padding-bottom: ms(4); + border-bottom: 1px solid $color-gray-light-500; + + @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); + } + } + } + + .entry-title { + margin-bottom: 0; + } + + .entry-image__logo { + background: transparent; + } + + .pledge-company-description { + max-width: $size__content-width; + } + + .team-grid { + margin-top: ms(2); + } + + .entry-footer { + margin-top: ms(2); + border-top: 1px solid $color-gray-light-500; + padding-top: ms(2); + } } diff --git a/themes/wporg-5ftf/css/components/_site-content.scss b/themes/wporg-5ftf/css/components/_site-content.scss index 40c8970..5e71f49 100644 --- a/themes/wporg-5ftf/css/components/_site-content.scss +++ b/themes/wporg-5ftf/css/components/_site-content.scss @@ -6,7 +6,7 @@ padding: 0; .site-main { - margin: 0 auto; + margin: 0 auto ms(8); padding: 0 ms( 2 ); max-width: calc( #{ $size__content-width } + #{ ms( 2 ) * 2 } ); } diff --git a/themes/wporg-5ftf/css/objects/_pledge.scss b/themes/wporg-5ftf/css/objects/_pledge.scss index e6d8abe..207265b 100644 --- a/themes/wporg-5ftf/css/objects/_pledge.scss +++ b/themes/wporg-5ftf/css/objects/_pledge.scss @@ -1,5 +1,4 @@ article.type-5ftf_pledge { - /* Styles */ .entry-image__placeholder { background: $color-gray-light-100; @@ -21,33 +20,16 @@ article.type-5ftf_pledge { } } + .entry-header a { + text-decoration: underline; + } + .entry-title { margin-top: 0; - font-size: ms(2); - font-weight: 400; - - a { - text-decoration: underline; - } } .entry-content { font-size: ms(-1); color: $color__text-darker; } - - .pledge-contributors h3 { - margin-top: 0; - font-size: ms(-1); - color: $color__text-lighter; - } - - .pledge-contributor__avatar { - display: inline-block; - background: $color-gray-light-700; - - img { - vertical-align: middle; - } - } } diff --git a/themes/wporg-5ftf/single-5ftf_pledge.php b/themes/wporg-5ftf/single-5ftf_pledge.php index 97b70e2..d43ff34 100644 --- a/themes/wporg-5ftf/single-5ftf_pledge.php +++ b/themes/wporg-5ftf/single-5ftf_pledge.php @@ -5,6 +5,8 @@ use WordPressDotOrg\FiveForTheFuture\Contributor; use WordPressDotOrg\FiveForTheFuture\XProfile; use WP_Post; +use const WordPressDotOrg\FiveForTheFuture\PledgeMeta\META_PREFIX; + $contribution_data = XProfile\get_aggregate_contributor_data_for_pledge( get_the_ID() ); $contributors = Contributor\get_contributor_user_objects( @@ -22,13 +24,13 @@ get_header(); ?>
>
-
- ', '' ); ?> - +
+ ', '' ); ?> + %1$s', - esc_url( $post->{'5ftf_org-url'} ) + esc_url( $post->{ META_PREFIX . 'org-url' } ) ); ?> @@ -45,12 +47,14 @@ get_header(); ?>
-

+

- {'5ftf_org-description'} ) ); ?> +
+ { META_PREFIX . 'org-description' } ) ); ?> +
-

+

-

+

-
    +
      -
    • - user_email, 280 ); ?> +
    • + + user_email, 280 ); ?> + %2$s', + '%2$s', sprintf( 'https://profiles.wordpress.org/%s/', sanitize_key( $contributor->user_login ) // phpcs:ignore WordPress.Security.EscapeOutput -- sanitize_key will catch any security issues.