harness/index.html (194 lines of code) (raw):
<html>
<head>
<title>Interactive atom template</title>
<style>
body {
background-color: #eaeaea;
}
.atoms {
max-width: 620px;
margin: auto;
}
h2 {
font-family: 'Guardian Headline Full';
font-size: 36px;
font-weight: 600;
}
a {
display: block;
border: 1px solid #dcdcdc;
padding: 24px 10px;
margin-bottom: 12px;
background-color: #fff;
font-family: 'Guardian Headline Full';
font-size: 24px;
font-weight: 600;
color: black;
text-decoration: none;
transition: transform 0.1666s ease-in-out;
}
a:hover {
transform: scale(1.05);
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Light.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Light.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Light.ttf')
format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-LightItalic.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-LightItalic.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-LightItalic.ttf')
format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Regular.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Regular.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Regular.ttf')
format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-RegularItalic.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-RegularItalic.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-RegularItalic.ttf')
format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Medium.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Medium.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Medium.ttf')
format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-MediumItalic.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-MediumItalic.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-MediumItalic.ttf')
format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Semibold.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Semibold.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Semibold.ttf')
format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-SemiboldItalic.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-SemiboldItalic.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-SemiboldItalic.ttf')
format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Bold.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Bold.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Bold.ttf')
format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-BoldItalic.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-BoldItalic.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-BoldItalic.ttf')
format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Black.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Black.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-Black.ttf')
format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-BlackItalic.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-BlackItalic.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GHGuardianHeadline-BlackItalic.ttf')
format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Guardian Titlepiece';
src: url('https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2')
format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff')
format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.ttf')
format('truetype');
font-weight: 700;
font-style: normal;
}
</style>
</head>
<body>
<div class="atoms">
<h2>Thrasher containers</h2>
<a href="./front-uk.html">Frontend: UK front</a>
<a href="./dcr-front-uk.html">DCR: UK front</a>
<a href="./front-football.html">Web: football front</a>
<a href="./dcr-front-football.html">DCR: Football front</a>
<a href="./webview.html">Android front webview</a>
<h2>Snaps</h2>
<a href="./interactive.html">Interactive</a>
<a href="./immersive.html">Immersive interactive</a>
<a href="./front.html">Web front</a>
<a href="./blank.html">Blank</a>
<a href="./article.html">Article</a>
</div>
</body>
</html>