Major rewrite to get responsive design.

15 files changed, 625 insertions, 64 deletions

diff --git a/Gemfile b/Gemfile
index 5fbff27..2af9de0 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,7 +1,8 @@
 source 'https://rubygems.org'
 gem 'jekyll'
-gem 'jekyll-assets'
+gem 'jekyll-asset-pipeline'
 gem 'RedCloth'
 gem 'redcarpet'
 gem 'sass'
 gem 's3_website'
+gem 'compass'
diff --git a/Gemfile.lock b/Gemfile.lock
index 5466933..ffd52d8 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -6,12 +6,17 @@ GEM
       json (~> 1.4)
       nokogiri (>= 1.4.4)
       uuidtools (~> 2.1)
+    chunky_png (1.2.9)
     classifier (1.3.3)
       fast-stemmer (>= 1.0.0)
     colorator (0.1)
     colored (1.2)
     commander (4.1.5)
       highline (~> 1.6.11)
+    compass (0.12.2)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
     configure-s3-website (1.5.2)
       deep_merge (= 1.0.0)
     deep_merge (1.0.0)
@@ -19,8 +24,8 @@ GEM
     erubis (2.7.0)
     fast-stemmer (1.0.2)
     filey-diff (1.4.3)
+    fssm (0.2.10)
     highline (1.6.19)
-    hike (1.2.3)
     jekyll (1.2.1)
       classifier (~> 1.3)
       colorator (~> 0.1)
@@ -31,22 +36,20 @@ GEM
       pygments.rb (~> 0.5.0)
       redcarpet (~> 2.3.0)
       safe_yaml (~> 0.7.0)
-    jekyll-assets (0.7.3)
-      jekyll (~> 1.0)
-      sprockets (~> 2.10)
+    jekyll-asset-pipeline (0.1.2)
+      jekyll (>= 0.10.0)
+      liquid (>= 1.9.0)
     json (1.8.1)
     liquid (2.5.3)
     maruku (0.7.0)
     mime-types (1.19)
     mini_portile (0.5.2)
-    multi_json (1.8.1)
     nokogiri (1.6.1)
       mini_portile (~> 0.5.0)
     posix-spawn (0.3.6)
     pygments.rb (0.5.2)
       posix-spawn (~> 0.3.6)
       yajl-ruby (~> 1.1.0)
-    rack (1.5.2)
     redcarpet (2.3.0)
     s3_website (1.6.7)
       aws-sdk (~> 1.8.5)
@@ -60,13 +63,7 @@ GEM
     sass (3.2.12)
     simple-cloudfront-invalidator (1.0.1)
       colored (= 1.2)
-    sprockets (2.10.0)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
-      rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
     thor (0.18.1)
-    tilt (1.4.1)
     uuidtools (2.1.4)
     yajl-ruby (1.1.0)
 
@@ -75,8 +72,9 @@ PLATFORMS
 
 DEPENDENCIES
   RedCloth
+  compass
   jekyll
-  jekyll-assets
+  jekyll-asset-pipeline
   redcarpet
   s3_website
   sass
