rework to be one column on narrow displays

index.html

@@ -21,6 +21,11 @@
         color: #ff7b00;
       }
 
+      div.shame {
+        font-size: 120%;
+        color: #007b7b;
+      }
+
       h2 {
         margin-top: 24pt;
       }
@@ -53,102 +58,89 @@
       <h2>Open Access</h2>
 
       <div class="row">
-        <div class="col">
+        <div class="col-lg-4">
           <a class="news" href="https://www.propublica.org/series/coronavirus">ProPublica</a>
           <a class="subscribe" href="https://go.propublica.org/donate">donate</a>
         </div>
-        <div class="col">
+
+        <div class="col-lg-4">
           <a class="news" href="https://www.npr.org/series/812054919/the-coronavirus-crisis">NPR</a>
           <a class="subscribe" href="https://www.npr.org/donations/support">donate</a>
         </div>
-      </div>
 
-      <div class="row">
+        <div class="col-lg-4">
-        <div class="col">
           <a class="news" href="https://www.bbc.com/news/topics/cyz0z8w0ydwt/coronavirus-pandemic">BBC News</a>
         </div>
-        <div class="col">
+
-          <a class="news" href="https://www.washingtonpost.com/coronavirus/">Washington Post</a>
+        <div class="col-lg-4">
+          <a class="news" href="https://www.washingtonpost.com/coronavirus/">The Washington Post</a>
           <a class="subscribe" href="https://subscribe.washingtonpost.com/">subscribe</a>
         </div>
-      </div>
 
-      <div class="row">
+        <div class="col-lg-4">
-        <div class="col">
           <a class="news" href="https://www.theguardian.com/world/coronavirus-outbreak">The Guardian</a>
           <a class="subscribe" href="https://support.theguardian.com/">subscribe</a>
         </div>
-        <div class="col">
+
+        <div class="col-lg-4">
           <a class="news" href="https://www.wsj.com/livecoverage/coronavirus">Wall Street Journal</a>
           <a class="subscribe" href="https://subscribe.wsj.com/">subscribe</a>
         </div>
-      </div>
 
-      <div class="row">
+        <div class="col-lg-4">
-        <div class="col">
           <a class="news" href="https://www.theatlantic.com/category/what-you-need-know-coronavirus/">The Atlantic</a>
           <a class="subscribe" href="https://accounts.theatlantic.com/products/">subscribe</a>
         </div>
-        <div class="col">
+
+        <div class="col-lg-4">
           <a class="news" href="https://www.sfchronicle.com/coronavirus/">San Francisco Chronicle</a>
           <a class="subscribe" href="https://offers.sfchronicle.com/subscribe">subscribe</a>
         </div>
-      </div>
 
-      <div class="row">
+        <div class="col-lg-4">
-        <div class="col">
           <a class="news" href="https://www.startribune.com/local/coronavirus/">Star Tribune</a>
           <a class="subscribe" href="http://startribune.com/subscribe">subscribe</a>
         </div>
-        <div class="col">
+
+        <div class="col-lg-4">
           <a class="news" href="https://www.azcentral.com/local/coronavirus/">Arizona Republic</a>
           <a class="subscribe" href="https://subscribe.azcentral.com/">subscribe</a>
         </div>
-      </div>
 
-      <div class="row">
+        <div class="col-lg-4">
-        <div class="col">
           <a class="news" href="https://www.chron.com/coronavirus/">Houston Chronicle</a>
           <a class="subscribe" href="https://offers.houstonchronicle.com/">subscribe</a>
         </div>
-        <div class="col">
+
+        <div class="col-lg-4">
           <a class="news" href="https://www.dallasnews.com/topic/coronavirus/">Dallas Morning News</a>
           <a class="subscribe" href="https://join.dallasnews.com/">subscribe</a>
         </div>
       </div>
 
-<!-- Template for a new row:
+<!-- Template for a new entry:
-      <div class="row">
+        <div class="col-lg-4">
-        <div class="col">
           <a class="news" href=""></a>
           <a class="subscribe" href="">subscribe</a>
         </div>
-        <div class="col">
-          <a class="news" href=""></a>
-          <a class="subscribe" href="">subscribe</a>
-        </div>
-      </div>
 -->
 
 
       <h2>Login Required</h2>
       <small>(Paid subscription not needed.)</small>
       <div class="row">
-        <div class="col">
+        <div class="col-lg-4">
-          <a class="news" href="https://www.nytimes.com/news-event/coronavirus">New York Times</a>
+          <a class="news" href="https://www.nytimes.com/news-event/coronavirus">The New York Times</a>
           <a class="subscribe" href="https://www.nytimes.com/subscription">subscribe</a>
         </div>
-        <div class="col">
-          <!-- This space intentionally left blank. -->
-        </div>
       </div>
 
       <h2>Wall of Shame</h2>
       The following major newspapers have elected to keep their Coronavirus coverage behind a paywall &amp; will be excluded from this page unless they change their policies. Subscribers, please encourage them to make their coverage openly available!
-      <ul>
+      <div class="row">
-        <li>Boston Globe</li>
+        <div class="col-lg-4 shame">Boston Globe</div>
-        <li>Chicago Tribune</li>
+        <div class="col-lg-4 shame">Chicago Tribune</div>
-      </ul>
+      </div>
 
       <div class="row">
         <p class="lead footer">