From a14fc52a1bdd2ed85f7b60e8e5eff1ded87f0c76 Mon Sep 17 00:00:00 2001
From: Matthew Bernhardt <mjbernha@mit.edu>
Date: Wed, 3 Jan 2024 16:37:11 -0500
Subject: [PATCH] Remove social icons from news header; refactor CSS

** 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.
---
 web/app/themes/mitlib-news/inc/social.php | 25 ++++++-----------
 web/app/themes/mitlib-news/style.css      | 34 ++++++++---------------
 2 files changed, 19 insertions(+), 40 deletions(-)

diff --git a/web/app/themes/mitlib-news/inc/social.php b/web/app/themes/mitlib-news/inc/social.php
index eef6d96e..24e353c7 100644
--- a/web/app/themes/mitlib-news/inc/social.php
+++ b/web/app/themes/mitlib-news/inc/social.php
@@ -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>
diff --git a/web/app/themes/mitlib-news/style.css b/web/app/themes/mitlib-news/style.css
index 7dba51fb..9693b0ca 100644
--- a/web/app/themes/mitlib-news/style.css
+++ b/web/app/themes/mitlib-news/style.css
@@ -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
 
@@ -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;
@@ -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;