diff --git a/_assets/screen.scss b/_assets/screen.scss
new file mode 100644
index 0000000..844cc5f
--- /dev/null
+++ b/_assets/screen.scss
@@ -0,0 +1,425 @@
+@import url(http://fonts.googleapis.com/css?family=Cabin);
+
+$mq-mobile-portrait	: 20em !default;
+$mq-mobile-landscape	: 30em !default;
+$mq-tablet-portrait	: 40em !default;
+$mq-tablet-landscape	: 64em !default;
+$mq-desktop		: 86.375em !default;
+
+// Both portrait and landscape
+@mixin mobile-only {
+    @media (max-width : $mq-mobile-landscape) {
+	@content;
+    }
+}
+
+// Everything up to and including the portrait width of the phone
+// Since it's the smallest query it doesn't need a min
+@mixin mobile-portrait-only {
+    @media (max-width : $mq-mobile-portrait) {
+	@content;
+    }
+}
+
+// Everything up to and including the mobile portrait
+@mixin mobile-portrait-and-below {
+    @media (max-width : $mq-mobile-portrait) {
+	@content;
+    }
+}
+
+// Everything above and including the mobile portrait
+@mixin mobile-portrait-and-up {
+    @media (min-width : $mq-mobile-portrait) {
+	@content;
+    }
+}
+
+// Everthing larger than a portrait mobile up until mobile landscape
+@mixin mobile-landscape-only {
+    @media only screen and (min-width : $mq-mobile-portrait + .001) and (max-width : $mq-mobile-landscape) {
+	@content;
+    }
+}
+
+// Everything up to and including the mobile landscape width
+@mixin mobile-landscape-and-below {
+    @media only screen and (max-width : $mq-mobile-landscape) {
+	@content;
+    }
+}
+
+// Everything above and including the mobile landscape width
+@mixin mobile-landscape-and-up {
+    @media only screen and (min-width : $mq-mobile-portrait + .001) {
+	@content;
+    }
+}
+
+// Both the portrait and landscape width of the tablet
+// Larger than a landscape mobile but less than or equal to a landscape tablet
+@mixin tablet-only {
+    @media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-landscape) {
+	@content;
+    }
+}
+
+// Everything larger than mobile landscape up until the portrait width of the tablet
+@mixin tablet-portrait-only {
+    @media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-portrait) {
+	    @content;
+    }
+}
+
+// Everything below and including the portrait width of the tablet
+@mixin tablet-portrait-and-below {
+    @media only screen and (max-width : $mq-tablet-portrait) {
+	@content;
+    }
+}
+
+// Everything above and including the portrait width of the tablet
+@mixin tablet-portrait-and-up {
+    // @media only screen and (min-width : $mq-mobile-landscape + 1) {
+	@media only screen and (min-width : $mq-tablet-portrait + .001) {
+	    @content;
+	}
+}
+
+// Larger than portrait but less than or equal to the landscape width
+@mixin tablet-landscape-only {
+    @media only screen and (min-width : $mq-tablet-portrait + .001) and (max-width : $mq-tablet-landscape) {
+	@content;
+    }
+}
+
+// Up to and including the tablet landscape
+@mixin tablet-landscape-and-below {
+    @media only screen and (max-width : $mq-tablet-landscape) {
+	@content;
+    }
+}
+
+// Everything larger than portrait tablet
+@mixin tablet-landscape-and-up {
+    @media only screen and (min-width : $mq-tablet-portrait + .001) {
+	@content;
+    }
+}
+
+// Everything larger than a landscape tablet
+@mixin desktop-and-up {
+    @media only screen and (min-width : $mq-tablet-landscape + .001) {
+	@content;
+    }
+}
+
+// Everything below and including the desktop
+@mixin desktop-and-below {
+    @media only screen and (max-width : $mq-desktop) {
+	@content;
+    }
+}
+
+// Everything larger than a landscape tablet but less than or equal to the desktop
+@mixin desktop-only {
+    @media only screen and (min-width : $mq-tablet-landscape + .001) and (max-width : $mq-desktop) {
+	@content;
+    }
+}
+
+@mixin retina {
+    @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
+	@content;
+    }
+}
+
+@mixin image-2x($image, $width: auto, $height: $width) {
+    @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
+    only screen and (-o-min-device-pixel-ratio: 13/10),
+    only screen and (min-resolution: 120dpi) {
+        background-image: url($image);
+        @if $width != auto {
+            background-size: $width $height;
+        }
+    }
+}
+
+html {
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+}
+
+body {
+    font-family: 'Cabin', sans-serif;
+    background-color: #fff;
+    font-weight:400;
+    text-align:left;
+    color:#222;
+
+    margin: auto;
+    font-size: 16px;
+
+    @include tablet-portrait-and-below {
+        font-size: 0.8em;
+    }
+}
+
+em {
+    font-style: italic;
+}
+
+a {
+    color:#4c6296;
+    text-decoration:none;
+    outline:0
+}
+
+a:hover{
+    color:#173061;
+    text-decoration:none
+}
+
+a:visited{
+    color:#6a4c96
+}
+
+a:visited:hover{
+    color:#463263
+}
+
+a img{
+    border:0
+}
+
+#cover_wrap {
+  width: 623px;
+  margin: auto;
+  line-height: 1;
+  border-bottom: 1px solid #e8ebf2;
+}
+
+#masthead {
+
+  width: 620px;
+
+  @include tablet-portrait-and-below {
+     width: 90%;
+  }
+
+  header {
+    display: block;
+  }
+  
+  margin: 0 auto;
+  color: #57626b;
+
+  .intro {
+    line-height: 0.8;
+    float: left;
+    h1 {
+    line-height: 1;
+    }
+  }
+
+  h1 {
+    font-weight: 700;
+    font-size: 1.1em;
+  }
+
+  #home {
+    font-size: 1.2em;
+    font-weight: 700;
+    color: #57626b;
+  }
+
+  a {
+    text-decoration: none;
+    font-size: 0.8em;
+    font-weight: 500;
+    color: #669ecc;
+  }
+
+  h2 {
+     font-weight: 500;
+     color: #999;
+     font-size: 1em;
+  }
+}
+
+.clearfix:after {
+  clear: both;
+  content: ".";
+  display: block;
+  height: 0;
+  visibility: hidden;
+  font-size: 0;
+}
+
+
+#footer {
+    width: 623px;
+    margin: auto;
+    @include tablet-portrait-and-below {
+      width: 90%;
+    }
+
+    border-top: 1px solid #e8ebf2;
+    box-shadow: inset 0 1px 0 #fff;
+    background: #fdfdfd;
+
+    display: block;
+
+    .center_mod {
+      margin: 0 auto;
+    }
+    
+
+}
+
+.nav {
+     float: right;
+     padding: 0;
+        li {
+            line-height:1.3;
+            display: inline-block;
+            a {
+              margin-right: 16px;
+              font-weight: 700;
+              color: #9198ad;
+              font-size: 12px;
+        }
+    }
+}
+
+img {
+  width: 100%;
+  max-width: 1000px;
+  text-align: center;
+  vertical-align: baseline;
+  height: auto!important;
+}
+
+figure {
+margin: 4em 0;
+display: block;
+text-align: center;
+}
+
+#site{
+
+    section {
+      width: 623px;
+      margin: auto;
+      @include tablet-portrait-and-below {
+        width: 90%;
+      }
+    }
+
+    margin: auto;
+    text-align: left;
+    line-height: 1.65;
+    font-weight: 400;
+    font-size: 110%;
+
+    li {
+        line-height: 1.2em;
+    }
+
+    .post-listing {
+          width: 623px;
+      margin: auto;
+        padding-left: 0px;
+        display: block;
+        list-style-image: none;
+        list-style-position: outside;
+        margin-bottom: 1em;
+    }
+    .post-listing li {
+        list-style-type: none;
+        margin: 2.5em 0;
+    }
+    .post-listing li:first-child {
+        margin-top: 0;
+    }
+    .post-listing li h2 {
+        color: #2C251D;
+    }
+    .post-listing .oneliner {
+        color: #4A4235;
+    }
+
+    .post-listing .entry-title {
+      margin: 15px auto;
+    }
+
+    .post-listing .entry-title h2 {
+      font-size: 1.7em;
+      font-weight: 500;
+      margin-bottom: 5px;
+      color: #2c251d;
+      line-height: 1.1;
+    }
+
+    #entry {
+        padding: 0;
+        margin: 0 auto;
+
+        .entry-title {
+          width: 623px;
+          margin: 15px auto;
+          font-size: 100%;
+          h1 {
+             color: #2c251d;
+             font-size: 2.2em;
+             font-weight: 700;
+             line-height: 1.1;
+          }
+        }
+
+        section {
+             font-size: 100%;
+        }
+        
+        a {
+            font-weight: 600;
+            text-decoration: underline;
+            color: #4c6296;
+        }
+
+        a:visited {
+            color: #6a4c96;
+        }
+
+        blockquote {
+            border-left: 4px solid #eee;
+            margin-left: 0;
+            margin-right: 18px;
+            margin-bottom: 18px;
+            padding-left: 10px;
+            color: #666;
+        }
+
+        pre{
+            font-size: 13px;
+            font-family: Consolas,"Andale Mono",Monaco,Courier,"Courier New",Verdana,sans-serif;
+            -webkit-font-smoothing:subpixel-antialiased;
+            font-smoothing:subpixel-antialiased;
+            background-color: #fff;
+            border: 1px solid #d1d8e3;
+            padding: .35em;
+        }
+
+        code {
+            font-size: 95%;
+        }
+
+        .highlight {
+            margin: 1.5em 0;
+        }
+
+        p {
+            margin: 0 0 1.5em;
+        }
+    }
+}
diff --git a/_includes/cover.html b/_includes/cover.html
new file mode 100644
index 0000000..448e750
--- /dev/null
+++ b/_includes/cover.html
@@ -0,0 +1,22 @@
+<div id="cover_wrap" class="clearfix">
+
+  <header id="masthead" class="clearfix">
+    <div class="intro">
+      <h1>
+        <a href="/" id="home">Franck Cuny</a>
+        <a href="https://twitter.com/franckcuny">@franckcuny</a>
+      </h1>
+
+      <h2>
+        <span>Software and Operation engineer.</span>
+      </h2>
+    </div>
+
+  <ul class="nav">
+    <li><a href="/" title="Posts">Posts</a></li>
+    <li><a href="/about/" title="About">About</a></li>
+  </ul>
+
+  </header>
+
+</div>
diff --git a/_includes/footer.html b/_includes/footer.html
index ec1a493..9d4612b 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,8 +1,8 @@
-<footer>
-  <p id='copyright'>&copy; 2008 &ndash; 2013 Franck Cuny.
-    [ <a href='/'>Writings</a> |
-    <a href='/codex/'>Codex</a> |
-    <a href='/projects/'>Projects</a> |
-    <a href='/about/'>Colophon</a> |
-    <a href='/resume/'>R&eacute;sum&eacute;</a> ]
+<footer id="footer" class="clearfix">
+  <div class="center_mod">
+  <ul class="nav">
+    <li><a href="/" title="Posts">Posts</a></li>
+    <li><a href="/about/" title="About">About</a></li>
+  </ul>
+  </div>
 </footer>
