getting stuff done

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
 .sass-cache
+npm-debug.log

css/sass/_base.scss

@@ -16,6 +16,10 @@ $susy: (
 	gutters: 1/3
 );
 
+$bp-middle: 48em;
+$bp-small: 32em;
+$bp-tiny: 24em;
+
 @function em($px, $base: $base-font-size) {
     @return ($px / $base) * 1em;
 }
@@ -30,8 +34,4 @@ $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;
+$base-line-height: $base-font-size * 1.75;

css/sass/screen.scss

@@ -15,7 +15,7 @@ body {
 	background: black;
 	@include text-size-adjust(none);
 	
-	font-family: "Roboto", sans-serif;
+	font-family: "Open Sans", sans-serif;
 }
 
 a {
@@ -32,11 +32,7 @@ a {
 	height: 120px;
 	background: black;
 	
-	@include breakpoint(max-width $bp-middle) {
-		height: 120px;
-	}
-	
-	@include breakpoint(max-width $bp-tiny) {
+	@include breakpoint(max-width $bp-small) {
 		height: 80px;
 	}
 }
@@ -49,41 +45,97 @@ a {
 	font-weight: normal;
 	
 	h1 {
-		position: absolute;
+		font-size: 3em;
+		text-align: right;
+		position: relative;
+		top: 0.75em;
+		@include span(3 first);
 	}
 	
 	.tagline {
-		position: absolute;
+		font-size: 1.5em;
+		text-align: left;
+		@include span(3 last);
+		
+		span {
+			position: absolute;
+			margin-left: -1*span(2);
+			top: 3em;
+		}
+	}
+	
+	@include breakpoint(max-width $bp-small) {
+		h1 {
+			font-size: 2em;
+			top: 0.5em;
+			@include span(4 first);
+		}
+		
+		.tagline span {
+			font-size: 0.75em;
+			top: 2.5em;
+		}
+	}
+}
+
+.page {
+	#content_box {
+		#inner_box {
+			@include container;
+			article {
+				@include span(full);
+				padding-top: 2*$base-line-height;
+
+				@include breakpoint(max-width $bp-middle) {
+					@include span(full split);
+				}
+				
+				@include breakpoint(max-width $bp-small) {
+					padding-top: $base-line-height;
+				}
+			
+				header {
+					text-align: center;
+				
+					h2 {
+						font-size: 2em;
+						font-family: "Oswald", sans-serif;
+						line-height: 2*$base-line-height;
+						padding-bottom: $base-line-height;
+					
+						@include breakpoint(max-width $bp-small) {
+							font-size: 1.5em;
+							padding-bottom: 0;
+						}
+					}
+				}
+			}
+		}
 	}
 }
 
 .home.page {
 	#bold_title {
-		h1 { position: relative; }
-		
-		h1 .hi {
-			position: absolute;
-			top: 25px;
-			left: 4.2em;
-			font-size: em(32px);
+		h1 {
+			text-align: center;
+			@include span(6);
 			
-			@include breakpoint(max-width $bp-tiny) {
-				top: 10px;
-				left: 2em;
-				font-size: em(30px);
+			.hi {
+				font-size: 0.667em;
+				vertical-align: super;
+				margin-right: 0.25em;
 			}
 		}
 		
-		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);
+		@include breakpoint(max-width $bp-small) {
+			h1 {
+				font-size: 3em;
+				top: 0.35em;
+			}
+		
+			.tagline span {
+				background: red;
+				font-size: 0.75em;
 			}
 		}
 	}
@@ -95,30 +147,16 @@ a {
 	
 	#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);
-			}
+			bottom: -42px;
+			text-align: center;
 		
 			li {
-				padding: 10px 15px 5px 0px;
-				float: left;
-				
-				@include breakpoint(min-width $bp-tiny) {
-					padding: 10px 30px 10px 0px;					
-				}
+				padding: 10px 15px 5px 0;
+				display: inline-block;
 			}
 		
 			a {
@@ -127,6 +165,12 @@ a {
 				font-weight: normal;
 			}
 		}
+		
+		@include breakpoint(max-width $bp-middle) {
+			ul {
+				@include pre(gutter()/2);
+			}
+		}
 	}
 }
 
