Home Page done

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+.sass-cache

.htaccess

@@ -0,0 +1,5 @@
+RewriteEngine on
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_URI} !=/favicon.ico
+RewriteRule ^(.*)$ index.php [L,QSA]

config.rb

@@ -0,0 +1,26 @@
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+require 'susy'
+require 'breakpoint'
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "css/sass"
+images_dir = "images"
+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
+output_style = :expanded
+# 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 css/sass scss && rm -rf sass && mv scss sass

css/cookie.css

@@ -0,0 +1,77 @@
+/*
+Error: Undefined mixin 'breakpoint'.
+        on line 9 of /Users/morpheu5/web/af/css/sass/cookie.scss, in `breakpoint'
+        from line 9 of /Users/morpheu5/web/af/css/sass/cookie.scss
+
+4: 	width: 100%;
+5: 	background: hsla(0, 0, 100, 0.8);
+6: 	font-family: 'Open Sans', sans-serif;
+7: 	z-index: 255;
+8: 	
+9: 	@include breakpoint(min-width $bp-middle) {
+10: 		top: 0;
+11: 	}
+12: 	
+13: 	@include breakpoint(max-width $bp-middle) {
+14: 		bottom: 0;
+
+Backtrace:
+/Users/morpheu5/web/af/css/sass/cookie.scss:9:in `breakpoint'
+/Users/morpheu5/web/af/css/sass/cookie.scss:9
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:348:in `block in visit_mixin'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:98:in `block in with_mixin'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:115:in `with_frame'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:98:in `with_mixin'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:346:in `visit_mixin'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:36:in `visit'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:79:in `block in with_base'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:115:in `with_frame'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:79:in `with_base'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:158:in `visit'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:430:in `block (2 levels) in visit_rule'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:430:in `map'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:430:in `block in visit_rule'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:428:in `visit_rule'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:36:in `visit'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:79:in `block in with_base'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:115:in `with_frame'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:79:in `with_base'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:158:in `visit'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:52:in `map'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:52:in `visit_children'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:36:in `block in visit'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:36:in `visit'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:157:in `visit'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:8:in `visit'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/root_node.rb:36:in `css_tree'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/tree/root_node.rb:20:in `render'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/engine.rb:268:in `render'
+/Library/Ruby/Gems/2.0.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:17:in `block in render'
+/Library/Ruby/Gems/2.0.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:29:in `with_import_scope'
+/Library/Ruby/Gems/2.0.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:16:in `render'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/plugin/compiler.rb:492:in `update_stylesheet'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/plugin/compiler.rb:209:in `each'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/plugin/compiler.rb:470:in `on_file_changed'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/lib/sass/plugin/compiler.rb:328:in `block in watch'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/vendor/listen/lib/listen/listener.rb:252:in `call'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/vendor/listen/lib/listen/listener.rb:252:in `on_change'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/vendor/listen/lib/listen/listener.rb:290:in `block in initialize_adapter'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/vendor/listen/lib/listen/adapter.rb:254:in `call'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/vendor/listen/lib/listen/adapter.rb:254:in `report_changes'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/vendor/listen/lib/listen/adapter.rb:323:in `poll_changed_directories'
+/Library/Ruby/Gems/2.0.0/gems/sass-3.4.13/vendor/listen/lib/listen/adapter.rb:299:in `block in start_poller'
+*/
+body:before {
+  white-space: pre;
+  font-family: monospace;
+  content: "Error: Undefined mixin 'breakpoint'.\A         on line 9 of /Users/morpheu5/web/af/css/sass/cookie.scss, in `breakpoint'\A         from line 9 of /Users/morpheu5/web/af/css/sass/cookie.scss\A \A 4: 	width: 100%;\A 5: 	background: hsla(0, 0, 100, 0.8);\A 6: 	font-family: 'Open Sans', sans-serif;\A 7: 	z-index: 255;\A 8: 	\A 9: 	@include breakpoint(min-width $bp-middle) {\A 10: 		top: 0;\A 11: 	}\A 12: 	\A 13: 	@include breakpoint(max-width $bp-middle) {\A 14: 		bottom: 0;"; }

css/sass/_base.scss

@@ -0,0 +1,37 @@
+@charset "utf-8";
+
+@import "susy";
+@import "compass/layout/stretching";
+@import "compass/css3/border-radius";
+@import "compass/css3/background-size";
+@import "memo";
+@import "breakpoint";
+@import "compass/layout/grid-background";
+
+$corner-radius: 4px;
+
+$susy: (
+	container: 48em,
+	columns: 6,
+	gutters: 1/3
+);
+
+@function em($px, $base: $base-font-size) {
+    @return ($px / $base) * 1em;
+}
+
+@mixin text-size-adjust($value: none) {
+  -webkit-text-size-adjust: $value; 
+  -moz-text-size-adjust: $value;
+  -ms-text-size-adjust: $value; 
+}
+
+$link-color: #3971a8;//#297acc;//#0080ab;
+$abbr-color: scale-lightness(scale-saturation($link-color, 75%), -25%);
+
+$base-font-size: 16px;
+$base-line-height: $base-font-size * 1.75;
+
+$bp-middle: 48em;
+$bp-small: 32em;
+$bp-tiny: 24em;

css/sass/cookie.scss

@@ -0,0 +1,50 @@
+#cookie_monster {
+	position: fixed;
+	left: 0;
+	width: 100%;
+	background: hsla(0, 0, 100, 0.8);
+	font-family: 'Open Sans', sans-serif;
+	z-index: 255;
+	
+	@include breakpoint(min-width $bp-middle) {
+		top: 0;
+	}
+	
+	@include breakpoint(max-width $bp-middle) {
+		bottom: 0;
+		background: hsla(60, 75, 75, 0.8);
+	}
+	
+	.content {
+		@include container(48em);
+		margin: 0 auto;
+		color: black;
+		padding: em(6px) em(24px) em(3px) em(24px);
+		
+		strong {
+			font-weight: bold;
+		}
+		
+		.button {
+			display: block;
+			background: black;
+			color: white;
+			padding: em(6px) em(9px);
+			margin-top: em(6px);
+			margin-left: em(3px);
+			float: right;
+			@include border-radius($corner-radius);
+			border: 0;
+			font-size: $base-font-size;
+			
+			&.no {
+				background: hsla(150, 55, 45, 1);
+			}
+			
+			&.yes {
+				font-weight: bold;
+				background: hsla(330, 45, 55, 1);
+			}
+		}
+	}
+}

css/sass/screen.scss

@@ -0,0 +1,243 @@
+@import "_base";
+@import "compass/reset";
+@import "compass/typography/vertical_rhythm";
+@import "compass/css3/transform";
+@import "compass/layout";
+@import "compass/css3/flexbox";
+
+@include establish-baseline;
+
+div, section, nav, article, header, footer {
+
+}
+
+body {
+	background: black;
+	@include text-size-adjust(none);
+	
+	font-family: "Roboto", sans-serif;
+}
+
+a {
+	text-decoration: none;
+	color: $link-color;
+}
+
+@import "cookie";
+
+#top_banner {
+	background-repeat: no-repeat;
+	background-position: bottom center;
+	@include background-size(cover);
+	height: 120px;
+	background: black;
+	
+	@include breakpoint(max-width $bp-middle) {
+		height: 120px;
+	}
+	
+	@include breakpoint(max-width $bp-tiny) {
+		height: 80px;
+	}
+}
+
+#bold_title {
+	color: white;
+	@include container;
+	position: relative;
+	font-family: 'Oswald', sans-serif;
+	font-weight: normal;
+	
+	h1 {
+		position: absolute;
+	}
+	
+	.tagline {
+		position: absolute;
+	}
+}
+
+.home.page {
+	#bold_title {
+		h1 { position: relative; }
+		
+		h1 .hi {
+			position: absolute;
+			top: 25px;
+			left: 4.2em;
+			font-size: em(32px);
+			
+			@include breakpoint(max-width $bp-tiny) {
+				top: 10px;
+				left: 2em;
+				font-size: em(30px);
+			}
+		}
+		
+		h1 .name {
+			position: absolute;
+			top: 60px;
+			left: 2em;
+			font-size: em(54px);
+
+			@include breakpoint(max-width $bp-tiny) {
+				top: 37px;
+				left: 1em;
+				font-size: em(36px);
+			}
+		}
+	}
+}
+
+#content_box {
+	background: white;
+	position: relative;
+	
+	#main_menu {
+		background: black;
+		font-size: em(14px);
+		@include container;
+		
+		@include breakpoint(min-width $bp-tiny) {
+			font-size: em(16px);
+		}
+		
+		ul {
+			position: absolute;
+			bottom: -40px;
+			@include pre(gutter());
+			
+			@include breakpoint(min-width $bp-tiny) {
+				bottom: -50px;
+				@include pre(0);
+			}
+		
+			li {
+				padding: 10px 15px 5px 0px;
+				float: left;
+				
+				@include breakpoint(min-width $bp-tiny) {
+					padding: 10px 30px 10px 0px;					
+				}
+			}
+		
+			a {
+				color: white;
+				font-family: "Oswald", sans-serif;
+				font-weight: normal;
+			}
+		}
+	}
+}
+
+#inner_box {
+	@include container;
+	padding-bottom: 50px;
+}
+
+.home.page {
+	h2 {
+		line-height: 80px;
+		text-align: center;
+		font-size: em(30px);
+		font-family: 'Oswald', sans-serif;
+		
+		@include breakpoint(min-width $bp-tiny) {
+			font-size: em(36px);
+			line-height: 100px;
+		}
+	}
+	
+	.work.column {
+		width: 25%;
+		height: 240px;
+		float: left;
+		display: block;
+		padding: 0;
+		margin: 0;
+		position: relative;
+		vertical-align:bottom;
+		background: gray;		
+		
+		span {
+			position: absolute;
+			color: white;
+			font-family: 'Oswald', sans-serif;
+			font-size: 30px;
+			white-space: nowrap;
+			@include apply-origin(bottom left, false);
+			@include rotate(-90deg);
+			display: block;
+			bottom: 0.33em;
+			left: em(16px) + 0.33em;
+			overflow: visible;
+		}
+		
+		@include breakpoint(min-width $bp-tiny) {
+			height: 300px;
+			
+			span {
+				font-size: 36px;
+			}
+		}
+		
+		&.research {
+			background-image: url("../images/home-research-2x.png");
+			background-position: right bottom;
+			background-size: cover;
+		}
+		&.development {
+			background-image: url("../images/home-development-2x.png");
+			background-position: right bottom;
+			background-size: cover;
+		}
+		&.writing {
+			background-image: url("../images/home-writing-2x.png");
+			background-position: right bottom;
+			background-size: cover;
+		}
+		&.other {
+			background-image: url("../images/home-contact-2x.png");
+			background-position: right bottom;
+			background-size: cover;
+		}
+	}
+}
+
+#site_footer {
+	@include container;
+	color: adjust-lightness($link-color, 40);
+	line-height: 0.8*$base-line-height;
+
+	.footer_body {
+		padding-top: 40px;
+		border-bottom: 1px solid hsl(210, 25, 50);
+		
+		@include breakpoint(min-width $bp-tiny) {
+			margin-top: 10px;
+		}
+		
+		a {
+			color: adjust-lightness($link-color, 20);
+		}
+
+		.column {
+			padding-top: 14px;
+			@include pre(gutter());
+			font-size: em(12px);
+			@include span(5);
+		
+			@include breakpoint(min-width $bp-tiny) {
+				@include pre(0);
+				&.first {
+					padding-left: 0;
+					@include span(first 2);
+				}
+			
+				&.second {
+					@include span(last 4);
+				}
+			}
+		}
+	}
+}

css/screen.css

@@ -0,0 +1,444 @@
+/* line 5, ../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+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: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+/* line 22, ../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html {
+  line-height: 1;
+}
+
+/* line 24, ../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+ol, ul {
+  list-style: none;
+}
+
+/* line 26, ../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* line 28, ../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+/* line 30, ../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q, blockquote {
+  quotes: none;
+}
+/* line 103, ../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+  content: none;
+}
+
+/* line 32, ../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+a img {
+  border: none;
+}
+
+/* line 116, ../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+  display: block;
+}
+
+/* line 106, ../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/typography/_vertical_rhythm.scss */
+html {
+  font-size: 100%;
+  line-height: 1.75em;
+}
+
+/* line 14, sass/screen.scss */
+body {
+  background: black;
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+  font-family: "Roboto", sans-serif;
+}
+
+/* line 21, sass/screen.scss */
+a {
+  text-decoration: none;
+  color: #3971a8;
+}
+
+/* line 1, sass/cookie.scss */
+#cookie_monster {
+  position: fixed;
+  left: 0;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  font-family: 'Open Sans', sans-serif;
+  z-index: 255;
+}
+@media (min-width: 48em) {
+  /* line 1, sass/cookie.scss */
+  #cookie_monster {
+    top: 0;
+  }
+}
+@media (max-width: 48em) {
+  /* line 1, sass/cookie.scss */
+  #cookie_monster {
+    bottom: 0;
+    background: rgba(239, 239, 143, 0.8);
+  }
+}
+/* line 18, sass/cookie.scss */
+#cookie_monster .content {
+  max-width: 48em;
+  margin-left: auto;
+  margin-right: auto;
+  margin: 0 auto;
+  color: black;
+  padding: 0.375em 1.5em 0.1875em 1.5em;
+}
+/* line 12, ../../../../../Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass/susy/output/support/_clearfix.scss */
+#cookie_monster .content:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
+/* line 24, sass/cookie.scss */
+#cookie_monster .content strong {
+  font-weight: bold;
+}
+/* line 28, sass/cookie.scss */
+#cookie_monster .content .button {
+  display: block;
+  background: black;
+  color: white;
+  padding: 0.375em 0.5625em;
+  margin-top: 0.375em;
+  margin-left: 0.1875em;
+  float: right;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  border: 0;
+  font-size: 16px;
+}
+/* line 40, sass/cookie.scss */
+#cookie_monster .content .button.no {
+  background: #34b273;
+}
+/* line 44, sass/cookie.scss */
+#cookie_monster .content .button.yes {
+  font-weight: bold;
+  background: #c0598c;
+}
+
+/* line 28, sass/screen.scss */
+#top_banner {
+  background-repeat: no-repeat;
+  background-position: bottom center;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  -webkit-background-size: cover;
+  background-size: cover;
+  height: 120px;
+  background: black;
+}
+@media (max-width: 48em) {
+  /* line 28, sass/screen.scss */
+  #top_banner {
+    height: 120px;
+  }
+}
+@media (max-width: 24em) {
+  /* line 28, sass/screen.scss */
+  #top_banner {
+    height: 80px;
+  }
+}
+
+/* line 44, sass/screen.scss */
+#bold_title {
+  color: white;
+  max-width: 48em;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  font-family: 'Oswald', sans-serif;
+  font-weight: normal;
+}
+/* line 12, ../../../../../Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass/susy/output/support/_clearfix.scss */
+#bold_title:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
+/* line 51, sass/screen.scss */
+#bold_title h1 {
+  position: absolute;
+}
+/* line 55, sass/screen.scss */
+#bold_title .tagline {
+  position: absolute;
+}
+
+/* line 62, sass/screen.scss */
+.home.page #bold_title h1 {
+  position: relative;
+}
+/* line 64, sass/screen.scss */
+.home.page #bold_title h1 .hi {
+  position: absolute;
+  top: 25px;
+  left: 4.2em;
+  font-size: 2em;
+}
+@media (max-width: 24em) {
+  /* line 64, sass/screen.scss */
+  .home.page #bold_title h1 .hi {
+    top: 10px;
+    left: 2em;
+    font-size: 1.875em;
+  }
+}
+/* line 77, sass/screen.scss */
+.home.page #bold_title h1 .name {
+  position: absolute;
+  top: 60px;
+  left: 2em;
+  font-size: 3.375em;
+}
+@media (max-width: 24em) {
+  /* line 77, sass/screen.scss */
+  .home.page #bold_title h1 .name {
+    top: 37px;
+    left: 1em;
+    font-size: 2.25em;
+  }
+}
+
+/* line 92, sass/screen.scss */
+#content_box {
+  background: white;
+  position: relative;
+}
+/* line 96, sass/screen.scss */
+#content_box #main_menu {
+  background: black;
+  font-size: 0.875em;
+  max-width: 48em;
+  margin-left: auto;
+  margin-right: auto;
+}
+/* line 12, ../../../../../Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass/susy/output/support/_clearfix.scss */
+#content_box #main_menu:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
+@media (min-width: 24em) {
+  /* line 96, sass/screen.scss */
+  #content_box #main_menu {
+    font-size: 1em;
+  }
+}
+/* line 105, sass/screen.scss */
+#content_box #main_menu ul {
+  position: absolute;
+  bottom: -40px;
+  margin-left: 4.34783%;
+}
+@media (min-width: 24em) {
+  /* line 105, sass/screen.scss */
+  #content_box #main_menu ul {
+    bottom: -50px;
+    margin-left: 0%;
+  }
+}
+/* line 115, sass/screen.scss */
+#content_box #main_menu ul li {
+  padding: 10px 15px 5px 0px;
+  float: left;
+}
+@media (min-width: 24em) {
+  /* line 115, sass/screen.scss */
+  #content_box #main_menu ul li {
+    padding: 10px 30px 10px 0px;
+  }
+}
+/* line 124, sass/screen.scss */
+#content_box #main_menu ul a {
+  color: white;
+  font-family: "Oswald", sans-serif;
+  font-weight: normal;
+}
+
+/* line 133, sass/screen.scss */
+#inner_box {
+  max-width: 48em;
+  margin-left: auto;
+  margin-right: auto;
+  padding-bottom: 50px;
+}
+/* line 12, ../../../../../Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass/susy/output/support/_clearfix.scss */
+#inner_box:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
+
+/* line 139, sass/screen.scss */
+.home.page h2 {
+  line-height: 80px;
+  text-align: center;
+  font-size: 1.875em;
+  font-family: 'Oswald', sans-serif;
+}
+@media (min-width: 24em) {
+  /* line 139, sass/screen.scss */
+  .home.page h2 {
+    font-size: 2.25em;
+    line-height: 100px;
+  }
+}
+/* line 151, sass/screen.scss */
+.home.page .work.column {
+  width: 25%;
+  height: 240px;
+  float: left;
+  display: block;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  vertical-align: bottom;
+  background: gray;
+}
+/* line 162, sass/screen.scss */
+.home.page .work.column span {
+  position: absolute;
+  color: white;
+  font-family: 'Oswald', sans-serif;
+  font-size: 30px;
+  white-space: nowrap;
+  -moz-transform-origin: bottom left;
+  -ms-transform-origin: bottom left;
+  -webkit-transform-origin: bottom left;
+  transform-origin: bottom left;
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+  display: block;
+  bottom: 0.33em;
+  left: 1.33em;
+  overflow: visible;
+}
+@media (min-width: 24em) {
+  /* line 151, sass/screen.scss */
+  .home.page .work.column {
+    height: 300px;
+  }
+  /* line 179, sass/screen.scss */
+  .home.page .work.column span {
+    font-size: 36px;
+  }
+}
+/* line 184, sass/screen.scss */
+.home.page .work.column.research {
+  background-image: url("../images/home-research-2x.png");
+  background-position: right bottom;
+  background-size: cover;
+}
+/* line 189, sass/screen.scss */
+.home.page .work.column.development {
+  background-image: url("../images/home-development-2x.png");
+  background-position: right bottom;
+  background-size: cover;
+}
+/* line 194, sass/screen.scss */
+.home.page .work.column.writing {
+  background-image: url("../images/home-writing-2x.png");
+  background-position: right bottom;
+  background-size: cover;
+}
+/* line 199, sass/screen.scss */
+.home.page .work.column.other {
+  background-image: url("../images/home-contact-2x.png");
+  background-position: right bottom;
+  background-size: cover;
+}
+
+/* line 207, sass/screen.scss */
+#site_footer {
+  max-width: 48em;
+  margin-left: auto;
+  margin-right: auto;
+  color: #c3d7ea;
+  line-height: 22.4px;
+}
+/* line 12, ../../../../../Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass/susy/output/support/_clearfix.scss */
+#site_footer:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
+/* line 212, sass/screen.scss */
+#site_footer .footer_body {
+  padding-top: 40px;
+  border-bottom: 1px solid #607f9f;
+}
+@media (min-width: 24em) {
+  /* line 212, sass/screen.scss */
+  #site_footer .footer_body {
+    margin-top: 10px;
+  }
+}
+/* line 220, sass/screen.scss */
+#site_footer .footer_body a {
+  color: #76a4d1;
+}
+/* line 224, sass/screen.scss */
+#site_footer .footer_body .column {
+  padding-top: 14px;
+  margin-left: 4.34783%;
+  font-size: 0.75em;
+  width: 82.6087%;
+  float: left;
+  margin-right: 4.34783%;
+}
+@media (min-width: 24em) {
+  /* line 224, sass/screen.scss */
+  #site_footer .footer_body .column {
+    margin-left: 0%;
+  }
+  /* line 232, sass/screen.scss */
+  #site_footer .footer_body .column.first {
+    padding-left: 0;
+    width: 30.43478%;
+    float: left;
+    margin-right: 4.34783%;
+  }
+  /* line 237, sass/screen.scss */
+  #site_footer .footer_body .column.second {
+    width: 65.21739%;
+    float: right;
+    margin-right: 0;
+  }
+}

index.php

@@ -0,0 +1,64 @@
+<?php
+function d() {
+	
+}
+
+function getRequestPage($request = '') {
+	if($request == '' or $request == '/') {
+		return array(array(), array());
+	}
+	$rArray = explode('/', $request);
+	$args = array();
+	while(!file_exists($file = 'pages/' . implode('/', $rArray) . '.php') and $rArray != NULL) {
+		array_unshift($args, array_pop($rArray));
+	}
+	return array($rArray, $args);
+}
+
+include 'libs/utils.php';
+
+$baseurl = trim(full_url($_SERVER), '/') . '/';
+$basedir = dirname($_SERVER['SCRIPT_FILENAME']) . '/';
+
+$dirty_req = preg_replace('/(\?.*)/', '', $_SERVER['REQUEST_URI']);
+
+$dn = dirname($_SERVER['SCRIPT_NAME']);
+$dirty_req = substr($dirty_req, strlen($dn));
+
+$dirty_req = trim($dirty_req, '/');
+if(strlen($dirty_req) > 0) {
+	$baseurl = substr(trim(preg_replace('/(\?.*)/', '', $baseurl), '/'), 0, -strlen($dirty_req));
+}
+
+if(strlen($dirty_req) > 0) {
+	if(substr($_SERVER['REQUEST_URI'], -1) === '/') {
+		$redirect_url = trim(full_url($_SERVER), '/');
+		header("HTTP/1.1 301 Moved Permanently"); 
+		header("Location: $redirect_url");
+		die;
+	}
+}
+
+$request = $dirty_req;
+
+ob_start();
+
+$r = getRequestPage($request);
+$GLOBALS['args'] = $r[1];
+
+if(empty($r[0])) {
+	if(empty($r[1])) {
+		include $basedir . 'pages/home.php';
+	} else {
+		header($_SERVER["SERVER_PROTOCOL"]." 404 Not Found");
+		header("Status: 404 Not Found");
+		$_SERVER['REDIRECT_STATUS'] = 404;
+		include 'pages/404.php';
+	}
+} else {
+	include $basedir.'pages/'.implode('/', $r[0]).'.php';
+}
+
+$html = ob_get_clean();
+
+echo $html;

js/html5.min.js