diff --git a/_layouts/default.html b/_layouts/default.html
index 5691df7..89ab31f 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -6,24 +6,37 @@
 
 <head>
   <meta charset="utf-8"/>
-  <meta name="viewport" content="width=device-width"/>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
   <meta name="twitter:card" content="summary">
   <meta name="twitter:creator" content="@franckcuny"/>
   <meta name="twitter:site" content="@franckcuny"/>
   <meta name="twitter:title" content="{{ page.title }}"/>
   <meta name="twitter:domain" content="lumberjaph.net">
   <meta name="twitter:description" content="{{ page.summary }}">
+
   <title>{{ page.title }} | lumberjaph.net</title>
 
-  <link rel="stylesheet" href="/static/css/style.css" type="text/css"/>
-  <link rel="stylesheet" href="/static/css/pygments.css" type="text/css"/>
+  {% css_asset_tag global %}
+  - /_assets/screen.scss
+  {% endcss_asset_tag %}
 
-  <link rel="canonical" href="http://lumberjaph.net{{ page.url | replace:'index.html','' }}" />
+  <link rel="stylesheet" href="/assets/pygments.css" type="text/css"/>
 
+  <link rel="canonical" href="http://lumberjaph.net{{ page.url | replace:'index.html','' }}" />
 </head>
 
