Merge branch 'spis_SPR-950' into 'master'

spr-950 - header styling

See merge request !49

css/area_header.less

@@ -8,14 +8,13 @@
 #dokuwiki__header {
     @header-font-opacity: 1;
 
+    @media @screen_max-xs {
+        min-height: 120px;
+    }
+
+
 /* + + +  wiki logo  + + + */
     @media @screen_min-md {
-        div.claim {
-            display: table-cell;
-            height: 100%;
-            vertical-align: middle;
-        }
-
         .logo {
             padding: 1rem 0 .3rem;
 
@@ -48,7 +47,7 @@
     }
 
 
-/* + + +  wiki title + claim  + + + */
+/* + + + + +  DESKTOP  -  wiki title + claim  + + + + + */
     .main-title.desktop-only {
         @media @screen_min-md {
             display: table-cell;
@@ -70,14 +69,24 @@
                 display: block;
                 padding-bottom: 1rem;
             }
+
+            @media @screen_max-xs {
+                padding-right: (@toggle-size + @headericons-margin-xxs);
+            }
         }
     }
 
+
+/* + + + + +  MOBILE  -  wiki title wrapper  + + + + + */
     .main-title:not([class*="desktop-only"]) {
         @media @screen_max-md {
             display: table-cell;
             vertical-align: middle;
         }
+
+        @media @screen_max-xs {
+            padding-right: (@toggle-size + @headericons-margin-xxs);
+        }
     }
 
 
@@ -101,6 +110,16 @@
     }
 
 
+/* + + + + +  DESKTOP  -  wiki claim, logo, title wrapper  + + + + + */
+    @media @screen_min-md {
+        div.claim {
+            display: table-cell;
+            height: 100%;
+            vertical-align: middle;
+        }
+    }
+
+
 /* + + +  wiki claim  + + + */
     p.claim {
         opacity: @header-font-opacity;
@@ -116,7 +135,9 @@
 
 /* + + +  mobile nav togglelink  + + + */
     .menu-togglelink {
-        margin: .45rem -(@very-small-spacing) 0 0;
+        position: relative;
+        z-index: 1;
+        margin: @headericons-margin-xxs -(@very-small-spacing) 0 0;
 
         a {
             .fontello();
@@ -156,7 +177,7 @@
     &.has-magicmatcher {
         .logo {
             @media @screen_min-md {
-                padding-top: 2rem;
+                padding-top: 3rem;
             }
         }
 

css/area_nav-usertools.less

@@ -5,10 +5,25 @@
  */
 
 
-.nav-usertools {
+#dokuwiki__usertools.nav-usertools {
+    @media @screen_min-md {
+        right: 1.25rem;
+    }
+
+    @media @screen_max-md {
+        position: absolute;
+        top: 0;
+        left: (@toggle-size + 1.25); // margin-left content
+        right: @headericons-margin-xxs;
+        margin-top: 0;
+        margin-right: 0;
+    }
+
     &.has-bar {
-        margin-top: @height-context-bar;
+        @media @screen_min-md {
-        padding-top: .5em;
+            margin-top: @height-context-bar;
+            padding-top: .5em;
+        }
     }
 
 
@@ -25,6 +40,12 @@
             float: right;
             min-height: 28px;
 
+            @media @screen_max-xs {
+                display: block;
+                float: none;
+                margin-bottom: @headericons-margin-xxs;
+            }
+
             > strong,
             > a {
                 display: block;
@@ -58,7 +79,7 @@
                 position: relative;
                 display: table-cell;
                 background-color: @ini_background;
-                border: solid 1px @noopentasks-border;//@ini_border_light;
+                border: solid 1px @wikiicons-border; // @ini_border_light;
                 border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
                 color: @ini_text_webframe;
                 padding-right: .3rem;
@@ -80,6 +101,20 @@
                     padding-top: @space-max-md;
                 }
 
+                @media @screen_max-xs {
+                    position: absolute;
+                    top: @headericons-margin-xxs;
+                    right: (@toggle-size + @headericons-margin-xxs);
+                    overflow: hidden;
+                    white-space: nowrap;
+                    margin: -1px 0 0;
+                }
+
+                @media @screen_max-xxs {
+                    left: -10px;
+                    width: auto;
+                }
+
                 > a {
                     .display-flex();
                     .align-items();
@@ -117,6 +152,10 @@
                         margin-top: -(@space-max-md);
                     }
 
+                    @media @screen_max-xxs {
+                        min-height: (@toggle-size - .15);
+                    }
+
                     &::before {
                         content: '';
                         top: -1px;
@@ -176,7 +215,7 @@
                             top: -.2rem;
                         }
 
-                        @media @screen_max-xxs {
+                        @media @screen_max-xs {
                             top: -.25rem;
 
                         }

css/base.less

@@ -44,6 +44,8 @@
 
 @toggle-showsidebar_width: 3.07rem;       // shown sidebar after toggle
 
+@headericons-margin-xxs:  .45rem;         // screen xxs margin-top for header icons
+
 @page_padding-top:         @margin-small; // padding-top for 'dokuwiki__content'
 @page-header_height:       2.8rem;        // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
 @meta-box_height:          (@page-header_height - @page_padding-top);
@@ -61,6 +63,7 @@
 @wikiicons-border:         #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */
 
 
+
 /* navigation left */
 @menu-margin-lg: 1.3rem;
 

css/base_structure.less

@@ -194,15 +194,6 @@
         margin: 0 1.25rem;
     }
 
-    #dokuwiki__usertools {
-        margin-top: 0;
-        max-width: 75%;
-        position: absolute;
-        top: 0;
-        margin-right: 0;
-        right: 1.25rem;
-    }
-
     .content {
         position: relative;
 
@@ -233,10 +224,6 @@
         left: @mobileMargin;
     }
 
-    #dokuwiki__usertools {
-        right: @mobileMargin;
-    }
-
     #dokuwiki__footer {
         .main-footer {
             > * {