Initial commit

tinmagpie · Oct 2, 2015 · e823fbd · e823fbd
commit e823fbd
Show file tree

Hide file tree

Showing 23 changed files with 321 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.sass-cache/4f622d1e10f4c9a5031f468393d066847f849ac8/main.scssc b/.sass-cache/4f622d1e10f4c9a5031f468393d066847f849ac8/main.scssc
diff --git a/Gemfile b/Gemfile
@@ -0,0 +1,5 @@
+source "http://rubygems.org"
+
+gem 'sass'
+gem 'compass'
+gem 'oily_png'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -0,0 +1,32 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    chunky_png (1.3.4)
+    compass (1.0.3)
+      chunky_png (~> 1.2)
+      compass-core (~> 1.0.2)
+      compass-import-once (~> 1.0.5)
+      rb-fsevent (>= 0.9.3)
+      rb-inotify (>= 0.9)
+      sass (>= 3.3.13, < 3.5)
+    compass-core (1.0.3)
+      multi_json (~> 1.0)
+      sass (>= 3.3.0, < 3.5)
+    compass-import-once (1.0.5)
+      sass (>= 3.2, < 3.5)
+    ffi (1.9.10)
+    multi_json (1.11.2)
+    oily_png (1.2.0)
+      chunky_png (~> 1.3.1)
+    rb-fsevent (0.9.6)
+    rb-inotify (0.9.5)
+      ffi (>= 0.5.0)
+    sass (3.4.18)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  compass
+  oily_png
+  sass
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
diff --git a/browserconfig.xml b/browserconfig.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Please read: http://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="tile.png"/>
+            <square150x150logo src="tile.png"/>
+            <wide310x150logo src="tile-wide.png"/>
+            <square310x310logo src="tile.png"/>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/config.rb b/config.rb
@@ -0,0 +1,25 @@
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "img"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass scss scss && rm -rf sass && mv scss sass
diff --git a/css/.DS_Store b/css/.DS_Store
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,46 @@
+/* line 3, ../scss/main.scss */
+.segment {
+  min-height: 100vh;
+}
+
+/* line 5, ../scss/main.scss */
+body, h1 {
+  margin: 0;
+  padding: 0;
+}
+
+/* line 9, ../scss/main.scss */
+#title {
+  background: #5fa4ff;
+}
+
+/* line 13, ../scss/main.scss */
+#epipelagic {
+  background: linear-gradient(to bottom, #39dbb3 0%, #007e84 100%);
+}
+
+/* line 16, ../scss/main.scss */
+#mesopelagic {
+  background: linear-gradient(to bottom, #007e84 0%, #0b4960 100%);
+}
+
+/* line 19, ../scss/main.scss */
+#bathypelagic {
+  background: linear-gradient(to bottom, #0b4960 0%, #002351 100%);
+}
+
+/* line 22, ../scss/main.scss */
+#abyssal {
+  background: linear-gradient(to bottom, #002351 0%, #000c1c 100%);
+}
+
+/* line 26, ../scss/main.scss */
+p {
+  color: #c6f3c7;
+  text-align: center;
+  font-family: sans-serif;
+  padding: 1.5em 1em;
+  line-height: 1.5em;
+  max-width: 40em;
+  margin: 0 auto;
+}
diff --git a/favicon.ico b/favicon.ico
diff --git a/humans.txt b/humans.txt
@@ -0,0 +1,14 @@
+# humanstxt.org/
+# The humans responsible & technology colophon
+
+# TEAM
+
+    Rachel Nabors -- Front end lead, Art direction -- @rachelnabors
+
+# THANKS
+
+    Our loving families and friends and the people at NOAA and the Census of Marine Life for all their research.
+
+# TECHNOLOGY COLOPHON
+
+    HTML5, CSS3
diff --git a/img/blue-filter.svg b/img/blue-filter.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html class="no-js" lang="">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<title>Deep Sea Dive into Dev Tools</title>
+		<meta name="description" content="">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+<!--         <link rel="apple-touch-icon" href="apple-touch-icon.png">
+ -->
+		<link rel="stylesheet" href="css/main.css">
+
+	</head>
+	<body>
+
+	<div class="segment" id="title">
+		<h1>Deep Sea Dive into Dev Tools</h1>
+	</div>
+	<div class="zone" id="epipelagic">
+		<div class="segment" id="d0"></div>
+	</div>
+	<div class="zone" id="mesopelagic">
+		<div class="segment" id="d200">
+			<p>No photosynthesis happens from here on.</p>
+			<p>Sorry, Plants &amp; Co.</p>
+		</div>
+		<div class="segment" id="d400"></div>
+		<div class="segment" id="d600"></div>
+		<div class="segment" id="d800"></div>
+	</div>
+	<div class="zone" id="bathypelagic">
+		<div class="segment" id="d1000">
+			<p>No plants can live here. Period. Everyone here lives off the poop and dead things floating down from above.</p>
+			<p>There is no light. This pretty blue color? I put it here for your amusement. This would actually be pitch black unless you were packing your own bioluminescence.</p>
+			<p>There is little oxygen.</p>
+			<p>Try not to move around too much.</p>
+			<p>Conserve&hellip;</p>
+			<p>&hellip;energy&hellip;</p>
+		</div>
+		<div class="segment" id="d1200"></div>
+		<div class="segment" id="d1400"></div>
+		<div class="segment" id="d1600"></div>
+		<div class="segment" id="d1800"></div>
+		<div class="segment" id="d2000"></div>
+		<div class="segment" id="d2200"></div>
+		<div class="segment" id="d2400"></div>
+		<div class="segment" id="d2600"></div>
+		<div class="segment" id="d2800"></div>
+		<div class="segment" id="d3000"></div>
+		<div class="segment" id="d3200"></div>
+		<div class="segment" id="d3400"></div>
+		<div class="segment" id="d3600"></div>
+		<div class="segment" id="d3800"></div>
+	</div>
+	<div class="zone" id="abyssal">
+		<div class="segment" id="d4000">
+			<p>Why, why did you come here?</p>
+		</div>
+		<div class="segment" id="d4200"></div>
+		<div class="segment" id="d4400"></div>
+		<div class="segment" id="d4600"></div>
+		<div class="segment" id="d4800"></div>
+		<div class="segment" id="d5000"></div>
+		<div class="segment" id="d5200"></div>
+		<div class="segment" id="d5400"></div>
+		<div class="segment" id="d5600"></div>
+		<div class="segment" id="d5800"></div>
+		<div class="segment" id="d6000"></div>
+	</div>
+		<script src="js/vendor/anchor.1.2.1.min.js"></script>
+		<script src="js/vendor/waypoints.noframework.4.0.0.min.js"></script>
+		<script src="js/vendor/waypoints.inview.min.js"></script>
+		<script src="js/main.js"></script>
+
+		<!-- Google Analytics: change UA-XXXXX-X to be your site's ID.
+		<script>
+			(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+			function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+			e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+			e.src='//www.google-analytics.com/analytics.js';
+			r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+			ga('create','UA-XXXXX-X','auto');ga('send','pageview');
+		</script>
+		-->
+	</body>
+</html>
diff --git a/js/.DS_Store b/js/.DS_Store
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,35 @@
+(function(){
+
+    notify = function(note) {
+      console.log(note);
+    }
+    /*
+    var waypoint = new Waypoint({
+      element: document.getElementById('mesopelagic'),
+      handler: function() {
+        console.log('Basic waypoint triggered')
+      }
+    })*/
+
+    var segments = document.getElementsByClassName('segment');
+
+    Array.prototype.forEach.call(segments, function(child) {
+      new Waypoint.Inview({
+        element: child,
+        enter: function(direction) {
+          this.element.classList.add("in-view");
+          notify(child + ': Enter triggered with direction ' + direction)
+        },
+        entered: function(direction) {
+          notify(child + ': Entered triggered with direction ' + direction)
+        },
+        exit: function(direction) {
+          notify(child + ': Exit triggered with direction ' + direction)
+        },
+        exited: function(direction) {
+          notify(child + ': Exited triggered with direction ' + direction)
+          this.element.classList.remove("in-view");
+        }
+      })
+    });
+})();
diff --git a/js/vendor/.DS_Store b/js/vendor/.DS_Store
diff --git a/js/vendor/anchor.1.2.1.min.js b/js/vendor/anchor.1.2.1.min.js
diff --git a/js/vendor/waypoints.inview.min.js b/js/vendor/waypoints.inview.min.js