Improve website layout on small screens

ept · Mar 6, 2020 · f384c0c · f384c0c
1 parent 74e85f4
commit f384c0c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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;