template basis structure

conf/default.php

@@ -5,6 +5,7 @@
  */
 
 $conf['logo']             = 'logo.png';
+$conf['logo_spacer']      = 'logo_spacer.png';
 
 $conf['discussionPage']   = 'discussion:@ID@';
 $conf['userPage']         = 'user:@USER@:';

conf/metadata.php

@@ -5,6 +5,7 @@
  */
 
 $meta['logo']             = array('string');
+$conf['logo_spacer']      = array('string');
 
 $meta['discussionPage']   = array('string');
 $meta['userPage']         = array('string');

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__;

main.php

@@ -118,7 +118,7 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show');
                 <div class="container">
                     <div class="row">
                         <div class="col-xs-12">
-                            <div class="headings main-sidebar">
+                            <div class="claim main-sidebar">
                                 <?php if (tpl_getConf('logo') && file_exists(mediaFN(tpl_getConf('logo')))){
 
 
@@ -167,8 +167,13 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show');
                             </div><!-- .sidebarheader -->
 
                             <div class="search main-sidebar">
-
+                                <?php if (tpl_getConf('logo') && file_exists(mediaFN(tpl_getConf('logo')))){
-                                <?php
+                                    if (tpl_getConf('logo_spacer') && file_exists(mediaFN(tpl_getConf('logo_spacer')))){
+                                        echo '<img width="5" height="5" src="'.ml(tpl_getConf('logo_spacer')).'" alt="" />';
+                                    } else{
+                                        echo '<img width="5" height="5" src="'.ml(tpl_getConf('logo')).'" alt="" />';
+                                    }
+                                }
 
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

style.ini

@@ -64,6 +64,7 @@ css/area_header.less                  = all
 css/area_footer.less                  = all
 css/area_nav-direct.less              = all
 css/area_nav-usertools.less           = all
+css/area_sidebar-search.less          = all
 
 
 ; _____________  plugin styles _____________

tpl/main-sidebar-logo.php

@@ -8,4 +8,4 @@
     } else{
         tpl_link( wl(),'<img src="'.ml(tpl_getConf('logo')).'" alt="'.$conf['title'].tpl_getLang('adjunct_linked_logo_text').'" />','accesskey="h" title="[H]"' );
     }
-    echo "</div>";
+    echo "<hr class=\"structure\" /></div>";