https://anthropocene-otf.github.io/

1<!doctype html>
2<html prefix="og: https://ogp.me/ns#">
3<head>
4	<!-- Global site tag (gtag.js) - Google Analytics -->

4
5<script async src="https://www.googletagmanager.com/gtag/js?id=

5UA-142632181-8

5"></script>

6<script>
7  

7window.dataLayer = window.dataLayer || [];
8  function gtag(){dataLayer.push(arguments);}
9  gtag('js', new Date());
10
11  gtag('config', '

11UA-142632181-8

11');

12</script>

12
13
14<meta charset="UTF-8">
15<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
16<meta property="og:image" content="https://anthropocene-otf.github.io/img/cover-50.jpg" />
17<meta property="og:description" 
18  content="Anthropocene.otf is a parametric typeface that will change its design based on the air pollution level in the world." />
19<title>Anthropocene.otf</title>
20<link rel="stylesheet" type="text/css" href="css/style_desktop.css" media="all and (min-width: 769px)">
21<link rel="stylesheet" type="text/css" href="css/style_mobile.css" media="all and (max-width: 768px)">
22<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
23<link rel="icon" href="./favicon.ico" type="image/x-icon">

24<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

24

25<script src="helpers/fittext.js" type="text/javascript"></script>

25

26<script src="js/scripts.js" type="text/ecmascript"></script>

26
27
28
29</head>
30<style>
31	canvas {
32    position:absolute;
33    margin-left : 50%;
34    left: -150px;
35}
36</style>
37<body class="wait_page_loading">
38	<video id="sky-resp" autoplay muted loop id="myVideo">
39		<source src="vid/sky.mp4" type="video/mp4">
40		Your browser does not support HTML5 video.
41	</video>
42	<div id="resp-menu-toggler" onClick="toggleMenu();">
43		<img src="img/cursor.png">
44  	</div>
45<div class="main-container">
46
47	<div id="menu" class="menu">
48		<video id="sky" autoplay muted loop id="myVideo">
49			<source src="vid/sky.mp4" type="video/mp4">
50			Your browser does not support HTML5 video.
51		  </video>
52
53		<div class="menu-links">
54			<div class="links-wrapper">
55				<div class="link-background">
56					<div onClick="load_page('main');" id="main-link" class="link active">Anthropocene.otf</div>
57				</div>
58				<div onClick="load_page('concept');" id="concept-link" class="link">Concept</div>
59				<div onClick="load_page('get-started');" id="get-started-link" class="link">Get Started</div>
60				<div onClick="load_page('download');" id="download-link" class="link">Type & download</div>
61				<div onClick="load_page('about');" id="about-link" class="link">About</div>
62			</div>
63		</div>
64
65		<div class="menu-info">
66			<div class="info-container-aqi">
67				
68			</div>
69			<div class="info-container-values">
70				<span class="tooltiptext">These are your AQI values,<br>the nearest station is located at:<br><span id="aqi-city"></span></span>
71
72					<div class="a-bold" id="aqi"></div>
73				<div>
74					<div>
75						<div id="no2"></div>
76						<div id="co"></div>
77						<div id="h"></div>
78						<div id="no2"></div>
79						<div id="o3"></div>
80						<div id="p"></div>
81					</div>
82					<div>
83
84						<div id="pm10"></div>
85						<div id="pm25"></div>
86						<div id="t"></div>
87						<div id="w"></div>
88						<div id="wg"></div>
89					</div>
90				</div>	
91			</div>	
92		</div>
93	</div>
94
95	<div id="content" class="content">
96		
97	</div>
98	
99</div>
100
101	
102	
103	
104</body>
105	

105<script>
106		
107			$("#content").load("./pages/main.html", function() {fit_text();});
108			function fit_text() {
109				//window.fitText(document.getElementById("main-text"), 1.04);
110			}
111			$(document).ready(function(){
112				let vh = window.innerHeight * 0.01;
113			let menuHeight = document.getElementById("menu").clientHeight + 24;
114			console.log(menuHeight);
115			
116			// Then we set the value in the --vh custom property to the root of the document
117			document.documentElement.style.setProperty('--vh', `${vh}px`);
118			document.documentElement.style.setProperty('--menu-height', `${menuHeight}px`);
119			})
120			// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
121			
122	</script>

122
123	
124</html>