@@ -0,0 +1,322 @@
+/**
+* @preserve HTML5 Shiv 3.7.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
+*/
+;(function(window, document) {
+/*jshint evil:true */
+  /** version */
+  var version = '3.7.2';
+
+  /** Preset options */
+  var options = window.html5 || {};
+
+  /** Used to skip problem elements */
+  var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
+
+  /** Not all elements can be cloned in IE **/
+  var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
+
+  /** Detect whether the browser supports default html5 styles */
+  var supportsHtml5Styles;
+
+  /** Name of the expando, to work with multiple documents or to re-shiv one document */
+  var expando = '_html5shiv';
+
+  /** The id for the the documents expando */
+  var expanID = 0;
+
+  /** Cached data for each document */
+  var expandoData = {};
+
+  /** Detect whether the browser supports unknown elements */
+  var supportsUnknownElements;
+
+  (function() {
+    try {
+        var a = document.createElement('a');
+        a.innerHTML = '<xyz></xyz>';
+        //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
+        supportsHtml5Styles = ('hidden' in a);
+
+        supportsUnknownElements = a.childNodes.length == 1 || (function() {
+          // assign a false positive if unable to shiv
+          (document.createElement)('a');
+          var frag = document.createDocumentFragment();
+          return (
+            typeof frag.cloneNode == 'undefined' ||
+            typeof frag.createDocumentFragment == 'undefined' ||
+            typeof frag.createElement == 'undefined'
+          );
+        }());
+    } catch(e) {
+      // assign a false positive if detection fails => unable to shiv
+      supportsHtml5Styles = true;
+      supportsUnknownElements = true;
+    }
+
+  }());
+
+  /*--------------------------------------------------------------------------*/
+
+  /**
+   * Creates a style sheet with the given CSS text and adds it to the document.
+   * @private
+   * @param {Document} ownerDocument The document.
+   * @param {String} cssText The CSS text.
+   * @returns {StyleSheet} The style element.
+   */
+  function addStyleSheet(ownerDocument, cssText) {
+    var p = ownerDocument.createElement('p'),
+        parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
+
+    p.innerHTML = 'x<style>' + cssText + '</style>';
+    return parent.insertBefore(p.lastChild, parent.firstChild);
+  }
+
+  /**
+   * Returns the value of `html5.elements` as an array.
+   * @private
+   * @returns {Array} An array of shived element node names.
+   */
+  function getElements() {
+    var elements = html5.elements;
+    return typeof elements == 'string' ? elements.split(' ') : elements;
+  }
+
+  /**
+   * Extends the built-in list of html5 elements
+   * @memberOf html5
+   * @param {String|Array} newElements whitespace separated list or array of new element names to shiv
+   * @param {Document} ownerDocument The context document.
+   */
+  function addElements(newElements, ownerDocument) {
+    var elements = html5.elements;
+    if(typeof elements != 'string'){
+      elements = elements.join(' ');
+    }
+    if(typeof newElements != 'string'){
+      newElements = newElements.join(' ');
+    }
+    html5.elements = elements +' '+ newElements;
+    shivDocument(ownerDocument);
+  }
+
+   /**
+   * Returns the data associated to the given document
+   * @private
+   * @param {Document} ownerDocument The document.
+   * @returns {Object} An object of data.
+   */
+  function getExpandoData(ownerDocument) {
+    var data = expandoData[ownerDocument[expando]];
+    if (!data) {
+        data = {};
+        expanID++;
+        ownerDocument[expando] = expanID;
+        expandoData[expanID] = data;
+    }
+    return data;
+  }
+
+  /**
+   * returns a shived element for the given nodeName and document
+   * @memberOf html5
+   * @param {String} nodeName name of the element
+   * @param {Document} ownerDocument The context document.
+   * @returns {Object} The shived element.
+   */
+  function createElement(nodeName, ownerDocument, data){
+    if (!ownerDocument) {
+        ownerDocument = document;
+    }
+    if(supportsUnknownElements){
+        return ownerDocument.createElement(nodeName);
+    }
+    if (!data) {
+        data = getExpandoData(ownerDocument);
+    }
+    var node;
+
+    if (data.cache[nodeName]) {
+        node = data.cache[nodeName].cloneNode();
+    } else if (saveClones.test(nodeName)) {
+        node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
+    } else {
+        node = data.createElem(nodeName);
+    }
+
+    // Avoid adding some elements to fragments in IE < 9 because
+    // * Attributes like `name` or `type` cannot be set/changed once an element
+    //   is inserted into a document/fragment
+    // * Link elements with `src` attributes that are inaccessible, as with
+    //   a 403 response, will cause the tab/window to crash
+    // * Script elements appended to fragments will execute when their `src`
+    //   or `text` property is set
+    return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node;
+  }
+
+  /**
+   * returns a shived DocumentFragment for the given document
+   * @memberOf html5
+   * @param {Document} ownerDocument The context document.
+   * @returns {Object} The shived DocumentFragment.
+   */
+  function createDocumentFragment(ownerDocument, data){
+    if (!ownerDocument) {
+        ownerDocument = document;
+    }
+    if(supportsUnknownElements){
+        return ownerDocument.createDocumentFragment();
+    }
+    data = data || getExpandoData(ownerDocument);
+    var clone = data.frag.cloneNode(),
+        i = 0,
+        elems = getElements(),
+        l = elems.length;
+    for(;i<l;i++){
+        clone.createElement(elems[i]);
+    }
+    return clone;
+  }
+
+  /**
+   * Shivs the `createElement` and `createDocumentFragment` methods of the document.
+   * @private
+   * @param {Document|DocumentFragment} ownerDocument The document.
+   * @param {Object} data of the document.
+   */
+  function shivMethods(ownerDocument, data) {
+    if (!data.cache) {
+        data.cache = {};
+        data.createElem = ownerDocument.createElement;
+        data.createFrag = ownerDocument.createDocumentFragment;
+        data.frag = data.createFrag();
+    }
+
+
+    ownerDocument.createElement = function(nodeName) {
+      //abort shiv
+      if (!html5.shivMethods) {
+          return data.createElem(nodeName);
+      }
+      return createElement(nodeName, ownerDocument, data);
+    };
+
+    ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
+      'var n=f.cloneNode(),c=n.createElement;' +
+      'h.shivMethods&&(' +
+        // unroll the `createElement` calls
+        getElements().join().replace(/[\w\-:]+/g, function(nodeName) {
+          data.createElem(nodeName);
+          data.frag.createElement(nodeName);
+          return 'c("' + nodeName + '")';
+        }) +
+      ');return n}'
+    )(html5, data.frag);
+  }
+
+  /*--------------------------------------------------------------------------*/
+
+  /**
+   * Shivs the given document.
+   * @memberOf html5
+   * @param {Document} ownerDocument The document to shiv.
+   * @returns {Document} The shived document.
+   */
+  function shivDocument(ownerDocument) {
+    if (!ownerDocument) {
+        ownerDocument = document;
+    }
+    var data = getExpandoData(ownerDocument);
+
+    if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
+      data.hasCSS = !!addStyleSheet(ownerDocument,
+        // corrects block display not defined in IE6/7/8/9
+        'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
+        // adds styling not present in IE6/7/8/9
+        'mark{background:#FF0;color:#000}' +
+        // hides non-rendered elements
+        'template{display:none}'
+      );
+    }
+    if (!supportsUnknownElements) {
+      shivMethods(ownerDocument, data);
+    }
+    return ownerDocument;
+  }
+
+  /*--------------------------------------------------------------------------*/
+
+  /**
+   * The `html5` object is exposed so that more elements can be shived and
+   * existing shiving can be detected on iframes.
+   * @type Object
+   * @example
+   *
+   * // options can be changed before the script is included
+   * html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
+   */
+  var html5 = {
+
+    /**
+     * An array or space separated string of node names of the elements to shiv.
+     * @memberOf html5
+     * @type Array|String
+     */
+    'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video',
+
+    /**
+     * current version of html5shiv
+     */
+    'version': version,
+
+    /**
+     * A flag to indicate that the HTML5 style sheet should be inserted.
+     * @memberOf html5
+     * @type Boolean
+     */
+    'shivCSS': (options.shivCSS !== false),
+
+    /**
+     * Is equal to true if a browser supports creating unknown/HTML5 elements
+     * @memberOf html5
+     * @type boolean
+     */
+    'supportsUnknownElements': supportsUnknownElements,
+
+    /**
+     * A flag to indicate that the document's `createElement` and `createDocumentFragment`
+     * methods should be overwritten.
+     * @memberOf html5
+     * @type Boolean
+     */
+    'shivMethods': (options.shivMethods !== false),
+
+    /**
+     * A string to describe the type of `html5` object ("default" or "default print").
+     * @memberOf html5
+     * @type String
+     */
+    'type': 'default',
+
+    // shivs the document according to the specified `html5` object options
+    'shivDocument': shivDocument,
+
+    //creates a shived element
+    createElement: createElement,
+
+    //creates a shived documentFragment
+    createDocumentFragment: createDocumentFragment,
+
+    //extends list of elements
+    addElements: addElements
+  };
+
+  /*--------------------------------------------------------------------------*/
+
+  // expose html5
+  window.html5 = html5;
+
+  // shiv the document
+  shivDocument(document);
+
+}(this, document));

js/js.cookie.js

@@ -0,0 +1,147 @@
+/*!
+ * Javascript Cookie v1.5.1
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2014 Klaus Hartl
+ * Released under the MIT license
+ */
+(function (factory) {
+	var jQuery;
+	if (typeof define === 'function' && define.amd) {
+		// AMD (Register as an anonymous module)
+		define(['jquery'], factory);
+	} else if (typeof exports === 'object') {
+		// Node/CommonJS
+		try {
+			jQuery = require('jquery');
+		} catch(e) {}
+		module.exports = factory(jQuery);
+	} else {
+		// Browser globals
+		var _OldCookies = window.Cookies;
+		var api = window.Cookies = factory(window.jQuery);
+		api.noConflict = function() {
+			window.Cookies = _OldCookies;
+			return api;
+		};
+	}
+}(function ($) {
+
+	var pluses = /\+/g;
+
+	function encode(s) {
+		return api.raw ? s : encodeURIComponent(s);
+	}
+
+	function decode(s) {
+		return api.raw ? s : decodeURIComponent(s);
+	}
+
+	function stringifyCookieValue(value) {
+		return encode(api.json ? JSON.stringify(value) : String(value));
+	}
+
+	function parseCookieValue(s) {
+		if (s.indexOf('"') === 0) {
+			// This is a quoted cookie as according to RFC2068, unescape...
+			s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+		}
+
+		try {
+			// Replace server-side written pluses with spaces.
+			// If we can't decode the cookie, ignore it, it's unusable.
+			// If we can't parse the cookie, ignore it, it's unusable.
+			s = decodeURIComponent(s.replace(pluses, ' '));
+			return api.json ? JSON.parse(s) : s;
+		} catch(e) {}
+	}
+
+	function read(s, converter) {
+		var value = api.raw ? s : parseCookieValue(s);
+		return isFunction(converter) ? converter(value) : value;
+	}
+
+	function extend() {
+		var key, options;
+		var i = 0;
+		var result = {};
+		for (; i < arguments.length; i++) {
+			options = arguments[ i ];
+			for (key in options) {
+				result[key] = options[key];
+			}
+		}
+		return result;
+	}
+
+	function isFunction(obj) {
+		return Object.prototype.toString.call(obj) === '[object Function]';
+	}
+
+	var api = function (key, value, options) {
+
+		// Write
+
+		if (arguments.length > 1 && !isFunction(value)) {
+			options = extend(api.defaults, options);
+
+			if (typeof options.expires === 'number') {
+				var days = options.expires, t = options.expires = new Date();
+				t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
+			}
+
+			return (document.cookie = [
+				encode(key), '=', stringifyCookieValue(value),
+				options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+				options.path    ? '; path=' + options.path : '',
+				options.domain  ? '; domain=' + options.domain : '',
+				options.secure  ? '; secure' : ''
+			].join(''));
+		}
+
+		// Read
+
+		var result = key ? undefined : {},
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all. Also prevents odd result when
+			// calling "get()".
+			cookies = document.cookie ? document.cookie.split('; ') : [],
+			i = 0,
+			l = cookies.length;
+
+		for (; i < l; i++) {
+			var parts = cookies[i].split('='),
+				name = decode(parts.shift()),
+				cookie = parts.join('=');
+
+			if (key === name) {
+				// If second argument (value) is a function it's a converter...
+				result = read(cookie, value);
+				break;
+			}
+
+			// Prevent storing a cookie that we couldn't decode.
+			if (!key && (cookie = read(cookie)) !== undefined) {
+				result[name] = cookie;
+			}
+		}
+
+		return result;
+	};
+
+	api.get = api.set = api;
+	api.defaults = {};
+
+	api.remove = function (key, options) {
+		// Must not alter options, thus extending a fresh object...
+		api(key, '', extend(options, { expires: -1 }));
+		return !api(key);
+	};
+
+	if ( $ ) {
+		$.cookie = api;
+		$.removeCookie = api.remove;
+	}
+
+	return api;
+}));

