Merge pull request #188 from MITLibraries/uxws-1858

Redesigned "Spotlight" posts to use similar styling to new design system Alerts / SuggestionPanels

Author: djanelle-mit

web/app/themes/mitlib-child/inc/content-front.php

@@ -36,15 +36,16 @@
 			$the_query->the_post();
 			?>
 
-		<div class="excerpt-post">
+		<aside aria-label="Featured content" class="mitlib-spotlight">
 			<?php if ( get_first_post_image() ) : ?>
-			<img class="excerpt-post__fig" src="<?php echo esc_attr( get_first_post_image() ); ?>" width="200" >
+				<img src="<?php echo esc_attr( get_first_post_image() ); ?>">
 			<?php endif; ?>
-			<div class="excerpt-post__body">
-				<h3><a href="<?php echo esc_url( the_permalink() ); ?>"><?php the_title(); ?></a></h3>
+			<div>				
+				<h3><?php the_title(); ?></h3>
 				<?php custom_excerpt( 20, '...' ); ?>
-			</div>
-		</div>
+				<a class="btn btn-secondary" title="Read more about <?php the_title(); ?>" href="<?php echo esc_url( the_permalink() ); ?>">Read more</a>			
+			</div>			
+		</aside>
 
 			<?php
 		endwhile;

web/app/themes/mitlib-child/style.css

@@ -719,7 +719,6 @@ body.childTheme.page-home {
 
 /* ---- Sticky/Post Excerpts + Flexbox Layout---- */
 .wrap-section-hilite,
-.excerpt-post,
 .category-post {
 	display: flex;
 	align-items: flex-start;
@@ -735,42 +734,19 @@ body.childTheme.page-home {
 	background: #e4e4e4;
 }
 
-.excerpt-post {
-	background: #e4e4e4;
-	border: 1px solid #b3b3b3;
-	-webkit-box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.25);
-	-moz-box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.25);
-	box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.25);
-	padding: 25px;
-	margin-bottom: 35px;
-}
-
-.section-hilite-image,
-.excerpt-post__fig {
+.section-hilite-image {
 	margin-right: 25px;
 	position: relative;
 	top: 5px;
 }
 
 .section-hilite,
-.excerpt-post__body,
 .category-post-content {
 	flex:1;
 	font-size: 14px;
 	line-height: 1.5 ;
 }
 
-.excerpt-post .section-hilite h3,
-.excerpt-post .excerpt-post__body h3 {
-	margin-top: 0;
-}
-
-.excerpt-post .excerpt-post__body h3 a {
-	color: #111;
-	font-weight: 600;
-	font-size: 16px;
-}
-
 /* ---- Sidebar ---- */
 .sidebar {
 	float: left;
@@ -1372,18 +1348,10 @@ a.px14 {
 	}
 
 	/* ---- Sticky/Post Excerpts + Flexbox Layout---- */
-	.excerpt-post,
 	.category-post {
 		flex-direction: column;
 	}
 
-	.excerpt-post__fig {
-		margin: 0 auto;
-		margin-bottom: 25px;
-		min-width: 100%;
-		max-width: 100%;
-	}
-
 	.staff-widget .textwidget {
 		display: flex;
 		align-items: flex-start;

web/app/themes/mitlib-parent/css/scss/modules/_colors.scss

@@ -149,6 +149,7 @@ $color-guides-experts: $magenta-dark;
 // Adding new color values until we can adjust the global variables above
 $info-blue: #007499;
 $success-green: #009900;
+$spotlight-purple: #990099;
 
 $info-border-color: $info-blue;
 $info-icon-color: $info-blue;
@@ -160,4 +161,6 @@ $danger-border-color: $red;
 $danger-icon-color: $red;
 
 $success-border-color: $success-green;
-$success-icon-color: $success-green;
+$success-icon-color: $success-green;
+
+$spotlight-border-color: $spotlight-purple;

web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss

@@ -98,13 +98,13 @@
 	}
 }
 
-.mitlib-alert {
+.mitlib-alert, .mitlib-spotlight {
 	border: 4px solid $info-border-color;
 	margin-bottom: 20px;
 	padding: 16px;
 	display: flex;
 
-	i  {
+	> i  {
 		margin-right: 12px;
 
 		&:before{
@@ -124,14 +124,13 @@
 	}
 
 	div > h3 {
-		font-weight: 700;
+		font-weight: 600;
 		margin-top: 2px;
+		font-size: 1.25rem;
 	}
 
 	p {
-		margin-bottom: 16px;
-
-		&:last-of-type {margin-bottom: 0 !important;}
+		margin-bottom: 16px;		
 	}
 
 	.btn {
@@ -174,4 +173,24 @@
 			content: "\f00c";
 		}
 	}
+}
+
+.mitlib-alert {
+	p:last-of-type {margin-bottom: 0 !important;}
+}
+
+.mitlib-spotlight {
+	border-color: $spotlight-border-color;
+	column-gap: 24px;
+
+	img {
+		width: 100%;
+		max-width: 170px;
+		min-width: 100px;
+		height: 100%;
+	}
+
+	p {
+		padding-bottom: 4px;
+	}
 }

web/app/themes/mitlib-parent/style.css

@@ -1,7 +1,7 @@
 /*
 Theme Name: MITlib Parent
 Author: MIT Libraries
-Version: 0.7
+Version: 0.8
 Description: The parent theme for the MIT Libraries' Pentagram-designed identity.
 
 */