bureau-local.github.io/index.html at master · bureau-local/bureau-local.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>

<head>
	<!-- Design from http://www.2016.promo/ made by https://twitter.com/kimw  -->
	<title>Bureau Local | Github Archives</title>
	<!-- The two following script are to use Vanilla JS to scroll rather than load JQuery -->
	<script>window.noZensmooth = true</script>
	<script src="js/zenscroll-min.js"></script>
	<!-- styles-->
    <link href="style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Favicon package -->
    <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
    <link rel="manifest" href="favicons/manifest.json">
    <meta name="theme-color" content="#ffffff">
</head>

<body>

	<section class="intro-section">
		<div class="intro-div">
			<h3 class="intro-title fade">welcome to the interactive archives of Bureau Local</h3>
			<h3 class="intro-title fade">(it's a work in progress)</h3>
		</div>
		<div class="arrow-div">
			<a id="arrow-link" data-link="interactive-links">
				<i class="material-icons fade">arrow_downward</i>
			</a>
		</div>
	</section>

	<div id="interactive-links" class="links">
		<h1>
			<a class="interactive" href="dying-homeless/dying-homeless.html" target="blank">Dying Homeless: Counting the deaths of homeless people across the UK</a>
			<a class="interactive" href="no-refuge/no-refuge.html" target="blank">No Refuge: Where women are falling through the gaps in the funding system in England</a>
			<a class="interactive" href="storymapjs/dv.html" target="blank">No Refuge: Stories from around the country</a>
			<a class="interactive" href="farms/farms.html" target="blank">The rise of the "megafarm": How British meat is made</a>
			<a class="interactive" href="pollution/pollution.html" target="blank">Dirty business: The livestock farms that are polluting the UK</a>
		</h1>
	</div>

	<script>
		// smooth scroll
		var arrowLink = document.getElementById("arrow-link")
		arrowLink.addEventListener("click", smoothZen)
		function smoothZen() {
			linkTo = document.getElementById(this.getAttribute("data-link"))
			zenscroll.to(linkTo)
		}
		// fade in
		window.onload = function() {
			var elements = document.getElementsByClassName("fade")
			Array.prototype.forEach.call(elements, function(d) {d.style.opacity = 1})
		}
	</script>

</body>

</html>