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: Implemented scripts in vanilla.js Created May 11, 2016, 11:25 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 {
saroyanm 2016/05/19 07:43:39 Detail: "CSS number values should specify units wh
juliandoucette 2016/05/19 12:01:41 Good catch. Thanks.
juliandoucette 2016/06/16 18:07:44 Done.
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;
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
saroyanm 2016/05/19 07:43:40 Detail: It's "hamburger", same goes to the styles
juliandoucette 2016/05/19 12:01:44 Haha, the magic of auto-complete. (Persistent typo
juliandoucette 2016/06/16 18:07:44 Done.
177 { 186 {
178 display: none; 187 display: none;
179 } 188 }
180 189
181 #header-hamberger:hover, 190 #header-hamburger:hover .icon-bar,
saroyanm 2016/05/19 07:43:40 It feels like that this styles are redundant
juliandoucette 2016/05/19 12:01:45 I feel you :(. I'm killing the default button styl
juliandoucette 2016/06/16 18:07:44 Done.
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 {
saroyanm 2016/05/19 07:43:40 Maybe you can modify this styles to make it obviou
saroyanm 2016/05/19 07:43:40 Detail: According to the style guide "opening brac
juliandoucette 2016/05/19 12:01:42 My mistake.
juliandoucette 2016/05/19 12:01:44 Will do.
juliandoucette 2016/06/16 18:07:43 Done.
191 background-color: #888;
192 display: block; 200 display: block;
saroyanm 2016/05/19 07:43:40 Detail: According to our style guide colors and ty
juliandoucette 2016/05/19 12:01:41 My mistake.
juliandoucette 2016/06/16 18:07:45 Done.
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;
807 }
808
809 #header .content-block,
810 #header.top .content-block
811 {
812 padding: 9px 10px;
813 }
814
815 #header.top #logo
816 {
817 top: 7px;
800 } 818 }
801 819
802 #logo > img 820 #logo > img
803 { 821 {
804 height: 34px 822 height: 34px;
805 } 823 }
806 824
807 #menu 825 #menu
808 { 826 {
809 display: none; 827 display: none;
810 float: none;
811 } 828 }
812 829
813 #menu.open 830 #menu.open
814 { 831 {
815 display: block; 832 display: block;
816 } 833 }
817 834
818 #header-hamberger 835 #header-hamburger
819 { 836 {
837 position: absolute;
838 top: 9px;
839 right: 10px;
820 display: block; 840 display: block;
821 float: right; 841 padding: 0px;
822 margin: 5px -5px 0 5px; 842 margin: 0px 5px;
823 background: none; 843 background: none;
824 padding: 0 10px;
825 } 844 }
826 845
827 .menu-list 846 .menu-list
828 { 847 {
829 padding: 0; 848 margin-top: 45px;
830 float: none; 849 padding: 0px;
831 clear: both;
832 display: block; 850 display: block;
833 } 851 }
834 852
835 .menu-list > li 853 .menu-list > li
836 { 854 {
837 float: none;
838 display: block; 855 display: block;
839 border-top: 1px solid #eee; 856 border-top: 1px solid #eee;
840 } 857 }
841 858
842 .menu-list > li > a 859 .menu-list > li > a
843 { 860 {
844 padding: 10px ;
845 display: block; 861 display: block;
846 margin: 0; 862 margin: 0px;
847 font-size: 13px 863 padding: 10px;
864 font-size: 14px
848 } 865 }
849 866
850 .menu-button 867 .menu-button
851 { 868 {
869 position: absolute;
870 top: 9px;
871 right: 50px;
852 height: 32px; 872 height: 32px;
873 padding: 0 10px;
853 line-height: 32px; 874 line-height: 32px;
854 padding: 0 10px; 875 font-size: 14px;
855 margin: 7px 0;
856 font-size: 13px
857 } 876 }
858 877
859 .columns-container .column 878 .columns-container .column
860 { 879 {
861 width: 100%; 880 width: 100%;
862 margin-left: 0; 881 margin-left: 0;
863 clear: both; 882 clear: both;
864 } 883 }
865 884
866 #press-info .sidebar-left 885 #press-info .sidebar-left
867 { 886 {
868 text-align: inherit; 887 text-align: inherit;
869 } 888 }
870 889
871 #releases li > * 890 #releases li > *
872 { 891 {
873 display: block; 892 display: block;
874 } 893 }
875 894
876 .no-mobile 895 .no-mobile
877 { 896 {
878 display: none; 897 display: none;
879 } 898 }
880 } 899 }
881 900
882 @media (min-width: 751px) 901 @media (min-width: 751px)
883 { 902 {
884 .ui-tabs-nav-vertical 903 .ui-tabs-nav-vertical
885 { 904 {
886 float: left;
887 width: 100%;
888 padding: .2em .1em .2em .2em; 905 padding: .2em .1em .2em .2em;
906 float: left; width: 100%;
889 border-bottom: none; 907 border-bottom: none;
890 } 908 }
891 .ui-tabs-nav-vertical li 909 .ui-tabs-nav-vertical li
892 { 910 {
893 clear: left; 911 clear: left;
894 width: 100%; 912 width: 100%;
895 margin: 0 -1px .2em 0;
saroyanm 2016/05/19 07:43:40 Is the change a leftover ?
juliandoucette 2016/05/19 12:01:41 I changed the order to match the style guide.
saroyanm 2016/05/23 12:39:20 Borders and margins are part of box model. I think
juliandoucette 2016/06/16 18:07:44 Done.
896 border-bottom-width: 1px !important; 913 border-bottom-width: 1px !important;
897 border-left: 1px solid #E1E1E1 !important; 914 border-left: 1px solid #E1E1E1 !important;
915 margin: 0 -1px .2em 0;
898 } 916 }
899 .ui-tabs-nav-vertical li.ui-tabs-active 917 .ui-tabs-nav-vertical li.ui-tabs-active
900 { 918 {
901 padding-bottom: 0; 919 padding-bottom: 0;
902 padding-right: .1em; 920 padding-right: .1em;
903 border-right-width: 1px; 921 border-right-width: 1px;
904 border-right-width: 1px; 922 border-right-width: 1px;
905 } 923 }
906 924
907 #panels-openings 925 #panels-openings
908 { 926 {
909 margin-top: -40px; 927 margin-top: -40px;
910 } 928 }
911 } 929 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld