OLD | NEW |
| (Empty) |
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 | |
3 * found in the LICENSE file. */ | |
4 | |
5 @font-face { | |
6 font-family: 'Roboto2'; | |
7 font-weight: 400; | |
8 src: local('Roboto'), local('Roboto2-Regular'); | |
9 } | |
10 | |
11 html { | |
12 height: 100%; | |
13 width: 100%; | |
14 } | |
15 | |
16 body { | |
17 -webkit-align-items: center; | |
18 -webkit-flex-direction: column; | |
19 background-color: #fafafa; | |
20 box-sizing: border-box; | |
21 display: -webkit-flex; | |
22 font-family: 'Roboto2', sans-serif; | |
23 height: 100%; | |
24 margin: 0 auto; | |
25 max-width: 600px; | |
26 padding: 20px; | |
27 width: 100%; | |
28 } | |
29 | |
30 a { | |
31 color: rgb(51, 181, 229); | |
32 } | |
33 | |
34 .spacing { | |
35 -webkit-flex: 1; | |
36 } | |
37 | |
38 #logo { | |
39 -webkit-flex-shrink: 1; | |
40 background-position: center; | |
41 background-repeat: no-repeat; | |
42 background-size: contain; | |
43 min-height: 60px; | |
44 width: 100%; | |
45 } | |
46 | |
47 #take-a-tour { | |
48 -webkit-flex: none; | |
49 background-color: rgb(66, 133, 244); | |
50 border-radius: 2px; | |
51 color: white; | |
52 display: block; | |
53 font-size: 18px; | |
54 font-weight: medium; | |
55 margin: 20px auto 0; | |
56 max-width: 320px; | |
57 padding: 15px 0; | |
58 text-align: center; | |
59 text-decoration: none; | |
60 text-transform: uppercase; | |
61 width: 100%; | |
62 } | |
63 | |
64 .footer { | |
65 -webkit-flex: none; | |
66 color: #646464; | |
67 font-size: 1.3em; | |
68 margin-top: 20px; | |
69 text-align: center; | |
70 } | |
71 | |
72 /* Logos */ | |
73 @media only screen { | |
74 #logo { | |
75 background-image: url(images/holo_logo_200.png); | |
76 } | |
77 } | |
78 | |
79 @media only screen and (-webkit-min-device-pixel-ratio: 1.0) { | |
80 #logo { | |
81 -webkit-flex-basis: 152px; | |
82 max-width: 536px; | |
83 } | |
84 } | |
85 @media only screen and (-webkit-min-device-pixel-ratio: 1.3) { | |
86 #logo { | |
87 -webkit-flex-basis: 114px; | |
88 max-width: 402px; | |
89 } | |
90 } | |
91 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { | |
92 #logo { | |
93 -webkit-flex-basis: 76px; | |
94 background-image: url(images/holo_logo_150.png); | |
95 max-width: 268px; | |
96 } | |
97 } | |
98 @media only screen and (-webkit-min-device-pixel-ratio: 2.0) { | |
99 #logo { | |
100 -webkit-flex-basis: 76px; | |
101 max-width: 268px; | |
102 } | |
103 } | |
104 | |
105 /* Increase spacing on larger screens. */ | |
106 @media only screen and (min-height: 601px) { | |
107 body { | |
108 padding: 100px 20px; | |
109 } | |
110 | |
111 #take-a-tour, | |
112 #footer { | |
113 margin-top: 60px; | |
114 } | |
115 } | |
OLD | NEW |