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: Fixed logo, floats, css style, and IE8 events Created June 16, 2016, 5:43 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 | « static/acceptable-ads-application.html ('k') | static/images/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 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; 104 position: fixed;
105 position: absolute; 105 background-color: #fff;
106 background-color: #ffffff;
107 width: 100%; 106 width: 100%;
108 top: 0; 107 top: 0;
109 left: 0; 108 left: 0;
110 box-shadow: 0 0 12px rgba(0,0,0, 0.09); 109 box-shadow: 0 0 12px rgba(0,0,0, 0.09);
111 z-index: 10000; 110 z-index: 10000;
112 } 111 text-align: right;
113 112 }
114 #header.fixed 113
115 { 114 #header .content-block
116 position: fixed; 115 {
117 } 116 position: relative;
118 117 padding: 15px 10px;
119 #header-content 118 min-height: 32px;
120 { 119 }
121 display: table; 120
122 width: 100%; 121 #header.top .content-block
122 {
123 padding: 25px 10px;
123 } 124 }
124 125
125 #logo 126 #logo
126 { 127 {
127 display: table-cell; 128 position: absolute;
128 padding: 13px 0; 129 top: 7px;
129 } 130 left: 10px;
130 131 }
131 #header.fixed #logo 132
132 { 133 #header.top #logo
133 padding: 5px 0; 134 {
135 top: 17.5px;
136 }
137
138 #header .menu-button
139 {
140 margin: 0 0 0 25px;
134 } 141 }
135 142
136 #menu 143 #menu
137 { 144 {
138 display: table-cell; 145 display: inline;
139 vertical-align: middle; 146 vertical-align: middle;
140 width: 100%;
141 } 147 }
142 148
143 .assistive-text 149 .assistive-text
144 { 150 {
145 position: absolute; 151 position: absolute;
146 clip: rect(1px, 1px, 1px, 1px); 152 clip: rect(1px, 1px, 1px, 1px);
153 top: -99999px;
154 left: -99999px;
147 } 155 }
148 156
149 .menu-list 157 .menu-list
150 { 158 {
159 display: inline;
160 margin: 0px;
161 font-size: 15px;
151 list-style: none; 162 list-style: none;
152 margin: 0;
153 padding: 0;
154 min-height: 36px;
155 font-size: 14px;
156 float: right;
157 } 163 }
158 164
159 .menu-list li 165 .menu-list li
160 { 166 {
161 position: relative; 167 display: inline;
168 font-weight: bold;
162 white-space: nowrap; 169 white-space: nowrap;
163 display: block;
164 font-size: 15px;
165 font-weight: bold;
166 line-height: 36px;
167 outline-width: 0;
168 float: left;
169 margin-right: 1px;
170 } 170 }
171 171
172 .menu-list li a 172 .menu-list li a
173 { 173 {
174 color: #979797; 174 color: #979797;
175 padding: 0 10px; 175 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 } 176 }
182 177
183 .menu-list li:hover > a, 178 .menu-list li:hover > a,
184 .menu-list li.current-menu-item > a 179 .menu-list li.current-menu-item > a
185 { 180 {
186 color: #373737; 181 color: #373737;
187 } 182 }
188 183
189 .menu-button 184 #header-hamburger
190 { 185 {
191 float: right; 186 display: none;
192 margin-left: 25px; 187 }
188
189 #header-hamburger:hover .icon-bar,
190 #header-hamburger:focus .icon-bar,
191 #header-hamburger:active .icon-bar
192 {
193 background-color: #000;
194 }
195
196
197 .icon-bar
198 {
199 display: block;
200 width: 22px;
201 height: 2px;
202 border-radius: 1px;
203 background-color: #888;
204 }
205
206 .icon-bar+.icon-bar
207 {
208 margin-top: 4px;
193 } 209 }
194 210
195 #content:before, 211 #content:before,
196 #content:after, 212 #content:after,
197 #header:before,
198 #header:after,
199 .columns-container:before, 213 .columns-container:before,
200 .columns-container:after 214 .columns-container:after
201 { 215 {
202 content: " "; 216 content: " ";
203 display: table; 217 display: table;
204 } 218 }
205 219
206 #content:after, 220 #content:after,
207 #header:after,
208 .columns-container:after 221 .columns-container:after
209 { 222 {
210 clear: both; 223 clear: both;
211 } 224 }
212 225
213 #footer 226 #footer
214 { 227 {
215 color: #666; 228 color: #666;
216 background-color: #252525; 229 background-color: #252525;
217 padding-top: 30px; 230 padding-top: 30px;
(...skipping 560 matching lines...) Expand 10 before | Expand all | Expand 10 after
778 background-color: #747474; 791 background-color: #747474;
779 } 792 }
780 793
781 .why-work-here-button:hover, 794 .why-work-here-button:hover,
782 .why-work-here-button:focus 795 .why-work-here-button:focus
783 { 796 {
784 background-color: #333; 797 background-color: #333;
785 } 798 }
786 799
787 800
788 @media (max-width: 750px) 801 @media (max-width: 768px)
789 { 802 {
803 body
804 {
805 padding-top: 64px;
806 }
807
808 #header .content-block,
809 #header.top .content-block
810 {
811 padding: 9px 10px;
812 }
813
814 #header.top #logo
815 {
816 top: 7px;
817 }
818
819 #logo > img
820 {
821 height: 34px;
822 }
823
824 #menu
825 {
826 display: none;
827 }
828
829 #menu.open
830 {
831 display: block;
832 }
833
834 #header-hamburger
835 {
836 position: absolute;
837 top: 9px;
838 right: 10px;
839 display: block;
840 padding: 0px;
841 margin: 0px 5px;
842 background: none;
843 }
844
845 .menu-list
846 {
847 margin-top: 45px;
848 padding: 0px;
849 display: block;
850 }
851
852 .menu-list > li
853 {
854 display: block;
855 border-top: 1px solid #eee;
856 }
857
858 .menu-list > li > a
859 {
860 padding: 10px;
861 display: block;
862 margin: 0px;
863 font-size: 14px
864 }
865
866 .menu-button
867 {
868 position: absolute;
869 top: 9px;
870 right: 50px;
871 height: 32px;
872 line-height: 32px;
873 padding: 0 10px;
874 font-size: 14px;
875 }
876
790 .columns-container .column 877 .columns-container .column
791 { 878 {
792 width: 100%; 879 width: 100%;
793 margin-left: 0; 880 margin-left: 0;
794 clear: both; 881 clear: both;
795 } 882 }
796 883
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 884 #press-info .sidebar-left
814 { 885 {
815 text-align: inherit; 886 text-align: inherit;
816 } 887 }
817 888
818 #releases li > * 889 #releases li > *
819 { 890 {
820 display: block; 891 display: block;
821 } 892 }
822 893
823 .no-mobile 894 .no-mobile
824 { 895 {
825 display: none; 896 display: none;
826 } 897 }
827 } 898 }
828 899
829 @media (min-width: 751px) 900 @media (min-width: 751px)
830 { 901 {
831 .ui-tabs-nav-vertical 902 .ui-tabs-nav-vertical
832 { 903 {
904 float: left;
905 width: 100%;
833 padding: .2em .1em .2em .2em; 906 padding: .2em .1em .2em .2em;
834 float: left; width: 100%;
835 border-bottom: none; 907 border-bottom: none;
836 } 908 }
837 .ui-tabs-nav-vertical li 909 .ui-tabs-nav-vertical li
838 { 910 {
839 clear: left; 911 clear: left;
840 width: 100%; 912 width: 100%;
841 border-bottom-width: 1px !important; 913 border-bottom-width: 1px !important;
842 border-left: 1px solid #E1E1E1 !important; 914 border-left: 1px solid #E1E1E1 !important;
843 margin: 0 -1px .2em 0; 915 margin: 0 -1px .2em 0;
844 } 916 }
845 .ui-tabs-nav-vertical li.ui-tabs-active 917 .ui-tabs-nav-vertical li.ui-tabs-active
846 { 918 {
847 padding-bottom: 0; 919 padding-bottom: 0;
848 padding-right: .1em; 920 padding-right: .1em;
849 border-right-width: 1px; 921 border-right-width: 1px;
850 border-right-width: 1px; 922 border-right-width: 1px;
851 } 923 }
852 924
853 #panels-openings 925 #panels-openings
854 { 926 {
855 margin-top: -40px; 927 margin-top: -40px;
856 } 928 }
857 } 929 }
OLDNEW
« no previous file with comments | « static/acceptable-ads-application.html ('k') | static/images/logo.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld