fix: responsive header

docs/themes/navy/layout/partial/header.swig

@@ -10,16 +10,16 @@
         <input type="search" id="search-input" placeholder="{{__('menu.search')}}...">
       </div>
     </nav>
-    <div id="lang-select-wrap" class="main-nav-link">
-      <label><i class="icon-network"></i>{{ lang_name(page.lang) }}</label>
+    <div class="main-nav-link icon-nav-link">
+      <label><i class="icon-network"></i> <span class="icon-nav-title">{{ lang_name(page.lang) }}</span></label>
       <select id="lang-select" data-canonical="{{ canonical_path_for_nav() }}">
         {% for lang in site.data.languages %}
           <option value="{{ loop.key }}"{% if page.lang === loop.key %} selected{% endif %}>{{ lang_name(loop.key) }}</option>
         {% endfor %}
       </select>
     </div>
-    <a href="https://github.com/{{ config.github }}" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
-    <a href="https://opencollective.com/liquidjs" class="main-nav-link"><i class="icon-opencollective"></i>Support</a>
+    <a href="https://github.com/{{ config.github }}" class="main-nav-link icon-nav-link"><i class="icon-github"></i> <span class="icon-nav-title">Github</span></a>
+    <a href="https://opencollective.com/liquidjs" class="main-nav-link icon-nav-link"><i class="icon-opencollective"></i> <span class="icon-nav-title">Support</span></a>
     <a id="mobile-nav-toggle">
       <span class="mobile-nav-toggle-bar"></span>
       <span class="mobile-nav-toggle-bar"></span>

docs/themes/navy/layout/partial/mobile_nav.swig

@@ -2,9 +2,6 @@
   <div id="mobile-nav-inner">
     <ul id="mobile-nav-list">
       {{ header_menu('mobile-nav') }}
-      <li class="mobile-nav-item">
-        <a href="https://github.com/{{ config.github }}" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
-      </li>
     </ul>
     {% if page.layout == 'page' %}
     <div class="mobile-sidebar-list">
@@ -12,12 +9,16 @@
     </div>
     {% endif %}
   </div>
-  <div id="mobile-lang-select-wrap">
-    <span id="mobile-lang-select-label"><i class="icon-network"></i><span>{{ lang_name(page.lang) }}</span></span>
-    <select id="mobile-lang-select" data-canonical="{{ canonical_path_for_nav() }}">
-      {% for lang in site.data.languages %}
-        <option value="{{ loop.key }}"{% if page.lang === loop.key %} selected{% endif %}>{{ lang_name(loop.key) }}</option>
-      {% endfor %}
-    </select>
+  <div id="mobile-button-list">
+    <a href="https://github.com/{{ config.github }}" class="mobile-nav-link" rel="external" target="_blank"><i class="icon-github"></i></a>
+    <a href="https://opencollective.com/liquidjs" class="mobile-nav-link" rel="external" target="_blank"><i class="icon-opencollective"></i></a>
+    <div id="mobile-lang-select-wrap" class="mobile-nav-link">
+      <label for="mobile-lang-select"><i class="icon-network"></i></label>
+      <select id="mobile-lang-select" data-canonical="{{ canonical_path_for_nav() }}">
+        {% for lang in site.data.languages %}
+          <option value="{{ loop.key }}"{% if page.lang === loop.key %} selected{% endif %}>{{ lang_name(loop.key) }}</option>
+        {% endfor %}
+      </select>
+    </div>
   </div>
 </nav>

docs/themes/navy/source/css/_partial/header.styl

@@ -29,7 +29,6 @@ logo-size = 36px
 #main-nav
   display: none
   flex: 1 auto
-  padding-left: 20px
   @media mq-normal
     display: block
 
@@ -62,9 +61,7 @@ logo-size = 36px
   opacity: 0.7
   transition: opacity 0.2s, color 0.2s
   display: inline-block
-  padding: 0 15px
-  i
-    padding-right: 8px
+  padding: 0 12px
   &.active
     opacity: 1
   &:hover
@@ -72,10 +69,14 @@ logo-size = 36px
     color: var(--color-link-hover)
     text-decoration: none
 
-#lang-select-wrap
-#github-link-wrap
+.icon-nav-link
   display: none
   position: relative
+  padding: 0 8px
+  .icon-nav-title
+    display: none
+    @media mq-small
+      display: inline
   @media mq-normal
     display: block
 

docs/themes/navy/source/css/_partial/mobile_nav.styl

@@ -78,7 +78,7 @@ lang-select-height = 40px
   color: #fff
   text-decoration: none
   display: block
-  padding: 10px 15px
+  padding: 12px 16px
   line-height: 1
   white-space: nowrap
   overflow: hidden
@@ -96,22 +96,21 @@ lang-select-height = 40px
   overflow: hidden
   text-overflow: ellipsis
 
-#mobile-lang-select-wrap
+#mobile-button-list
   position: absolute
   bottom: 0
   left: 0
   width: 100%
   background: var(--color-navy)
   border-top: 1px solid #444
+  padding: 12px 16px
+  .mobile-nav-link
+    display: inline-block
+    padding: 0
+    margin-right: 16px
 
-#mobile-lang-select-label
-  line-height: lang-select-height
-  color: #fff
-  padding: 10px 15px
-  i
-    opacity: 0.7
-  span
-    padding-left: 8px
+#mobile-lang-select-wrap
+  position: relative
 
 #mobile-lang-select
   -webkit-appearance: menulist-button

docs/themes/navy/source/css/_variables.styl

@@ -48,4 +48,5 @@ mobile-nav-width = 260px
 // Media queries
 mq-mobile = "screen and (max-width: 768px)"
 mq-normal = "screen and (min-width: 769px)"
+mq-small = "screen and (min-width: 992px)"
 mq-tablet = "screen and (min-width: 480px)"