👽

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+_site
+*.sass-cache
+tmp
+*.lock

Gemfile

@@ -0,0 +1,2 @@
+source 'https://rubygems.org'
+gem 'github-pages'

README.md

@@ -0,0 +1,22 @@
+# Explore the X-Files
+
+Mapping each X-File episode's location with Mapbox Gl JS and data from [Mapping the X-Files by Jane Roberts](http://www.geography.wisc.edu/courses/geog572/f12/roberts/index.html).
+
+Data for each marker is saved in `_data/locations.yml`.
+
+## Build
+
+This site is built with [Jekyll](https://help.github.com/articles/using-jekyll-with-pages/).
+
+Run it locally:
+
+```
+bundle exec jekyll serve -w
+```
+
+Validate data:
+
+```
+npm install
+npm test
+```

_config.mb-pages.yml

@@ -0,0 +1,16 @@
+title: Explore the X-Files
+description: Did Mulder and Scully investigate an X-File near you?
+url: https://www.mapbox.com
+baseurl: /x-files
+image: map.png
+
+accessToken: pk.eyJ1Ijoia2F0eWRlY29yYWgiLCJhIjoiY2lqZW1yamRjMDAwOXV1a2tqazIwcDF5diJ9.CK-1bGJq2o2imB-JMNVDBg
+styleURL: katydecorah/cij7oa7ta006v8sm44uj5nrbw
+mapboxgljs: v0.12.2
+
+sass:
+  style: :compressed
+
+exclude:
+- node_modules
+- .sass-cache

_config.yml

@@ -0,0 +1,16 @@
+title: Explore the X-Files
+description: Did Mulder and Scully investigate an X-File near you?
+url: https://www.mapbox.com
+baseurl: /x-files
+image: map.png
+
+accessToken: pk.eyJ1Ijoia2F0eWRlY29yYWgiLCJhIjoiY2lqZW1yamRjMDAwOXV1a2tqazIwcDF5diJ9.CK-1bGJq2o2imB-JMNVDBg
+styleURL: katydecorah/cij7oa7ta006v8sm44uj5nrbw
+mapboxgljs: v0.12.2
+
+sass:
+  style: :compressed
+
+exclude:
+- node_modules
+- .sass-cache

_sass/_layout.scss

@@ -0,0 +1,87 @@
+* { box-sizing: border-box; }
+
+body { 
+  font-family: $font-family;
+  font-size: $font-size;;
+  font-color: $font-color;
+}
+
+.listings,
+.map {
+  position: absolute; 
+  height: 50%;
+  width: 100%;
+}
+
+.map {
+  top: 0;
+}
+
+h1 {
+  top: 50%;
+}
+
+.listings {
+  top: 50%;
+  background: $bg-dark;
+  z-index: 100;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mb-watermark {
+  bottom: 49%;
+  left: 10px;
+  position: absolute;
+}
+
+@media (min-width: 700px) {
+  .map { 
+    height: 100%;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+  }
+
+  h1 {
+    position: fixed;
+    background: #000;
+    left: 0;
+    padding: 10px 15px 0;
+  }
+
+  h1,
+  .listings {
+    width: 30%;
+    max-width: 350px;
+    min-width: 230px;
+    top: 0;
+  }
+
+  .mb-watermark {
+    margin-left: 31%;
+    bottom: 0;
+  }
+
+  .listings {
+    bottom: 0;
+    height: 100%;
+    background: rgba($bg-dark, .85);
+    border-right: 1px solid #000;
+    padding-bottom: 100vh;
+
+    .legend {
+      padding-top: 3em;
+    }
+
+    .active {
+      margin-top: 40px;
+    }
+  }
+}
+
+@media (min-width:1180px)  {
+  .mb-watermark {
+    margin-left: 360px;
+  }
+}

_sass/_listings.scss

@@ -0,0 +1,74 @@
+.item {
+  display: block;
+  padding: 10px 15px;
+}
+
+.item:not(:last-child) {
+  border-bottom: 1px solid #000;
+}
+
+.title {
+  display: block;
+}
+
+.item-details {
+  display: none;
+  opacity: 0;
+}
+
+.legend {
+  background: #000;
+  color: $font-color-light;
+  border-bottom: 1px solid #000;
+  margin-bottom: 10px;
+
+}
+
+.item:not(.active) .marker {
+  color: rgba($font-color-light,.5);
+}
+
+.listings .active .title,
+.listings .title:hover { color: $link-hover; }
+
+.listings .active {
+  background-color: $font-color-light;
+}
+
+.listings .active .item-details {
+  font-size: $font-size;
+  display: block;
+  -webkit-animation: show .5s forwards;
+  animation: show .5s forwards;
+}
+
+.tweet {
+  display: block;
+  background: $link-color;
+  color: $font-color-light;
+  margin: 0 -15px -10px;
+  padding: 15px 10px;
+  line-height: 1.25;
+  &:hover {
+    background: $link-hover; 
+    color: $font-color-light; 
+  }
+}
+
+
+.tweet-content {
+  width: 80%;
+  margin-left: 10px;
+}
+
+@-webkit-keyframes show {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes show {
+  to {
+    opacity: 1;
+  }
+}

_sass/_type.scss

@@ -0,0 +1,47 @@
+.title {
+  margin-bottom: 0;
+}
+.title,
+.season-title,
+h1 {
+  font-family: $special-font;
+  font-weight: 400;
+  font-size: $font-size * 1.3;
+}
+
+.listings h1 { 
+  text-transform: uppercase;
+
+
+  span {
+    border: 1px solid red;
+    width: 25px;
+    display: inline-block;
+    border-radius: 100%;
+    height: 25px;
+    line-height: 1;
+    padding-left: 6px;
+    padding-top: 4px;
+  }
+
+}
+
+.small {
+  color: lighten($font-color, 10%);
+  font-size: $font-small;
+  font-family: $font-family;
+}
+
+a {
+  color: $link-color;
+  text-decoration: none;
+  &:hover {
+    color: $link-hover;
+  }
+}
+
+.season-title {
+  color: $font-color-light;
+}
+
+

_sass/_vars.scss

@@ -0,0 +1,14 @@
+$bg-dark: #111;
+
+$font-family: 'Metrophobic', sans-serif;
+$font-size: 14px;
+$font-color: #333;
+$font-color-light: #f8f8f8;
+
+$font-small: 12px;
+
+$special-font: 'Special Elite', cursive;
+
+$link-color: #00853e;
+$link-hover: #8cc63f;
+

index.html

@@ -0,0 +1,37 @@
+---
+
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>{{site.title}} &times; {{site.description}}</title>
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+  <meta name="twitter:site" content="@Mapbox" />
+  <meta property="og:site_name" content="Mapbox" />
+  <meta name="twitter:url" content="{{site.url}}{{site.baseurl}}/" />
+  <meta property="og:url" content="{{site.url}}{{site.baseurl}}/" />
+  <meta name="twitter:title" content="{{site.title}}" />
+  <meta property="og:title" content="{{site.title}}" />
+  <meta name="twitter:description" content="{{site.description}}" />
+  <meta property="og:description" content="{{site.description}}" />
+  <meta name="twitter:image" content="{{site.url}}{{site.baseurl}}/{{site.image}}" />
+  <meta name="st:image" content="{{site.url}}{{site.baseurl}}/{{site.image}}" />
+  <meta property="og:image" content="{{site.url}}{{site.baseurl}}/{{site.image}}" />
+  <meta name="twitter:card" content="summary" />
+  <meta property="og:type" content="website" />
+  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/{{site.mapboxgljs}}/mapbox-gl.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Special+Elite|Metrophobic" rel="stylesheet" type="text/css">
+  <link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet" />
+  <link href="site.css" rel="stylesheet" />
+  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/{{site.mapboxgljs}}/mapbox-gl.js"></script>
+  <!-- Data from Mapping the X-Files by Jane Roberts http://www.geography.wisc.edu/courses/geog572/f12/roberts/index.html-->
+</head>
+<body>
+  <div id="listings" class="listings prose"></div>
+  <div id="map" class="map"></div>
+  <div class="z1 mb-watermark"><div class="pad1y"><img src="mb.svg" alt="Mapbox logo"></div></div>
+  <script src="site.js"></script>
+</body>
+</html>

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "x-files",
+  "version": "0.0.0",
+  "description": "Explore the X-Files!",
+  "author": "katydecorah",
+  "scripts": {
+    "test": "tape test/*.js | tap-spec"
+  },
+  "devDependencies": {
+    "js-yaml": "^2.1.3",
+    "request": "^2.67.0",
+    "tap-spec": "~4.1.1",
+    "tape": "^4.4.0"
+  }
+}