Reorganize SCSS files, RWD-ize funding.

[wolnelektury.git] / apps / wolnelektury_core / static / scss / main / header.scss

diff --git a/apps/wolnelektury_core/static/scss/main/header.scss b/apps/wolnelektury_core/static/scss/main/header.scss
new file mode 100755 (executable)
index 0000000..4edd53e
--- /dev/null
+++ b/apps/wolnelektury_core/static/scss/main/header.scss
@@ -0,0 +1,215 @@
+$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;
+    }
+}
+
+
+header#main {
+    @include size(line-height, 20px); /* Make links easier to click when wrapped. */
+    background-color: $header_bg;
+    color: #bbb;
+
+    @media screen and (min-width: 62.5em) {
+        position: relative;
+        @include size(height, 94px);
+        @include size(width, 975px);
+        margin: auto;
+    }
+
+    a {
+        color: #17CFDB;
+    }
+
+    #logo {
+        display: block;
+        @include size(height, 94px);
+        @include size(width, 94px);
+
+        @media screen and (min-width: 24em) {
+            float: left;
+        }
+
+        img {
+            display: block;
+        }
+    }
+
+    #tagline {
+        margin-top: 0;
+        @include size(margin-left, 5px);
+        @include size(margin-right, 5px);
+        padding-top: 0;
+        @include size(font-size, 11px);
+
+        @media screen and (min-width: 24em) {
+            @include size(padding-top, 6px);
+            @include size(font-size, 13px);
+            text-align: right;
+        }
+
+        @media screen and (min-width: 62.5em) {
+            position: absolute;
+            @include size(top, 10px);
+            @include size(left, 255px);
+            @include size(margin-left, 0px);
+        }
+    }
+
+    #user-info {
+        margin-top: 0;
+        @include size(margin-left, 5px);
+        @include size(margin-right, 5px);
+        padding-top: 0;
+        @include mono;
+        @include size(font-size, 10px);
+        position: relative;
+
+        @media screen and (min-width: 24em) {
+            @include size(padding-top, 15px);
+            text-align: right;
+        }
+        @media screen and (min-width: 62.5em) {
+            position: absolute;
+            top: 0;
+            right: 0;
+            @include size(margin-left, 0);
+            @include size(margin-right, 0);
+        }
+
+        /* We want submenu on far left on small screens. */
+        .hidden-box-wrapper {
+            position: static;
+            @media screen and (min-width: 24em) {
+                position: relative;
+            }
+        }
+
+        #user-menu {
+            display: none;
+
+            text-align: left;
+            line-height:1.6em;
+            left: 0;
+            right: 0;
+            top: 2em;
+
+            @media screen and (min-width: 15em) {
+                right: auto;
+                width: 15em;
+            }
+
+            a {
+                color: #0D7E85;
+            }
+        }
+    }
+
+    form#search-area {
+        position: relative;
+        clear: both;
+        @include size(height, 45px);
+        background: #444444;
+        color: white;
+
+        @media screen and (min-width: 62.5em) {
+            position: absolute;
+            @include size(top, 49px);
+            @include size(left, 240px);
+            @include size(right, 0);
+        }
+
+        #search-field {
+            position: absolute;
+            @include size(top, 5px);
+            @include size(left, 5px);
+            @include size(right, 113px);
+
+            label {
+                @include hidden-label;
+            }
+            input#search {
+                z-index: 200;
+                position: relative;
+                @include size(height, 33px);
+                width: 100%;
+                padding: 0;
+                @include size(padding-left, 13px);
+                @include size(line-height, 32.5px);
+
+                border: none;
+                @include size(border-radius, 5px);
+                @include box-shadow(0 0 6.5px #444444 inset);
+
+                font-family: Georgia;
+                @include size(font-size, 13px);
+                background-color: white;
+                color: black;
+
+                /* styling search placeholder */
+                &::placeholder
+                {
+                    font-family: Georgia;
+                    font-style: italic;
+                    color: #767676;
+                }
+                &::-webkit-input-placeholder
+                {
+                    font-family: Georgia;
+                    font-style: italic;
+                    color: #767676;
+                }
+                &::-moz-placeholder
+                {
+                    font-family: Georgia;
+                    font-style: italic;
+                    color: #767676;
+                }
+            }
+        }
+        button {
+            display: inline-block;
+            position: absolute;
+            top: 0;
+            right: 0;
+            @include size(height, 45px);
+            @include size(width, 94px);
+            margin: 0;
+            padding: 0;
+
+            border: none;
+
+            @include mono;
+            @include size(font-size, 11px);
+            background: #018189;
+            color: white;
+        }
+    }
+}