diff --git a/scss/blog.scss b/scss/blog.scss index f1c513d..8813a04 100644 --- a/scss/blog.scss +++ b/scss/blog.scss @@ -9,8 +9,9 @@ $type: blog; // Import // -@import 'import/colors'; -@import 'import/globalnav'; +@import 'import/colors.scss'; @import 'import/blog-meta.scss'; @import 'import/blog.scss'; + +@import 'import/globaltopbar.scss'; diff --git a/scss/import/globaltopbar.scss b/scss/import/globaltopbar.scss new file mode 100644 index 0000000..42e4a32 --- /dev/null +++ b/scss/import/globaltopbar.scss @@ -0,0 +1,312 @@ +@media screen { + +body { + padding-top: 32px; +} + +#page { + top: 32px; +} + +.header-main { + min-height: 48px; +} + + #global__header { + background-color: #212730; + border-bottom: 3px #4588de solid; + box-sizing: border-box; + display: flex; + font-family: Arial, Helvetica, sans-serif; + font-size:14px; + text-align: left; + top: -32px; + left: 0; + line-height: 1.5; + margin: 0; + overflow-x: auto; + overflow-y: hidden; + position: absolute; + vertical-align: middle; + width: 100%; + white-space: nowrap; + z-index:999999; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + ul { + display: flex; + flex: 1; + margin: 0; + li { + display: flex; + margin: 0; + a { + color: #bbb; + font-size: 14px; + font-weight: normal; + margin: 0 1px; + padding: 4px 8px; + text-decoration: none; + &:hover, + &:active, + &:focus { + background: #4588de; + color: #fff; + text-decoration: none; + } + } + } + &.global__header-right { + justify-content: flex-end; + } + } + } +} + +@if $type == wiki { + @media only screen and (min-width: 601px) { + /* changes specific for www.dokuwiki.org */ + #dokuwiki__header { + padding-top: 3em; + } + #dokuwiki__usertools { + top: 3em; + } + /* changes specific for bugs.dokuwiki.org */ + div#container div#showtask { + top: 40px; + } + } +} + +@media only screen and (max-width: 600px) { + body { + @if $type == wiki { + padding-top: 0; + } + } + + #global__header { + position: absolute; + overflow: auto; + } + .global__header-right { + left: 0; + position: relative; + } + + .header-main { + margin-top: 0px; + } +} + +@media print { + #global__header { + display: none; + } +} + + + + + +// +// +// + + + + + +@media screen { + + + +#global__header { +position: absolute; +top: 0; +left: 0; +text-align: left; +vertical-align: middle; +line-height: 1.5; +background-color: #212730; +width: 100%; +margin: 0; +-moz-box-sizing: border-box; +-webkit-box-sizing: border-box; +box-sizing: border-box; +white-space: none; +overflow-x: auto; +overflow-y: hidden; +display: flex; +border-bottom: 3px #4588de solid; +} + + #global__header h2 { + position: absolute; +/* left: -99999em;*/ + top: 0; + overflow: hidden; + display: inline; + } + + #global__header ul, + #global__header li { + margin: 0; + padding: 0; + list-style: none; + display: flex; + line-height: 1.5; + } + + #global__header ul { + flex: 1; + } + + + #global__header a { + color: #bbb; + text-decoration: none; + font-size: 14px; + padding: 4px 8px; +margin: 0 1px; + font-weight: normal; + } + #global__header a:hover, + #global__header a:active, + #global__header a:focus { + color: #fff; + text-decoration: underline; + background: #4588de; + text-decoration: none; + + } + + #global__header form { + float: right; + margin: 0 0 0 20px; + } + + #global__header input { + background-color: #333; + background-image: none; + border: 1px solid #bbb; + color: #fff; + box-shadow: none; + border-radius: 2px; + margin: 0; + line-height: normal; + padding: 1px 0 1px 0; + height: auto; + } + + #global__header input.button { + border: none; + color: #bbb; + } + #global__header input.button:hover, + #global__header input.button:active, + #global__header input.button:focus { + color: #fff; + text-decoration: underline; + } + + /* new wg qrcode */ + .global__header-right { + justify-content: flex-end; + } + + .global__header-qr:hover:after { + right: 0; + } + + .global__header-qr:after { + content: ''; + /*background: url(https://wiki.natenom.de/.cdn/getmumble/qrcode_www.natenom.com_de_meinmumbleserver);*/ + position: fixed; + background-size: cover; + height: 111px; + top: 31px; + width: 111px; + right: -150px; + transition: 1s all; + box-shadow: 0 0 8px rgba(0,0,0,0.5); + } + /* end: new wg qrcode */ + +} /* /@media */ + + +@media only screen and (min-width: 601px) { + /* changes specific for www.dokuwiki.org */ + #dokuwiki__header { + padding-top: 3em; + } + #dokuwiki__usertools { + top: 3em; + } + /* changes specific for bugs.dokuwiki.org */ + div#container div#showtask { + top: 40px; + } +} /* /@media */ + +@media only screen and (max-width: 600px) { + body { + padding-top: 0; + } + + #global__header { + position: static; +/* white-space: normal;*/ + overflow: auto; + } + + #global__header form { + float: none; + display: block; + margin: 0 0 .4em; + } + + .global__header-right { + position: relative; + left: 0; + } +} /* /@media */ + +@media print { + #global__header { + display: none; + } +} /* /@media */ + +#global__header a#global__header__link-donate { +color: #c16666; +display: none; +} + +#global__header a#global__header__link-donate:hover { +background: #c16666; +color: #fff; +} + +/* topbar oben */ +#global__header { +position: absolute; +white-space: nowrap; +} + + +#dokuwiki__site { +margin-top: 32px !important; +} + + + #dokuwiki__usertools { +top: calc(2em + 32px) !important; +} +@only screen and (min-width: 601px) { +#dokuwiki__usertools { +top: calc(3em + 32px) !important; +} +} diff --git a/scss/wiki.scss b/scss/wiki.scss index 08b8eee..4734fa5 100644 --- a/scss/wiki.scss +++ b/scss/wiki.scss @@ -9,7 +9,8 @@ $type: wiki; // Import // -@import 'import/colors'; -@import 'import/globalnav'; +@import 'import/colors.scss'; @import 'import/wiki.scss'; + +@import 'import/globaltopbar.scss';