#17: make header layout configurable

This commit is contained in:
Jana Deutschländer 2019-03-11 16:08:20 +01:00 committed by Andreas Gohr
commit 72166b7941
9 changed files with 171 additions and 3 deletions

View file

@ -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;
}
}
}
}

View file

@ -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;
}
}
}
}

View file

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