@@ -136,21 +180,20 @@ a {
 }
 
 .home.page {
+	#inner_box {
+		padding-bottom: 0;
+	}
+	
 	h2 {
 		line-height: 80px;
 		text-align: center;
-		font-size: em(30px);
+		font-size: 2em;
 		font-family: 'Oswald', sans-serif;
-		
-		@include breakpoint(min-width $bp-tiny) {
-			font-size: em(36px);
-			line-height: 100px;
-		}
 	}
 	
 	.work.column {
 		width: 25%;
-		height: 240px;
+		height: 300px;
 		float: left;
 		display: block;
 		padding: 0;
@@ -173,14 +216,6 @@ a {
 			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;
@@ -210,33 +245,35 @@ a {
 	line-height: 0.8*$base-line-height;
 
 	.footer_body {
-		padding-top: 40px;
+		padding-top: 46px;
 		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);
+			font-size: 0.75em;
+			
+			&.first {
+				@include span(first 2);
+			}
+			
+			&.last {
+				@include span(last 4);
+			}
+			
+			@include breakpoint(max-width $bp-middle) {
 				&.first {
-					padding-left: 0;
-					@include span(first 2);
+					@include span(2);
+					@include pre(gutter()/2);
 				}
 			
-				&.second {
-					@include span(last 4);
-				}
+				&.last {
+					@include span(last 3);
+					@include post(gutter()/2);
+				}				
 			}
 		}
 	}

css/screen.css

@@ -75,7 +75,7 @@ body {
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
   -ms-text-size-adjust: none;
-  font-family: "Roboto", sans-serif;
+  font-family: "Open Sans", sans-serif;
 }
 
 /* line 21, sass/screen.scss */
@@ -161,20 +161,14 @@ a {
   height: 120px;
   background: black;
 }
-@media (max-width: 48em) {
-  /* line 28, sass/screen.scss */
-  #top_banner {
-    height: 120px;
-  }
-}
-@media (max-width: 24em) {
+@media (max-width: 32em) {
   /* line 28, sass/screen.scss */
   #top_banner {
     height: 80px;
   }
 }
 
-/* line 44, sass/screen.scss */
+/* line 40, sass/screen.scss */
 #bold_title {
   color: white;
   max-width: 48em;
@@ -190,59 +184,135 @@ a {
   display: block;
   clear: both;
 }
-/* line 51, sass/screen.scss */
+/* line 47, sass/screen.scss */
 #bold_title h1 {
-  position: absolute;
+  font-size: 3em;
+  text-align: right;
+  position: relative;
+  top: 0.75em;
+  width: 47.82609%;
+  float: left;
+  margin-right: 4.34783%;
 }
 /* line 55, sass/screen.scss */
 #bold_title .tagline {
+  font-size: 1.5em;
+  text-align: left;
+  width: 47.82609%;
+  float: right;
+  margin-right: 0;
+}
+/* line 60, sass/screen.scss */
+#bold_title .tagline span {
   position: absolute;
+  margin-left: -30.43478%;
+  top: 3em;
+}
+@media (max-width: 32em) {
+  /* line 68, sass/screen.scss */
+  #bold_title h1 {
+    font-size: 2em;
+    top: 0.5em;
+    width: 65.21739%;
+    float: left;
+    margin-right: 4.34783%;
+  }
+  /* line 74, sass/screen.scss */
+  #bold_title .tagline span {
+    font-size: 0.75em;
+    top: 2.5em;
+  }
 }
 
-/* line 62, sass/screen.scss */
-.home.page #bold_title h1 {
-  position: relative;
+/* line 83, sass/screen.scss */
+.page #content_box #inner_box {
+  max-width: 48em;
+  margin-left: auto;
+  margin-right: auto;
 }
