skin/base: update header, fix for mobile devices

3 files changed, 19 insertions, 12 deletions

diff --git a/htdocs/scss/app/head.scss b/htdocs/scss/app/head.scss
index fed30d1..4983299 100644
--- a/htdocs/scss/app/head.scss
+++ b/htdocs/scss/app/head.scss
@@ -7,7 +7,6 @@
   border-bottom: 2px $border-color solid;
 }
 .head-logo {
-  padding: 4px 0;
   font-family: $ffMono;
   font-size: 15px;
   display: inline-block;
@@ -110,8 +109,7 @@ body:not(.theme-changing) .head-logo-path {
 
 .head-items {
   float: right;
-  color: #777; // color of separators
-  //padding: 8px 0;
+  color: $dark-grey; // color of separators
 }
 a.head-item {
   color: $fg;
@@ -128,8 +126,10 @@ a.head-item {
     > span {
       padding: 2px 0;
 
-      > span.moon-icon {
+      &.moon-icon {
+        padding: 0;
         position: absolute;
+        top: 0;
         left: 0;
 
         > svg path {
@@ -152,6 +152,6 @@ a.head-item:hover {
   //color: $link-color;
   text-decoration: none;
 }
-a.head-item:hover > span > span {
+a.head-item:hover > span > span:not(.moon-icon) {
   border-bottom: 1px $head-items-separator solid;
 }
\ No newline at end of file
diff --git a/htdocs/scss/app/mobile.scss b/htdocs/scss/app/mobile.scss
index a765e25..27d250c 100644
--- a/htdocs/scss/app/mobile.scss
+++ b/htdocs/scss/app/mobile.scss
@@ -4,21 +4,31 @@ textarea {
   -webkit-overflow-scrolling: touch;
 }
 
+.head {
+  padding: 0;
+}
+
 // header
 .head-logo {
   position: static;
   display: block;
-  //padding-bottom: 6px;
-  // not very good fix:
   overflow: hidden;
   white-space: nowrap;
-  padding-bottom: 0;
+  padding: 18px $side-padding 7px;
 }
 .head-logo::after {
   display: none;
 }
 .head-items {
   float: none;
+  padding: 0 $side-padding 0 $side-padding - 2px;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+a.head-item {
+  float: none;
+  display: inline-block;
 }
 a.head-item:hover,
 a.head-item:active {
@@ -28,9 +38,6 @@ a.head-item:last-child > span {
   border-right: 0;
   padding-right: 12px;
 }
-a.head-item:first-child > span {
-  padding-left: 1px;
-}
 
 // blog
 .blog-tags {
diff --git a/htdocs/scss/bundle_common.scss b/htdocs/scss/bundle_common.scss
index dd0bd6a..14fd8b0 100644
--- a/htdocs/scss/bundle_common.scss
+++ b/htdocs/scss/bundle_common.scss
@@ -5,6 +5,6 @@
 @import "./app/pages";
 @import "./hljs/github.scss";
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 640px) {
   @import "./app/mobile";
 }