merge styles of prototype beuth hs project

css/area_main-content.less

@@ -6,6 +6,39 @@
 
 
 #dokuwiki__content.main-content {
+
+    .level2 {
+        p a.media {
+            img{
+                border:1px dotted @color-site-bg;
+
+            }
+           &:hover,&:focus,&:active{
+               img{
+                   border:1px solid @color-link;
+               }
+           }
+
+        }
+    }
+    div.section_highlight{
+        margin: 0;
+        padding: 0 0 1rem 0;
+        border: 1px solid #abced4;
+        background-color: #fff;
+        background-image:
+            linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
+            linear-gradient(#eee .1em, transparent .1em);
+        background-size: 100% 1.2em;
+        opacity: .7;
+    }
+    .secedit {
+        float: right;
+        margin-top: 0;
+        position: relative;
+        z-index:2;
+        top: 0;
+    }
 }
 
 

css/area_main-sidebar.less

@@ -72,7 +72,7 @@
                     position: relative;
                     z-index: 1;
                     margin-top: -1px;
-                    padding: .5em 0 .5em (@margin-big + 1);
+                    padding: .5em 0 .5em (@margin-big + 1.1);
 
                     &[class="li"] {
                         border-bottom: solid 1px @color-border;
@@ -221,6 +221,9 @@
 
                     &.closed + ul {
                         height: 0;
+                        li a{
+                            display: none;
+                        }
                     }
                 }
             }

css/area_nav-breadcrumb.less