js/scripts.js

@@ -0,0 +1,72 @@
+var doTheScroll = true;
+
+function debugRow(y, height) {
+	if(y === undefined) y = 0;
+	if(height === undefined) height = 1;	
+	$('body').append('<div class="debugrow" style="top: '+y+'px; height: '+height+'px; background: blue; position: absolute; width: 100%; opacity: 0.5;"></div>');
+}
+
+$(function() {
+	// EU COOKIE MONSTER
+	var eupref = Cookies.get('eu-disable');
+	if(eupref == undefined) {
+		var cmaside = $('<aside id="cookie_monster">'+
+						'	<div class="content">'+
+						'		<p>Hello, did you know that I am using <strong>cookies</strong> in this website? I promise they are not tracking you, but I can disable them if you want.</p>'+
+						'		<button class="button yes" type="button" data-disable="true">Disable them</button><button class="button no" data-disable="false">It\'s ok</button>'+
+						'	</div>'+
+						'</aside>');
+		$('#top_banner').prepend(cmaside)
+		$('#cookie_monster button').click(function(e) {
+			t = $(e.target);
+			if(t.data('disable')) {
+				Cookies.set('eu-disable', true, { expires: 30 });
+			} else {
+				Cookies.set('eu-disable', false, { expires: 30 });
+			}
+			cmaside.fadeOut();
+		});
+	} else {
+		window['ga-disable-UA-1176762-5'] = Cookies.get('eu-disable');
+	}
+	// EU COOKIE MONSTER
+	
+	if(screen.width > 1024 && screen.height > 768 && window.devicePixelRatio > 1) {
+		$('[data-hq]').each(function() {
+			t = $(this);
+			if(t.is('img')) {
+				t.attr('src', t.data('hq'));
+			} else {
+				t.css('background-image', 'url(' + t.data('hq') + ')');
+			}
+		});
+	}
+	
+	baseline = 24;//parseFloat($('body').data('baseline'));
+
+	$('figure').each(function(i, e) {
+		figure = $(e);
+		realTop = figure.offset().top;
+		// debugRow(realTop);
+
+		realBottom = realTop + figure.height() + parseFloat(figure.css('margin-bottom'));
+		// debugRow(realBottom);
+
+		gap = baseline - ((realBottom - $('article.body').offset().top) % baseline);
+		figure.css('margin-top', '+=' + gap/2.0 + 'px');
+		figure.css('margin-bottom', '+=' + gap/2.0 + 'px');
+	});
+
+	/**
+	h = $(document).height();
+	b = 24;
+	c = $('#content_box').offset().top + b;
+	$('body').append('<div id="baseline_overlay" style="position: absolute; top: '+c+'px; width: 100%; height: ' + h + 'px; opacity: 0.4;"></div>');
+	bs = $('#baseline_overlay');
+	cl = 0;
+	while(cl < h) {
+		bs.append('<div style="position: absolute; top: ' +cl+ 'px; height: 1px; background: red; width: 100%;"></div>');
+		cl += b;
+	}
+	/**/
+});

libs/utils.php

@@ -0,0 +1,47 @@
+<?php
+
+function isSuperGlobal($name){
+    switch($name){
+        case 'GLOBALS':
+        case '_SERVER':
+        case '_GET':
+        case '_POST':
+        case '_FILES':
+        case '_COOKIE':
+        case '_SESSION':
+        case '_REQUEST':
+        case '_ENV':        return true;    break;
+        default:            return false;   break;
+    }
+}
+
+function i($i = '') {
+	foreach($GLOBALS as $key=>$val){
+	    if(!isSuperGlobal($key))                     
+	        global $$key;
+	}
+	
+	ob_start();
+	global $basedir;
+	include $basedir . 'pages/' . $i . '.php';
+	return ob_get_clean();
+}
+
+function url($url = '') {
+	global $baseurl;
+	return $baseurl . $url;
+}
+
+function url_origin($s, $use_forwarded_host=false) {
+    $ssl = (!empty($s['HTTPS']) && $s['HTTPS'] == 'on') ? true:false;
+    $sp = strtolower($s['SERVER_PROTOCOL']);
+    $protocol = substr($sp, 0, strpos($sp, '/')) . (($ssl) ? 's' : '');
+    $port = $s['SERVER_PORT'];
+    $port = ((!$ssl && $port=='80') || ($ssl && $port=='443')) ? '' : ':'.$port;
+    $host = ($use_forwarded_host && isset($s['HTTP_X_FORWARDED_HOST'])) ? $s['HTTP_X_FORWARDED_HOST'] : (isset($s['HTTP_HOST']) ? $s['HTTP_HOST'] : $s['SERVER_NAME']);
+    return $protocol . '://' . $host . $port;
+}
+function full_url($s, $use_forwarded_host=false)
+{
+    return url_origin($s, $use_forwarded_host) . $s['REQUEST_URI'];
+}

pages/_footer.php

@@ -0,0 +1,18 @@
+	</div> <!-- #content_box -->
+
+	<footer id="site_footer">
+		<div class="footer_body">
+			<div class="first column">
+				<p>Find me on</p>
+				<p><a href="//twitter.com/Morpheu5">Twitter</a></p>
+				<p><a href="//plus.google.com/+AndreaFranceschini">Google+</a></p>
+			</div>
+			<div class="second column">
+				<p><a href="<?=$baseurl?>colophon">About this site</a></p>
+				<p>Unless otherwise specified, the content of this site is licenced as <a href="//creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
+			</div>
+		</div>
+	</footer>
+</body>
+
+</html>

pages/_ga.php

