olin · mpbrucker · Jan 3, 2019 · Jan 4, 2019 · Jan 4, 2019 · Jan 4, 2019
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -8,7 +8,9 @@ GEM
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
     eventmachine (1.2.7-x64-mingw32)
+    ffi (1.9.25)
     ffi (1.9.25-x64-mingw32)
     forwardable-extended (2.6.0)
     http_parser.rb (0.6.0)
@@ -65,17 +67,16 @@ GEM
       thread_safe (~> 0.1)
     tzinfo-data (1.2018.7)
       tzinfo (>= 1.0.0)
-    wdm (0.1.1)
 
 PLATFORMS
+  ruby
   x64-mingw32
 
 DEPENDENCIES
   jekyll (~> 3.8.4)
   jekyll-feed (~> 0.6)
   minima (~> 2.0)
   tzinfo-data
-  wdm (~> 0.1.0)
 
 BUNDLED WITH
    1.17.1
diff --git a/_includes/head.html b/_includes/head.html
@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="/assets/main.css">
   <link rel="stylesheet" href="/assets/style.css">
   <link rel="stylesheet" href="/assets/twitter.css">
+  <link rel="stylesheet" href="/assets/main-style.css">
   <link href="https://fonts.googleapis.com/css?family=Bitter|IBM+Plex+Sans" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
   {%- feed_meta -%}

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -5,7 +5,7 @@
 
   <header class="post-header">
     <h1 class="post-title p-name large" itemprop="name headline">{{ page.title | escape }}</h1>
-    <h3 class="p-name" style="text-align: center" itemprop="name headline">{{ page.subtitle | escape }}</h4>
+    <h3 class="p-name" style="text-align: center" itemprop="name headline">{{ page.summary | escape }}</h4>
     <p class="post-meta">
       <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
         {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}

diff --git a/_layouts/splash-post.html b/_layouts/splash-post.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+<link rel="stylesheet" href="/assets/splash.css">
+
+{%- include head.html -%}
+    <body>
+        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+
+            <div class="splash">
+                <div class="title-box">
+                        <h1 class="post-title p-name large" itemprop="name headline">{{ page.title | escape }}</h1>
+                </div>
+                <div class="animation-container">
+                        {% for i in (1..8) %}
+                            <div class={{"rotating-wrapper-" | append: i}}>
+                                <img src={{"/assets/page" | append: i | append: ".png"}} class="rotating-image">
+                            </div>
+
+                        {% endfor %}
+                </div>
+                <div id="hint">
+                    <a href="#content">
+                        <i><p>Read more</p></i>
+                    </a>
+                </div>
+
+            </div>
+            </div>
+
+        <div class="wrapper splash-wrapper">
+
+            <div class="post-content e-content" itemprop="articleBody" id="content" aria-label="Content">
+                <h3 class="p-name" style="text-align: center" itemprop="name headline">{{ page.summary | escape }}</h3>
+                <p class="post-meta">
+                        <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+                            {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+                        </time>
+                        {%- if page.author -%}
+                            • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
+                        {%- endif -%}
+                </p>
+                {{ content }}
+            </div>
+        </div>
+
+        {%- if site.disqus.shortname -%}
+            {%- include disqus_comments.html -%}
+        {%- endif -%}
+
+        <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
+        </article>
+    </body>
+
+</html>
diff --git a/_projects/2018-09-22-balloon.md b/_projects/2018-09-22-balloon.md
@@ -4,30 +4,27 @@ title: The Balloon
 summary: "One balloon, one camera, and one black-and-white television."
 ---
 
-**_A live broadcast from a different perspective_**
-------
-
 <div class="center-image" style="position: relative; padding-top: 56.25%;">
     <!-- From https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe.html -->
     <!-- TODO: break this out into styles for reuse -->
     <iframe style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;" src="https://www.youtube.com/embed/MhtRBgGYepw?rel=0&amp;controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
-In the early stages of our broadcast system design for [WGBH](/projects/alumni), we wanted to test a proof-of-concept that we had put together. We set out to run broadcast content from an unconventional input: a live, bird's-eye view of the "O" (the center of Olin's campus).
+In the early stages of our broadcast system design for WGBH[^1], we wanted to test a proof-of-concept that we had put together. We set out to run broadcast content from an unconventional input: a live, bird's-eye view of the "O" (the center of Olin's campus).
 
 ### Origins
 
