$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 {
- @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(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 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) {
- 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;
- 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;
}
+ }
}
fnp / wolnelektury.git / blobdiff