diff --git a/css/area_header.less b/css/area_header.less index cd7578b..f6f576e 100755 --- a/css/area_header.less +++ b/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; diff --git a/css/base.less b/css/base.less index a94fb70..bc667b4 100755 --- a/css/base.less +++ b/css/base.less @@ -290,6 +290,13 @@ nav > ul { } } +.desktop-only { + display: none; + @media @screen_min-md { + display: inline-block; + } +} + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* screen only */ diff --git a/css/base_structure.less b/css/base_structure.less index b648807..4901da9 100755 --- a/css/base_structure.less +++ b/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; diff --git a/main.php b/main.php index c33bde4..bbf1f1e 100755 --- a/main.php +++ b/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 -->