Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: static/css/styles.css

Issue 29335113: Issue 2675 - Implemented responsive header for web.eyeo.com (Closed)
Patch Set: Removed phablet media query Created May 11, 2016, 6:31 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | static/images/tog_logo.png » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: static/css/styles.css
===================================================================
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -97,104 +97,111 @@
h6
{
font-size:12px;
}
#header
{
display: block;
- position: absolute;
+ position: fixed;
background-color: #ffffff;
width: 100%;
top: 0;
left: 0;
box-shadow: 0 0 12px rgba(0,0,0, 0.09);
z-index: 10000;
}
-#header.fixed
+#header.top
{
- position: fixed;
-}
-
-#header-content
-{
- display: table;
- width: 100%;
+ padding: 8px 0;
}
#logo
{
- display: table-cell;
- padding: 13px 0;
-}
-
-#header.fixed #logo
-{
- padding: 5px 0;
+ float: left;
+ margin: 5px 0;
}
#menu
{
- display: table-cell;
+ float: right;
vertical-align: middle;
- width: 100%;
}
.assistive-text
{
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
.menu-list
{
list-style: none;
margin: 0;
- padding: 0;
- min-height: 36px;
+ padding: 22px 0;
font-size: 14px;
float: right;
}
.menu-list li
{
position: relative;
white-space: nowrap;
display: block;
font-size: 15px;
font-weight: bold;
- line-height: 36px;
outline-width: 0;
float: left;
margin-right: 1px;
}
.menu-list li a
{
color: #979797;
padding: 0 10px;
-
- -webkit-transition: all 0.3s ease;
- -moz-transition: all 0.3s ease;
- -o-transition: all 0.3s ease;
- transition: all 0.3s ease;
}
.menu-list li:hover > a,
.menu-list li.current-menu-item > a
{
color: #373737;
}
.menu-button
{
float: right;
- margin-left: 25px;
+ margin: 14px 0 14px 25px;
+}
+
+#header-hamberger
+{
+ display: none;
+}
+
+#header-hamberger:hover,
+#header-hamberger:active,
+#header-hamberger:focus
+{
+ background-color: transparent;
+ border: none;
+ outline: none;
+}
+
+.icon-bar {
+ background-color: #888;
+ display: block;
+ width: 22px;
+ height: 2px;
+ border-radius: 1px;
+}
+
+.icon-bar+.icon-bar {
+ margin-top: 4px;
}
#content:before,
#content:after,
#header:before,
#header:after,
.columns-container:before,
.columns-container:after
@@ -780,41 +787,87 @@
.why-work-here-button:hover,
.why-work-here-button:focus
{
background-color: #333;
}
-@media (max-width: 750px)
+@media (max-width: 768px)
{
+ body
+ {
+ padding-top: 64px;
+ }
+
+ #logo > img
+ {
+ height: 34px
+ }
+
+ #menu
+ {
+ display: none;
+ float: none;
+ }
+
+ #menu.open
+ {
+ display: block;
+ }
+
+ #header-hamberger
+ {
+ display: block;
+ float: right;
+ margin: 5px -5px 0 5px;
+ background: none;
+ padding: 0 10px;
+ }
+
+ .menu-list
+ {
+ padding: 0;
+ float: none;
+ clear: both;
+ display: block;
+ }
+
+ .menu-list > li
+ {
+ float: none;
+ display: block;
+ border-top: 1px solid #eee;
+ }
+
+ .menu-list > li > a
+ {
+ padding: 10px ;
+ display: block;
+ margin: 0;
+ font-size: 13px
+ }
+
+ .menu-button
+ {
+ height: 32px;
+ line-height: 32px;
+ padding: 0 10px;
+ margin: 7px 0;
+ font-size: 13px
+ }
+
.columns-container .column
{
width: 100%;
margin-left: 0;
clear: both;
}
- #logo
- {
- padding: 5px 0;
- }
-
- #menu .menu-list
- {
- clear: both;
- margin-left: -150px;
- }
-
- #menu .menu-button
- {
- margin-top: 5px;
- }
-
#press-info .sidebar-left
{
text-align: inherit;
}
#releases li > *
{
display: block;
@@ -825,27 +878,28 @@
display: none;
}
}
@media (min-width: 751px)
{
.ui-tabs-nav-vertical
{
+ float: left;
+ width: 100%;
padding: .2em .1em .2em .2em;
- float: left; width: 100%;
border-bottom: none;
}
.ui-tabs-nav-vertical li
{
clear: left;
width: 100%;
+ margin: 0 -1px .2em 0;
border-bottom-width: 1px !important;
border-left: 1px solid #E1E1E1 !important;
- margin: 0 -1px .2em 0;
}
.ui-tabs-nav-vertical li.ui-tabs-active
{
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
« no previous file with comments | « no previous file | static/images/tog_logo.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld