From f384c0c9f83714c6b349123f2a9e64bd70df0a47 Mon Sep 17 00:00:00 2001
From: Martin Kleppmann <martin@kleppmann.com>
Date: Fri, 6 Mar 2020 13:31:28 +0000
Subject: [PATCH] Improve website layout on small screens

---
 _includes/sidebar.html |  6 +++---
 _layouts/default.html  |  8 ++++----
 assets/css/main.css    | 43 ++++++++++++++++++------------------------
 3 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index d4d0bd5..82390fe 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -1,15 +1,15 @@
 <div id="td-sidebar-menu" class="td-sidebar__inner">  
-  <nav class="collapse td-sidebar-nav pt-2 pl-4" id="td-section-nav">
+  <nav class="td-sidebar-nav pt-2 pl-4" id="td-section-nav">
 {% for section in site.data.toc %}<ul class="td-sidebar-nav__section pr-md-3">
   <li class="td-sidebar-nav__section-title">
     <a  href="{% if section.url %}{{ site.baseurl }}/{{ section.url }}{% else %}{{ section.external_url }}{% endif %}" class="align-left pl-0 pr-2 active td-sidebar-link td-sidebar-link__section">{{ section.title }}</a>
   </li>{% if section.links %}<ul>
-    <li class="collapse show" id="{{ section.title | slugify }}">
+    <li id="{{ section.title | slugify }}">
         <ul class="td-sidebar-nav__section pr-md-3">{% for entry in section.links %}
           <li class="td-sidebar-nav__section-title">
             <a href="{% if entry.url %}{{ site.baseurl }}/{{ entry.url }}{% else %}{{ entry.external_url }}{% endif %}" class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section">{{ entry.title }}</a>
           </li>
-          <ul><li class="collapse show" id="{{ child.title | slugify }}">{% if entry.children %}
+          <ul><li id="{{ child.title | slugify }}">{% if entry.children %}
               {% for child in entry.children %}<a class="td-sidebar-link td-sidebar-link__page " id="m-{{ section.title | slugify }}-{{ entry.title | slugify }}-{{ child.title | slugify }}" href="{% if child.url %}{{ site.baseurl }}/{{ child.url }}{% else %}{{ child.external_url }}{% endif %}">{{ child.title }}</a>{% endfor %}
               {% endif %}</li></ul>{% endfor %}
     </ul>{% endif %}{% endfor %}
diff --git a/_layouts/default.html b/_layouts/default.html
index 28943cc..1c63753 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -6,11 +6,11 @@
     {% include header.html %}
     <div class="container-fluid td-outer">
       <div class="td-main">
-        <div class="row flex-xl-nowrap">
-          <div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+        <div class="row flex-lg-nowrap">
+          <div class="col-12 col-md-3 col-lg-2 td-sidebar d-print-none">
           {% include sidebar.html %}
           </div>
-          <div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
+          <div class="d-none d-lg-block col-lg-2 td-toc d-print-none">
               <div class="td-page-meta ml-2 pb-1 pt-2 mb-0">
                   {% include editable.html %}
               </div>
@@ -20,7 +20,7 @@
               </ul></li>
               </ul></nav>
           </div>
-          <main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
+          <main class="col-12 col-md-9 col-lg-8 pl-md-5" role="main">
             <div class="td-content">
               {{ content }}
               {% if section.links %}<div class="section-index">
diff --git a/assets/css/main.css b/assets/css/main.css
index c3e8ed0..5b3e2d4 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -4947,6 +4947,12 @@ input[type=button].btn-block {
     text-decoration: none
 }
 
+@media(max-width:400px) {
+    a.navbar-brand {
+        font-size: 0.9rem
+    }
+}
+
 .navbar-nav {
     display: -webkit-box;
     display: -webkit-flex;
@@ -18015,27 +18021,9 @@ html body .md-typeset .headerlink {
     opacity: 1;
 }
 
-@media(max-width:991.98px) {
-    .td-navbar {
-        padding-right: .5rem;
-        padding-left: .75rem
-    }
-    .td-navbar .td-navbar-nav-scroll {
-        max-width: 100%;
-        height: 2.5rem;
-        margin-top: .25rem;
-        overflow: hidden;
-        font-size: .875rem
-    }
-    .td-navbar .td-navbar-nav-scroll .nav-link {
-        padding-right: .25rem;
-        padding-left: 0
-    }
-    .td-navbar .td-navbar-nav-scroll .navbar-nav {
-        padding-bottom: 2rem;
-        overflow-x: auto;
-        white-space: nowrap;
-        -webkit-overflow-scrolling: touch
+@media(max-width:768px) {
+    .td-navbar-nav-scroll {
+        display: none
     }
 }
 
@@ -18120,19 +18108,24 @@ html body .md-typeset .headerlink {
     padding: 0 0 1rem
 }
 
-.td-sidebar {
-    padding-bottom: 1rem
-}
-
 @media(min-width:768px) {
     .td-sidebar {
         padding-top: 4rem;
+        padding-bottom: 1rem;
         background-color: rgba(48, 99, 142, .03);
         padding-right: 1rem;
         border-right: 1px solid #dee2e6
     }
 }
 
+@media(max-width:768px) {
+    .td-sidebar {
+        background-color: rgba(48, 99, 142, .03);
+        border-bottom: 1px solid #dee2e6;
+        margin-bottom: 1rem
+    }
+}
+
 .td-sidebar__toggle {
     line-height: 1;
     color: #222;