fnp / wolnelektury.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Merge remote-tracking branch 'zawadzki/new-design'
[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
old mode 100755 (executable)
new mode 100644 (file)
index 7360a0d..c8adda5
--- a/src/wolnelektury/static/scss/main/header.scss
+++ b/src/wolnelektury/static/scss/main/header.scss
@@ -1,314 +1,301 @@
+@import "../tools";
+
 $header_bg: #191919;
 $small_logo: .9;
 
 $header_bg: #191919;
 $small_logo: .9;
 
+#banners {
+  display: inline-block;
+  width: 100%;
+
+  > a {
+    display: block;
+    width: 100%;
+  }
+
+  img {
+    display: block;
+    margin: 0 auto;
+    width: 100%
+  }
+}
 
 header#main {
 
 header#main {
-    @include size(line-height, 20px); /* Make links easier to click when wrapped. */
-    background-color: $header_bg;
-    color: #bbb;
-    position: relative;
+  @include size(line-height, 20px); /* Make links easier to click when wrapped. */
+  background-color: $header_bg;
+  color: #bbb;
+  position: relative;
 
 
-    Xtext-align:center;
+  /*text-align: center;*/
 
 
-    @media screen and (min-width: 1024px) {
-        width: 975px;
-        margin:auto;
+  @media screen and (min-width: 1024px) {
+    width: 975px;
+    margin: auto;
+  }
 
 
-    }
+  a {
+    color: #17CFDB;
+  }
 
 
-    a {
-        color: #17CFDB;
-    }
+  #logo {
+    display: block;
+    margin: auto;
 
 
-    #logo {
-        display: block;
-        margin: auto;
+    @include size(width, 173px);
+    @include size(height, 94px);
 
 
+    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);
         @include size(width, 173px);
         @include size(height, 94px);
+        margin-top: 0;
+        margin-left: 0;
+      }
+    }
 
 
-        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 {
+    display: none;
+    position: absolute;
+    @include size(top, 3px);
+    @include size(left, 255px);
+    @include size(font-size, 13px);
+    margin: 0;
+    @include size(line-height, 43px);
+    
 
 
-        @media screen and (min-width: 1024px) {
-            margin-left: 0;
-        }
+    @media screen and (min-width: 1024px) {
+      display: block;
     }
     }
+  }
 
 
-    #tagline {
-        display: none;
-        position: absolute;
-        @include size(top, 3px);
-        @include size(left, 255px);
-        @include size(font-size, 13px);
+  #lang-menu {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
 
 
-        @media screen and (min-width: 1024px) {
-            display: block;
-        }
-    }
+    @include mono;
 
 
-    #lang-menu {
+    #lang-button {
         display: block;
         display: block;
-        position: absolute;
-        top: 0;
-        right: 0;
+        cursor: pointer;
 
 
-        @include mono;
+      @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);
 
 
-        #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);
-            }
+      .label {
+        &:after {
+          @include size(padding-left, 10px);
+          content: url("/static/img/arrow-gray.png");
+          vertical-align: top;
         }
         }
+      }
 
 
+      img {
+          vertical-align: middle;
+      }
+    }
 
 
-        #lang-menu-items {
-            z-index: 9999;
+    #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);
+      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);
-                }
+        @media screen and (min-width: 62.5em) {
+          @include size(padding, 5px 0);
+        }
 
 
-                border-width: 0;
-                @include size(border-bottom, 1px solid #ddd);
+        border-width: 0;
+        @include size(border-bottom, 1px solid #ddd);
 
 
-                @include size(font-size, 13px);
+        @include size(font-size, 13px);
 
 
-                &.active {
-                    color: #000;
-                }
-            }
+        &.active {
+          color: #000;
         }
         }
+      }
+    }
 
 
-        &:hover, &.hover {
-            #lang-menu-items {
-                position: absolute;
-                padding: 0;
-                right: 0;
-                width: 100%;
-                button {
-                    display: block;
-                }
-            }
+    &.hover {
+      #lang-menu-items {
+        position: absolute;
+        padding: 0;
+        right: 0;
+        width: 100%;
+        button {
+          display: block;
         }
         }
-
+      }
     }
 
     }
 
-
-    #main-menu-toggle {
-        position: absolute;
-        left: 0;
-        top: 0;
+    @media screen and (min-width: 1024px) {
+        right: 300px;
     }
     }
+  }
+
+  #main-menu-toggle {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  /*#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);
+      @include size(margin-left, 180px);
+      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);
+    }
 
 
-    X#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);
+    !* We want submenu on far left on small screens. *!
+    .hidden-box-wrapper {
+      position: static;
+      @media screen and (min-width: 24em) {
         position: relative;
         position: relative;
+      }
+    }
 
 
-        @media screen and (min-width: 24em) {
-            @include size(padding-top, 15px);
-            @include size(margin-left, 180px);
-            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);
-        }
+    #user-menu {
+      display: none;
 
 
-        /* We want submenu on far left on small screens. */
-        .hidden-box-wrapper {
-            position: static;
-            @media screen and (min-width: 24em) {
-                position: relative;
-            }
-        }
+      text-align: left;
+      line-height: 1.6em;
+      left: 0;
+      right: 0;
+      top: 2em;
 
 
-        #user-menu {
-            display: none;
+      @media screen and (min-width: 15em) {
+        right: auto;
+        width: 15em;
+      }
 
 
-            text-align: left;
-            line-height:1.6em;
-            left: 0;
-            right: 0;
-            top: 2em;
+      a {
+        color: #0D7E85;
+      }
+    }
+  }*/
 
 
-            @media screen and (min-width: 15em) {
-                right: auto;
-                width: 15em;
-            }
+  form#search-area {
+    position: relative;
+    clear: both;
+    @include size(height, 45px);
+    background: #444444;
+    color: white;
 
 
-            a {
-                color: #0D7E85;
-            }
-        }
+    @media screen and (min-width: 1024px) {
+      position: absolute;
+      @include size(top, 49px);
+      @include size(left, 240px);
+      @include size(right, 0);
     }
 
     }
 
-    form#search-area {
+    #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;
         position: relative;
-        clear: both;
-        @include size(height, 45px);
-        background: #444444;
-        color: white;
-
-        @media screen and (min-width: 1024px) {
-            position: absolute;
-            @include size(top, 49px);
-            @include size(left, 240px);
-            @include size(right, 0);
-        }
+        @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);
 
 
-        #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;
-                }
-            }
+        font-family: Gelasio, Georgia, serif;
+        @include size(font-size, 13px);
+        background-color: white;
+        color: black;
+
+        /* styling search placeholder */
+        &::placeholder {
+          font-family: Gelasio, Georgia, serif;
+          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;
+        &::-webkit-input-placeholder {
+          font-family: Gelasio, Georgia, serif;
+          font-style: italic;
+          color: #767676;
+        }
+        &::-moz-placeholder {
+          font-family: Gelasio, Georgia, serif;
+          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;
+    }
+  }
 }
 
 }
 
-
-
-
-
 @media screen and (min-width: 1024px) {
 @media screen and (min-width: 1024px) {
-    #whole-header {
-        height: 94px + 49px;
-    }
+  #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;
-        }
-    }
+  #header-wrapper {
+    position: relative;
+    background-color: $header_bg;
+  }
 }
 }