@@ -6,12 +6,18 @@
 
 .breadcrumbs {
     position: relative;
-    border-bottom: 1px solid @color-border-light;
+    border-bottom: 1px solid @color-border;
-    padding: 1rem 1.8rem @very-small-spacing;
+    padding: 1.6rem 1.8rem .2rem;
 
     > p {
         font-size: @font-size-small;
         margin: 0;
+        @media @screen_max-xs{
+            width: 1px;
+            position: relative;
+            overflow: hidden;
+            height: 1.6rem;
+        }
 
         * {
             font-size: @font-size-small;
@@ -28,6 +34,7 @@
                 .icon-home();
 
                 min-height: 1.8em;
+                min-width: 1.9em;
                 width: auto;
                 box-sizing: border-box;
                 border: solid 1px transparent;
@@ -50,26 +57,11 @@
             }
         }
 
-
+        bdi {
-         bdi {
             padding: .1em .1em 0;
         }
-
-
     }
 
-    @media @screen_max-md {
-        min-height: 2.6rem;
-        padding-right: .3rem;
-        padding-left: 0;
-
-        p{
-            display: none;
-        }
-
-    }
-
-
 
 /* + + + + +  icon list  + + + + + */
     .page-attributes {
@@ -79,6 +71,9 @@
         max-width: 30%;
         margin: -.6em 0 0;
         padding: 0;
+        @media @screen_max-xs{
+            max-width: 90%;
+        }
 
         > li {
             .btn-usertools-wrapper(); // uniform li

css/area_nav-metabox.less

@@ -1,5 +1,6 @@
 #meta-box {
-
+    position: relative;
+    z-index: 10;
     display: inline-block;
     min-height: 1.95rem;
     max-width: 40%;
@@ -8,6 +9,10 @@
 
     .tab-container {
         display: table;
+        @media @screen_max-md{
+            width: 100%;
+        }
+
     }
 
     .box-content {
@@ -19,6 +24,9 @@
     ul.meta-tabs {
         list-style: none;
         background-color: @background_page-header;
+        @media @screen_max-md{
+            background-color: #fff;
+        }
         margin: 0;
         padding: 0;
 
@@ -46,7 +54,7 @@
                 position: relative;
                 display: block;
                 background-color: @color-site-bg;
-                border: 1px solid @color-border-light;
+                border: 1px solid @color-border;
                 border-radius: @fix_border-radius @fix_border-radius 0 0;
                 color: @color-nav;
                 font-size: @font-size-small;
@@ -54,6 +62,10 @@
                 padding: .3em 1rem .1em;
                 margin-left: 4px;
                 transition: @transition color, @transition background-color, @transition border-color;
+                @media @screen_max-xs{
+                    padding: .3em .3rem .1em;
+                    margin-left: 0;
+                }
 
                 * {
                     cursor: pointer;
@@ -210,12 +222,11 @@
         display: block;
         top: -1.1rem;
         position: relative;
-        right: -3.07rem;
+        right: auto;
         .tab-container{
             display: block;
         }
         ul.meta-tabs{
-            float: right;
             > li > a{
                 margin-left: 0;
             }

css/area_sidetools.less

@@ -233,6 +233,9 @@
             + ul,
             + div {
                 height: 0;
+                 a{
+                    display: none;
+                }
             }
         }
     }

css/area_togglelink.less

@@ -7,15 +7,14 @@
 
 .togglelink {
     &.page_main-content {
-
-        @media @screen_max-md{
-            display: none;
-        }
         position: absolute;
         top: -1px;
         bottom: -1px;
         left: -(@margin-default);
         z-index: 1;
+        @media @screen_max-md{
+            display: none;
+        }
 
         a {
             .display-flex();
@@ -45,9 +44,6 @@
                     text-decoration: none;
                 }
             }
-            @media @screen_max-md{
-                display: none;
-            }
         }
 
 

css/base_design.less

@@ -10,8 +10,6 @@ html, body {
     background-color: @color-site-bg;
 }
 
-
-
 a {
     color: @color-link;
 }
@@ -60,6 +58,14 @@ a {
     // margin-bottom: .5rem; // no margin: if there is another bg-color, then there is an #fff border
     overflow: hidden;
     word-wrap: break-word;
+    @media @screen_max-md{
+        padding-right: (@margin-default *1.6);
+    }
+}
+.content #dokuwiki__pagetools{
+    @media @screen_max-md{
+        top: 4rem;
+    }
 }
 
 .dokuwiki .docInfo {
@@ -310,7 +316,7 @@ td {
 
 th {
     font-weight: bold;
-    background-color: @th_background;
+    background-color: @ini_background_alt;
     text-align: left;
 }
 

css/base_structure.less

@@ -21,6 +21,9 @@
 }
 
 @media @screen_min-xs {
+    html {
+        font-size: 114%; //16px
+    }
 }
 
 @media @screen_min-sm {
@@ -121,6 +124,9 @@
 
     .claim {
         .logo {
+            /*position: absolute;
+            bottom: 1em;
+            overflow: visible;*/
 
             img {
                 height: 60px;
@@ -152,17 +158,24 @@
 
         .claim {
             .logo {
-
+                /*position: absolute;
+                bottom: 0;
+                height: 1px;
+                width: 100%; // fo IE
+                overflow: visible;*/
             }
 
             .logo img {
-
+                /*max-width: 100%;
+                height: auto;*/
             }
         }
     }
 
     .wide-content{
-
+        .logo{
+            /*visibility: hidden;*/
+        }
         .content {
             .row > .col-xs-12{
                 width: auto;
@@ -191,7 +204,7 @@
 
 @media @screen_max-md {
     .container {
-        margin: 0 (@margin-big/2);
+        margin: 0 1.25rem;
     }
 
     #dokuwiki__usertools {
@@ -199,33 +212,27 @@
         max-width: 75%;
         position: absolute;
         top: 0;
-        right: @margin-big/2;
+        margin-right: 0;
+        right: 1.25rem;
     }
 
     .content {
         position: relative;
-        margin-top: 1rem;
 
         #dokuwiki__pagetools {
-            top: @margin-big * 2;
+            top: 0;
-            .tools{
-                position: static;
-            }
         }
 
-        .row > .col-xs-12 #dokuwiki__content {
+        .row > .col-xs-12 #dokuwiki__content::before {
-
+            display: none;
-            padding-right: @margin-big;
-            &::before {
-                display: none;
-            }
-
         }
     }
 
     #dokuwiki__header {
         .logo {
-
+            /*width: 200px;
+            max-width: 33%;
+            margin: .8rem 0;*/
         }
     }
 
@@ -235,3 +242,9 @@
         }
     }
 }
+
+@media @screen_max-md{
+    .claim{
+        min-height: 3rem;
+    }
+}