| 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 |