harness/index.html (102 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: "Guardian Egyptian Web";
src: url("https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.eot");
src: url("https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.eot?#iefix") format("embedded-opentype"), url("https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.woff2") format("woff2"), url("https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.woff") format("woff"), url("https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.ttf") format("truetype"), url("https://interactive.guim.co.uk/fonts/guss-webfonts/GuardianEgyptianWeb/GuardianEgyptianWeb-Semibold.svg#GuardianEgyptianWeb-Semibold") format("svg");
font-weight: 600;
font-style: normal;
font-stretch: normal;
}
body {
color: #333;
line-height: 1.1;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
.atom-type {
float: left;
width: 33%;
border: 10px solid white;
padding: 10px;
box-sizing: border-box;
text-decoration: none;
color: inherit;
background-color: #eaeaea;
}
.atom-type:hover {
background-color: #dcdcdc;
}
.atom-type img {
display: block;
width: 100%;
}
h1,
h2,
h3 {
font-family: "Guardian Egyptian Web";
}
h1 {
font-size: 32px;
margin: 20px 10px 10px;
}
h2 {
font-size: 24px;
clear: both;
padding-top: 40px;
margin: 0 10px;
}
h3 {
font-size: 18px;
margin: 0 0 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Select interactive type</h1>
<a class="atom-type" href="immersive.html">
<h3>Immersive interactive</h3>
<img src="https://interactive.guim.co.uk/atoms-template/immersive.png" />
</a>
<a class="atom-type" href="interactive.html">
<h3>Standard interactive</h3>
<img src="https://interactive.guim.co.uk/atoms-template/interactive.png" />
</a>
<a class="atom-type" href="blank.html">
<h3>Blank page</h3>
<img src="https://interactive.guim.co.uk/atoms-template/blank.png" />
</a>
<h2>Embeds</h2>
<a class="atom-type" href="article.html">
<h3>Article</h3>
<img src="https://interactive.guim.co.uk/atoms-template/embed.png" />
</a>
<a class="atom-type" href="immersive-article.html">
<h3>Immersive article</h3>
<img src="https://interactive.guim.co.uk/atoms-template/immersiveEmbed.png" />
</a>
<a class="atom-type" href="liveblog.html">
<h3>Live blog</h3>
<img src="https://interactive.guim.co.uk/atoms-template/liveblogEmbed.png" />
</a>
<h2>Main media</h2>
<a class="atom-type" href="article-main.html">
<h3>Article</h3>
<img src="https://interactive.guim.co.uk/atoms-template/articleMain.png" />
</a>
<a class="atom-type" href="immersive-article-main.html">
<h3>Immersive article</h3>
<img src="https://interactive.guim.co.uk/atoms-template/immersiveMain.png" />
</a>
<a class="atom-type" href="liveblog-main.html">
<h3>Live blog</h3>
<img src="https://interactive.guim.co.uk/atoms-template/liveblogMain.png" />
</a>
</div>
</body>
</html>