headers in tag list

[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..251df9f 100755 (executable)
--- a/src/wolnelektury/static/scss/main/header.scss
+++ b/src/wolnelektury/static/scss/main/header.scss
@@ -1,215 +1,319 @@
 $header_bg: #191919;
 $header_bg: #191919;

+$small_logo: .9;

 
 

+#banners {
+  display: inline-block;
+  width: 100%;

 
 

-#header-wrapper {
-    position: relative;
+  > a {
+    display: block;
+    width: 100%;
+  }

 
 

-    /* 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;
-    }
+  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;
+  @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: 62.5em) {
-        position: relative;
+  @media screen and (min-width: 1024px) {
+    width: 975px;
+    margin: auto;
+
+  }
+
+  a {
+    color: #17CFDB;
+  }
+
+  #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(height, 94px);

-        @include size(width, 975px);
-        margin: auto;
+        margin-top: 0;
+        margin-left: 0;
+      }

     }
 
     }
 

-    a {
-        color: #17CFDB;
+    @media screen and (min-width: 1024px) {
+      margin-left: 0;

     }
     }

+  }

 
 

-    #logo {
-        display: block;
-        @include size(height, 94px);
+  #tagline {
+    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(width, 173px);
-            float: left;
-        }
+    @media screen and (min-width: 1024px) {
+      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);
-            @include size(margin-left, 180px);
-            text-align: right;
-        }
+  #lang-menu {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;

 
 

-        @media screen and (min-width: 62.5em) {
-            position: absolute;
-            @include size(top, 10px);
-            @include size(left, 255px);
-            @include size(margin-left, 0px);
+    @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);
+      }

     }
 
     }
 

-    #user-info {
-        margin-top: 0;
-        @include size(margin-left, 5px);
-        @include size(margin-right, 5px);
-        padding-top: 0;
+    #lang-menu-items {
+      z-index: 9999;
+
+      button {

         @include mono;
         @include mono;

-        @include size(font-size, 10px);
-        position: relative;
+        display: none;
+        background: #f7f7f7;
+        color: #6f6f6f;
+        cursor: pointer;
+        width: 100%;
+        margin: 0;
+        @include size(padding, 10px 0);

 
 

-        @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) {
         @media screen and (min-width: 62.5em) {

-            position: absolute;
-            top: 0;
-            right: 0;
-            @include size(margin-left, 0);
-            @include size(margin-right, 0);
+          @include size(padding, 5px 0);
+        }
+
+        border-width: 0;
+        @include size(border-bottom, 1px solid #ddd);
+
+        @include size(font-size, 13px);
+
+        &.active {
+          color: #000;

         }
         }

+      }
+    }

 
 

-        /* We want submenu on far left on small screens. */
-        .hidden-box-wrapper {
-            position: static;
-            @media screen and (min-width: 24em) {
-                position: relative;
-            }
+    &:hover, &.hover {
+      #lang-menu-items {
+        position: absolute;
+        padding: 0;
+        right: 0;
+        width: 100%;
+        button {
+          display: block;

         }
         }

+      }
+    }

 
 

-        #user-menu {
-            display: none;
+  }

 
 

-            text-align: left;
-            line-height:1.6em;
-            left: 0;
-            right: 0;
-            top: 2em;
+  #main-menu-toggle {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }

 
 

-            @media screen and (min-width: 15em) {
-                right: auto;
-                width: 15em;
-            }
+  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);
+    position: relative;

 
 

-            a {
-                color: #0D7E85;
-            }
-        }
+    @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);

     }
 
     }
 

-    form#search-area {
+    /* We want submenu on far left on small screens. */
+    .hidden-box-wrapper {
+      position: static;
+      @media screen and (min-width: 24em) {

         position: relative;
         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);
-        }
+    #user-menu {
+      display: none;
+
+      text-align: left;
+      line-height: 1.6em;
+      left: 0;
+      right: 0;
+      top: 2em;

 
 

-        #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;
-                }
-            }
+      @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: 1024px) {
+      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;

         }
         }

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

     }
     }

+  }

 }
 }