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

Delta Between Two Patch Sets: static/css/styles.css

Issue 29335113: Issue 2675 - Implemented responsive header for web.eyeo.com (Closed)
Left Patch Set: Minor code style and variable scope cleanup Created Feb. 29, 2016, 5:03 p.m.
Right Patch Set: Fixed code style and consistancy issues Created June 23, 2016, 5:23 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « static/acceptable-ads-application.html ('k') | static/images/logo.png » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
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 83 matching lines...) Expand 10 before | Expand all | Expand 10 after
94 font-size:14px; 94 font-size:14px;
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;
105 position: fixed; 104 position: fixed;
106 background-color: #ffffff; 105 background-color: #fff;
107 width: 100%; 106 width: 100%;
108 top: 0; 107 top: 0px;
109 left: 0; 108 left: 0px;
110 box-shadow: 0 0 12px rgba(0,0,0, 0.09); 109 box-shadow: 0px 0px 12px rgba(0,0,0, 0.09);
111 z-index: 10000; 110 z-index: 10000;
112 } 111 text-align: right;
113 112 }
114 #header.top 113
115 { 114 #header .content-block
116 padding: 8px 0; 115 {
116 position: relative;
117 padding: 15px 10px;
118 min-height: 32px;
119 }
120
121 #header.top .content-block
122 {
123 padding: 25px 10px;
117 } 124 }
118 125
119 #logo 126 #logo
120 { 127 {
121 float: left; 128 position: absolute;
saroyanm 2016/04/08 16:56:09 Why do we need to use float ?
juliandoucette 2016/04/25 19:08:55 Because I don't want it to overlap. - absolute/fi
juliandoucette 2016/04/25 19:13:54 Clarification: I'm talking about overlapping when
saroyanm 2016/05/06 14:49:27 I think you can alternatively have logo positioned
juliandoucette 2016/05/11 18:11:06 It would be better to set a minimum width on the c
saroyanm 2016/05/19 07:43:39 You are right setting min-width is looks to be a b
122 margin: 5px 0; 129 top: 7px;
130 left: 10px;
131 }
132
133 #header.top #logo
134 {
135 top: 17px;
136 }
137
138 #header .menu-button
139 {
140 margin: 0px 0px 0px 25px;
123 } 141 }
124 142
125 #menu 143 #menu
126 { 144 {
127 float: right; 145 display: inline;
128 vertical-align: middle; 146 vertical-align: middle;
129 } 147 }
130 148
131 .assistive-text 149 .assistive-text
132 { 150 {
133 position: absolute; 151 position: absolute !important;
152 height: 1px;
153 width: 1px;
154 overflow: hidden;
134 clip: rect(1px, 1px, 1px, 1px); 155 clip: rect(1px, 1px, 1px, 1px);
135 } 156 }
136 157
137 .menu-list 158 .menu-list
138 { 159 {
160 display: inline;
161 margin: 0px;
162 font-size: 15px;
139 list-style: none; 163 list-style: none;
140 margin: 0;
141 padding: 22px 0;
142 font-size: 14px;
143 float: right;
144 } 164 }
145 165
146 .menu-list li 166 .menu-list li
147 { 167 {
148 position: relative; 168 display: inline;
169 font-weight: bold;
149 white-space: nowrap; 170 white-space: nowrap;
150 display: block;
151 font-size: 15px;
152 font-weight: bold;
153 outline-width: 0;
154 float: left;
155 margin-right: 1px;
156 } 171 }
157 172
158 .menu-list li a 173 .menu-list li a
159 { 174 {
160 color: #979797; 175 color: #979797;
161 padding: 0 10px; 176 padding: 0 10px;
162 } 177 }
163 178
164 .menu-list li:hover > a, 179 .menu-list li:hover > a,
165 .menu-list li.current-menu-item > a 180 .menu-list li.current-menu-item > a
166 { 181 {
167 color: #373737; 182 color: #373737;
168 } 183 }
169 184
170 .menu-button 185 #header-hamburger
171 {
172 float: right;
173 margin: 14px 0 14px 25px;
174 }
175
176 #header-hamberger
177 { 186 {
178 display: none; 187 display: none;
179 } 188 }
180 189
181 #header-hamberger:hover, 190 #header-hamburger:hover .icon-bar,
182 #header-hamberger:active, 191 #header-hamburger:focus .icon-bar,
183 #header-hamberger:focus 192 #header-hamburger:active .icon-bar
184 { 193 {
185 background-color: transparent; 194 background-color: #000;
186 border: none; 195 }
187 outline: none; 196
188 } 197
189 198 .icon-bar
190 .icon-bar { 199 {
191 background-color: #888;
192 display: block; 200 display: block;
193 width: 22px; 201 width: 22px;
194 height: 2px; 202 height: 2px;
195 border-radius: 1px; 203 border-radius: 1px;
196 } 204 background-color: #888;
197 205 }
198 .icon-bar+.icon-bar { 206
207 .icon-bar+.icon-bar
208 {
199 margin-top: 4px; 209 margin-top: 4px;
200 } 210 }
201 211
202 #content:before, 212 #content:before,
203 #content:after, 213 #content:after,
204 #header:before,
205 #header:after,
206 .columns-container:before, 214 .columns-container:before,
207 .columns-container:after 215 .columns-container:after
208 { 216 {
209 content: " "; 217 content: " ";
210 display: table; 218 display: table;
211 } 219 }
212 220
213 #content:after, 221 #content:after,
214 #header:after,
215 .columns-container:after 222 .columns-container:after
216 { 223 {
217 clear: both; 224 clear: both;
218 } 225 }
219 226
220 #footer 227 #footer
221 { 228 {
222 color: #666; 229 color: #666;
223 background-color: #252525; 230 background-color: #252525;
224 padding-top: 30px; 231 padding-top: 30px;
(...skipping 564 matching lines...) Expand 10 before | Expand all | Expand 10 after
789 .why-work-here-button:focus 796 .why-work-here-button:focus
790 { 797 {
791 background-color: #333; 798 background-color: #333;
792 } 799 }
793 800
794 801
795 @media (max-width: 768px) 802 @media (max-width: 768px)
796 { 803 {
797 body 804 body
798 { 805 {
799 padding-top: 64px; 806 padding-top: 50px;
800 } 807 }
801 808
802 #logo > img 809 #header .content-block,
803 { 810 #header.top .content-block
804 height: 34px 811 {
812 padding: 9px 10px;
813 }
814
815 #header.top #logo
816 {
817 top: 7px;
818 }
819
820 #logo > img
821 {
822 height: 34px;
823 }
824
825 #menu
826 {
827 display: none;
828 }
829
830 #menu.open
831 {
832 display: block;
833 }
834
835 #header-hamburger
836 {
837 position: absolute;
838 top: 9px;
839 right: 10px;
840 display: block;
841 padding: 0px;
842 margin: 0px 5px;
843 background: none;
805 } 844 }
806 845
807 .menu-list 846 .menu-list
808 { 847 {
809 padding: 12px 0; 848 margin-top: 45px;
810 } 849 padding: 0px;
811 850 display: block;
812 .menu-item > a 851 }
813 { 852
814 font-size: 13px 853 .menu-list > li
854 {
855 display: block;
856 border-top: 1px solid #eee;
857 }
858
859 .menu-list > li > a
860 {
861 display: block;
862 margin: 0px;
863 padding: 10px;
864 font-size: 14px
815 } 865 }
816 866
817 .menu-button 867 .menu-button
818 { 868 {
819 margin: 5px 0 5px 10px; 869 position: absolute;
820 font-size: 13px 870 top: 9px;
871 right: 50px;
872 height: 32px;
873 padding: 0 10px;
874 line-height: 32px;
875 font-size: 14px;
821 } 876 }
822 877
823 .columns-container .column 878 .columns-container .column
824 { 879 {
825 width: 100%; 880 width: 100%;
826 margin-left: 0; 881 margin-left: 0;
827 clear: both; 882 clear: both;
828 } 883 }
829 884
830 #press-info .sidebar-left 885 #press-info .sidebar-left
831 { 886 {
832 text-align: inherit; 887 text-align: inherit;
833 } 888 }
834 889
835 #releases li > * 890 #releases li > *
836 { 891 {
837 display: block; 892 display: block;
838 } 893 }
839 894
840 .no-mobile 895 .no-mobile
841 { 896 {
842 display: none; 897 display: none;
843 }
844 }
845
846 @media(max-width: 660px)
saroyanm 2016/04/08 16:56:09 Why do we need two media queries ? I think would
juliandoucette 2016/04/25 19:08:55 This media query does have an admittedly small use
847 {
848 #menu
849 {
850 display: none;
851 float: none;
852 }
853
854 .menu-list
855 {
856 padding: 0;
857 float: none;
858 clear: both;
859 display: block;
860 }
861
862 #menu.open
863 {
864 display: block;
865 }
866
867 .menu-list > li
868 {
869 float: none;
870 display: block;
871 border-top: 1px solid #eee;
872 }
873
874 .menu-list > li > a
875 {
876 padding: 10px ;
877 display: block;
878 margin: 0;
879 }
880
881 .menu-button
882 {
883 height: 32px;
884 line-height: 32px;
885 padding: 0 10px;
886 margin: 7px 0;
887 }
888
889 #header-hamberger
890 {
891 display: block;
892 float: right;
893 margin: 5px -5px 0 5px;
894 background: none;
895 padding: 0 10px;
896 } 898 }
897 } 899 }
898 900
899 @media (min-width: 751px) 901 @media (min-width: 751px)
900 { 902 {
901 .ui-tabs-nav-vertical 903 .ui-tabs-nav-vertical
902 { 904 {
903 padding: .2em .1em .2em .2em; 905 padding: .2em .1em .2em .2em;
904 float: left; width: 100%; 906 float: left; width: 100%;
905 border-bottom: none; 907 border-bottom: none;
(...skipping 12 matching lines...) Expand all
918 padding-right: .1em; 920 padding-right: .1em;
919 border-right-width: 1px; 921 border-right-width: 1px;
920 border-right-width: 1px; 922 border-right-width: 1px;
921 } 923 }
922 924
923 #panels-openings 925 #panels-openings
924 { 926 {
925 margin-top: -40px; 927 margin-top: -40px;
926 } 928 }
927 } 929 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld