First commit

8 files changed, 361 insertions, 0 deletions

diff --git a/css/CooperBlackStd.otf b/css/CooperBlackStd.otf
new file mode 100644
index 0000000..96f32bc
--- /dev/null
+++ b/css/CooperBlackStd.otf
diff --git a/css/SF Movie Poster Condensed.ttf b/css/SF Movie Poster Condensed.ttf
new file mode 100644
index 0000000..69058f5
--- /dev/null
+++ b/css/SF Movie Poster Condensed.ttf
diff --git a/css/SF Movie Poster.ttf b/css/SF Movie Poster.ttf
new file mode 100644
index 0000000..2e58e26
--- /dev/null
+++ b/css/SF Movie Poster.ttf
diff --git a/css/radial4.png b/css/radial4.png
new file mode 100644
index 0000000..d2200af
--- /dev/null
+++ b/css/radial4.png
diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 0000000..37d2012
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,75 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+/*
+	With addtions by Tommaso Lanza
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+	background: transparent;
+	cursor: default;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+
+/*
+tmslnz additions
+ */
+
+/* Clean up anchors */
+a {
+	margin: 0;
+	padding: 0;
+	font-size: 100%;
+	vertical-align: baseline;
+	background: transparent;
+	color: inherit;
+	text-decoration: inherit;
+}
+
+/*html {
+	-webkit-text-size-adjust: none;
+			-ms-text-size-adjust: none;
+}*/
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..0cb0f0f
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,116 @@
+/* apply a natural box layout model to all elements */
+* {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+
+@font-face {
+  font-family: Poster;
+  src: url('SF Movie Poster.ttf');
+  /*font-weight: bol/d;*/
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Poster Condensed;
+  src: url('SF Movie Poster Condensed.ttf');
+  /*font-weight: bol/d;*/
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Cooper Black;
+  src: url('CooperBlackStd.otf');
+  font-style: normal;
+}
+
+html, body {
+   height:100%;
+   width: 100%;
+   margin: 0;
+   padding: 0;
+   border: 0;
+}
+
+body {
+  font-size: 20px;
+  font-family: 'Chango', sans-serif;
+  color: black;
+}
+
+#main {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 0;
+  background-image: url(radial4.png);
+  background-size: 1000px;
+  background-position: 50%;
+}
+
+/*.jtag {
+  display: inline-block;
+  -webkit-transform: rotate(-10deg);
+  -webkit-backface-visibility:hidden;
+}*/
+
+.tighter {
+  letter-spacing: -10px;
+}
+
+.center {
+  line-height: normal;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.highlight {
+  color: rgb(255, 50, 50);
+}
+
+.groove {
+  z-index: 1000;
+  position: relative;
+  font-size: 140px;
+  margin-bottom: 100px;
+  /*font-weight: 800;*/
+  color: rgba(0,0,0,0.05);
+}
+
+.info {
+  /*text-transform: uppercase;*/
+  margin-top: 100px;
+  font-family: Poster Condensed;
+  line-height: 45px;
+  font-size: 60px;
+  color: rgb(230,230,230);
+  letter-spacing: 1px;
+  text-shadow: 0 0 20px rgb(0,0,0);
+}
+
+a {
+  /*border-bottom-color: white;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  padding-bottom: 1px;*/
+  text-decoration: underline;
+}
+.date {
+  color: rgb(255,255,255);
+  font-weight: 800;
+  text-shadow: 0 0 20px rgb(0,50,0);
+}
+/*.normal-small {
+  font-size: 60px;
+}*/
+.small {
+  font-size: 40px;
+  line-height: 36px;
+}
+
+/*.small-small {
+  font-size: 30px;
+  line-height: 33px;
+}*/
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..43b11e3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="Content-Language" content="en">
+    <meta name="author" content="The Workers London Ltd.">
+    <meta name="viewport" content="width=600" id="meta-viewport">
+    <meta name="google" content="notranslate">
+    <title>JTAG</title>
+    <link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'>
+    <!-- <link href='http://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'> -->
+    <link rel="stylesheet" type="text/css" href="/css/reset.css">
+    <link rel="stylesheet" type="text/css" href="/css/style.css">
+    <script>
+      var _lr = _lr || {};
+      _lr.host = (location.host || 'localhost').split(':')[0];
+      _lr.port = 35729;
+      (function(doc, tag) {
+       var el = doc.createElement(tag);
+       var ct = doc.getElementsByTagName(tag)[0];
+       el.src = '//' + _lr.host + ':' + _lr.port + '/livereload.js?snipver=1';
+       ct.parentNode.insertBefore(el, ct);
+      }(document, 'script'));
+    </script>
+  </head>
+  <body>
+    <div id='main'>
+      <div class="center">
+        <p id='txt' class='groove' data-panes="10">
+          <span class="jtag">J</span><span class="jtag tighter">TA</span><span class="jtag">G</span>
+        </p>
+        <p class="date">29.06</p>
+        <p class="date">~8PM</p>
+        <div class="info">
+          <p class="small"><a href="//jrdonaldson.com">JRD</a>, <a href="//theworkers.net">TOMM</a>, <a href="//arianeprin.com">ARIANE</a>, and <a href="//giorgiapiacentino.com">DR. GIO</a> PRESENT</p>
+          <p>JTAG at SHOREDITCH HOUSE roof garden</p>
+          <p><span class="normal-small">event entrance</span>
+          <a href="//maps.google.co.uk/maps?q=19+BETHNAL+GREEN+ROAD&hl=en&sll=51.48931,-0.08819&sspn=0.802934,2.108002&hnear=19+Bethnal+Green+Rd,+London+Borough+of+Tower+Hamlets,+London+E1,+United+Kingdom&t=m&z=16"><span class="highlight">13</span> BETHNAL GREEN ROAD</a></p>
+          <p class="small">featuring DEAN WEI of chicago, il</p>
+          <p class="small"><span class="small-small">with music by </span> <a href="//soundcloud.com/silkeye">SILKEYE</a></p>
+        </div>
+      </div>
+    </div>
+    <script src="/js/index.js"></script>
+    <script>
+      var sc_project = 0000000;
+      var sc_invisible = 1;
+      var sc_security = "000000";
+      (function(doc, tag) {
+       var el = doc.createElement(tag);
+       var ct = doc.getElementsByTagName(tag)[0];
+       el.src = ('https:' === location.protocol ? '//secure' : '//www') + '.statcounter.com/counter/counter.js';
+       ct.parentNode.insertBefore(el, ct);
+      }(document, 'script'))
+    </script>
+  </body>
+</html>
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..d398243
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,113 @@
+/*global */
+
+(function() {
+  // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+  // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+  // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+  // MIT license
+  var lastTime = 0;
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
+  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] ||
+                                  window[vendors[x]+'CancelRequestAnimationFrame'];
+  }
+
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = function(callback, element) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
+        timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+    };
+  }
+
+  if (!window.cancelAnimationFrame) {
+    window.cancelAnimationFrame = function(id) {
+      clearTimeout(id);
+    };
+  }
+}());
+
+Element.prototype.hasClassName = function (a) {
+    return new RegExp("(?:^|\\s+)" + a + "(?:\\s+|$)").test(this.className);
+};
+
+Element.prototype.addClassName = function (a) {
+    if (!this.hasClassName(a)) {
+        this.className = [this.className, a].join(" ");
+    }
+};
+
+Element.prototype.removeClassName = function (b) {
+    if (this.hasClassName(b)) {
+        var a = this.className;
+        this.className = a.replace(new RegExp("(?:^|\\s+)" + b + "(?:\\s+|$)", "g"), " ");
+    }
+};
+
+Element.prototype.toggleClassName = function (a) {
+  this[this.hasClassName(a) ? "removeClassName" : "addClassName"](a);
+};
+
+
+function toDegrees (angle) {
+  return angle * (180 / Math.PI);
+}
+
+function toRadians (angle) {
+  return angle * (Math.PI / 180);
+}
+
+function deadCenter(){
+  var el = document.querySelectorAll('#main')[0];
+  el.style.lineHeight = window.innerHeight+'px';
+}
+
+var Shoreditch = function( elem ) {
+  
+  this.elem = elem;
+  this.panes = parseInt( this.elem.getAttribute('data-panes'), 15 );
+  
+  this.colorTime = ~~( Math.random() * 360 );
+  this.waveTheta = 0;
+
+  this.colorIncrement = -1;
+  this.degrees = 1;
+
+  this.animate();
+};
+
+Shoreditch.prototype.getTextShadow = function( x, y, blur, hue, alpha ) {
+  return ', ' + x + 'px ' + y + 'px ' + blur + 'px ' + 'hsla(' + hue + ', 100%, 45%, ' + alpha + ')';
+};
+
+Shoreditch.prototype.animate = function() {
+  var shadows = '0 0 transparent',
+      i, j, x, y;
+  this.degrees  = (this.degrees !== void 0) ? this.degrees - 1 : 0;
+  // renders rainbow river
+  for ( i = 1; i < this.panes; i++ ) {
+    var normI = i / this.panes;
+    var hue = ( normI * 50 + this.colorTime * 0.5 ) % 360;
+    var alpha = ( 1 - normI ) * 0.8;
+    x = Math.cos(toRadians(this.degrees + i*Math.PI*Math.PI)) * i*(i/10);
+    // x = 0;
+    y = Math.sin(toRadians(this.degrees + i*Math.PI*Math.PI)) * i*(i*2);
+    shadows += this.getTextShadow( x, y, i*(i/5), hue, alpha );
+  }
+
+  this.elem.style.textShadow = shadows;
+  this.colorTime += this.colorIncrement;
+  window.requestAnimationFrame( this.animate.bind( this ) );
+};
+
+window.addEventListener( 'resize', deadCenter );
+
+window.addEventListener( 'DOMContentLoaded', function() {
+  deadCenter();
+	var grov = new Shoreditch(document.querySelectorAll('#txt')[0]);
+}, false );
+