diff --git a/css/area_header.less b/css/area_header.less index 0225a71..5fe8549 100755 --- a/css/area_header.less +++ b/css/area_header.less @@ -8,14 +8,13 @@ #dokuwiki__header { @header-font-opacity: 1; + @media @screen_max-xs { + min-height: 120px; + } + + /* + + + wiki logo + + + */ @media @screen_min-md { - div.claim { - display: table-cell; - height: 100%; - vertical-align: middle; - } - .logo { padding: 1rem 0 .3rem; @@ -48,7 +47,7 @@ } -/* + + + wiki title + claim + + + */ +/* + + + + + DESKTOP - wiki title + claim + + + + + */ .main-title.desktop-only { @media @screen_min-md { display: table-cell; @@ -70,14 +69,24 @@ display: block; padding-bottom: 1rem; } + + @media @screen_max-xs { + padding-right: (@toggle-size + @headericons-margin-xxs); + } } } + +/* + + + + + MOBILE - wiki title wrapper + + + + + */ .main-title:not([class*="desktop-only"]) { @media @screen_max-md { display: table-cell; vertical-align: middle; } + + @media @screen_max-xs { + padding-right: (@toggle-size + @headericons-margin-xxs); + } } @@ -101,6 +110,16 @@ } +/* + + + + + DESKTOP - wiki claim, logo, title wrapper + + + + + */ + @media @screen_min-md { + div.claim { + display: table-cell; + height: 100%; + vertical-align: middle; + } + } + + /* + + + wiki claim + + + */ p.claim { opacity: @header-font-opacity; @@ -116,7 +135,9 @@ /* + + + mobile nav togglelink + + + */ .menu-togglelink { - margin: .45rem -(@very-small-spacing) 0 0; + position: relative; + z-index: 1; + margin: @headericons-margin-xxs -(@very-small-spacing) 0 0; a { .fontello(); @@ -156,7 +177,7 @@ &.has-magicmatcher { .logo { @media @screen_min-md { - padding-top: 2rem; + padding-top: 3rem; } } diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index 70d07c2..42666aa 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -5,10 +5,25 @@ */ -.nav-usertools { +#dokuwiki__usertools.nav-usertools { + @media @screen_min-md { + right: 1.25rem; + } + + @media @screen_max-md { + position: absolute; + top: 0; + left: (@toggle-size + 1.25); // margin-left content + right: @headericons-margin-xxs; + margin-top: 0; + margin-right: 0; + } + &.has-bar { - margin-top: @height-context-bar; - padding-top: .5em; + @media @screen_min-md { + margin-top: @height-context-bar; + padding-top: .5em; + } } @@ -25,6 +40,12 @@ float: right; min-height: 28px; + @media @screen_max-xs { + display: block; + float: none; + margin-bottom: @headericons-margin-xxs; + } + > strong, > a { display: block; @@ -58,7 +79,7 @@ position: relative; display: table-cell; background-color: @ini_background; - border: solid 1px @noopentasks-border;//@ini_border_light; + border: solid 1px @wikiicons-border; // @ini_border_light; border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius color: @ini_text_webframe; padding-right: .3rem; @@ -80,6 +101,20 @@ padding-top: @space-max-md; } + @media @screen_max-xs { + position: absolute; + top: @headericons-margin-xxs; + right: (@toggle-size + @headericons-margin-xxs); + overflow: hidden; + white-space: nowrap; + margin: -1px 0 0; + } + + @media @screen_max-xxs { + left: -10px; + width: auto; + } + > a { .display-flex(); .align-items(); @@ -117,6 +152,10 @@ margin-top: -(@space-max-md); } + @media @screen_max-xxs { + min-height: (@toggle-size - .15); + } + &::before { content: ''; top: -1px; @@ -176,7 +215,7 @@ top: -.2rem; } - @media @screen_max-xxs { + @media @screen_max-xs { top: -.25rem; } diff --git a/css/base.less b/css/base.less index 4b8c3b9..d6361c1 100755 --- a/css/base.less +++ b/css/base.less @@ -44,6 +44,8 @@ @toggle-showsidebar_width: 3.07rem; // shown sidebar after toggle +@headericons-margin-xxs: .45rem; // screen xxs margin-top for header icons + @page_padding-top: @margin-small; // padding-top for 'dokuwiki__content' @page-header_height: 2.8rem; // minimum: 2.8rem (height for breadcrumb, page-header, page-footer) @meta-box_height: (@page-header_height - @page_padding-top); @@ -61,6 +63,7 @@ @wikiicons-border: #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */ + /* navigation left */ @menu-margin-lg: 1.3rem; diff --git a/css/base_structure.less b/css/base_structure.less index a2dfedd..1725630 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -194,15 +194,6 @@ margin: 0 1.25rem; } - #dokuwiki__usertools { - margin-top: 0; - max-width: 75%; - position: absolute; - top: 0; - margin-right: 0; - right: 1.25rem; - } - .content { position: relative; @@ -233,10 +224,6 @@ left: @mobileMargin; } - #dokuwiki__usertools { - right: @mobileMargin; - } - #dokuwiki__footer { .main-footer { > * {