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 extra whitespace Created Jan. 29, 2016, 5:39 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: #fff;
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-list
808 {
809 padding: 12px 0;
810 }
811
812 .menu-item > a
813 {
814 font-size: 13px
815 }
816
817 .menu-button
818 {
819 margin: 5px 0 5px 10px;
820 font-size: 13px
821 }
822
790 .columns-container .column 823 .columns-container .column
791 { 824 {
792 width: 100%; 825 width: 100%;
793 margin-left: 0; 826 margin-left: 0;
794 clear: both; 827 clear: both;
795 } 828 }
796 829
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 830 #press-info .sidebar-left
814 { 831 {
815 text-align: inherit; 832 text-align: inherit;
816 } 833 }
817 834
818 #releases li > * 835 #releases li > *
819 { 836 {
820 display: block; 837 display: block;
821 } 838 }
822 839
823 .no-mobile 840 .no-mobile
824 { 841 {
825 display: none; 842 display: none;
826 } 843 }
827 } 844 }
828 845
846 @media(max-width: 660px)
847 {
848 #menu
849 {
850 display: block;
851 float: none;
852 }
853
854 #menu
855 {
856 display: none;
857 }
858
859 .menu-list
860 {
861 padding: 0;
862 float: none;
863 clear: both;
864 display: block;
865 }
866
867 #menu.open
868 {
869 display: block;
870 }
871
872 .menu-list > li
873 {
874 float: none;
875 display: block;
876 border-top: 1px solid #eee;
877 }
878
879 .menu-list > li > a
880 {
881 padding: 10px ;
882 display: block;
883 margin: 0;
884 }
885
886 .menu-button
887 {
888 padding: 0 14px;
889 margin: 5px 0;
890 }
891
892 #header-hamberger
893 {
894 display: block;
895 float: right;
896 margin: 5px -5px 0 5px;
897 background: none;
898 padding: 0 10px;
899 }
900 }
901
829 @media (min-width: 751px) 902 @media (min-width: 751px)
830 { 903 {
831 .ui-tabs-nav-vertical 904 .ui-tabs-nav-vertical
832 { 905 {
833 padding: .2em .1em .2em .2em; 906 padding: .2em .1em .2em .2em;
834 float: left; width: 100%; 907 float: left; width: 100%;
835 border-bottom: none; 908 border-bottom: none;
836 } 909 }
837 .ui-tabs-nav-vertical li 910 .ui-tabs-nav-vertical li
838 { 911 {
839 clear: left; 912 clear: left;
840 width: 100%; 913 width: 100%;
841 border-bottom-width: 1px !important; 914 border-bottom-width: 1px !important;
842 border-left: 1px solid #E1E1E1 !important; 915 border-left: 1px solid #E1E1E1 !important;
843 margin: 0 -1px .2em 0; 916 margin: 0 -1px .2em 0;
844 } 917 }
845 .ui-tabs-nav-vertical li.ui-tabs-active 918 .ui-tabs-nav-vertical li.ui-tabs-active
846 { 919 {
847 padding-bottom: 0; 920 padding-bottom: 0;
848 padding-right: .1em; 921 padding-right: .1em;
849 border-right-width: 1px; 922 border-right-width: 1px;
850 border-right-width: 1px; 923 border-right-width: 1px;
851 } 924 }
852 925
853 #panels-openings 926 #panels-openings
854 { 927 {
855 margin-top: -40px; 928 margin-top: -40px;
856 } 929 }
857 } 930 }
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