Update styles for SASS + Bootstrap v4

A couple changes of note: 1. navbar component had a major refactor going from Bootstrap v3 to v4 and there was a lot of customization required to keep working as before 2. col-md- in Bootstrap v3 is the equivalent of col-lg- in Bootstrap v4
blab · Apr 3, 2021 · baa4c79 · baa4c79
1 parent 213b72e
commit baa4c79
Show file tree

Hide file tree

Showing 25 changed files with 226 additions and 641 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,15 +5,15 @@
 	<meta charset="utf-8"/>
 	<title>{{ page.title }}</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	
+
 	<!-- RSS feed -->
 	<link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}/feed.xml">
-	
-    <!-- Customized Bootstrap + Font Awesome + Solarized -->
-    <link href="/css/style.css" rel="stylesheet" media="screen">
+
+  <!-- Customized Bootstrap + Font Awesome + Solarized -->
+  <link href="/css/style.css" rel="stylesheet" media="screen">
 
 	<!-- Favicon -->
-	<link rel="shortcut icon" href="/images/favicon.png"/>	
+	<link rel="shortcut icon" href="/images/favicon.png"/>
 
 	<!-- Typekit -->
 	<script>
@@ -25,8 +25,8 @@
 		h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
 	  })(document);
 	</script>
-		
-	<!-- Google Analytics -->	
+
+	<!-- Google Analytics -->
 	<script>
 		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -37,75 +37,73 @@
 		ga('send', 'pageview');
 
 	</script>
-	
+
 	<!-- jQuery -->
 	<script src="/js/jquery.min.js"></script>
-	
+
 	<!-- Bootstrap -->
-	<script src="/js/transition.js"></script>
-	<script src="/js/collapse.js"></script>
+	<script src="/js/bootstrap.min.js"></script>
 
 </head>
 
 <body>
-	
+
 	<div id="header">
-		<nav class="navbar navbar-default navbar-static-top" role="navigation">	 
-			<div class="container">	
-				<div class="navbar-header">
-					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-element" aria-expanded="false">
-						<span class="sr-only">Toggle navigation</span>
-						<span class="icon-bar"></span>
-						<span class="icon-bar"></span>
-						<span class="icon-bar"></span>
-					</button>
-					{% if page.categories.first != 'home' %}					
-					<object class="logo navbar-brand" data="/images/logo.svg" type="image/svg+xml"></object>
-					<a class="navbar-brand" href="/">bedford lab</a>
-					{% endif %}
-				</div>
-				<div class="collapse navbar-collapse" id="navbar-collapse-element">
-					<ul class="nav navbar-nav navbar-right">
+		<nav class="navbar navbar-expand-md navbar-light bg-navbar">
+			<div class="container">
+				{% if page.categories.first != 'home' %}
+				<a class="navbar-brand" href="/">
+					<img class="logo navbar-brand d-inline-block align-top ml-0 mr-1" src="/images/logo.svg">
+					bedford lab
+				</a>
+				{% else %}
+				<a class="navbar-brand" href="/">
+				</a>
+				{% endif %}
+				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+				<div class="collapse navbar-collapse" id="navbarNav">
+					<ul class="navbar-nav nav-pills ml-auto">
 						{% if page.categories.first == 'blog' %}
-						<li class="active">
+						<li class="nav-link active">
 						{% else %}
-						<li>
+						<li class="nav-link">
 						{% endif %}
-						<a href="/blog/">blog</a>
+						<a class="mx-1" href="/blog/">blog</a>
 						</li>
 						{% if page.categories.first == 'papers' %}
-						<li class="active">
+						<li class="nav-link active">
 						{% else %}
-						<li>
+						<li class="nav-link">
 						{% endif %}
-						<a href="/papers/">papers</a>
+						<a class="mx-1" href="/papers/">papers</a>
 						</li>
 						{% if page.categories.first == 'projects' %}
-						<li class="active">
+						<li class="nav-link active">
 						{% else %}
-						<li>
+						<li class="nav-link">
 						{% endif %}
-						<a href="/projects/">projects</a></li>	  
+						<a class="mx-1" href="/projects/">projects</a></li>
 						{% if page.categories.first == 'team' %}
-						<li class="active">
+						<li class="nav-link active">
 						{% else %}
-						<li>
+						<li class="nav-link">
 						{% endif %}
-						<a href="/team/">team</a></li>	  	  
+						<a class="mx-1" href="/team/">team</a></li>
 					</ul>
 				</div>
 			</div>
