OLD | NEW |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
4 | 4 |
| 5 @font-face { |
| 6 font-family: 'Roboto2'; |
| 7 font-weight: 400; |
| 8 src: local('Roboto'), local('Roboto2-Regular'); |
| 9 } |
| 10 |
5 html { | 11 html { |
6 height: 100%; | 12 height: 100%; |
7 width: 100%; | 13 width: 100%; |
8 } | 14 } |
9 | 15 |
10 body { | 16 body { |
11 -webkit-align-items: center; | 17 -webkit-align-items: center; |
12 -webkit-flex-direction: column; | 18 -webkit-flex-direction: column; |
13 background-color: #f4f4f4; | 19 background-color: #fafafa; |
14 box-sizing: border-box; | 20 box-sizing: border-box; |
15 display: -webkit-flex; | 21 display: -webkit-flex; |
16 font-family: Droid Sans; | 22 font-family: 'Roboto2', sans-serif; |
17 height: 100%; | 23 height: 100%; |
18 margin: 0 auto; | 24 margin: 0 auto; |
19 max-width: 600px; | 25 max-width: 600px; |
20 padding: 20px; | 26 padding: 20px; |
21 width: 100%; | 27 width: 100%; |
22 } | 28 } |
23 | 29 |
24 a { | 30 a { |
25 color: rgb(51, 181, 229); | 31 color: rgb(51, 181, 229); |
26 } | 32 } |
27 | 33 |
28 .spacing { | 34 .spacing { |
29 -webkit-flex: 1; | 35 -webkit-flex: 1; |
30 } | 36 } |
31 | 37 |
32 #logo { | 38 #logo { |
33 -webkit-flex-shrink: 1; | 39 -webkit-flex-shrink: 1; |
34 background-position: center; | 40 background-position: center; |
35 background-repeat: no-repeat; | 41 background-repeat: no-repeat; |
36 background-size: contain; | 42 background-size: contain; |
37 min-height: 60px; | 43 min-height: 60px; |
38 width: 100%; | 44 width: 100%; |
39 } | 45 } |
40 | 46 |
41 #take-a-tour { | 47 #take-a-tour { |
42 -webkit-flex: none; | 48 -webkit-flex: none; |
43 background: linear-gradient(to bottom, #f5f5f5, #f1f1f1); | 49 background-color: rgb(66, 133, 244); |
44 border: 1px solid #ccc; | |
45 border-radius: 2px; | 50 border-radius: 2px; |
46 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), | 51 color: white; |
47 inset 0 0 2px rgba(255, 255, 255, 0.6); | |
48 color: rgb(73, 73, 74); | |
49 display: block; | 52 display: block; |
50 font-size: 20px; | 53 font-size: 18px; |
51 font-weight: bold; | 54 font-weight: medium; |
52 margin: 20px auto 0; | 55 margin: 20px auto 0; |
53 max-width: 400px; | 56 max-width: 320px; |
54 padding: 11px 0; | 57 padding: 15px 0; |
55 text-align: center; | 58 text-align: center; |
56 text-decoration: none; | 59 text-decoration: none; |
| 60 text-transform: uppercase; |
57 width: 100%; | 61 width: 100%; |
58 } | 62 } |
59 | 63 |
60 #take-a-tour:active { | |
61 border: 1px solid #a1a1a1; | |
62 box-shadow: inset 0 5px 15px rgba(100, 100, 100, 0.20); | |
63 } | |
64 | |
65 .footer { | 64 .footer { |
66 -webkit-flex: none; | 65 -webkit-flex: none; |
67 color: #646464; | 66 color: #646464; |
68 font-size: 1.3em; | 67 font-size: 1.3em; |
69 margin-top: 20px; | 68 margin-top: 20px; |
70 text-align: center; | 69 text-align: center; |
71 } | 70 } |
72 | 71 |
73 /* Logos */ | 72 /* Logos */ |
74 @media only screen { | 73 @media only screen { |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
107 @media only screen and (min-height: 601px) { | 106 @media only screen and (min-height: 601px) { |
108 body { | 107 body { |
109 padding: 100px 20px; | 108 padding: 100px 20px; |
110 } | 109 } |
111 | 110 |
112 #take-a-tour, | 111 #take-a-tour, |
113 #footer { | 112 #footer { |
114 margin-top: 60px; | 113 margin-top: 60px; |
115 } | 114 } |
116 } | 115 } |
OLD | NEW |