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

Side by Side 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.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | static/images/tog_logo.png » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * Fonts 2 * Fonts
3 */ 3 */
4 @font-face { 4 @font-face {
5 font-family: "Lato"; 5 font-family: "Lato";
6 font-style: normal; 6 font-style: normal;
7 font-weight: 400; 7 font-weight: 400;
8 src: local("Lato Regular"), local("Lato-Regular"), url(/fonts/Lato-Regular.wof f) format('woff'); 8 src: local("Lato Regular"), local("Lato-Regular"), url(/fonts/Lato-Regular.wof f) format('woff');
9 } 9 }
10 @font-face { 10 @font-face {
(...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after
95 } 95 }
96 96
97 h6 97 h6
98 { 98 {
99 font-size:12px; 99 font-size:12px;
100 } 100 }
101 101
102 #header 102 #header
103 { 103 {
104 display: block; 104 display: block;
105 position: absolute; 105 position: fixed;
106 background-color: #ffffff; 106 background-color: #ffffff;
107 width: 100%; 107 width: 100%;
108 top: 0; 108 top: 0;
109 left: 0; 109 left: 0;
110 box-shadow: 0 0 12px rgba(0,0,0, 0.09); 110 box-shadow: 0 0 12px rgba(0,0,0, 0.09);
111 z-index: 10000; 111 z-index: 10000;
112 } 112 }
113 113
114 #header.fixed 114 #header.top
115 { 115 {
116 position: fixed; 116 padding: 8px 0;
117 }
118
119 #header-content
120 {
121 display: table;
122 width: 100%;
123 } 117 }
124 118
125 #logo 119 #logo
126 { 120 {
127 display: table-cell; 121 float: left;
128 padding: 13px 0; 122 margin: 5px 0;
129 }
130
131 #header.fixed #logo
132 {
133 padding: 5px 0;
134 } 123 }
135 124
136 #menu 125 #menu
137 { 126 {
138 display: table-cell; 127 float: right;
139 vertical-align: middle; 128 vertical-align: middle;
140 width: 100%;
141 } 129 }
142 130
143 .assistive-text 131 .assistive-text
144 { 132 {
145 position: absolute; 133 position: absolute;
146 clip: rect(1px, 1px, 1px, 1px); 134 clip: rect(1px, 1px, 1px, 1px);
147 } 135 }
148 136
149 .menu-list 137 .menu-list
150 { 138 {
151 list-style: none; 139 list-style: none;
152 margin: 0; 140 margin: 0;
153 padding: 0; 141 padding: 22px 0;
154 min-height: 36px;
155 font-size: 14px; 142 font-size: 14px;
156 float: right; 143 float: right;
157 } 144 }
158 145
159 .menu-list li 146 .menu-list li
160 { 147 {
161 position: relative; 148 position: relative;
162 white-space: nowrap; 149 white-space: nowrap;
163 display: block; 150 display: block;
164 font-size: 15px; 151 font-size: 15px;
165 font-weight: bold; 152 font-weight: bold;
166 line-height: 36px;
167 outline-width: 0; 153 outline-width: 0;
168 float: left; 154 float: left;
169 margin-right: 1px; 155 margin-right: 1px;
170 } 156 }
171 157
172 .menu-list li a 158 .menu-list li a
173 { 159 {
174 color: #979797; 160 color: #979797;
175 padding: 0 10px; 161 padding: 0 10px;
176
177 -webkit-transition: all 0.3s ease;
178 -moz-transition: all 0.3s ease;
179 -o-transition: all 0.3s ease;
180 transition: all 0.3s ease;
181 } 162 }
182 163
183 .menu-list li:hover > a, 164 .menu-list li:hover > a,
184 .menu-list li.current-menu-item > a 165 .menu-list li.current-menu-item > a
185 { 166 {
186 color: #373737; 167 color: #373737;
187 } 168 }
188 169
189 .menu-button 170 .menu-button
190 { 171 {
191 float: right; 172 float: right;
192 margin-left: 25px; 173 margin: 14px 0 14px 25px;
174 }
175
176 #header-hamberger
177 {
178 display: none;
179 }
180
181 #header-hamberger:hover,
182 #header-hamberger:active,
183 #header-hamberger:focus
184 {
185 background-color: transparent;
186 border: none;
187 outline: none;
188 }
189
190 .icon-bar {
191 background-color: #888;
192 display: block;
193 width: 22px;
194 height: 2px;
195 border-radius: 1px;
196 }
197
198 .icon-bar+.icon-bar {
199 margin-top: 4px;
193 } 200 }
194 201
195 #content:before, 202 #content:before,
196 #content:after, 203 #content:after,
197 #header:before, 204 #header:before,
198 #header:after, 205 #header:after,
199 .columns-container:before, 206 .columns-container:before,
200 .columns-container:after 207 .columns-container:after
201 { 208 {
202 content: " "; 209 content: " ";
(...skipping 575 matching lines...) Expand 10 before | Expand all | Expand 10 after
778 background-color: #747474; 785 background-color: #747474;
779 } 786 }
780 787
781 .why-work-here-button:hover, 788 .why-work-here-button:hover,
782 .why-work-here-button:focus 789 .why-work-here-button:focus
783 { 790 {
784 background-color: #333; 791 background-color: #333;
785 } 792 }
786 793
787 794
788 @media (max-width: 750px) 795 @media (max-width: 768px)
789 { 796 {
797 body
798 {
799 padding-top: 64px;
800 }
801
802 #logo > img
803 {
804 height: 34px
805 }
806
807 #menu
808 {
809 display: none;
810 float: none;
811 }
812
813 #menu.open
814 {
815 display: block;
816 }
817
818 #header-hamberger
819 {
820 display: block;
821 float: right;
822 margin: 5px -5px 0 5px;
823 background: none;
824 padding: 0 10px;
825 }
826
827 .menu-list
828 {
829 padding: 0;
830 float: none;
831 clear: both;
832 display: block;
833 }
834
835 .menu-list > li
836 {
837 float: none;
838 display: block;
839 border-top: 1px solid #eee;
840 }
841
842 .menu-list > li > a
843 {
844 padding: 10px ;
845 display: block;
846 margin: 0;
847 font-size: 13px
848 }
849
850 .menu-button
851 {
852 height: 32px;
853 line-height: 32px;
854 padding: 0 10px;
855 margin: 7px 0;
856 font-size: 13px
857 }
858
790 .columns-container .column 859 .columns-container .column
791 { 860 {
792 width: 100%; 861 width: 100%;
793 margin-left: 0; 862 margin-left: 0;
794 clear: both; 863 clear: both;
795 } 864 }
796 865
797 #logo
798 {
799 padding: 5px 0;
800 }
801
802 #menu .menu-list
803 {
804 clear: both;
805 margin-left: -150px;
806 }
807
808 #menu .menu-button
809 {
810 margin-top: 5px;
811 }
812
813 #press-info .sidebar-left 866 #press-info .sidebar-left
814 { 867 {
815 text-align: inherit; 868 text-align: inherit;
816 } 869 }
817 870
818 #releases li > * 871 #releases li > *
819 { 872 {
820 display: block; 873 display: block;
821 } 874 }
822 875
823 .no-mobile 876 .no-mobile
824 { 877 {
825 display: none; 878 display: none;
826 } 879 }
827 } 880 }
828 881
829 @media (min-width: 751px) 882 @media (min-width: 751px)
830 { 883 {
831 .ui-tabs-nav-vertical 884 .ui-tabs-nav-vertical
832 { 885 {
886 float: left;
887 width: 100%;
833 padding: .2em .1em .2em .2em; 888 padding: .2em .1em .2em .2em;
834 float: left; width: 100%;
835 border-bottom: none; 889 border-bottom: none;
836 } 890 }
837 .ui-tabs-nav-vertical li 891 .ui-tabs-nav-vertical li
838 { 892 {
839 clear: left; 893 clear: left;
840 width: 100%; 894 width: 100%;
895 margin: 0 -1px .2em 0;
841 border-bottom-width: 1px !important; 896 border-bottom-width: 1px !important;
842 border-left: 1px solid #E1E1E1 !important; 897 border-left: 1px solid #E1E1E1 !important;
843 margin: 0 -1px .2em 0;
844 } 898 }
845 .ui-tabs-nav-vertical li.ui-tabs-active 899 .ui-tabs-nav-vertical li.ui-tabs-active
846 { 900 {
847 padding-bottom: 0; 901 padding-bottom: 0;
848 padding-right: .1em; 902 padding-right: .1em;
849 border-right-width: 1px; 903 border-right-width: 1px;
850 border-right-width: 1px; 904 border-right-width: 1px;
851 } 905 }
852 906
853 #panels-openings 907 #panels-openings
854 { 908 {
855 margin-top: -40px; 909 margin-top: -40px;
856 } 910 }
857 } 911 }
OLDNEW
« 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