-		</nav>	
+		</nav>
 	</div>
-	
-	<div class="container">	
-		
+
+	<div class="container mt-4">
+
 	{{ content }}
-	
+
 	</div>
-	
+
 	<div id="footer"><span style="display:none">foo</span></div>
-		
+
 </body>
 </html>
-
diff --git a/_layouts/error.html b/_layouts/error.html
@@ -3,20 +3,16 @@
 ---
 
 <div class="row">
-	<div class="col-md-2">
+	<div class="col-lg-2">
 	</div>
-	<div class="col-md-8">	
+	<div class="col-lg-8">
 		<div class="bigtitle">
 			{{ page.title }}
 		</div>
 		<div class="bigspacer"></div>
 		<div class="post">
 			{{ content }}
-		</div>	
-	</div>			
-	<div class="col-md-2"></div>
-</div>	
-
-
-
-
+		</div>
+	</div>
+	<div class="col-lg-2"></div>
+</div>
diff --git a/_layouts/member.html b/_layouts/member.html
@@ -5,7 +5,7 @@
 {% assign member = page %}
 
 <div class="row">
-	<div class="col-md-12">
+	<div class="col-lg-12">
 		<div class="media">
 			{% if member.image %}
 			<img class="pull-left pad-right media-object" width=120 src="{{ member.image }}">
@@ -26,7 +26,7 @@
 <div class="bigspacer"></div>
 
 <div class="row">
-	<div class="col-md-3">
+	<div class="col-lg-3">
 		{% if member.cv %}
 		<div class="smallhead">
 			CV
@@ -106,7 +106,7 @@
 		<div class="bigspacer"></div>
 		{% endif %}
 	</div>
-	<div class="col-md-8">
+	<div class="col-lg-8">
 		<div class="post">
 			{{ content }}
 		</div>
@@ -197,5 +197,5 @@
 		{% endif %}
 
 	</div>
-	<div class="col-md-1"></div>
+	<div class="col-lg-1"></div>
 </div>
diff --git a/_layouts/misc.html b/_layouts/misc.html
@@ -3,26 +3,22 @@
 ---
 
 <div class="row">
-	<div class="col-md-12">
+	<div class="col-lg-12">
 		<div class="bigtitle">
 			{{ page.title }}
-		</div>	
+		</div>
 	</div>
-</div>	
+</div>
 
 <div class="bigspacer"></div>
 
 <div class="row">
-	<div class="col-md-2">
+	<div class="col-lg-2">
 	</div>
-	<div class="col-md-8">	
+	<div class="col-lg-8">
 		<div class="post">
 			{{ content }}
-		</div>	
-	</div>			
-	<div class="col-md-2"></div>
-</div>	
-
-
-
-
+		</div>
+	</div>
+	<div class="col-lg-2"></div>
+</div>
diff --git a/_layouts/paper.html b/_layouts/paper.html
@@ -3,7 +3,7 @@
 ---
 
 <div class="row">
-	<div class="col-md-12">
+	<div class="col-lg-12">
 		<div class="media">
 			{% if page.image %}
 			<img class="pull-left pad-right media-object" src="{{ page.image }}">
@@ -26,7 +26,7 @@
 <div class="bigspacer"></div>
 
 <div class="row">
-	<div class="col-md-3">
+	<div class="col-lg-3">
 		<div class="bigspacer"></div>
 		<div class="glyphbox note">
 			{% if page.pdf %}
@@ -75,10 +75,10 @@
 			{% endif %}
 		</div>
 	</div>
-	<div class="col-md-8">
+	<div class="col-lg-8">
 		<div class="post">
 			{{ content }}
 		</div>
 	</div>
-	<div class="col-md-1"></div>
+	<div class="col-lg-1"></div>
 </div>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -4,8 +4,8 @@
 
 <div class="blog-post">
 	<div class="row">
-		<div class="col-md-1"></div>
-		<div class="col-md-10">
+		<div class="col-lg-1"></div>
+		<div class="col-lg-10">
 			<div class="media">
 				<div class="media-body">
 					<div class="title media-heading">
@@ -51,14 +51,14 @@
 				</div>
 			</div>
 		</div>
-		<div class="col-md-1"></div>
+		<div class="col-lg-1"></div>
 	</div>
 
 	<div class="bigspacer"></div>
 
 	<div class="row">
