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 extra whitespace Created Jan. 29, 2016, 5:39 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
diff --git a/static/css/styles.css b/static/css/styles.css
index 58dd31179abe67d3a0bebc6fb1fbd2a6cccc2567..8b46083c3c92562b69961b07e94545d6ac91b40a 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -102,8 +102,8 @@ h6
#header
{
display: block;
- position: absolute;
- background-color: #ffffff;
+ position: fixed;
+ background: #fff;
width: 100%;
top: 0;
left: 0;
@@ -111,33 +111,21 @@ h6
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
@@ -150,8 +138,7 @@ h6
{
list-style: none;
margin: 0;
- padding: 0;
- min-height: 36px;
+ padding: 22px 0;
font-size: 14px;
float: right;
}
@@ -163,7 +150,6 @@ h6
display: block;
font-size: 15px;
font-weight: bold;
- line-height: 36px;
outline-width: 0;
float: left;
margin-right: 1px;
@@ -173,11 +159,6 @@ h6
{
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,
@@ -189,7 +170,33 @@ h6
.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,
@@ -785,29 +792,39 @@ header > *, .content-block
}
-@media (max-width: 750px)
+@media (max-width: 768px)
{
- .columns-container .column
+ body
{
- width: 100%;
- margin-left: 0;
- clear: both;
+ padding-top: 64px;
}
- #logo
+ #logo > img
{
- padding: 5px 0;
+ height: 34px
}
- #menu .menu-list
+ .menu-list
{
- clear: both;
- margin-left: -150px;
+ padding: 12px 0;
+ }
+
+ .menu-item > a
+ {
+ font-size: 13px
}
- #menu .menu-button
+ .menu-button
{
- margin-top: 5px;
+ margin: 5px 0 5px 10px;
+ font-size: 13px
+ }
+
+ .columns-container .column
+ {
+ width: 100%;
+ margin-left: 0;
+ clear: both;
}
#press-info .sidebar-left
@@ -826,6 +843,62 @@ header > *, .content-block
}
}
+@media(max-width: 660px)
+{
+ #menu
+ {
+ display: block;
+ float: none;
+ }
+
+ #menu
+ {
+ display: none;
+ }
+
+ .menu-list
+ {
+ padding: 0;
+ float: none;
+ clear: both;
+ display: block;
+ }
+
+ #menu.open
+ {
+ display: block;
+ }
+
+ .menu-list > li
+ {
+ float: none;
+ display: block;
+ border-top: 1px solid #eee;
+ }
+
+ .menu-list > li > a
+ {
+ padding: 10px ;
+ display: block;
+ margin: 0;
+ }
+
+ .menu-button
+ {
+ padding: 0 14px;
+ margin: 5px 0;
+ }
+
+ #header-hamberger
+ {
+ display: block;
+ float: right;
+ margin: 5px -5px 0 5px;
+ background: none;
+ padding: 0 10px;
+ }
+}
+
@media (min-width: 751px)
{
.ui-tabs-nav-vertical
« 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