Skip to content

Commit

Permalink
Remove social icons from news header; refactor CSS
Browse files Browse the repository at this point in the history
** Why are these changes being introduced:

* We are removing social media icons from across our website. In some
  cases, like the news site header, we are placing a link to a basic
  "Follow us" page that will allow us to more easily manage changes to
  which profiles the Libraries' maintain.

* It turns out that when this area of the news site header is updated,
  some CSS changes are warranted.

** Relevant ticket(s):

* https://mitlibraries.atlassian.net/browse/pw-66

** How does this address that need:

* This replaces the two links to X and Instagram in the News site header
  with a single link named "Follow us".

* The spacing of elements in this list item are updated a bit, in order
  to introduce the pipe element and to ensure proper responsiveness. The
  overall list is no longer floated, but rendered as a flex element.

** Document any side effects to this change:

* The elements in this list, as well as the site name which appears next
  to it, are now given the "nowrap" property, to prevent some awkward
  displays at some screen widths.

* The News theme version is also incremented, following our practice of
  bumping this version to help with CSS cache busting. It should be
  noted that this stylesheet is not compiled by SCSS, but the cache
  busting is still a good thing regardless.
  • Loading branch information
matt-bernhardt committed Jan 4, 2024
1 parent cfb3853 commit a14fc52
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 40 deletions.
25 changes: 8 additions & 17 deletions web/app/themes/mitlib-news/inc/social.php
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,16 @@

?>

<ul class="sIcons hidden-xs anotherMenu clearfix pull-right">
<ul class="sIcons hidden-xs anotherMenu clearfix pull-right flex-container">
<li class="sub soc">
<a title="subscribe" href="/news/subscribe/" >
Subscribe to news
</a>
</li>
<li class="tw soc">
<a title="twitter" href="//twitter.com/mitlibraries" class="twitterLink">
<span class="si_twitter image_on"></span>
<span class="si_twitterBlue image_off"></span>
</a>
</li>
<li class="ig soc">
<a title="Instagram" href="//instagram.com/mitlibraries/">
<span class="si_instagram image_on"></span>
<span class="si_instagramBlue image_off"></span>
</a>
</li>
<li class="sf">
</li>
<li class="follow soc">
<a title="follow" href="/follow">Follow us</a>
</li>
<li class="sf">
<?php get_search_form( 'true' ); ?>
</li>
</ul>
</li>
</ul>
34 changes: 11 additions & 23 deletions web/app/themes/mitlib-news/style.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
Theme Name: MITlib News
Author: MIT Libraries
Version: 0.3.0
Version: 0.4
Description: A child theme of the MIT Libraries' parent, focused on News features and content.
Template: mitlib-parent
Expand Down Expand Up @@ -82,34 +82,21 @@ h3 {
.socialNavMiddle {
padding: 19px !important;
}
ul.anotherMenu {
align-items: baseline;
}
ul.anotherMenu li {
float: left;
white-space: nowrap;
}
li.sub {
margin-right: 13px;
padding-top: 0px;
}
li.fb {
margin-left: 5px;
margin-top: 1px;
margin-right: 5px;
margin-right: 7px;
}
li.tw {
margin-top: 0px;
margin-right: 8px;
li.sub a {
border-right: 1px solid black;
padding-right: 7px;
}
li.ig {
li.follow {
margin-right: 14px;
margin-top: 2px;
}
li.soc {
padding-top: 5px;
}
.image_off, .sIcons li:hover .image_on {
display: none
}
.image_on, .sIcons li:hover .image_off {
display: inline-block
}
ul#menu-subscribe {
float: left;
Expand Down Expand Up @@ -261,6 +248,7 @@ h2.search {
line-height: 1;
margin: 15px 0px;
padding: 0px 0px;
white-space: nowrap;
}
.entry-meta .author, .entry-meta .date-post, .entry-meta .category-post-single {
font-size: 11px;
Expand Down

0 comments on commit a14fc52

Please sign in to comment.