From d7a1c9829706d7c4e411b73d7c3ca09c85612998 Mon Sep 17 00:00:00 2001
From: Francesco Zaia <francesco.zaia@gmail.com>
Date: Sun, 21 Apr 2013 18:04:43 +0100
Subject: [PATCH] CSS clean - started

---
 build                         |   2 +-
 index.html                    |  23 +--
 scripts/main.js               |  26 +--
 stylesheets/sass/_mixins.scss |  16 ++
 stylesheets/sass/styles.scss  | 325 +++++++++-----------------------
 stylesheets/styles.css        | 345 ++++++----------------------------
 6 files changed, 169 insertions(+), 568 deletions(-)
diff --git a/build b/build
index 6570a76..3e79634 100755
--- a/build
+++ b/build
@@ -1 +1 @@
-sass --watch ./stylesheets/sass/styles.scss:./stylesheets/styles.css
+sass --watch ./stylesheets/sass/styles.scss:./stylesheets/styles.css --style compact
diff --git a/index.html b/index.html
index 599abb9..ac260e9 100755
--- a/index.html
+++ b/index.html
@@ -2,15 +2,14 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
-		<title>Mio</title>
+		<title>Test</title>
 		<meta name="viewport" content="width=device-width,initial-scale=1">
 		<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
 		<link rel="stylesheet" href="./stylesheets/styles.css">
 		<link rel="stylesheet" href="./stylesheets/font-awesome.min.css">
 	</head>
 	<body>
-		
-		
+
 		<nav>
 			<ul class="menu">
 				<li class="active"><a href="#">home</a></li>
@@ -27,18 +26,11 @@
 			</ul>
 		</nav>
 
-	
-		
 		<section role="main">
 			<header>
 				<a href="#nav" class="toggleButton">menu</a>
 				<h1 class="cf">francesco zaia</h1>
 			</header>
-			<!--<article>
-				<h2 id="prototype1">Prototype 1</h2>
-				<p class="intro cf">Despite the apparent simplicity, there are many underlying factors which, when thought out and implemented properly, can make that simple solution even better without adding more complexity to the user&nbsp;interface.</p>
-				<div class="gallery" class="cf"></div>
-			</article>-->
 			<article>
 				<h2 id="prototype2">Prototype 2</h2>
 				<p class="intro cf">Despite the apparent simplicity, there are many underlying factors which, when thought out and implemented properly, can make that simple solution even better without adding more complexity to the user&nbsp;interface.</p>
@@ -61,25 +53,18 @@ <h2 id="prototype2">Prototype 2</h2>
 					<li itemprop="photography">
 						<img src="http://24.media.tumblr.com/73df2ab210d3ef60be5ff79c4b374304/tumblr_mi8gh5oTb61qzmntao1_500.jpg" alt="" itemprop="image">
 						<span itemprop="name">Test Title</span>
-						<span itemprop="description"></span>
+						<span itemprop="description">TEST</span>
 					</li>
 					<li itemprop="photography">
 						<img src="http://24.media.tumblr.com/062e56d6f384b7360ce5fe3cb39db7b8/tumblr_mi8ggtUAri1qzmntao1_500.jpg" alt="" itemprop="image">
 						<span itemprop="name">Test Title</span>
-						<span itemprop="description"></span>
+						<span itemprop="description">TEST</span>
 					</li>
 				</ul>
 			</article>
-			<!--<article>
-				<h2 id="prototype3" name="prototype3">Prototype 3</h2>
-				<p class="intro cf">Despite the apparent simplicity, there are many underlying factors which, when thought out and implemented properly, can make that simple solution even better without adding more complexity to the user&nbsp;interface.</p>
-				<div style="height:400px; background-color:green" class="cf"></div>
-			</article>-->
 		</section>
 
-		<script type="text/javascript" src="./scripts/requestAnimationFrame.js"></script>
 		<script type="text/javascript" src="https://raw.github.com/ftlabs/dom-delegate/master/lib/delegate.js"></script>
-		<!--<script type="text/javascript" src="./scripts/imagePreloader.js"></script>-->
 		<script type="text/javascript" src="./scripts/main.js"></script>
 	</body>
 </html>
diff --git a/scripts/main.js b/scripts/main.js
index 5224c52..8ab9b5c 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -2,25 +2,11 @@
 
 	"use strict";
 
- 	var init = function() {
-
-		//ImagePreloader.moduleMethod("ole");
-		//var photo = document.querySelector(".gallerySlider");
-
-        window.addEventListener('load', function() {
-			var m = new Delegate(document.body);
-			m.on("click", ".toggleButton", function(){
-				var element = document.getElementsByTagName("section")[0];
-				if(element.className.split(" ").indexOf("opened") > -1) {
-					element.className = "";
-				} else {
-					element.className = "opened";
-				}
-				
-			})
-		}, false);
-	}
-
-	init();
+	// [TODO: avoid window pollution]
+ 	var m = new Delegate(document.body);
+	m.on("click", ".toggleButton", function() {
+		var element = document.getElementsByTagName("section")[0];
+		element.className = (element.className.split(" ").indexOf("opened") > -1) ? "" : "opened";
+	})
 
 })(this);
\ No newline at end of file
diff --git a/stylesheets/sass/_mixins.scss b/stylesheets/sass/_mixins.scss
index 7c325ef..d8bd9c0 100644
--- a/stylesheets/sass/_mixins.scss
+++ b/stylesheets/sass/_mixins.scss
@@ -14,4 +14,20 @@
 	-webkit-box-shadow:	$distanceX $distanceY $blur $rgba;
 	-moz-box-shadow:	$distanceX $distanceY $blur $rgba;
 	box-shadow:			$distanceX $distanceY $blur $rgba;
+}
+@mixin sass-clearfix {
+	&:before, &:after {
+		content:"";
+		display:block;
+		overflow:hidden;
+		visibility:hidden;
+		width:0;
+		height:0;
+	}
+	&:after {
+		clear:both;
+	}
+	& {
+		*zoom:1;
+	}
 }
\ No newline at end of file
diff --git a/stylesheets/sass/styles.scss b/stylesheets/sass/styles.scss
index d24cf8f..0b4e62e 100755
--- a/stylesheets/sass/styles.scss
+++ b/stylesheets/sass/styles.scss
@@ -1,151 +1,119 @@
 @import "reset";
 @import "mixins";
 
-
-html, body {
-	min-height: 100%;
-}
-
 body {
-	-webkit-font-smoothing: antialiased;
-	-webkit-text-size-adjust: 100%;
-	-ms-text-size-adjust: 100%;
-	text-size-adjust: 100%;
-	color: #666;
-	font: normal 62.5%/1.5 'Droid Sans', sans-serif;
 	overflow-x: hidden;
-
+	font: normal 62.5%/1.5 'Droid Sans', sans-serif;
+	color: #666;
+}
+/* headings */
+h1, h2, h3 {
+	font-weight: bold;
 }
-
 h1 {
 	font-size: 2em;
-	font-weight: bold;
 }
-
-p {
-	float: left;
-	width: 100%;
-	margin-bottom: 1em;
+h2 {
+	font-size: 1.6em;
+}
+h3 {
+	font-size: 1.2em;
 }
+/* anchors */
 
 a {
 	@include sass-transition(color, .3s, ease);
-	color: #000;
 	text-decoration: none;
+	color: #000;
+	&:hover, &:active {
+		color: #666;
+	}
 }
-a:active,
-a:hover {
-	color: #666;
-	outline: 0;
-}
-
-.cf:before,
-.cf:after {
-	content:"";
-	display:block;
-	overflow:hidden;
-	visibility:hidden;
-	width:0;
-	height:0;
-}
-.cf:after {
-	clear:both;
-}
-
-article ul {
-	text-align:center;
+/* clearfix [TODO: is needed?] */
+.cf {
+	@include sass-clearfix;
 }
 
-
-
-.main {
-	@include sass-box-sizing("border");
-	-webkit-overflow-scrolling: touch;
-	overflow: hidden;
-	overflow-y: scroll;
-	display:inline-block;
-	width: 76%;
-}
-header {
-	padding: 1em 2em;
-	background-color: #FFF;
-	text-align: center;
-}
+/* NAVIGATION */
 nav {
-	vertical-align: top;
-	height: 100%;
-	width: 24%;
 	display:inline-block;
+	vertical-align: top;
+	width: 24%; /* [TODO: why 25% breaks layout?] */
 	ul {
-		display: inline-block;
-		width: 100%;
-		font-size: 120%;
-		list-style: none;
+		font-size: 1.2em;
 		margin: 2em;
-
 		li {
-			display: inline-block;
-			width: 100%;
 			margin: .6em;
+			a {
+				font-weight: 400;
+			}
+			.active a {
+				font-weight: 700
+			}
 		}
 	}
-	
 	ul.social {
 		margin: 2em;
-
 		li {
 			display: inline;
 		}
 	}
-	
-	a {
-		width: 100%;
-		font-size: 1em;
-		font-weight: 400;
-		-webkit-box-sizing: border-box;
-		-moz-box-sizing: border-box;
-		box-sizing: border-box;
-	}
 }
 
-nav .active a { font-weight: 700 }
-nav li:first-child a { border-top: 0 }
-nav li:last-child a { border-bottom: 0 }
-
-
-
-.gallery {
-	width:100%;
-	clear:left;
-	overflow-x: scroll;
 
-	.gallerySlider {
-		position:relative;
-	}
+/* [TODO --> clean from here and below] */
+header {
+	padding: 1em 2em;
+	background-color: #FFF;
+}
 
-	img {
-		display:inline-block;
-		margin: 10px;
+article {
+	padding: 1em;
+	ul {
+		text-align:center;
+		li[itemprop=photography] {
+			background:#fff;
+			width:40%;
+			position:relative;
+			display:inline-block;
+		}
+		li[itemprop=photography] img {
+			width:100%;
+			float:left;
+		}
+		li[itemprop=photography] [itemprop=name] {
+			color:#fff;
+			text-shadow:0 0 4px #000;
+			font-size:1.4em;
+			position:absolute;
+			text-align:center;
+			width:100%;
+			bottom:0;
+			left:0;
+			line-height:2;
+			display:block;
+		}
+		li[itemprop=photography] [itemprop=description] {
+			color:#8c8b90;
+			font-family:Arial;
+			font-size:.8em;
+			margin-left:165px;
+			padding:0 10px;
+		}
 	}
 }
-@media screen and (min-width: 40em) {
-	.main {
-		position: fixed;
-	}
-	.toggleButton {
-		display: none;
-	}
-	section {
-	width: 75%;
-	display: inline-block;
+
+@media only screen and (max-width: 30em) {
+	
+	header {
+		text-align: center;
 	}
-}
-@media screen and (max-width: 40em) {
 	.toggleButton {
 		font-size: 2em;
 		text-align: left;
 		display: inline;
 		float: left;
+		cursor: pointer;
 	}
 	i {
 		font-size: 2em;
@@ -160,15 +128,6 @@ nav li:last-child a { border-bottom: 0 }
 			display: inline-block;
 		}
 	}
-	nav a:hover { background: transparent }
-	#toggle {
-		-webkit-touch-callout: none;
-		-webkit-user-select: none;
-		-moz-user-select: none;
-		-ms-user-select: none;
-		user-select: none;
-		display: block;
-	}
 	section {
 		@include sass-box-shadow(-3px, 0px, 16px, rgba(0, 0, 0, 0.3));
 		position:absolute;
@@ -183,118 +142,9 @@ nav li:last-child a { border-bottom: 0 }
 	section.opened {
 		margin-left: 120px;
 	}
-	.main {
-		-webkit-overflow-scrolling: auto;
-		box-shadow: none;
-		border-radius: 0;
-		width: 100%;
-		overflow: hidden;
-	}
-	.main::-webkit-scrollbar { background-color: transparent }
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
-	// retina
-}
-
-
-
-
-h3 {
-position:relative;
-text-transform:uppercase;
-font-family:Veneer;
-font-size:220%;
-text-align:left;
-color:#ff4e04;
-margin:30px 20px;
-}
-
-h3 em {
-color:#c9450d;
-}
-
-#band,#location,#tickets,#subscribe {
-width:90%;
-max-width:1000px;
-text-align:center;
-margin:0 auto;
-}
-
-
-#band {
-margin-top:-400px;
-}
-
-li[itemprop=photography] {
-background:#fff;
-width:30%;
-position:relative;
-display:inline-block;
-height:30%;
-margin:6px;
-}
-
-li[itemprop=photography] img {
-width:100%;
--webkit-backface-visibility:hidden;
--webkit-filter:sepia(50%) grayscale(60%);
--moz-filter:sepia(50%) grayscale(60%);
-filter:sepia(50%) grayscale(60%);
--webkit-transition:all .3s ease-in;
--moz-transition:all .3s ease-in;
--o-transition:all .3s ease-in;
-transition:all .3s ease-in;
-float:left;
-}
-
-li[itemprop=photography] [itemprop=name] {
-color:#fff;
-font-family:ThirstyRough;
-text-shadow:0 0 4px #000;
-font-size:160%;
-font-weight:100;
-position:absolute;
-text-align:center;
-width:100%;
-bottom:0;
-left:0;
-line-height:2;
-display:block;
-}
-
-.no-textshadow li[itemprop=photography] [itemprop=name] {
-background:#4E4E4E;
-opacity:.7;
-line-height:1.5;
-}
-
-li[itemprop=photography]:hover img {
--webkit-filter:none;
--moz-filter:none;
-filter:none;
-}
-
-li[itemprop=photography] [itemprop=description] {
-display:none;
-color:#8c8b90;
-font-family:Arial;
-font-size:.8em;
-margin-left:165px;
-padding:0 10px;
-}
-
-
-@media only screen and (max-width: 25em){
-
-
-	#band,#location,#tickets,#subscribe {
-	width:95%;
-	}
-
 	li[itemprop=photography] {
-	width:64%;
-	margin:6px 10px;
+	width:100%;
+	margin:10px 0;
 	}
 
 	li[itemprop=photography] [itemprop=name] {
@@ -302,21 +152,20 @@ padding:0 10px;
 	}
 }
 
-@media only screen and (max-width: 43em) {
-
-
-	h3 {
-	text-align:center;
+@media screen and (min-width: 30em) {
+	.main {
+		position: fixed;
 	}
-
-	#band,#location,#tickets,#subscribe {
-	width:98%;
+	.toggleButton {
+		display: none;
 	}
-
-	#band {
-	margin-top:-350px;
+	section {
+		width: 75%;
+		display: inline-block;
 	}
+}
 
+@media only screen and (max-width: 60em) {
 	li[itemprop=photography] {
 	width:84%;
 	margin:6px 10px;
@@ -326,3 +175,7 @@ padding:0 10px;
 	font-size:180%;
 	}
 }
+// [TODO retina]
+@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
+	
+}
\ No newline at end of file
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
index ff8b886..c462043 100644
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -1,312 +1,73 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
+/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain)
 */
-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; }
+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; }
 
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-  display: block; }
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
 