-		<div class="col-md-1"></div>
-		<div class="col-md-10">
+		<div class="col-lg-1"></div>
+		<div class="col-lg-10">
 			{% if page.image %}
 			{% if page.link %}
 			<a href="{{ page.link }}">
@@ -72,7 +72,7 @@
 				{{ content }}
 			</div>
 		</div>
-		<div class="col-md-1"></div>
+		<div class="col-lg-1"></div>
 	</div>
 
 	<div class="bigspacer"></div>

diff --git a/_layouts/project.html b/_layouts/project.html
@@ -11,7 +11,7 @@
 {% endfor %}
 
 <div class="row">
-	<div class="col-md-12">
+	<div class="col-lg-12">
 		<div class="bigtitle titlebox">
 			<ol class="breadcrumb">
 			{% assign crumbs = page.title | breadcrumb_array %}
@@ -40,7 +40,7 @@
 <div class="bigspacer"></div>
 
 <div class="row">
-	<div class="col-md-3">
+	<div class="col-lg-3">
 		<div class="bigspacer"></div>
 		<div class="smallhead">
 			Source code
@@ -114,11 +114,11 @@
 		{% endif %}
 
 	</div>
-	<div class="col-md-8">
+	<div class="col-lg-8">
 		<div class="post">
 			<p>
 			{{ content }}
 		</div>
 	</div>
-	<div class="col-md-1"></div>
+	<div class="col-lg-1"></div>
 </div>
diff --git a/blog/_posts/2016-12-15-open-science-prize.md b/blog/_posts/2016-12-15-open-science-prize.md
@@ -11,11 +11,11 @@ Just as software APIs allow open source software to be built layer-upon-layer, a
 There is now public voting to determine which three entries will move forward to the final round. Although I think all six OSP entries were pretty great, we'd very much appreciate your vote. Please go to [www.openscienceprize.org](http://www.openscienceprize.org) and vote by Jan 6.
 
 <div class="row">
-	<div class="col-md-2"></div>
-	<div class="col-md-8">
+	<div class="col-lg-2"></div>
+	<div class="col-lg-8">
 		<img src="/images/blog/cotten_nextstrain_watercolor.jpg">
 	</div>
-	<div class="col-md-2"></div>
+	<div class="col-lg-2"></div>
 </div>
 
 _Watercolor courtesy of [Matt Cotten](http://www.sanger.ac.uk/people/directory/cotten-matthew)._
diff --git a/blog/_posts/2017-01-03-sequencing-lab.md b/blog/_posts/2017-01-03-sequencing-lab.md
@@ -11,9 +11,9 @@ These data are 5 (draft) Zika genomes from clinical samples collected in the U.S
 Importantly this has been a group effort. The fact that we have this data is a huge testament to the benefits of open science. I’m not a wet-lab scientist by training, and Zika is not the easiest virus to sequence. This project could have been really painful, and the fact that it hasn’t been owes a lot to the openness of other groups to share their knowledge, experience, and protocols. I’m so thankful to [Josh Quick](https://twitter.com/scalene) and [Nate Grubaugh](https://twitter.com/NathanGrubaugh) who were incredibly responsive when I had questions or needed help with the protocol, and [Nick Loman](https://twitter.com/pathogenomenick) for freely sharing his entire bioinformatic pipeline. Additionally my lab has been amazing both as a sounding board for ideas and for helping with the data processing and analysis. To have so many people come together to help a project succeed is wonderful, especially so when you’re a student trying to figure things out for the first time. Keep an eye out for more data coming out soon! We'll keep the [zika-seq](/projects/zika-seq/) project updated with new sequences as we generate them.
 
 <div class="row">
-	<div class="col-md-1"></div>
-	<div class="col-md-10">
+	<div class="col-lg-1"></div>
+	<div class="col-lg-10">
 		<img src="/images/blog/usvi_sequencing.jpg">
 	</div>
-	<div class="col-md-1"></div>
+	<div class="col-lg-1"></div>
 </div>
diff --git a/blog/_posts/2017-03-10-avian-influenza-h7n9.md b/blog/_posts/2017-03-10-avian-influenza-h7n9.md
@@ -39,4 +39,4 @@ A full list of labs and authors who have made data available for analysis in the
 
 <!-- ### mutations on branches leading to expansion -->
 
-<!-- ![image-title-here](/images/blog/h7n9_geo.png){:class="img-responsive"} -->
+<!-- ![image-title-here](/images/blog/h7n9_geo.png){:class="img-fluid"} -->