circles, floaty: make the fixed-width themes fit phones and tablets

esp/esp/themes/theme_data/circles/scss/main.scss

@@ -41,37 +41,67 @@ body {
   padding: 0;
 }
 
+/*  Logo and buttons on top, sidebar and page below.  The rows stretch, so the
+    sidebar and page backgrounds always run to the same height. */
 #content {
-  width: 800px;
+  max-width: 800px;
   margin-left: auto;
   margin-right: auto;
   background: $contentBackground;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
+  grid-template-areas:
+    "logo nav"
+    "side main";
 }
 
 #topleft {
+  grid-area: logo;
   background: $sidebarBackground;
-  width: 200px;
-  height: 180px;
-  float: left;
+}
+
+#topleft img {
+  max-width: 100%;
+  height: auto;
+}
+
+.sidebar_toggle {
+  display: none;
 }
 
 /*  Nav buttons - rendered via SVG masking  */
 
+#nav_buttons {
+    grid-area: nav;
+    display: flex;
+    align-items: flex-start;
+    background: $navbarBackground;
+}
+
+/*  Grow from zero in a 40:140 ratio, so at 800px wide they are exactly
+    the original 40px spacer and 140px buttons. */
+#nav_buttons > a {
+    flex: 140 1 0;
+    min-width: 0;
+}
+
 div.nav_button {
-    width: 140px;
-    height: 180px;
-    float: left;
     color: $navbarBackground;
     text-align: center;
     vertical-align: middle;
     font-size: 30px;
     line-height: 40px;
 }
 
+div.nav_button svg {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
 div.nav_button_spacer {
-    width: 40px;
-    height: 180px;
-    float: left;
+    flex: 40 1 0;
+    align-self: stretch;
     background: $navbarBackground;
 }
 
@@ -135,18 +165,17 @@ div.nav_button :hover {
 
 #navbar_header {
   background: $sidebarHeader;
-  float: left;
   text-align: center;
   vertical-align: middle;
-  width: 200px;
   height: 30px;
   line-height: 30px;
 }
 
 #chicago_main_header {
   background: $content_header;
-  float: right;
-  width: 600px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   min-height: 30px;
   color: $headingsColor;
   font-style: italic;
@@ -157,18 +186,18 @@ div.nav_button :hover {
 }
 
 #navbar {
-  float: left;
-  width: 200px;
+  grid-area: side;
   background: $sidebarBackground;
 }
 
 #loginbox {
     width: 170px;
-    clear: both;
+    max-width: 100%;
 }
 
+/*  Readable on light and dark sidebars alike. */
 #loginbox label {
-    color: #FFFFFF;
+    color: color-contrast($sidebarBackground);
     width: 50px;
     font-size: 0.9em;
 }
@@ -182,16 +211,21 @@ div.nav_button :hover {
     margin: 0px;
 }
 
+/*  Compact, so the login table still fits the 192px sidebar at 768px. */
+#loginbox #gologin {
+    padding: 2px 8px;
+    font-size: 0.9em;
+}
+
 #chicago_main {
+  grid-area: main;
   background: $bodyBackground;
-  float: right;
-  width: 600px;
 }
 
+/*  No top margin: the old floated header's clearance used to absorb it. */
 #chicago_main_content {
   background: $contentBackground;
-  clear: both;
-  margin: 15px;
+  margin: 0 15px 15px;
 }
 
 .announcementlink_title {
@@ -313,3 +347,93 @@ div .error {
 #user_data {
     font-style: italic;
 }
+
+@media (max-width: 799.98px) {
+  /*  The buttons are no longer whole pixels wide, so let each SVG overhang
+      its button by 1px (right and bottom) to stop the button colour showing
+      at the edges. */
+  div.nav_button {
+    overflow: hidden;
+  }
+
+  div.nav_button svg {
+    width: calc(100% + 1px);
+    margin-bottom: -1px;
+  }
+
+  /*  The fixed-width message boxes fill the column instead. */
+  div .emailwarning,
+  div .note, .info, .warning, .error,
+  .helpbox {
+    width: auto;
+  }
+}
+
+/*  Phones: one column.  Logo, the four buttons in a row, the sidebar (news
+    and login) collapsed under one bar, then the page. */
+@media (max-width: 767.98px) {
+  #content {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "logo"
+      "nav"
+      "side"
+      "main";
+  }
+
+  #topleft {
+    padding: 8px 12px;
+  }
+
+  #topleft img {
+    max-height: 80px;
+    width: auto;
+  }
+
+  #navbar.sidebar_collapsible .sidebar_toggle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    min-height: 40px;
+    padding: 0 12px;
+    border: 0;
+    background: $sidebarHeader;
+    color: inherit;
+    font: inherit;
+    text-transform: uppercase;
+    cursor: pointer;
+  }
+
+  #navbar.sidebar_collapsible .sidebar_toggle::after {
+    content: "\25BE";
+  }
+
+  #navbar.sidebar_open .sidebar_toggle::after {
+    content: "\25B4";
+  }
+
+  #navbar.sidebar_collapsible #navbar_header {
+    display: none;
+  }
+
+  #navbar.sidebar_collapsible:not(.sidebar_open) #navbar_content {
+    display: none;
+  }
+
+  #navbar_content {
+    padding: 8px 12px;
+  }
+
+  div.nav_button_spacer {
+    display: none;
+  }
+
+  #nav_buttons > a {
+    flex: 1 1 0;
+  }
+
+  #loginbox {
+    width: auto;
+  }
+}

