SPR-866: Title and Claim prepared

css/area_header.less

@@ -6,6 +6,115 @@
 
 
 #dokuwiki__header {
+    @header-font-opacity: .7;
+
+
+/* + + +  wiki logo  + + + */
+    @media @screen_min-md {
+        .logo {
+            /*position: absolute;
+            bottom: 1em;
+            overflow: visible;*/
+            padding: 1rem 0 .3rem;
+
+            img {
+                height: 4.6rem;
+                width: auto;
+                border-style: solid;
+                border-color: transparent;
+                border-width: 2px 0;
+            }
+
+            a:hover,
+            a:focus,
+            a:active {
+                img {
+                    border-width: 0;
+                }
+            }
+        }
+    }
+
+    @media @screen_max-md {
+        .logo {
+            display: table-cell;
+
+            .mobile-only {
+                margin: .8rem 1rem .6rem 0;
+            }
+        }
+    }
+
+
+/* + + +  wiki title  + + + */
+    .main-title {//background-color: pink;
+        &.desktop-only {
+            @media @screen_min-md {
+                display: table-cell;
+                vertical-align: middle;
+            }
+        }
+
+        &.mobile-only {
+            @media @screen_max-md {
+                display: table-cell;
+                vertical-align: middle;
+                padding-left: .6rem;
+            }
+        }
+    }
+
+    p.title {
+        background-color: @color-site-bg;;
+        opacity: @header-font-opacity;
+        line-height: @line-height-default;
+        margin-bottom: 0;
+
+        @media @screen_min-md {
+            font-size: @font-size-big;
+        }
+
+        @media @screen_max-md {
+            font-size: (@font-size-default + .25);
+            padding-top: .5rem;
+            padding-bottom: .5rem;
+        }
+    }
+
+
+/* + + +  wiki claim  + + + */
+    div.claim {
+        @media @screen_min-md {
+            display: table-cell;
+            height: 100%;
+            vertical-align: middle;
+        }
+
+        @media @screen_max-md {
+            min-height: 3rem;
+        }
+    }
+
+    p.claim {//background-color: deepskyblue;
+        opacity: @header-font-opacity;
+        margin-bottom: 0;
+        padding-bottom: 1rem;
+
+        @media @screen_min-xxs {
+            font-size: @font-size-small;
+        }
+
+        @media @screen_max-md {
+            padding-top: .5rem;
+        }
+
+        @media @screen_max-xxs {
+            font-size: @font-size-default;
+        }
+    }
+
+
+/* + + +  mobile nav togglelink  + + + */
     .menu-togglelink {
         margin: @very-small-spacing -(@very-small-spacing) 0 0;
 

css/base.less

@@ -290,6 +290,13 @@ nav > ul {
     }
 }
 
+.desktop-only {
+    display: none;
+    @media @screen_min-md {
+        display: inline-block;
+    }
+}
+
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* screen only */

css/base_structure.less

@@ -110,6 +110,12 @@
             height: 150px;
             min-height: 6rem;
             display: table;
+
+            + .col-xs-12 {
+                float: right;
+                width: 73%;
+                box-sizing: border-box;
+            }
         }
     }
 
@@ -127,35 +133,6 @@
         }
     }
 
-    .claim {
-        display: table-cell;
-        height: 100%;
-        vertical-align: middle;
-
-        .logo {
-            /*position: absolute;
-            bottom: 1em;
-            overflow: visible;*/
-            padding: 1rem 0 .3rem;
-
-            img {
-                height: 4.6rem;
-                width: auto;
-                border-style: solid;
-                border-color: transparent;
-                border-width: 2px 0;
-            }
-
-            a:hover,
-            a:focus,
-            a:active {
-                img {
-                    border-width: 0;
-                }
-            }
-        }
-    }
-
     .showSidebar {
         .content {
             .row > .col-xs-12 {
@@ -218,14 +195,6 @@
         }
     }
 
-    #dokuwiki__header {
-        .logo {
-            /*width: 200px;
-            max-width: 33%;
-            margin: .8rem 0;*/
-        }
-    }
-
     .tools {
         .main-sidebar {
             display: none;
@@ -233,18 +202,6 @@
     }
 }
 
-@media @screen_max-md {
-    .claim {
-        min-height: 3rem;
-
-        .logo {
-            .mobile-only {
-                margin: .8rem 1rem .6rem 0;
-            }
-        }
-    }
-}
-
 @media @screen_max-xxs {
     @mobileMargin: 4px;
 

main.php

@@ -99,12 +99,39 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
 /* upload your logo into the data/media folder (root of the media manager) and replace 'logo.png' in der template config accordingly: */
                                 include('tpl/main-sidebar-logo.php');
                              } ?>
-                            <?php if ($conf['tagline']): ?>
+                            <div class="main-title mobile-only">
+                                <?php if ($conf['title']):
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Wiki Title Mobile */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
+                                    <p class="title"><?php echo $conf['title'] ?></p>
+                                <?php endif ?>
+
+                            </div><!-- .main-title -->
+                            <?php if ($conf['tagline']):
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Wiki Tagline */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
                                 <p class="claim"><?php echo $conf['tagline'] ?></p>
                             <?php endif ?>
 
                         </div><!-- .headings -->
                     </div><!-- .col -->
+
+                    <div class="col-xs-12">
+                        <div class="main-title desktop-only">
+                            <?php if ($conf['title']):
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Wiki Title Desktop */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
+                                <p class="title"><?php echo $conf['title'] ?></p>
+                            <?php endif ?>
+
+                        </div><!-- .main-title -->
+                    </div><!-- .col -->
                 </div><!-- .row -->
             </div><!-- .container -->
         </div><!-- .header -->