Add art homepage assets
This commit is contained in:
commit
77163e047b
|
|
@ -0,0 +1,185 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>New Tab</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
background-color: black;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none
|
||||
}
|
||||
|
||||
[unresolved] {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
body.visible-focus a:focus,
|
||||
body.visible-focus rotating-button:focus,
|
||||
body.visible-focus topsites-list::shadow topsite-card:focus {
|
||||
outline: -webkit-focus-ring-color auto 5px
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
font-weight: 100
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
margin: 10px 0 0 34px
|
||||
}
|
||||
|
||||
aside p {
|
||||
margin-left: 34px
|
||||
}
|
||||
|
||||
#main {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: 1;
|
||||
transition: opacity .1s linear;
|
||||
text-shadow: 0 2px 2px rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
#main.loading {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
#main p a {
|
||||
color: #b8b8b8;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
#main paper-icon-button {
|
||||
padding: 6px;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
aside {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
color: #b8b8b8;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 33%, rgba(0, 0, 0, 0.66) 100%)
|
||||
}
|
||||
|
||||
.top-left {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px
|
||||
}
|
||||
|
||||
.top-left,
|
||||
#main h1 {
|
||||
color: white
|
||||
}
|
||||
|
||||
.bottom-right {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px
|
||||
}
|
||||
|
||||
#applications,
|
||||
#defaultNewTab {
|
||||
background-color: rgba(0, 0, 0, 0.13);
|
||||
vertical-align: middle;
|
||||
margin-right: 20px
|
||||
}
|
||||
|
||||
#change {
|
||||
margin: 0 8px 2px 0;
|
||||
vertical-align: text-bottom;
|
||||
color: #b8b8b8;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26)
|
||||
}
|
||||
|
||||
.pipe {
|
||||
color: #7f7f7f;
|
||||
margin: 0 6px
|
||||
}
|
||||
|
||||
#credits {
|
||||
font-size: 13px
|
||||
}
|
||||
|
||||
#credits small {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
#main .topsites-button {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 8px;
|
||||
background-color: rgba(200, 200, 200, 0.26)
|
||||
}
|
||||
|
||||
aside,
|
||||
.top-left,
|
||||
.topsites-button {
|
||||
transition: opacity .2s ease-out;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
body.nochrome .top-left,
|
||||
body.nochrome .bottom-right,
|
||||
body.nochrome aside,
|
||||
body.nochrome .topsites-button {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
topsites-list {
|
||||
width: 640px;
|
||||
min-height: 210px
|
||||
}
|
||||
|
||||
#topSites h2 {
|
||||
margin: 0 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
line-height: 40px
|
||||
}
|
||||
|
||||
@media (orientation:portrait) {
|
||||
#main {
|
||||
background-size: contain;
|
||||
background-color: black
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<aside>
|
||||
<h1><a id="title">Untitled</a></h1>
|
||||
<p><a id="creator">Unattributed</a>
|
||||
<span class="pipe">|</span>
|
||||
<a id="partner">Unknown Gallery</a>
|
||||
</p>
|
||||
<p><a id="credits" href="https://www.google.com/culturalinstitute/beta/">Google Arts & Culture</a>
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
function ajax_get(url, callback) {
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.onreadystatechange = function() {
|
||||
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
||||
try {
|
||||
var data = JSON.parse(xmlhttp.responseText);
|
||||
} catch(err) {
|
||||
return callback(err);
|
||||
}
|
||||
return callback(null, data);
|
||||
}
|
||||
};
|
||||
|
||||
xmlhttp.open('GET', url, true);
|
||||
xmlhttp.send();
|
||||
}
|
||||
|
||||
function setBG() {
|
||||
var url = 'https://www.gstatic.com/culturalinstitute/tabext/imax.json';
|
||||
ajax_get(url, function(err, data) {
|
||||
if (err) {
|
||||
console.log('We\'ve had a problem');
|
||||
}
|
||||
var photoID = Math.floor((Math.random() * data.length));
|
||||
var item = data[photoID];
|
||||
if (item.title) document.getElementById('title').text = item.title;
|
||||
if (item.creator) document.getElementById('creator').text = item.creator;
|
||||
if (item.attribution) document.getElementById('partner').text = item.attribution;
|
||||
document.body.style.background = 'url('+item.image+'=s1200) no-repeat center center fixed';
|
||||
document.body.style['-webkit-background-size'] = 'cover';
|
||||
document.body.style['-moz-background-size'] = 'cover';
|
||||
document.body.style['-o-background-size'] = 'cover';
|
||||
document.body.style['background-size'] = 'cover';
|
||||
});
|
||||
}
|
||||
|
||||
setBG();
|
||||
Loading…
Reference in New Issue