esp/esp/themes/theme_data/circles/templates/main.html

@@ -2,21 +2,6 @@
 
 {% block fulltitle %}{{ theme.titlebar_prefix }} - {% block title %}Home{% endblock %}{% endblock %}
 
-{% block javascript %}
-{{ block.super }}
-<script type="text/javascript" src="/media/scripts/match_heights.js"></script>
-<script type="text/javascript">
-  match_content = function () {
-    match_heights(['chicago_main', 'navbar']);
-  };
-    $j(document).ready(function() {
-        window.setTimeout(function() {
-      match_content();
-    });
-  });
-</script>
-{% endblock %}
-
 {% block body %}
 
 <a href="#chicago_main" class="skip-nav">Skip to main content</a>
@@ -28,7 +13,7 @@
     <div id="nav_button_spacer" class="nav_button_spacer">&nbsp;</div>
     <a href="/learn/index.html">
       <div id="nav_button_learn" class="nav_button">
-        <svg width="141" height="180">
+        <svg width="140" height="180" viewBox="0 0 140 180">
           <defs>
             <mask id="nav_button_learn_mask">
               <rect width="100%" height="100%" class="nav_button_mask" />
@@ -43,7 +28,7 @@
 
     <a href="/teach/index.html">
       <div id="nav_button_teach" class="nav_button">
-        <svg width="141" height="180">
+        <svg width="140" height="180" viewBox="0 0 140 180">
           <defs>
             <mask id="nav_button_teach_mask">
               <rect width="100%" height="100%" class="nav_button_mask" />
@@ -58,7 +43,7 @@
 
     <a href="/volunteer/index.html">
       <div id="nav_button_helpout" class="nav_button">
-        <svg width="141" height="180">
+        <svg width="140" height="180" viewBox="0 0 140 180">
           <defs>
             <mask id="nav_button_helpout_mask">
               <rect width="100%" height="100%" class="nav_button_mask" />
@@ -74,7 +59,7 @@
 
     <a href="/more_info/index.html">
       <div id="nav_button_moreinfo" class="nav_button">
-        <svg width="141" height="180">
+        <svg width="140" height="180" viewBox="0 0 140 180">
           <defs>
             <mask id="nav_button_moreinfo_mask">
               <rect width="100%" height="100%" class="nav_button_mask" />
@@ -92,6 +77,8 @@
 
   <div id="navbar">
 
+    {# Phones only: the sidebar starts collapsed under this button. #}
+    <button type="button" class="sidebar_toggle" aria-expanded="false" aria-controls="navbar_content"><span class="not_logged_in">Recent news &amp; log in</span><span class="logged_in">Recent news &amp; account</span></button>
     <div id="navbar_header">RECENT NEWS</div>
 
     <div id="navbar_content">
@@ -102,10 +89,23 @@
 
     </div>
   </div>
+  <script type="text/javascript">
+    /* The sidebar only collapses once this has run, so without JavaScript it
+       stays open and the login form stays reachable. */
+    (function () {
+      var navbar = document.getElementById("navbar");
+      var toggle = navbar.querySelector(".sidebar_toggle");
+      navbar.classList.add("sidebar_collapsible");
+      toggle.addEventListener("click", function () {
+        var open = navbar.classList.toggle("sidebar_open");
+        toggle.setAttribute("aria-expanded", open ? "true" : "false");
+      });
+    })();
+  </script>
 
   <main id="chicago_main" tabindex="-1">
 
-<div id="chicago_main_header">{% block welcome_message %}<!-- CSS2 doesn't allow vertical alignment without a table.  So, give it a table. --><table width="600px" height="30px"><tr><td valign="middle">{{ theme.welcome_message }}</td></tr></table>{% endblock %}</div>
+<div id="chicago_main_header">{% block welcome_message %}<!-- Flexbox on #chicago_main_header centres this vertically. -->{{ theme.welcome_message }}{% endblock %}</div>
 
 <div id="chicago_main_content">
   {% if request.COOKIES.esp_testing_role %}

esp/esp/themes/theme_data/circles/templates/users/loginbox_content.html

@@ -73,7 +73,7 @@
       <tr>
         <td><div class="divformcol1"><label for="pass">Password:</label></div></td>
         <td><div class="divformcol2"><input type="password" name="password" required id="pass" size="8" value="" maxlength="255" class="inputbox input-small" /></div></td>
-        <td style="vertical-align: top;"><div class="divformcol3"><button class="btn btn-secondary" id="gologin" type="submit" style="margin-left:5px;"></button></div></td>
+        <td style="vertical-align: top;"><div class="divformcol3"><button class="btn btn-secondary" id="gologin" type="submit" style="margin-left:5px;" aria-label="Log in">Go</button></div></td>
       </tr>
       <tr>