Generally working version.

[wolnelektury.git] / src / wolnelektury / static / scss / main / header.scss

diff --git a/src/wolnelektury/static/scss/main/header.scss b/src/wolnelektury/static/scss/main/header.scss
index 63bd867..7360a0d 100755 (executable)
--- a/src/wolnelektury/static/scss/main/header.scss
+++ b/src/wolnelektury/static/scss/main/header.scss
@@ -1,49 +1,19 @@
 $header_bg: #191919;
-
-
-#header-wrapper {
-    position: relative;
-
-    /* Upper-half both sides dark background */
-    &:before {
-        content: " ";
-        display: block;
-        z-index: -1;
-        position: absolute;
-        top: 0;
-        @include size(bottom, 45px);
-        left: 0;
-        width: 100%;
-        background-color: $header_bg;
-    }
-
-    /* Left-side dark background */
-    &:after {
-        content: " ";
-        display: block;
-        z-index: -1;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: 50%;
-        background-color: $header_bg;
-    }
-}
+$small_logo: .9;
 
 
 header#main {
     @include size(line-height, 20px); /* Make links easier to click when wrapped. */
     background-color: $header_bg;
     color: #bbb;
+    position: relative;
 
-    text-align:center;
+    Xtext-align:center;
+
+    @media screen and (min-width: 1024px) {
+        width: 975px;
+        margin:auto;
 
-    @media screen and (min-width: 62.5em) {
-        position: relative;
-        @include size(height, 94px);
-        @include size(width, 975px);
-        margin: auto;
     }
 
     a {
@@ -52,37 +22,126 @@ header#main {
 
     #logo {
         display: block;
+        margin: auto;
+
+        @include size(width, 173px);
         @include size(height, 94px);
 
-        @media screen and (min-width: 24em) {
-            @include size(width, 173px);
-            float: left;
+        img {
+            @include size(width, $small_logo * 173px);
+            @include size(height, $small_logo * 94px);
+            margin-top: (1 - $small_logo) * 94px / 2;
+            margin-left: (1 - $small_logo) * 173px / 2;
+
+            @media screen and (min-width: 768px) {
+                @include size(width, 173px);
+                @include size(height, 94px);
+                margin-top: 0;
+                margin-left: 0;
+            }
+        }
+
+        @media screen and (min-width: 1024px) {
+            margin-left: 0;
         }
     }
 
     #tagline {
-        margin-top: 0;
-        @include size(margin-left, 5px);
-        @include size(margin-right, 5px);
-        padding-top: 0;
-        @include size(font-size, 11px);
+        display: none;
+        position: absolute;
+        @include size(top, 3px);
+        @include size(left, 255px);
+        @include size(font-size, 13px);
 
-        @media screen and (min-width: 24em) {
-            @include size(padding-top, 6px);
-            @include size(font-size, 13px);
-            @include size(margin-left, 180px);
-            text-align: right;
+        @media screen and (min-width: 1024px) {
+            display: block;
         }
+    }
 
-        @media screen and (min-width: 62.5em) {
-            position: absolute;
-            @include size(top, 10px);
-            @include size(left, 255px);
-            @include size(margin-left, 0px);
+    #lang-menu {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        @include mono;
+
+        #lang-button {
+            display:block;
+
+            @include size(font-size, 10px);
+            @include size(line-height, 17px);
+            @include size(padding-left, 25px);
+            @include size(padding-right, 20px);
+            @include size(padding-top, 16px);
+            @include size(padding-bottom, 16px);
+
+            .label {
+                &:after {
+                    @include size(padding-left, 10px);
+                    content: url("/static/img/arrow-gray.png");
+                    vertical-align: top;
+                }
+            }
+
+            .lang-flag {
+                @include size(font-size, 13px);
+                @include size(line-height, 15px);
+            }
         }
+
+
+        #lang-menu-items {
+            z-index: 9999;
+
+            button {
+                @include mono;
+                display: none;
+                background: #f7f7f7;
+                color: #6f6f6f;
+                cursor: pointer;
+                width: 100%;
+                margin: 0;
+                @include size(padding, 10px 0);
+
+                @media screen and (min-width: 62.5em) {
+                    @include size(padding, 5px 0);
+                }
+
+                border-width: 0;
+                @include size(border-bottom, 1px solid #ddd);
+
+                @include size(font-size, 13px);
+
+                &.active {
+                    color: #000;
+                }
+            }
+        }
+
+        &:hover, &.hover {
+            #lang-menu-items {
+                position: absolute;
+                padding: 0;
+                right: 0;
+                width: 100%;
+                button {
+                    display: block;
+                }
+            }
+        }
+
+    }
+
+
+    #main-menu-toggle {
+        position: absolute;
+        left: 0;
+        top: 0;
     }
 
-    #user-info {
+
+    X#user-info {
         margin-top: 0;
         @include size(margin-left, 5px);
         @include size(margin-right, 5px);
@@ -139,7 +198,7 @@ header#main {
         background: #444444;
         color: white;
 
-        @media screen and (min-width: 62.5em) {
+        @media screen and (min-width: 1024px) {
             position: absolute;
             @include size(top, 49px);
             @include size(left, 240px);
@@ -213,3 +272,43 @@ header#main {
         }
     }
 }
+
+
+
+
+
+@media screen and (min-width: 1024px) {
+    #whole-header {
+        height: 94px + 49px;
+    }
+
+    #header-wrapper {
+        position: relative;
+
+        /* Upper-half both sides dark background */
+        &:before {
+            content: " ";
+            display: block;
+            z-index: -1;
+            position: absolute;
+            top: 0;
+            @include size(bottom, 45px);
+            left: 0;
+            width: 100%;
+            background-color: $header_bg;
+        }
+
+        /* Left-side dark background */
+        &:after {
+            content: " ";
+            display: block;
+            z-index: -1;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: 50%;
+            background-color: $header_bg;
+        }
+    }
+}