template basis structure

css/area_nav-direct.less

@@ -16,7 +16,6 @@
         top: -1px;
         width: 100%;
         height: 1px;
-        z-index: 200;
 
         a:link,
         a:visited {

css/area_sidebar-search.less

@@ -0,0 +1,18 @@
+/**
+ * This file provides the design styles for the quick search.
+ *
+ * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ */
+
+.search.main-sidebar{
+    form{
+        white-space: nowrap;
+        .no{
+            padding-right: 1.5rem;
+            #qsearch__in{
+                width: 100%;
+                border: 1px solid green;
+            }
+        }
+    }
+}

css/base.less

@@ -36,6 +36,9 @@
 @break-min-xlg: 1440;
 @break-max-xlg: (@break-min-xlg - 1);
 
+@break-min-xxlg: 1600;
+@break-max-xxlg: (@break-min-xlg - 1);
+
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* media queries for breakpoints */
@@ -59,6 +62,9 @@
 @screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
 @screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
 
+@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
+@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
+
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* col width */

css/base_structure.less

@@ -16,33 +16,33 @@
 
 @media @screen_min-xxs {
     .container{
-        border: 1px solid deeppink;
+        //border: 1px solid deeppink;
     }
 }
 
 @media @screen_min-xs {
     .container{
-        border: 1px solid orangered;
+        //border: 1px solid orangered;
     }
 }
 
 @media @screen_min-sm {
     .container{
-        border: 1px solid green;
+        //border: 1px solid green;
     }
     .make-grid(sm);
 }
 
 @media @screen_min-md {
     .container{
-        border: 1px solid blue;
+        //border: 1px solid blue;
     }
     .make-grid(md);
 }
 
 @media @screen_min-lg {
     .container{
-        border: 1px solid blue;
+        //border: 1px solid blue;
     }
     .make-grid(lg);
 }
@@ -52,6 +52,96 @@
         font-size: 130%;
     }
     .container{
-        border: 1px solid red;
+        //border: 1px solid red;
     }
 }
+
+@media @screen_min-xxlg {
+    html{
+        font-size: 145%;
+    }
+    .container{
+        //border: 1px solid red;
+    }
+}
+
+
+
+@media @screen_min-md {
+
+    .nav-direct p{
+        z-index: 1000;
+    }
+    .top-header{
+        z-index: 900;
+    }
+    .tools .row > .col-xs-12{
+        z-index: 1;
+    }
+    .header .row > .col-xs-12{
+        z-index: 2;
+    }
+    .content  .row > .col-xs-12{
+        z-index: 3;
+    }
+
+    .top-header{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+
+    .header .row > .col-xs-12{
+        position: relative;
+        height: 150px;
+        min-height: 6rem;
+        box-sizing: content-box;
+    }
+    .tools{
+        .row > .col-xs-12{
+            position: absolute;
+            width: 23%;
+        }
+        .main-sidebar{
+            //background: pink;
+        }
+    }
+    .content{
+        .row > .col-xs-12{
+            width: 73%;
+            position: relative;
+            float: right;
+            background-color: #fff;
+        }
+    }
+    .claim{
+        width: 23%;
+        box-sizing: content-box;
+        padding-right: (@margin-big / 2);
+
+        .logo{
+            position: absolute;
+            bottom: 0;
+            height: 1px;
+            overflow: visible;
+            width: 23%;
+        }
+        .logo img{
+            max-width: 100%;
+            height: auto;
+        }
+    }
+
+    .main-sidebar{
+        &.search{
+            > img{
+                width: 100%;
+                height: auto;
+            }
+        }
+    }
+
+
+}
+

css/plugins/magic-matcher.less

@@ -10,6 +10,9 @@
 
 #dokuwiki_magic-matcher{
 
+    position: fixed;
+    top:0; left: 0;
+    width: 100%;
     #magicmatcher__context{
         box-sizing: border-box;
         background-color: __nav_direct_background__;