Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 1, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2fa0c77
Add new spotlight flavor of alert. Updated colors and implmemented in…
djanelle-mit Sep 24, 2025
2b6e9b1
Updated max width for images in spotlights
djanelle-mit Sep 24, 2025
08bc801
Add ARIA label to button and tweak image size
djanelle-mit Sep 24, 2025
2343827
Remove link around spotlight post titles
djanelle-mit Sep 24, 2025
eb495af
Update from aria-label to title attribute for button
djanelle-mit Sep 24, 2025
8fb036f
Incremented the version for the parent theme styling
djanelle-mit Sep 25, 2025
bf679e2
Removed unused style rules for old spotlight feature
djanelle-mit Sep 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions web/app/themes/mitlib-child/inc/content-front.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" >
Copy link
Member

@matt-bernhardt matt-bernhardt Sep 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like refactoring this template to remove the classes excerpt-post__fig and excerpt-post__body will orphan some styles in the stylesheet. It may also orphan the entire excerpt-post class, but that isn't as clear to me. It isn't entirely clean, as some rules are also applied to a section-hilite class (that seems to be already abandoned, or at least I don't see it referenced in any of our templates - maybe it's produced by WordPress itself somehow).

Is it worth cleaning out references to these classes from the stylesheet (lines 722, 738-772, and 1375-1885) along with this change? Or would it be better to keep those in place just in case something references them from plugins or whatnot?

I do see a pair of templates from the news theme which still use excerpt-post as a class name, but IIRC the news theme and child themes are siblings - neither of them inherits from the other.

Copy link
Author

@djanelle-mit djanelle-mit Sep 29, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@matt-bernhardt It looks like the .excerpt-post and their respective __ classes aren't used anywhere now. I tried removing the hilite related classes but it seems to affect the Image + Link pairings below the spotlight on the Scholarly page, so left those rules completely to avoid any effects downstream. Tagging you for re-review just to double-check this!

Copy link
Member

@matt-bernhardt matt-bernhardt Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah... we're using those classes in hand-crafted HTML on a page like that. Huh... that's going to make the determination of whether a class is abandoned or not a little harder to determine. We might be able to search an exported database for instances of those class names, but IIRC WordPress keeps some prior versions of content around depending on the retention settings of each site, so even if we find content that uses those class values we'd need to dig deeper to see if we're finding current content or former versions of pages and articles.

There's probably a way to write a SQL query that will restrict only to current versions of site content, but I write the query off the top of my head.

In terms of this PR, this all looks fine to me now. Thanks for digging in on this.

<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;
Expand Down
34 changes: 1 addition & 33 deletions web/app/themes/mitlib-child/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
5 changes: 4 additions & 1 deletion web/app/themes/mitlib-parent/css/scss/modules/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
31 changes: 25 additions & 6 deletions web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
}
2 changes: 1 addition & 1 deletion web/app/themes/mitlib-parent/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

*/
Expand Down