Update to Bootstrap v4

static-site/src/components/Datasets/situation-reports-by-language.jsx

@@ -88,7 +88,7 @@ export class SituationReportsByLanguage extends React.Component {
                 {/* Begin collapsible content */}
                 <div className="row">
                   {Array.from(language.narratives.entries()).map(([index, narrative]) => (
-                    <div key={narrative.url} className="col-sm-4">
+                    <div key={narrative.url} className="col-md-4">
                       <FlexCenter>
                         <a href={narrative.url}>
                           <splashStyles.SitRepTitle $attn={index === 0}>

static-site/src/components/Footer/index.jsx

@@ -9,15 +9,13 @@ class Footer extends React.Component {
   render() {
     return (
       <div>
-        <div className="row">
-          <SiteMap />
-        </div>
+        <SiteMap />
 
         <BigSpacer />
 
         <div className="row">
-          <div className="col-md-1"/>
-          <div className="col-md-10">
+          <div className="col-lg-1"/>
+          <div className="col-lg-10">
             <Styles.IconParagraph>
               {"Hadfield "}<i>{"et al., "}</i>
               <a href="https://doi.org/10.1093/bioinformatics/bty407" target="_blank" rel="noreferrer noopener">Nextstrain: real-time tracking of pathogen evolution</a>
@@ -35,13 +33,13 @@ class Footer extends React.Component {
                 )}
             </Styles.IconParagraph>
           </div>
-          <div className="col-md-1"/>
+          <div className="col-lg-1"/>
         </div>
 
         <BigSpacer/>
 
         <div className="row">
-          <div className="col-md-12">
+          <div className="col-lg-12">
             <Styles.WideParagraph>
               All <a href="https://github.com/nextstrain">source code</a> is freely available under the terms of the <a href="https://github.com/nextstrain/auspice/blob/master/LICENSE.txt">GNU Affero General Public License</a>. Screenshots may be used under a <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0 license</a> and attribution to nextstrain.org must be provided.
             </Styles.WideParagraph>
@@ -72,7 +70,7 @@ class Footer extends React.Component {
         <SmallSpacer/>
 
         <div className="row">
-          <div className="col-md-12">
+          <div className="col-lg-12">
             <Styles.FooterParagraph>
               © 2015–2023 Trevor Bedford and Richard Neher
             </Styles.FooterParagraph>

static-site/src/components/Footer/sitemap.jsx

@@ -8,9 +8,9 @@ import sections from "./sitemap.yaml";
 
 export const SiteMap = () => {
   return  (
-    <SiteMapContainer>
+    <SiteMapContainer className="row">
       {sections.map((section) => (
-        <SectionWrapper className="col-sm-3 col-xs-6" key={section.title}>
+        <SectionWrapper className="col-md-3 col-sm-6" key={section.title}>
           <Section>
             <BigSpacer />
             <SectionTitle $left>{section.title}</SectionTitle>
@@ -87,10 +87,7 @@ const UnstyledList = styled.ul`
 
 const ListItemParagraph = styled(Styles.FocusParagraph)`
   line-height: 0.5;
-  font-weight: 300;
-  a {
-    font-weight: 300;
-  }
+  font-weight: 500;
 `
 
 const UncoloredLink = styled.span`

static-site/src/components/logos.jsx

@@ -45,7 +45,7 @@ const Logo = ({href, imgSrc, width=50}) => (
 
 export const Logos = () => (
   <div className="row">
-    <div className="col-md-12">
+    <div className="col-lg-12">
 
       <Styles.FooterParagraph>
         Nextstrain is supported by

static-site/src/components/nav-bar/index.jsx

@@ -8,7 +8,6 @@ const NavContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  max-width: 960px;
   height: 50px;
   margin-top: auto;
   margin-right: auto;
@@ -18,6 +17,21 @@ const NavContainer = styled.div`
   left: 0px;
   z-index: 1001;
   transition: left .3s ease-out;
+
+  // TODO: Put this component in a container which sets these styles for all pages.
+  // This isn't trivial with the current split in page-level components.
+  @media (min-width: 768px) {
+    width: 728px;
+  }
+  @media (min-width: 992px) {
+    width: 952px;
+  }
+  @media (min-width: 1200px) {
+    width: 1150px;
+  }
+  @media (min-width: 1550px) {
+    width: 1500px;
+  }
 `;
 
 const NavLogo = styled.div`

static-site/src/components/splash/index.jsx

@@ -10,7 +10,7 @@ import { ExpandableTiles } from "../ExpandableTiles";
 import * as featuredAnalyses from "../../../content/featured-analyses.yaml";
 
 const Section = ({id, title, abstract, buttonText, buttonLink}) => (
-  <div id={id} className="col-md-6" style={{paddingBottom: "40px"}}>
+  <div id={id} className="col-lg-6" style={{paddingBottom: "40px"}}>
     <div style={{display: "flex", flexDirection: "column", alignItems: "center", height: "100%"}}>
       <Styles.H1Small>{title}</Styles.H1Small>
       <Styles.CenteredFocusParagraph style={{flexGrow: 1}}>
@@ -31,7 +31,7 @@ const Splash = () => {
   }, [])
 
   return (
-    <Styles.Container className="container">
+    <Styles.Container>
 
       <BigSpacer />
       <FlexCenter>
@@ -128,7 +128,7 @@ const Splash = () => {
         <Styles.H1Small>Philosophy</Styles.H1Small>
       </ScrollableAnchor>
       <div className="row">
-        <div className="col-md-6">
+        <div className="col-lg-6">
           <BigSpacer/>
           <Styles.H2>Pathogen Phylogenies</Styles.H2>
           <Styles.FocusParagraph>
@@ -141,7 +141,7 @@ const Splash = () => {
             and epidemic growth rate.
           </Styles.FocusParagraph>
         </div>
-        <div className="col-md-6">
+        <div className="col-lg-6">
           <BigSpacer/>
           <Styles.H2>Actionable Inferences</Styles.H2>
           <Styles.FocusParagraph>
@@ -155,7 +155,7 @@ const Splash = () => {
         </div>
       </div>
       <div className="row">
-        <div className="col-md-6">
+        <div className="col-lg-6">
           <BigSpacer/>
           <Styles.H2>This Website</Styles.H2>
           <Styles.FocusParagraph>
@@ -166,7 +166,7 @@ const Splash = () => {
             providing a novel surveillance tool to the scientific and public health communities.
           </Styles.FocusParagraph>
         </div>
-        <div className="col-md-6">
+        <div className="col-lg-6">
           <BigSpacer/>
           <Styles.H2>Future Directions</Styles.H2>
           <Styles.FocusParagraph>

static-site/src/components/splash/styles.jsx

@@ -5,12 +5,22 @@ export const Container = styled.div`
   padding-left: 25px;
   padding-right: 25px;
   display: block;
+  margin-right: auto;
+  margin-left: auto;
+
+  @media (min-width: 768px) {
+    width: 728px;
+  }
+  @media (min-width: 992px) {
+    width: 952px;
+  }
+  @media (min-width: 1200px) {
+    width: 1150px;
+  }
+  @media (min-width: 1550px) {
+    width: 1500px;
+  }
 `;
-/* for some reason, this doesn't work (it should)
-@media (max-width: 1200px) {
-  width: 1150px;
-}
-*/
 
 export const StyledDiv = styled.div`
   text-align: justify;

static-site/src/layouts/generalComponents.jsx

@@ -54,11 +54,11 @@ export const Line = styled.div`
 
 export const CenteredContainer = (props) => (
   <div className="row">
-    <div className="col-md-2" />
-    <div className="col-md-8">
+    <div className="col-lg-2" />
+    <div className="col-lg-8">
       {props.children}
     </div>
-    <div className="col-md-2" />
+    <div className="col-lg-2" />
   </div>
 );
 

static-site/src/layouts/generic-page.jsx

@@ -15,7 +15,7 @@ const GenericPage = ({location, children, banner}) => (
         <UserDataWrapper>
           <NavBar location={location} />
           {banner}
-          <splashStyles.Container className="container">
+          <splashStyles.Container>
             <HugeSpacer /><HugeSpacer />
             {children}
             <Line style={{ margin: "30px 0px 10px 0px" }} />

static-site/src/sections/sars-cov-2-page.jsx

@@ -247,9 +247,9 @@ class Index extends React.Component {
               and Google-provided translators — click on any language below to see the list of situation reports available.
             </splashStyles.FocusParagraph>
             <div className="row">
-              <MediumSpacer />
-              <div className="col-md-1"/>
-              <div className="col-md-10">
+              <MediumSpacer className="col-12" />
+              <div className="col-lg-1"/>
+              <div className="col-lg-10">
                 <SituationReportsByLanguage parseSitRepInfo={parseNcovSitRepInfo}/>
               </div>
             </div>