-The inspiration for the project was the balloon. We started with Public Lab's [balloon mapping](https://store.publiclab.org/collections/mapping-kits/products/balloon-mapping-kit?variant=7028822724) kit, with the idea of using it to livestream video of the the O from above. Once we'd developed a proof-of-concept for our analog broadcast system, we decided to combine them in a live demo that tested both our broadcasting chops and our ability to create a compelling exhibit.
+The inspiration for the project was the balloon. We started with Public Lab's balloon mapping kit[^2], with the idea of using it to livestream video of the the O from above. Once we'd developed a proof-of-concept for our analog broadcast system, we decided to combine them in a live demo that tested both our broadcasting chops and our ability to create a compelling exhibit.
 
 ### Tech
 
 ![Our tech.](/assets/diagram.png){: .center-image}
 
-For broadcasting, we used a simple version of our broadcast setup (documented [here](/projects/alumni)), with just a single modulator, antenna, and TV. As the input to the modulator, we used our own custom livestreaming setup:
+For broadcasting, we used a simple version of our broadcast setup[^1], with just a single modulator, antenna, and TV. As the input to the modulator, we used our own custom livestreaming setup:
 
 #### Livestreaming
 
-We used a GoPro Hero 5, with a clip mount attached to a string that was tied around the balloon's loop. A mini battery pack, zip-tied to the camera, provided enough charge to broadcast for the time period that we needed. With a laptop connected to the GoPro's built-in wifi, a fork of this livestreaming script provided an easy way to start/stop streaming and recording.
+We used a GoPro Hero 5, with a clip mount attached to a string that was tied around the balloon's loop. A mini battery pack, zip-tied to the camera, provided enough charge to broadcast for the time period that we needed. With a laptop connected to the GoPro's built-in wifi, a fork of the GoPro livestreaming script[^3] provided an easy way to start/stop streaming and recording.
 
 <div class="container">
     <div class="stack-image2">
@@ -45,6 +42,16 @@ We used a GoPro Hero 5, with a clip mount attached to a string that was tied aro
 
 ![Our tech.](/assets/balloon1.jpg){: .center-image}
 
-At Olin's annual Alumni Weekend event, we deployed. With the help of a half-dozen other Olin students, we were able to successfully inflate the balloon, guiding it with three tethers attached to sandbags. After our successful deployment, we were able to successfully stream live footage of the O to our broadcast system and TV.
+At Olin's annual Alumni Weekend event, we deployed. With the help of a half-dozen other Olin students, we were able to successfully inflate the balloon using our game plan[^4], guiding it with three tethers attached to sandbags. After our successful deployment, we were able to successfully stream live footage of the O to our broadcast system and TV.
 
 ![Live in the air.](/assets/balloon_4.gif){: .center-image}
