Merge pull request docker#11573 from thaJeztah/mind_your_head

Fix landing-page mobile menu background color, and other fixes

Author: usha-mandya

_includes/body-landing.html

@@ -468,10 +468,6 @@ <h5 class="title">Educational resources</h5>
   <footer class="footer">
     {% include footer.html %}
   </footer>
-  <script src="/js/theme-switcher.js"></script>
-  <script src="/js/jquery.js"></script>
-  <script src="/js/bootstrap.min.js"></script>
-  <script defer src="/js/search.js"></script>
 
   <script>
     window.onChangeHelpTab = function (name) {

_includes/body.html

@@ -73,11 +73,5 @@ <h1>{{ page.title }}</h1>
         {% include footer.html %}
     </footer>
     <script>const pageURL = "{{ page.url }}";</script>
-    <script src="/js/theme-switcher.js"></script>
-    <script defer src="/js/anchorlinks.js"></script>
-    <script src="/js/jquery.js"></script>
-    <script src="/js/bootstrap.min.js"></script>
-    <script defer src="/js/docs.js"></script>
-    <script defer src="/js/search.js"></script>
     {%- include analytics/polldaddy.html -%}
 </body>

_includes/head.html

@@ -44,16 +44,36 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  {%- comment -%}
+  We put these scripts in the head section, but use "defer" loading to allow the
+  browser to start loading them as soon as possible. Actual execution of deferred
+  scripts happens once the HTML is fully parsed.
+  see https://flaviocopes.com/javascript-async-defer/#with-defer-in-the-head
+  {%- endcomment -%}
+  {%- if page.landing == true -%}
+  <!-- landing page scripts -->
+  <script defer src="/js/theme-switcher.js"></script>
+  <script defer src="/js/jquery.js"></script>
+  <script defer src="/js/bootstrap.min.js"></script>
+  <script defer src="/js/search.js"></script>
+  {%- else -%}
+  <script defer src="/js/theme-switcher.js"></script>
+  <script defer src="/js/anchorlinks.js"></script>
+  <script defer src="/js/jquery.js"></script>
+  <script defer src="/js/bootstrap.min.js"></script>
+  <script defer src="/js/docs.js"></script>
+  <script defer src="/js/search.js"></script>
+  {%- endif -%}
+
   {%- comment -%}
   preload fonts: https://www.freecodecamp.org/news/web-fonts-in-2018-f191a48367e8/
   we only preload the "woff2" variants, as older formats (woff, eot) are only used
-  by older browsers, and we don't optimize for those. For fontawesome we "prefetch"
-  to allow the browser to pre-heat the cache, but not load it if the page does not
-  use it.
+  by older browsers, and we don't optimize for those.
   {%- endcomment -%}
-  <link rel="prefetch" as="font" href="/fonts/fontawesome-webfont.woff2?v=4.7.0"     type="font/woff2" crossorigin="anonymous">
-  <link rel="preload"  as="font" href="/fonts/glyphicons-halflings-regular.woff2"    type="font/woff2" crossorigin="anonymous">
-  <link rel="preload"  as="font" href="/fonts/geomanist/hinted-Geomanist-Book.woff2" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="/fonts/geomanist/hinted-Geomanist-Book.woff2"    type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="/fonts/geomanist/hinted-Geomanist-Regular.woff2" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="/fonts/glyphicons-halflings-regular.woff2"       type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="/fonts/fontawesome-webfont.woff2?v=4.7.0"        type="font/woff2" crossorigin="anonymous">
 
   <link rel="stylesheet" href="/css/font-awesome.min.css">
   <link rel="stylesheet" href="/css/bootstrap.min.css">

_includes/side-menu.html

@@ -1,7 +1,4 @@
 <div id="navbar" class="nav-sidebar">
-    <ul class="nav jsTOCHorizontal hidden-md hidden-lg">
-    </ul>
-    <div class="divider hidden-md hidden-lg"></div>
-    <ul class="nav" id="jsTOCLeftNav">
-    </ul>
+    <ul class="nav jsTOCHorizontal hidden-md hidden-lg"></ul>
+    <ul class="nav" id="jsTOCLeftNav"></ul>
 </div>

_scss/_landing.scss

@@ -13,6 +13,12 @@ body.landing {
   }
 
   .header {
+    // Container holds both the top-navigation bar (div.navbar-header), and
+    // the "hamburger menu" (div.navbar-collapse)
+    >.container {
+      background-color: $bg-header;
+    }
+
     @include md-width {
       .navbar-collapse.collapse {
         display: flex !important;

_scss/_night-mode.scss

@@ -213,3 +213,9 @@ body.night {
         color: $white!important;
     }
 }
+
+body.landing.night {
+  .header>.container {
+      background-color: $bg-header-night;
+   }
+}