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_jump {
+  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,14 +186,13 @@ div.nav_button :hover {
 }
 
 #navbar {
-  float: left;
-  width: 200px;
+  grid-area: side;
   background: $sidebarBackground;
 }
 
 #loginbox {
     width: 170px;
-    clear: both;
+    max-width: 100%;
 }
 
 #loginbox label {
@@ -183,15 +211,14 @@ div.nav_button :hover {
 }
 
 #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 +340,71 @@ 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 page, then the
+    sidebar (news and login), which the "Log in" link at the top jumps to. */
+@media (max-width: 767.98px) {
+  #content {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "logo"
+      "nav"
+      "main"
+      "side";
+  }
+
+  #topleft {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 8px 12px;
+  }
+
+  #topleft img {
+    max-height: 80px;
+    width: auto;
+  }
+
+  .sidebar_jump {
+    display: inline-block;
+    flex: none;
+    padding: 4px 12px;
+    border: 1px solid $linkColor;
+    border-radius: 16px;
+    font-weight: bold;
+  }
+
+  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,33 +2,21 @@
 
 {% 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>
 
 <div id="content">
-<div id="topleft"><a href="/"><img src="/media/images/theme/logo.png?v={{ current_logo_version }}" alt="{{ theme.titlebar_prefix }}" /></a></div>
+<div id="topleft"><a href="/"><img src="/media/images/theme/logo.png?v={{ current_logo_version }}" alt="{{ theme.titlebar_prefix }}" /></a>
+  {# Phones only: the login box moves below the content, so link to it from the top. #}
+  <a href="#navbar" class="sidebar_jump"><span class="not_logged_in">Log in</span><span class="logged_in">Account</span></a>
+</div>
 
   <div id="nav_buttons">
     <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 +31,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 +46,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 +62,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" />
@@ -105,7 +93,7 @@
 
   <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/floaty/scripts/main.js

@@ -1,10 +1,12 @@
 /*  Javascript code for generic2 theme UI
     So far this just handles switching between the secondary nav links
-    to be displayed.
+    to be displayed: on hover, on keyboard focus, and on a first tap on
+    touch screens (which have no hover).
 */
 
 var primary_divs = [];
 var secondary_divs = [];
+var tap_reveals_links = false;
 
 var primary_to_secondary = function(primary_div)
 {
@@ -45,6 +47,27 @@ var setup_nav = function() {
     {
         primary_div = $j('div.toplevel_link:eq(' + i + ')');
         primary_div.hover(function (event) {make_active(event);}, function (event) {make_inactive(i);});
+        primary_div.on('focusin', function (event) {make_active(event);});
+
+        //  A tap fires emulated hover events before the click, so decide on
+        //  pointerdown whether this tap should reveal the links instead of
+        //  following the section's own link.
+        primary_div.on('pointerdown', function (event) {
+            var secondary_div = primary_to_secondary(event.currentTarget);
+            tap_reveals_links = event.originalEvent.pointerType != 'mouse' &&
+                secondary_div.hasClass("sublink_hidden") &&
+                secondary_div.children('a').length > 0;
+        });
+        //  A touch that turns into a scroll never clicks.
+        primary_div.on('pointercancel', function () {tap_reveals_links = false;});
+        primary_div.on('click', function (event) {
+            if (tap_reveals_links)
+            {
+                event.preventDefault();
+                make_active(event);
+            }
+            tap_reveals_links = false;
+        });
     }
 
     //  Hide all secondary navigation items except those for the primary one that has focus