-<body>
-  <div id="container"> {{ content }} </div>
+<body style>
+
+  {% include cover.html %}
+
+  <div id="site"> {{ content }} </div>
+
+  {% include footer.html %}
+
 </body>
 
+
+
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
index 6014106..1801d73 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,17 +1,15 @@
 ---
 layout: default
 ---
-<h1><a href="{{ page.url }}">{{ page.title }}</a></h1>
 
-<div id="entry">
-  {{ content }}
+<article id="entry">
 
-  <p class="timestamp">
+  <header class="entry-title">
+    <h1>{{ page.title }}</h1>
+  </header>
 
-    {{ page.date | date_to_string }}
+  <section>
+    {{ content }}
+  </section>
 
-  </p>
-
-</div>
-
-{% include footer.html %}
+</article>
diff --git a/_layouts/static.html b/_layouts/static.html
index 0fb107f..6cda4d7 100644
--- a/_layouts/static.html
+++ b/_layouts/static.html
@@ -2,6 +2,8 @@
 layout: default
 ---
 
-{{ content }}
+<div id="site">
 
-{% include footer.html %}
+  {{ content }}
+
+</div>
diff --git a/_plugins/jekyll_asset_pipeline.rb b/_plugins/jekyll_asset_pipeline.rb
new file mode 100644
index 0000000..ea61c59
--- /dev/null
+++ b/_plugins/jekyll_asset_pipeline.rb
@@ -0,0 +1,15 @@
+require 'jekyll_asset_pipeline'
+
+module JekyllAssetPipeline
+  class SassConverter < JekyllAssetPipeline::Converter
+    require 'sass'
+
+    def self.filetype
+      '.scss'
+    end
+
+    def convert
+      return Sass::Engine.new(@content, syntax: :scss).render
+    end
+  end
+end
diff --git a/about/index.md b/about/index.md
index c317329..48a35cf 100644
--- a/about/index.md
+++ b/about/index.md
@@ -1,18 +1,28 @@
 ---
 layout: static
