diff --git a/conf/default.php b/conf/default.php index 9f1418e..1ca4c37 100755 --- a/conf/default.php +++ b/conf/default.php @@ -5,4 +5,4 @@ */ $conf['sidebar_sections'] = 'h1,h2,h3,h4,h5'; - +$conf['header_layout'] = 'header-default'; diff --git a/conf/metadata.php b/conf/metadata.php index 274f7c5..dd94e6f 100755 --- a/conf/metadata.php +++ b/conf/metadata.php @@ -9,3 +9,12 @@ $meta['sidebar_sections'] = array( 'li.level1 > .li', ), ); + +$meta['header_layout'] = array( + 'multichoice', + '_choices' => array( + 'header-default', + 'header-compact', + 'header-hidden', + ), + ); diff --git a/css/area_header.less b/css/area_header.less index f524543..0eb54dd 100755 --- a/css/area_header.less +++ b/css/area_header.less @@ -207,3 +207,75 @@ } } } + + +/* + + + + + layout option compact + + + + + */ +.header-compact { + #dokuwiki__header { + .main-title.desktop-only p.claim, + p.claim { + display: none; + } + + // desktop + @media @screen_min-md { + div.claim { + vertical-align: top; + } + + .main-title.desktop-only { + vertical-align: top; + } + + .main-title.desktop-only, + .logo { + padding-top: 0.4rem + } + } + + // mobile middle + @media @screen_max-md { + + .logo { + display: block; + position: absolute; + top: 0; + left: 3rem; + + .mobile-only { + margin: .4rem; + height: 1.75rem; + } + } + + .main-title:not([class*="desktop-only"]) { + display: inline-block; + vertical-align: top; + padding-left: 1.75rem; + } + + p.title { + font-size: 1rem; + } + } + + @media @screen_max-sm { + min-height: 2.7rem; + } + + @media @screen_max-xxs { + min-height: 70px; // needed for menu select toolbar + + .logo { + left: 2rem; + } + + .menu-tool-select { + padding-top: .3rem; + } + + } + + + } +} diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index 46aa165..c3e382b 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -297,3 +297,73 @@ } // a } // ul } // nav-usertools + + +/* + + + + + layout option compact + + + + + */ +.header-compact { + #dokuwiki__usertools.nav-usertools { + + // mobile + @media @screen_max-md { + left: 6rem; + + ul { + overflow: hidden; + + li.user { + color: @ini_background_site; + + bdi { + position: absolute; + width: 0; + padding: 0; + text-indent: -10000px; + + &:before { + transition: @transition background-color; + background-color: @ini_background_site; + color: @ini_nav_menu_color; + text-indent: 0; + } + } + + > a { + padding: 0 .2em; + color: @ini_nav_menu_hover_bg; + + bdi { + &:before { + background-color: @ini_nav_menu_hover_bg; + color: @ini_nav_menu_hover_color; + } + } + + &:hover { + color: @ini_nav_menu_hover_color; + + bdi { + &:before { + background-color: @ini_nav_menu_hover_color; + color: @ini_nav_menu_hover_bg; + } + } + } + } + + bdi + bdi { + display: none; + } + } + } + } + + @media @screen_max-sm { + ul li { + position: static; + float: right; + top: 0; right: 0; + } + } + } +} + diff --git a/css/base_structure.less b/css/base_structure.less index 0048ad4..1ef944e 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -166,6 +166,16 @@ } } + /* + + + + + layout option compact + + + + + */ + .header-compact { + .header { + .row > .col-xs-12 { + height: auto; + min-height: fit-content; + } + } + } + .tools { .row > .col-xs-12 { position: absolute; diff --git a/detail.php b/detail.php index fdc2afe..fa90150 100755 --- a/detail.php +++ b/detail.php @@ -65,7 +65,7 @@ include('tpl/favicon_tiles.php'); -
+