-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
75 lines (75 loc) · 4.04 KB
/
index.html
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
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Geology of the Grand Canyon</title>
<link rel="stylesheet" href="style/pure-min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<link href='//api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="style/base.css" />
<link rel="stylesheet" href="style/descriptions.css" />
</head>
<body>
<section id="map"></section>
<div class="pure-g-r">
<div id="title-container" class="pure-u-1-3">
<div id="title-content">
<div id="hover-description" class="hidden pure-hidden-phone description-container"></div>
<h3 class="scroll-title">Geologic Map of the Grand Canyon</h3>
<button class="scroll-btn pure-button">
<i class="fa fa-chevron-down"></i>
</button>
</div>
</div>
</div>
<section id="info">
<div id="info-content" class="pure-g-r">
<div class="pure-u-1-4 pure-hidden-phone"></div>
<div class="pure-u-1-2">
<div id="full-description" class="description-container"></div>
<h3 class="scroll-title">Back to the map</h3>
<button class="scroll-btn pure-button">
<i class="fa fa-chevron-up"></i>
</button>
<div id="footer">
<p>This work-in-progress represents a spectacular set of data generated by <a href="http://geomaps.wr.usgs.gov/arizona/">George Billingsley and others at the USGS</a>. The geologic data shown here was taken from the following USGS publications:</p>
<ul>
<li><a href="http://pubs.usgs.gov/imap/i2766/">Geologic map of the Mount Trumbull 30 x 60 quadrangle</a></li>
<li><a href="http://pubs.usgs.gov/imap/i-2688/">Geologic map of the Grand Canyon 30' x 60' quadrangle</a></li>
<li><a href="http://pubs.usgs.gov/sim/2006/2895/">Geologic map of the Valle 30' x 60' quadrangle</a></li>
<li><a href="http://pubs.usgs.gov/sim/2007/2977/">Geologic Map of the Cameron 30' x 60' Quadrangle</a></li>
<li><a href="http://pubs.usgs.gov/sim/2006/2900/">Geologic Map of the Peach Springs 30' x 60' Quadrangle</a></li>
<li><a href="http://pubs.er.usgs.gov/publication/sim3227">Geologic map of the Tuba City 30' x 60' quadrangle</a></li>
</ul>
<blockquote>"I just hiked my ass off in the canyon gathering the field data." -George Billingsley, 2013</blockquote>
<p>Website by <a href="https://twitter.com/worbly">Ryan Clark</a>, 2013. <a href="https://github.com/rclark/grand-canyon-geology/issues">Problems? Suggestions? Please let me know!</a></p>
</div>
</div>
<div class="pure-u-1-4 pure-hidden-phone"></div>
</div>
</section>
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="scripts/waypoints.min.js"></script>
<!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<script src="scripts/mustache.js"></script>
<script src="scripts/layout.js"></script>
<script id="full-unit" type="text/template">
<div class="unit-label" id="{{unit}}-label" style="background-color: {{color}};">{{unit}}</div>
<div class="description">
<h4 class="description-title">{{unitname}}</h3>
<span>{{{description}}}</span>
</div>
</script>
<script id="partial-unit" type="text/template">
<div class="unit-label" id="{{unit}}-label" style="background-color: {{color}};">{{unit}}</div>
<div class="description">
<h4 class="description-title">{{unitname}}</h3>
</div>
</script>
<script src="scripts/gcg.js"></script>
</body>
</html>