@@ -0,0 +1,12 @@
+<?php if(array_key_exists('eu-disable', $_COOKIE) and $_COOKIE["eu-disable"] == "false") : ?>
+	<script>
+	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+	  ga('create', 'UA-1176762-5', 'andreafranceschini.org');
+	  ga('send', 'pageview');
+
+	</script>
+<?php endif ?>

pages/_head.php

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	
+<?php $_title = isset($title) ? $title . ' &mdash; Andrea Franceschini' : 'Andrea Franceschini' ?>
+	<title><?=$_title?></title>
+	<meta name="DC.Title" content="<?=$_title?>" />
+	<meta property="og:title" content="<?=$_title?>" />
+	<meta property="twitter:title" content="<?=$_title?>" />
+	
+<?php if(isset($keywords)) : ?>
+	<meta name="keywords" content="<?=$keywords?>" />
+<?php endif ?>
+	
+	<meta name="author" content="Andrea Franceschini" />
+	<meta name="DC.Creator" content="Andrea Franceschini" />
+	<!-- <meta name="DC.Contributor" content="Andrea Franceschini" /> -->
+	<meta name="twitter:site" content="@morpheu5" />
+	<meta name="twitter:creator" content="@morpheu5" />
+
+<?php if(isset($description)) : ?>
+	<meta name="description" content="<?=$description?>" />
+	<meta name="DC.Description" content="<?=$description?>" />
+	<meta property="og:description" content="<?=$description?>" />
+<?php endif ?>
+	<meta property="twitter:description" content="<?=isset($description) ? $description : 'PhD student at The Open University' ?>" />
+		
+	<!--   Twitter card extras -->
+	<meta name="twitter:card" content="summary_large_image" />
+<?php if(isset($twitter_image)) : ?>
+	<meta name="twitter:image:src" content="<?=$baseurl.$twitter_image?>" />
+<?php endif ?>
+	<meta name="twitter:domain" content="<?=$baseurl?>" />
+	<!-- / Twitter card extras -->
+
+	<!--   Open Graph madness -->
+	<meta property="og:type" content="website" />
+<?php if(isset($twitter_image)) : ?>
+	<meta property="og:image" content="<?=$baseurl.$twitter_image?>" />
+<?php endif ?>
+	<!-- / Open Graph madness -->
+	
+	<!--   Dublin Core extras -->
+	<meta name="DC.Rights" content="CC BY-NC-SA 4.0" />
+	<!-- / Dublin Core extras -->
+
+	<meta name="robots" content="All" />
+
+	<link rel="stylesheet" href="<?=$baseurl?>css/screen.css" type="text/css" media="screen" />
+	<link rel="stylesheet" href="<?=$baseurl?>css/print.css" type="text/css" media="print" />
+	<?php if(isset($css)) : ?>
+	<?php foreach($css as $file) : ?>
+	<link rel="stylesheet" href="<?=$baseurl?>css/<?=$file?>.css" type="text/css" media="screen" />
+	<?php endforeach ?>
+	<?php endif ?>
+	<link href='//fonts.googleapis.com/css?family=Oswald:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
+	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+	<link href='//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic&subset=latin,greek,greek-ext,latin-ext' rel='stylesheet' type='text/css'>
+	
+	<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/">
+	
+	<!--[if lt IE 9]>
+	<script src="<?=$baseurl?>js/html5.min.js"></script>
+	<![endif]-->
+	<script type="text/javascript" src="<?=$baseurl?>js/js.cookie.js"></script>
+ 	<script type="text/javascript" src="<?=$baseurl?>js/jquery.min.js"></script>
+ 	<script type="text/javascript" src="<?=$baseurl?>js/picturefill.min.js"></script>
+	<script type="text/javascript" src="<?=$baseurl?>js/scripts.js"></script>
+</head>

pages/_header.php

@@ -0,0 +1,18 @@
+<?=i('_head')?>
+
+<body<?= isset($bodyclasses)? ' class="'.$bodyclasses.'"' : '' ?> data-baseline="24">
+	<?=i('_ga')?>
+	<?php if(isset($banner_image) and isset($banner_image_half)) : ?>
+	<div id="top_banner" style="background-image: url('<?=$baseurl.$banner_image_half ?>')" data-hq="<?=$baseurl.$banner_image ?>">
+	<?php else : ?>
+	<div id="top_banner" style="background-image: url('<?=$baseurl ?>images/banner-half.jpg')" data-hq="<?=$baseurl ?>images/banner.jpg">
+	<?php endif ?>
+		<div id="bold_title">
+			<h1><?= isset($title) ? $title : '<span class="hi">Hi</span><span class="name">I\'m Andrea</span>' ?></h1>
+			<p class="tagline"><?= isset($tagline) ? $tagline : "" ?></p>
+		</div>
+	</div>
+	
+	<div id="content_box">
+		
+		<?=i('_main_menu')?>

pages/_main_menu.php

@@ -0,0 +1,8 @@
+		<nav id="main_menu">
+			<ul>
+				<li><a href="<?=url('')?>">Home</a></li>
+				<li><a href="<?=url('research')?>">Research</a></li>
+				<li><a href="<?=url('cv')?>">CV</a></li>
+				<li><a href="<?=url('contact')?>">Contact me</a></li>
+			</ul>
+		</nav>

pages/home.php

@@ -0,0 +1,20 @@
+<?php
+$bodyclasses = 'home page';
+
+$description = 'Hi, I am a PhD candidate at The Open University, but I also do other things.';
+$keywords = 'music, learning, tabletop, research, the open university';
+$twitter_image = 'images/colopic.jpg';
+?>
+
+<?=i('_header')?>
+
+		<div id="inner_box">
+			<h2>What can I do for you?</h2>
+		
+			<a href="<?=$baseurl?>/research" class="research work column"><span>Research</span></a>
+			<a href="<?=$baseurl?>/development" class="development work column"><span>Development</span></a>
+			<a href="<?=$baseurl?>/writing" class="writing work column"><span>Technical Writing</span></a>
+			<a href="<?=$baseurl?>/contact" class="other work column"><span>Other stuff</span></a>
+		</div>
+		
+<?=i('_footer')?>