+
+### Links
+
+[^1]: [Our broadcast project with WGBH](/projects/alumni)
+
+[^2]: [Public Lab balloon mapping kit](https://store.publiclab.org/collections/mapping-kits/products/balloon-mapping-kit?variant=7028822724) 
+
+[^3]: [GoPro livestreaming script](https://github.com/KonradIT/GoProStream/blob/master/GoProStream.py)
+
+[^4]: [Balloon game plan](https://docs.google.com/document/d/1kojWuNOd5lHzSCMgJL5H_chwWaNJ1tcZq2D1Og3nD3k/edit?usp=sharing)
diff --git a/_projects/2018-10-20-alumni.md b/_projects/2018-10-20-alumni.md
@@ -4,9 +4,6 @@ title: WGBH Alumni Weekend
 summary: "Three TVs, six channels, and an old yellow couch."
 ---
 
-**_Archives Over the Air_**
-------
-
 <div class="center-image" style="position: relative; padding-top: 56.25%;">
     <!-- From https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe.html -->
     <!-- TODO: break this out into styles for reuse -->

diff --git a/_projects/2018-11-30-zine.md b/_projects/2018-11-30-zine.md
@@ -0,0 +1,18 @@
+---
+layout: splash-post
+title: Zine Making
+summary: "Analog broadcast, now in print form"
+---
+
+![Assembly.](/assets/ZineAssembly.png)
+
+As we (Evan and Matt) were heading to the first ever [New York Tech Zine Fair](http://techzinefair.org/) along with a group of Olin students, we wanted to create an informative zine as a way of communicating and documenting our project. Although our work has encompassed a number of different sub-projects, we chose to focus on conveying the things we learned throughout the process of building our low-power analog broadcast system. Over the course of a week, we designed printed *Hyperlocal TV: A Primer on Analog Broadcast.* 
+
+![The zine.](/assets/zines.jpg)
+
+In total, we produced ~100 copies in two runs, half of which we brought to NYTZF and half of which we made for Expo as part of our end-of-the-semester exhibit of our work. 
+
+![The zine.](/assets/ZinePrint.jpg)
+
+You can download the zine in full [here](/assets/hyperlocaltv.pdf); check out the instructions above to make your very own copy of *Hyperlocal TV!*  
+
diff --git a/assets/ZineAssembly.png b/assets/ZineAssembly.png
diff --git a/assets/ZinePrint.jpg b/assets/ZinePrint.jpg
diff --git a/assets/hyperlocaltv.pdf b/assets/hyperlocaltv.pdf
diff --git a/assets/main-style.scss b/assets/main-style.scss
@@ -28,6 +28,7 @@ body {
       // border-color: #777;
       // border-style: solid;
       // border-width: 4px 1px 6px;
+      position: relative;
       margin: auto;
       grid-column: 2;
       grid-row: wb-top / wb-bottom;

diff --git a/assets/page1.png b/assets/page1.png
diff --git a/assets/page2.png b/assets/page2.png
diff --git a/assets/page3.png b/assets/page3.png
diff --git a/assets/page4.png b/assets/page4.png
diff --git a/assets/page5.png b/assets/page5.png
diff --git a/assets/page6.png b/assets/page6.png
diff --git a/assets/page7.png b/assets/page7.png
diff --git a/assets/page8.png b/assets/page8.png
diff --git a/assets/splash.scss b/assets/splash.scss
@@ -0,0 +1,109 @@
+---
+---
+
+.splash-wrapper {
+    margin-top: 30px;
+}
+
+@for $i from 1 through 8 {
+    .rotating-wrapper-#{$i} {
+        width: 40%;
+        height: 40% * (11 / 8.5);
+        animation: spin-#{$i} 15s linear infinite;
+        position: absolute;
+        transform-origin: 15vw 15vw;
+
+    }
+
+    @keyframes spin-#{$i} {
+        0% {
+          transform: rotate(($i - 1) * 45 + 0deg) translate(75%, -150%);
+        }
+        50% {
+          transform: rotate(($i - 1) * 45 + 180deg) translate(75%, -150%);
+        }
+        100% {
+          transform: rotate(($i - 1) * 45 + 360deg) translate(75%, -150%);
+        }
+    }
+
+}
+body {
+    margin: 0;
+    .splash {
+      height: 100vh;
+      min-height: calc(100vw / 16 * 7);
+      max-height: calc(100vw / 16 * 10);  // overridden on >16/10 screens
+      width: 100%;
+      position: relative;
+
+      overflow: hidden;
+
+      background-color: #eee;
+
+      display: grid;
+      grid-template-rows: auto 30vw auto;
+      grid-template-columns: auto 30vw auto;
+
+      .title-box {
+        width: 100%;
+        text-align: center;
+        grid-row: 2;
+        grid-column: 2;
+
+        // center text
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        p {
+          margin: auto;
+          display: inline-block;
+        }
+      }
+
+      #hint {
+
+        grid-row: 3;
+        grid-column: 1;
+        width: 33%;
+        margin: 0 33%;
+        height: 3rem;
+        text-align: center;
+        line-height: 33px;
+        background-color: #fff;
+        border-radius: 10px 10px 0 0;
+
+        // bottom of cell
+        position: absolute;
+        bottom: 0;
+
+        // center text
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        p {
+          margin: auto;
+          display: inline-block;
+        }
+        }
+    }
+}
+
+.rotating-image {
+    transition: transform .3s;
+}
+
+.rotating-image:hover {
+    transform: scale(1.5);
+}
+
+.animation-container {
+    position: relative;
+    // left: 0vw;
+    // top: 0vw;
+    width: 100%;
+    height: 0px;
+    padding-bottom: 100%;
+    grid-row: 2;
+    grid-column: 2;
+}
diff --git a/assets/style.scss b/assets/style.scss
@@ -1,6 +1,8 @@
 ---
 ---
 
+
+
 .medium {
     max-width: 75%;
 }

diff --git a/assets/zines.jpg b/assets/zines.jpg