-/* line 64, sass/screen.scss */
-.home.page #bold_title h1 .hi {
-  position: absolute;
-  top: 25px;
-  left: 4.2em;
-  font-size: 2em;
+/* line 12, ../../../../../Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass/susy/output/support/_clearfix.scss */
+.page #content_box #inner_box:after {
+  content: " ";
+  display: block;
+  clear: both;
 }
-@media (max-width: 24em) {
-  /* line 64, sass/screen.scss */
-  .home.page #bold_title h1 .hi {
-    top: 10px;
-    left: 2em;
-    font-size: 1.875em;
+/* line 85, sass/screen.scss */
+.page #content_box #inner_box article {
+  width: 100%;
+  float: left;
+  margin-left: 0;
+  margin-right: 0;
+  padding-top: 56px;
+}
+@media (max-width: 48em) {
+  /* line 85, sass/screen.scss */
+  .page #content_box #inner_box article {
+    width: 95.83333%;
+    float: left;
+    margin-left: 2.08333%;
+    margin-right: 2.08333%;
   }
 }
-/* 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;
+@media (max-width: 32em) {
+  /* line 85, sass/screen.scss */
+  .page #content_box #inner_box article {
+    padding-top: 28px;
+  }
+}
+/* line 97, sass/screen.scss */
+.page #content_box #inner_box article header {
+  text-align: center;
+}
+/* line 100, sass/screen.scss */
+.page #content_box #inner_box article header h2 {
+  font-size: 2em;
+  font-family: "Oswald", sans-serif;
+  line-height: 56px;
+  padding-bottom: 28px;
+}
+@media (max-width: 32em) {
+  /* line 100, sass/screen.scss */
+  .page #content_box #inner_box article header h2 {
+    font-size: 1.5em;
+    padding-bottom: 0;
   }
 }
 
-/* line 92, sass/screen.scss */
+/* line 119, sass/screen.scss */
+.home.page #bold_title h1 {
+  text-align: center;
+  width: 100%;
+  float: left;
+  margin-left: 0;
+  margin-right: 0;
+}
+/* line 123, sass/screen.scss */
+.home.page #bold_title h1 .hi {
+  font-size: 0.667em;
+  vertical-align: super;
+  margin-right: 0.25em;
+}
+@media (max-width: 32em) {
+  /* line 131, sass/screen.scss */
+  .home.page #bold_title h1 {
+    font-size: 3em;
+    top: 0.35em;
+  }
+  /* line 136, sass/screen.scss */
+  .home.page #bold_title .tagline span {
+    background: red;
+    font-size: 0.75em;
+  }
+}
+
+/* line 144, sass/screen.scss */
 #content_box {
   background: white;
   position: relative;
 }
-/* line 96, sass/screen.scss */
+/* line 148, sass/screen.scss */
 #content_box #main_menu {
   background: black;
-  font-size: 0.875em;
   max-width: 48em;
   margin-left: auto;
   margin-right: auto;
@@ -253,44 +323,31 @@ a {
   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 */
+/* line 152, 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%;
-  }
+  bottom: -42px;
+  text-align: center;
 }
-/* line 115, sass/screen.scss */
+/* line 157, 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;
-  }
+  padding: 10px 15px 5px 0;
+  display: inline-block;
 }
-/* line 124, sass/screen.scss */
+/* line 162, sass/screen.scss */
 #content_box #main_menu ul a {
   color: white;
   font-family: "Oswald", sans-serif;
   font-weight: normal;
 }
+@media (max-width: 48em) {
+  /* line 170, sass/screen.scss */
+  #content_box #main_menu ul {
+    margin-left: 2.17391%;
+  }
+}
 
-/* line 133, sass/screen.scss */
+/* line 177, sass/screen.scss */
 #inner_box {
   max-width: 48em;
   margin-left: auto;
@@ -304,24 +361,21 @@ a {
   clear: both;
 }
 
