blob: d12261c0513a82619255dccff79f65c788e22cc9 [file] [log] [blame]
/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
@font-face {
font-family: 'Roboto2';
font-weight: 400;
src: local('Roboto'), local('Roboto2-Regular');
}
html {
height: 100%;
width: 100%;
}
body {
-webkit-align-items: center;
-webkit-flex-direction: column;
background-color: #fafafa;
box-sizing: border-box;
display: -webkit-flex;
font-family: 'Roboto2', sans-serif;
height: 100%;
margin: 0 auto;
max-width: 600px;
padding: 20px;
width: 100%;
}
a {
color: rgb(51, 181, 229);
}
.spacing {
-webkit-flex: 1;
}
#logo {
-webkit-flex-shrink: 1;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
min-height: 60px;
width: 100%;
}
#take-a-tour {
-webkit-flex: none;
background-color: rgb(66, 133, 244);
border-radius: 2px;
color: white;
display: block;
font-size: 18px;
font-weight: medium;
margin: 20px auto 0;
max-width: 320px;
padding: 15px 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100%;
}
.footer {
-webkit-flex: none;
color: #646464;
font-size: 1.3em;
margin-top: 20px;
text-align: center;
}
/* Logos */
@media only screen {
#logo {
background-image: url(images/holo_logo_200.png);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.0) {
#logo {
-webkit-flex-basis: 152px;
max-width: 536px;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3) {
#logo {
-webkit-flex-basis: 114px;
max-width: 402px;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
-webkit-flex-basis: 76px;
background-image: url(images/holo_logo_150.png);
max-width: 268px;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
#logo {
-webkit-flex-basis: 76px;
max-width: 268px;
}
}
/* Increase spacing on larger screens. */
@media only screen and (min-height: 601px) {
body {
padding: 100px 20px;
}
#take-a-tour,
#footer {
margin-top: 60px;
}
}