update resolves #10

scss/blog.scss

@@ -9,8 +9,9 @@ $type: blog;
 // Import
 //
 
-@import 'import/colors';
+@import 'import/colors.scss';
-@import 'import/globalnav';
 
 @import 'import/blog-meta.scss';
 @import 'import/blog.scss';
+
+@import 'import/globaltopbar.scss';

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

scss/wiki.scss

@@ -9,7 +9,8 @@ $type: wiki;
 // Import
 //
 
-@import 'import/colors';
+@import 'import/colors.scss';
-@import 'import/globalnav';
 
 @import 'import/wiki.scss';
+
+@import 'import/globaltopbar.scss';