fix: responsive header

harttle · Mar 17, 2022 · a56af6b · a56af6b
1 parent 1af8553
commit a56af6b
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 30 deletions.
diff --git a/docs/themes/navy/layout/partial/header.swig b/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>

diff --git a/docs/themes/navy/layout/partial/mobile_nav.swig b/docs/themes/navy/layout/partial/mobile_nav.swig
@@ -2,22 +2,23 @@
   <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">
       {{ doc_sidebar('mobile-nav') }}
     </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>
diff --git a/docs/themes/navy/source/css/_partial/header.styl b/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,20 +61,22 @@ 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
     opacity: 1
     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
 

diff --git a/docs/themes/navy/source/css/_partial/mobile_nav.styl b/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

diff --git a/docs/themes/navy/source/css/_variables.styl b/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)"