#17: make header layout configurable
This commit is contained in:
parent
e9519300fa
commit
72166b7941
9 changed files with 171 additions and 3 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue