From 82c5457d6d9683f56780966e6494869877cb8862 Mon Sep 17 00:00:00 2001
From: James Hunt <10615884+thetwopct@users.noreply.github.com>
Date: Thu, 13 Jun 2024 22:29:48 +0700
Subject: [PATCH] Add styling to logo

Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com>
---
 .../components/people-item.php                | 50 +++++++++++--------
 .../source/scss/components/_people.scss       | 31 +++++++++---
 2 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/web/wp-content/themes/cncf-twenty-two/components/people-item.php b/web/wp-content/themes/cncf-twenty-two/components/people-item.php
index f865220f9..185acc5d8 100644
--- a/web/wp-content/themes/cncf-twenty-two/components/people-item.php
+++ b/web/wp-content/themes/cncf-twenty-two/components/people-item.php
@@ -10,28 +10,28 @@
 // setup values.
 global $wp;
 global $post;
-$person_id   = get_the_ID();
-$person_slug = $post->post_name;
-$company     = get_post_meta( get_the_ID(), 'lf_person_company', true );
-$company_logo_url = get_post_meta( get_the_ID(), 'lf_person_company_logo_url', true );
+$person_id             = get_the_ID();
+$person_slug           = $post->post_name;
+$company               = get_post_meta( get_the_ID(), 'lf_person_company', true );
+$company_logo_url      = get_post_meta( get_the_ID(), 'lf_person_company_logo_url', true );
 $company_landscape_url = get_post_meta( get_the_ID(), 'lf_person_company_landscape_url', true );
-$pronouns    = ucwords( get_post_meta( get_the_ID(), 'lf_person_pronouns', true ), $separators = " \t\r\n\f\v\\;/" );
-$gb_role     = get_post_meta( get_the_ID(), 'lf_person_gb_role', true );
-$toc_role    = get_post_meta( get_the_ID(), 'lf_person_toc_role', true );
-$tab_role    = get_post_meta( get_the_ID(), 'lf_person_tab_role', true );
-$linkedin    = get_post_meta( get_the_ID(), 'lf_person_linkedin', true );
-$twitter     = get_post_meta( get_the_ID(), 'lf_person_twitter', true );
-$mastodon    = get_post_meta( get_the_ID(), 'lf_person_mastodon', true );
-$github      = get_post_meta( get_the_ID(), 'lf_person_github', true );
-$wechat      = get_post_meta( get_the_ID(), 'lf_person_wechat', true );
-$website     = get_post_meta( get_the_ID(), 'lf_person_website', true );
-$youtube     = get_post_meta( get_the_ID(), 'lf_person_youtube', true );
-$image_url   = get_post_meta( get_the_ID(), 'lf_person_image', true );
-$location    = get_post_meta( get_the_ID(), 'lf_person_location', true );
-$languages   = get_the_terms( get_the_ID(), 'lf-language' );
-$projects    = get_the_terms( get_the_ID(), 'lf-project' );
-$content     = get_the_content();
-$current_url = home_url( 'people/ambassadors' );
+$pronouns              = ucwords( get_post_meta( get_the_ID(), 'lf_person_pronouns', true ), $separators = " \t\r\n\f\v\\;/" );
+$gb_role               = get_post_meta( get_the_ID(), 'lf_person_gb_role', true );
+$toc_role              = get_post_meta( get_the_ID(), 'lf_person_toc_role', true );
+$tab_role              = get_post_meta( get_the_ID(), 'lf_person_tab_role', true );
+$linkedin              = get_post_meta( get_the_ID(), 'lf_person_linkedin', true );
+$twitter               = get_post_meta( get_the_ID(), 'lf_person_twitter', true );
+$mastodon              = get_post_meta( get_the_ID(), 'lf_person_mastodon', true );
+$github                = get_post_meta( get_the_ID(), 'lf_person_github', true );
+$wechat                = get_post_meta( get_the_ID(), 'lf_person_wechat', true );
+$website               = get_post_meta( get_the_ID(), 'lf_person_website', true );
+$youtube               = get_post_meta( get_the_ID(), 'lf_person_youtube', true );
+$image_url             = get_post_meta( get_the_ID(), 'lf_person_image', true );
+$location              = get_post_meta( get_the_ID(), 'lf_person_location', true );
+$languages             = get_the_terms( get_the_ID(), 'lf-language' );
+$projects              = get_the_terms( get_the_ID(), 'lf-project' );
+$content               = get_the_content();
+$current_url           = home_url( 'people/ambassadors' );
 
 $show_modal = ( $args['show_profile'] && strlen( $content ) > 20 ) ? true : false;
 
@@ -105,10 +105,13 @@ class="js-modal button-reset modal-<?php echo esc_html( $person_slug ); ?>">
 		endif;
 
 		if ( $company ) {
+			?>
+<div class="person__company-container">
+			<?php
 			if ( $company_logo_url ) {
 				if ( $company_landscape_url ) {
 					?>
-					<a href="<?php echo esc_url( $company_landscape_url ); ?>">
+					<a class="person__company-logo-link" title="View <?php echo esc_html( $company ); ?> in the CNCF Landscape" href="<?php echo esc_url( $company_landscape_url ); ?>">
 						<img class="person__company-logo" src="<?php echo esc_attr( $company_logo_url ); ?>"
 						alt="Logo of <?php echo esc_html( $company ); ?>">
 					</a>
@@ -124,6 +127,9 @@ class="js-modal button-reset modal-<?php echo esc_html( $person_slug ); ?>">
 				<h4 class="person__company"><?php echo esc_html( $company ); ?></h4>
 				<?php
 			}
+			?>
+		</div>
+			<?php
 		}
 		?>
 
diff --git a/web/wp-content/themes/cncf-twenty-two/source/scss/components/_people.scss b/web/wp-content/themes/cncf-twenty-two/source/scss/components/_people.scss
index 97e56a2e9..c85b598c6 100644
--- a/web/wp-content/themes/cncf-twenty-two/source/scss/components/_people.scss
+++ b/web/wp-content/themes/cncf-twenty-two/source/scss/components/_people.scss
@@ -40,7 +40,6 @@
 			}
 		}
 	}
-
 	&__padding {
 		width: 100%;
 		height: 100%;
@@ -72,23 +71,42 @@
 			}
 		}
 	}
-	&__company, &__role {
+	&__company-container {
 		margin-top: 10px;
 		@media (min-width: 1200px) {
 			margin-top: 16px;
 		}
+
+		.person__company-logo,
+		.person__company-logo-link,
+		.person__company {
+			display: block;
+		}
+
+		.person__company-logo,
+		.person__company-logo-link img {
+			max-height: 80px;
+			width: auto;
+			max-width: 80%;
+		}
+	}
+	&__company {
 		font-size: 16px;
 		line-height: 140%;
 		color: $gray-700;
 	}
-
 	&__role {
 		font-style: italic;
+		margin-top: 10px;
+		@media (min-width: 1200px) {
+			margin-top: 16px;
+		}
+		font-size: 16px;
+		line-height: 140%;
+		color: $gray-700;
 	}
-
 	&__social {
 		margin-top: auto;
-
 		a {
 			display: inline-block;
 			&:hover {
@@ -97,13 +115,11 @@
 				}
 			}
 		}
-
 		svg {
 			height: 30px;
 			width: auto;
 			color: $black;
 		}
-
 		&-margin {
 			margin-top: 40px;
 			> *:not(:last-child) {
@@ -111,7 +127,6 @@
 			}
 		}
 	}
-
 	&__content {
 		margin-top: 30px;
 	}