-body {
-  line-height: 1; }
+body { line-height: 1; }
 
-ol, ul {
-  list-style: none; }
+ol, ul { list-style: none; }
 
-blockquote, q {
-  quotes: none; }
+blockquote, q { quotes: none; }
 
-blockquote:before, blockquote:after {
-  content: '';
-  content: none; }
+blockquote:before, blockquote:after { content: ''; content: none; }
 
-q:before, q:after {
-  content: '';
-  content: none; }
+q:before, q:after { content: ''; content: none; }
 
-table {
-  border-collapse: collapse;
-  border-spacing: 0; }
+table { border-collapse: collapse; border-spacing: 0; }
 
-html, body {
-  min-height: 100%; }
+body { overflow-x: hidden; font: normal 62.5%/1.5 'Droid Sans', sans-serif; color: #666; }
 
-body {
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-  color: #666;
-  font: normal 62.5%/1.5 'Droid Sans', sans-serif;
-  overflow-x: hidden; }
+/* headings */
+h1, h2, h3 { font-weight: bold; }
 
-h1 {
-  font-size: 2em;
-  font-weight: bold; }
+h1 { font-size: 2em; }
 
-p {
-  float: left;
-  width: 100%;
-  margin-bottom: 1em; }
+h2 { font-size: 1.6em; }
 
-a {
-  transition: color 0.3s ease;
-  -moz-transition: color 0.3s ease;
-  -webkit-transition: color 0.3s ease;
-  color: #000;
-  text-decoration: none; }
+h3 { font-size: 1.2em; }
 
-a:active,
-a:hover {
-  color: #666;
-  outline: 0; }
+/* anchors */
+a { transition: color 0.3s ease; -moz-transition: color 0.3s ease; -webkit-transition: color 0.3s ease; text-decoration: none; color: #000; }
+a:hover, a:active { color: #666; }
 
-.cf:before,
-.cf:after {
-  content: "";
-  display: block;
-  overflow: hidden;
-  visibility: hidden;
-  width: 0;
-  height: 0; }
+/* clearfix [TODO: is needed?] */
+.cf:before, .cf:after { content: ""; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
+.cf:after { clear: both; }
+.cf { *zoom: 1; }
 
-.cf:after {
-  clear: both; }
+/* NAVIGATION */
+nav { display: inline-block; vertical-align: top; width: 24%; /* [TODO: why 25% breaks layout?] */ }
+nav ul { font-size: 1.2em; margin: 2em; }
+nav ul li { margin: .6em; }
+nav ul li a { font-weight: 400; }
+nav ul li .active a { font-weight: 700; }
+nav ul.social { margin: 2em; }
+nav ul.social li { display: inline; }
 
-article ul {
-  text-align: center; }
+/* [TODO --> clean from here and below] */
+header { padding: 1em 2em; background-color: #FFF; }
 
-.main {
-  /* Acceptable values are border, content, and padding - content is the default W3C model */
-  webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
-  overflow: hidden;
-  overflow-y: scroll;
-  display: inline-block;
-  width: 76%; }
+article { padding: 1em; }
+article ul { text-align: center; }
+article ul li[itemprop=photography] { background: #fff; width: 40%; position: relative; display: inline-block; }
+article ul li[itemprop=photography] img { width: 100%; float: left; }
+article ul li[itemprop=photography] [itemprop=name] { color: #fff; text-shadow: 0 0 4px #000; font-size: 1.4em; position: absolute; text-align: center; width: 100%; bottom: 0; left: 0; line-height: 2; display: block; }
+article ul li[itemprop=photography] [itemprop=description] { color: #8c8b90; font-family: Arial; font-size: .8em; margin-left: 165px; padding: 0 10px; }
 
-header {
-  padding: 1em 2em;
-  background-color: #FFF;
-  text-align: center; }
-
-nav {
-  vertical-align: top;
-  height: 100%;
-  width: 24%;
-  display: inline-block; }
-  nav ul {
-    display: inline-block;
-    width: 100%;
-    font-size: 120%;
-    list-style: none;
-    margin: 2em; }
-    nav ul li {
-      display: inline-block;
-      width: 100%;
-      margin: .6em; }
-  nav ul.social {
-    margin: 2em; }
-    nav ul.social li {
-      display: inline; }
-  nav a {
-    width: 100%;
-    font-size: 1em;
-    font-weight: 400;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box; }
-
-nav .active a {
-  font-weight: 700; }
-
-nav li:first-child a {
-  border-top: 0; }
-
-nav li:last-child a {
-  border-bottom: 0; }
-
-.gallery {
-  width: 100%;
-  clear: left;
-  overflow-x: scroll; }
-  .gallery .gallerySlider {
-    position: relative; }
-  .gallery img {
-    display: inline-block;
-    margin: 10px; }
-
-@media screen and (min-width: 40em) {
-  .main {
-    position: fixed; }
-
-  .toggleButton {
-    display: none; }
-
-  section {
-    width: 75%;
-    display: inline-block; } }
-@media screen and (max-width: 40em) {
-  .toggleButton {
-    font-size: 2em;
-    text-align: left;
-    display: inline;
-    float: left; }
-
-  i {
-    font-size: 2em; }
-
-  nav {
-    position: fixed;
-    z-index: 1; }
-    nav a {
-      font-size: 1.4em; }
-    nav ul.social li {
-      display: inline-block; }
-
-  nav a:hover {
-    background: transparent; }
-
-  #toggle {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    display: block; }
-
-  section {
-    -webkit-box-shadow: -3px 0px 16px rgba(0, 0, 0, 0.3);
-    -moz-box-shadow: -3px 0px 16px rgba(0, 0, 0, 0.3);
-    box-shadow: -3px 0px 16px rgba(0, 0, 0, 0.3);
-    position: absolute;
-    background-color: #FFF;
-    top: 0;
-    left: 0;
-    width: 100%;
-    overflow: hidden;
-    z-index: 10;
-    transition: all 0.2s ease-in-out;
-    -moz-transition: all 0.2s ease-in-out;
-    -webkit-transition: all 0.2s ease-in-out; }
-
-  section.opened {
-    margin-left: 120px; }
-
-  .main {
-    -webkit-overflow-scrolling: auto;
-    box-shadow: none;
-    border-radius: 0;
-    width: 100%;
-    overflow: hidden; }
-
-  .main::-webkit-scrollbar {
-    background-color: transparent; } }
-h3 {
-  position: relative;
-  text-transform: uppercase;
-  font-family: Veneer;
-  font-size: 220%;
-  text-align: left;
-  color: #ff4e04;
-  margin: 30px 20px; }
-
-h3 em {
-  color: #c9450d; }
-
-#band, #location, #tickets, #subscribe {
-  width: 90%;
-  max-width: 1000px;
-  text-align: center;
-  margin: 0 auto; }
-
-#band {
-  margin-top: -400px; }
-
-li[itemprop=photography] {
-  background: #fff;
-  width: 30%;
-  position: relative;
-  display: inline-block;
-  height: 30%;
-  margin: 6px; }
-
-li[itemprop=photography] img {
-  width: 100%;
-  -webkit-backface-visibility: hidden;
-  -webkit-filter: sepia(50%) grayscale(60%);
-  -moz-filter: sepia(50%) grayscale(60%);
-  filter: sepia(50%) grayscale(60%);
-  -webkit-transition: all .3s ease-in;
-  -moz-transition: all .3s ease-in;
-  -o-transition: all .3s ease-in;
-  transition: all .3s ease-in;
-  float: left; }
-
-li[itemprop=photography] [itemprop=name] {
-  color: #fff;
-  font-family: ThirstyRough;
-  text-shadow: 0 0 4px #000;
-  font-size: 160%;
-  font-weight: 100;
-  position: absolute;
-  text-align: center;
-  width: 100%;
-  bottom: 0;
-  left: 0;
-  line-height: 2;
-  display: block; }
-
-.no-textshadow li[itemprop=photography] [itemprop=name] {
-  background: #4E4E4E;
-  opacity: .7;
-  line-height: 1.5; }
-
-li[itemprop=photography]:hover img {
-  -webkit-filter: none;
-  -moz-filter: none;
-  filter: none; }
-
-li[itemprop=photography] [itemprop=description] {
-  display: none;
-  color: #8c8b90;
-  font-family: Arial;
-  font-size: .8em;
-  margin-left: 165px;
-  padding: 0 10px; }
-
-@media only screen and (max-width: 25em) {
-  #band, #location, #tickets, #subscribe {
-    width: 95%; }
-
-  li[itemprop=photography] {
-    width: 64%;
-    margin: 6px 10px; }
-
-  li[itemprop=photography] [itemprop=name] {
-    font-size: 180%; } }
-@media only screen and (max-width: 43em) {
-  h3 {
-    text-align: center; }
-
-  #band, #location, #tickets, #subscribe {
-    width: 98%; }
-
-  #band {
-    margin-top: -350px; }
-
-  li[itemprop=photography] {
-    width: 84%;
-    margin: 6px 10px; }
-
-  li[itemprop=photography] [itemprop=name] {
-    font-size: 180%; } }
+@media only screen and (max-width: 30em) { header { text-align: center; }
+  .toggleButton { font-size: 2em; text-align: left; display: inline; float: left; cursor: pointer; }
+  i { font-size: 2em; }
+  nav { position: fixed; z-index: 1; }
+  nav a { font-size: 1.4em; }
+  nav ul.social li { display: inline-block; }
+  section { -webkit-box-shadow: -3px 0px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: -3px 0px 16px rgba(0, 0, 0, 0.3); box-shadow: -3px 0px 16px rgba(0, 0, 0, 0.3); position: absolute; background-color: #FFF; top: 0; left: 0; width: 100%; overflow: hidden; z-index: 10; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; }
+  section.opened { margin-left: 120px; }
+  li[itemprop=photography] { width: 100%; margin: 10px 0; }
+  li[itemprop=photography] [itemprop=name] { font-size: 180%; } }
+@media screen and (min-width: 30em) { .main { position: fixed; }
+  .toggleButton { display: none; }
+  section { width: 75%; display: inline-block; } }
+@media only screen and (max-width: 60em) { li[itemprop=photography] { width: 84%; margin: 6px 10px; }
+  li[itemprop=photography] [itemprop=name] { font-size: 180%; } }