-/* line 139, sass/screen.scss */
+/* line 183, sass/screen.scss */
+.home.page #inner_box {
+  padding-bottom: 0;
+}
+/* line 187, sass/screen.scss */
 .home.page h2 {
   line-height: 80px;
   text-align: center;
-  font-size: 1.875em;
+  font-size: 2em;
   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 */
+/* line 194, sass/screen.scss */
 .home.page .work.column {
   width: 25%;
-  height: 240px;
+  height: 300px;
   float: left;
   display: block;
   padding: 0;
@@ -330,7 +384,7 @@ a {
   vertical-align: bottom;
   background: gray;
 }
-/* line 162, sass/screen.scss */
+/* line 205, sass/screen.scss */
 .home.page .work.column span {
   position: absolute;
   color: white;
@@ -350,42 +404,32 @@ a {
   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 */
+/* line 219, 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 */
+/* line 224, 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 */
+/* line 229, 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 */
+/* line 234, 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 */
+/* line 242, sass/screen.scss */
 #site_footer {
   max-width: 48em;
   margin-left: auto;
@@ -399,46 +443,45 @@ a {
   display: block;
   clear: both;
 }
-/* line 212, sass/screen.scss */
+/* line 247, sass/screen.scss */
 #site_footer .footer_body {
-  padding-top: 40px;
+  padding-top: 46px;
   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 */
+/* line 251, sass/screen.scss */
 #site_footer .footer_body a {
   color: #76a4d1;
 }
-/* line 224, sass/screen.scss */
+/* line 255, sass/screen.scss */
 #site_footer .footer_body .column {
   padding-top: 14px;
-  margin-left: 4.34783%;
   font-size: 0.75em;
-  width: 82.6087%;
+}
+/* line 259, sass/screen.scss */
+#site_footer .footer_body .column.first {
+  width: 30.43478%;
   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 */
+/* line 263, sass/screen.scss */
+#site_footer .footer_body .column.last {
+  width: 65.21739%;
+  float: right;
+  margin-right: 0;
+}
+@media (max-width: 48em) {
+  /* line 268, sass/screen.scss */
   #site_footer .footer_body .column.first {
-    padding-left: 0;
     width: 30.43478%;
     float: left;
     margin-right: 4.34783%;
+    margin-left: 2.17391%;
   }
-  /* line 237, sass/screen.scss */
-  #site_footer .footer_body .column.second {
-    width: 65.21739%;
+  /* line 273, sass/screen.scss */
+  #site_footer .footer_body .column.last {
+    width: 47.82609%;
     float: right;
     margin-right: 0;
+    margin-right: 2.17391%;
   }
 }

pages/_footer.php

@@ -1,3 +1,4 @@
+		</div> <!-- #inner_box -->
 	</div> <!-- #content_box -->
 
 	<footer id="site_footer">
@@ -7,7 +8,7 @@
 				<p><a href="//twitter.com/Morpheu5">Twitter</a></p>
 				<p><a href="//plus.google.com/+AndreaFranceschini">Google+</a></p>
 			</div>
-			<div class="second column">
+			<div class="last 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>

pages/_head.php

@@ -56,8 +56,8 @@
 	<?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='//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin,greek,greek-ext,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/">
 	

pages/_header.php

@@ -8,11 +8,13 @@
 	<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>
+			<h1><?= isset($title) ? $title : '<span class="hi">Hallo</span>&#8203;<span class="name">I\'m Andrea</span>' ?></h1>
+			<p class="tagline"><span><?= isset($tagline) ? $tagline : "" ?></span></p>
 		</div>
 	</div>
 	
 	<div id="content_box">
 		
-		<?=i('_main_menu')?>
+		<?=i('_main_menu')?>
+		
+		<div id="inner_box">

pages/_main_menu.php

@@ -1,8 +1,10 @@
 		<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>
+			<div class="inner_box">
+				<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>
+			</div>
 		</nav>

pages/home.php

@@ -8,13 +8,11 @@ $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>
+		<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>Something else</span></a>
 		
 <?=i('_footer')?>