fix: responsive header

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)"