-title: About Me
+title: Hello!
 ---
 
-<h1>About me</h1>
-
-<a href="http://www.flickr.com/photos/rgarciasuarez74/5876329422/">
-<img alt="me, photo by Rafaël Garcia-Suarez" src="http://farm6.staticflickr.com/5028/5876329422_32040b7f40_b.jpg" width="50%" height="50%" class='portrait' align='right'>
-</a>
+<section>
 
 I'm a French guy who moved to the Bay Area in 2011. I work as a software developer in [Say Media](http://saymedia.com)'s operations team.
 
 At the moment I'm especially interested in functional programming. When I write code for myself, I do it mostly with [Clojure](http://clojure.org) and [Racket](http://racket-lang.org).
 
+</section>
+
+<figure>
+<a href="http://www.flickr.com/photos/rgarciasuarez74/5876329422/">
+<img alt="me, photo by Rafaël Garcia-Suarez" src="/static/imgs/5876329422_32040b7f40_b.jpg" Width="100%" height="100%" class='portrait' align='center'>
+</a>
+</figure>
+
+<section>
+
 You can find me on [Twitter](https://twitter.com/franckcuny), [GitHub](https://github.com/franckcuny) and [Google+](https://plus.google.com/+franckcuny). If you need to contact me, feel free to email me at [franckcuny@gmail.com](mailto:franck.cuny@gmail.com). If you rather wish to contact me privately, please use my [PGP key](/about/franckcuny-pubkey.gpg) (1162893A).
 
 I'm a proud member of [Paris.pm](http://paris).
+
+If not otherwise noted the content found here is licensed under a [Creative Commons Attribution-ShareAlike 3.0 License](http://creativecommons.org/licenses/by-sa/3.0/).
+
+</section>
diff --git a/assets/pygments.css b/assets/pygments.css
new file mode 100644
index 0000000..851ba3c
--- /dev/null
+++ b/assets/pygments.css
@@ -0,0 +1,59 @@
+.highlight .hll { background-color: #ffffcc }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #bb8844 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #999999 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #bb8844 } /* Literal.String.Backtick */
+.highlight .sc { color: #bb8844 } /* Literal.String.Char */
+.highlight .sd { color: #bb8844 } /* Literal.String.Doc */
+.highlight .s2 { color: #bb8844 } /* Literal.String.Double */
+.highlight .se { color: #bb8844 } /* Literal.String.Escape */
+.highlight .sh { color: #bb8844 } /* Literal.String.Heredoc */
+.highlight .si { color: #bb8844 } /* Literal.String.Interpol */
+.highlight .sx { color: #bb8844 } /* Literal.String.Other */
+.highlight .sr { color: #808000 } /* Literal.String.Regex */
+.highlight .s1 { color: #bb8844 } /* Literal.String.Single */
+.highlight .ss { color: #bb8844 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
diff --git a/index.html b/index.html
index 884466e..5ab67d5 100644
--- a/index.html
+++ b/index.html
@@ -3,17 +3,15 @@ layout: static
 title: Writings
 ---
 
-<h1><a href='/'>Writings</a></h1>
-
-<div id='wrapper'>
-  <ul>
-    {% for post in site.posts %}
-    {% unless post.type == "codex" %}
-    <li>
-      <a href="{{ post.url }}">{{ post.title }}</a>
-      <span class="date">{{ post.date | date_to_string }}</span>
-    </li>
-    {% endunless %}
-    {% endfor %}
-  </ul>
-</div>
+<ul class="post-listing">
+  {% for post in site.posts %}
+  <li>
+    <header class="entry-title">
+      <h2>
+        <a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a>
+      </h2>
+      <p class="oneliner">{{ post.summary }}</p>
+    </header>
+  </li>
+  {% endfor %}
+</ul>
diff --git a/s3_website.yml b/s3_website.yml
index 16ead1b..ab97b1c 100644
--- a/s3_website.yml
+++ b/s3_website.yml
@@ -49,7 +49,7 @@ redirects:
   about.html: about/
   projects.html: projects/
   resume.html: resume/
-  codex.html: codex/
+  codex.html: /
   
 
 # routing_rules:
diff --git a/static/css/style.css b/static/css/style.css
index 63c609f..4b1b2d4 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -6,6 +6,11 @@
 /*   src: local('Cabin Regular'), local('Cabin-Regular'), url('/static/fonts/cabin.ttf') format('truetype'); */
 /* } */
 
+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
 * {
     font-family: 'Helvetica Neue'
     /* font-family: 'Cabin', "Book Antiqua", "URW Palladio L", sans-serif; */
@@ -15,9 +20,24 @@ body {
     padding: 1.5em 0;
 }
 
-div#container {
-    width: 900px;
-    margin: 0 auto;
+#site{
+    font-family:ratio-1,ratio-2,"Helvetica Neue",Helvetica,Arial,Frutiger,"Frutiger Linotype",Univers,Calibri,"Gill Sans","Gill Sans MT","Myriad Pro",Myriad,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,sans-serif;
+    font-weight:400;
+    line-height:1.65;
+    min-height:500px;
+    font-size:110%;
+    text-align:left;
+    width:100%;
+    height:100%;
+    padding:0;
+    margin:0 auto
+}
+
+.entry-title h1 {
+    margin-bottom:5px;
+    color:#2c251d;
+    font-size:2.2em;
+    font-weight:700
 }
 
 h1 {
@@ -46,7 +66,7 @@ blockquote {
 }
 
 #entry, #wrapper {
-    font-size: 18px;
+    font-size: 16px;
 }
 
 #entry img {
diff --git a/static/imgs/5876329422_32040b7f40_b.jpg b/static/imgs/5876329422_32040b7f40_b.jpg
new file mode 100644
index 0000000..062fd10
--- /dev/null
+++ b/static/imgs/5876329422_32040b7f40_b.jpg