Yet another redesign

jmettes · Nov 9, 2012 · 6a2d257 · 6a2d257
1 parent 6f989e2
commit 6a2d257
Show file tree

Hide file tree

Showing 15 changed files with 144 additions and 125 deletions.
diff --git a/_includes/blurb.html b/_includes/blurb.html
diff --git a/_includes/nav.html b/_includes/nav.html
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -0,0 +1,21 @@
+<section id="sidebar">
+<header id="logo"><a href="/"><img src="https://lh6.googleusercontent.com/-QY1-Ou3b8SA/UJtz6JuWGnI/AAAAAAAAAew/9PrkhE4Sbtw/s151/drawn-circle.png" alt="jmettes" /></a></header>
+<section id="about">
+<p>Hi! I'm Jonathan</p>
+<p>I'm a muso and a web dev</p>
+<p>I like electronics, puppets, unicycling, throat-singing &amp; vector graphics</p>
+</section>
+
+<section id="links">
+<a href="http://soundcloud.com/jmettes"><img src="https://lh3.googleusercontent.com/-X_dlIkXdlT8/UJuz7zxQRqI/AAAAAAAAAh8/TIFqr7Gvz58/s31/soundcloud.png" /></a>
+<a href="https://github.com/jmettes"><img src="https://lh3.googleusercontent.com/-pOH-UYaP_jA/UJu1zzhYRGI/AAAAAAAAAis/Pu_rE_x1hRo/s20/github.png" /></a>
+<a href="http://flickr.com/jmettes"><img src="https://lh4.googleusercontent.com/-F0h6TAwu2uk/UJu3hNhcLkI/AAAAAAAAAjg/vcN8zdpJHq0/s25/flickr.png" /></a>
+<a href="http://vimeo.com/jmettes"><img src="https://lh3.googleusercontent.com/-TyXaR0jyqto/UJu5DTyKu0I/AAAAAAAAAkQ/_xGv0W2ny1Y/s18/vimeo.png" /></a>
+<a href="http://twitter.com/jmettes"><img src="https://lh4.googleusercontent.com/-Rn613YOPl0w/UJu6p0iZoXI/AAAAAAAAAlE/3k_HM4yTgv8/s24/twitter.png" /></a>
+</section>
+
+<form id="search" method="get" action="http://www.google.com/search">
+<input type="hidden" name="sitesearch" value="jmettes.com" />
+<input type="text" name="q" /><input type="submit" value="search" />
+</form>
+</section>
diff --git a/_layouts/layout.html b/_layouts/layout.html
@@ -7,20 +7,14 @@
 <link type="text/css" rel="stylesheet" href="/css/style.css" />
 <link rel="shortcut icon" href="/favicon.ico" />
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
-<script src='/js/soundcloud.player.api.js' type='text/javascript'></script>
-<script src='/js/sc-player.js' type='text/javascript'></script>
 {% unless page.url == '/index.html' %}
 <meta name="robots" content="noindex">
 {% endunless %}
+<!--[if IE]><script src="/js/html5.js"></script><![endif]-->
 </head>
 <body>
-<div id="wrapper">
-<div id="sidebar">
-<div id="bg"><a href="/"></a></div>
-{% include blurb.html %}
-{% include nav.html %}
-</div>
-<div id="posts">
+{% include sidebar.html %}
+<div id="articles">
 {{ content }}
 <div id="paginate">
 {% if paginator.previous_page %}
@@ -35,7 +29,6 @@
 {% endif %}
 </div>
 </div>
-</div>
 {% if page.url == "/index.html" %}
 <script type="text/javascript">
 var fetching = false;
@@ -50,22 +43,23 @@
       url: '/page' + page,
       success: function(data) {
         $(loading).remove();
-        $(data).find('.post').appendTo('#posts');
-        $(loading).appendTo('#posts');
+        $(data).find('article').appendTo('#articles');
+        $(loading).appendTo('#articles');
       },
       error: function(e) {
-        $(loading).remove();
         $(window).unbind('scroll');
+        $(loading).remove();
 
         if (e.status != 404) {
-          $('#posts').append('<p id="noload">Error loading posts. <a href="/page' + page + '">Go to next page</a></p>');
+          $('#articles').append('<p id="noload">Error loading posts. <a href="/page' + page + '">Go to next page</a></p>');
         }
       }
     }, 2000);
     page++;
     fetching = false;
   }
 });
+
 var _gaq=[["_setAccount","UA-36175883-1"],["_trackPageview"]];
 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
 g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -6,20 +6,15 @@
 <link title="jmettes - Atom" type="application/atom+xml" rel="alternate" href="/atom.xml" />
 <link type="text/css" rel="stylesheet" href="/css/style.css" />
 <link rel="shortcut icon" href="/favicon.ico" />
+<!--[if IE]><script src="/js/html5.js"></script><![endif]-->
 </head>
 <body>
-<div id="wrapper">
-<div id="sidebar">
-<div id="bg"><a href="/"></a></div>
-{% include blurb.html %}
-{% include nav.html %}
-</div>
-<div id="posts">
-<div class="post">
-<h2><a href="{{ page.url }}">{{ page.title }}</a></h2>
-<div id="content">
+{% include sidebar.html %}
+<div id="articles">
+<article>
+<h2>{{ page.title }}</h2>
+<a href="{{ page.url }}" title="{{ page.title }}" class="permalink">#</a>
 {{ content }}
-</div>
 <div id="paginate">
 {% if page.next.url %}
 <a href="{{ page.next.url }}" id="next">&lt; Newer</a>
@@ -28,8 +23,7 @@ <h2><a href="{{ page.url }}">{{ page.title }}</a></h2>
 <a href="{{ page.previous.url }}" id="previous">Older &gt;</a>
 {% endif %}
 </div>
-</div>
-</div>
+</article>
 </div>
 </body>
 </html>
diff --git a/_posts/2011-11-20-schreeuwkop.md b/_posts/2011-11-20-schreeuwkop.md
@@ -3,10 +3,10 @@ layout: post
 title: “Schreeuwkop”
 ---
 
-In 2008, I made a self-portrait stencil out of a black A4 sheet for an art assignment.
-
 ![Original stencil](https://lh3.googleusercontent.com/-GtlJ3cGzk5Y/T8wvlQO5LWI/AAAAAAAAAak/OqimhIIIJaY/w500/schreeuwkop-stencil.jpg)
 
-My teachers liked it enough to get me to paint it on a wall of the arts department!
+In 2008, I made a self-portrait stencil out of a black A4 sheet for an art assignment.
 
 ![Self-portrait Mural](https://lh6.googleusercontent.com/-veAt5WgiXwY/Tsiaic8QB1I/AAAAAAAAAak/_f3hze1hSbM/w500/mural.jpg)
+
+My teachers liked it enough to get me to paint it on a wall of the arts department!
diff --git a/_posts/2011-11-22-404-image.md b/_posts/2011-11-22-404-image.md
@@ -3,6 +3,6 @@ layout: post
 title: Missing Files Under Rocks
 ---
 
-A sketch I drew for the [404 page](/404.html), using [Inkscape](http://inkscape.org)—an SVG editor.
-
 ![404 image](https://lh6.googleusercontent.com/-xYkcRIg3ddw/UH9eikvIi8I/AAAAAAAAAbM/Kmh71mdB_oQ/s400/404.png)
+
+A sketch I drew for the [404 page](/404.html), using [Inkscape](http://inkscape.org)—an SVG editor.
diff --git a/_posts/2012-06-29-draw-concave-box2d-javascript.md b/_posts/2012-06-29-draw-concave-box2d-javascript.md
@@ -2,10 +2,6 @@
 layout: post
 title: Concave shapes with Box2dweb
 ---
-Here's a demo of [some code](https://github.com/jmettes/concaveShapesJS) I ported to JavaScript from ActionScript ([by Yadurajiv](http://rant.yadurajiv.com/yadurajiv/2011/01/694)).
+[![Box2dweb concave shapes](https://lh6.googleusercontent.com/-VGTa7oa7IFA/UDTQXFcpp1I/AAAAAAAAAas/-ds6mm6nbVI/s500/concave.png)](/experiments/concave-shapes/)
 
-Click and drag below to draw shapes and render them as [Box2D](http://code.google.com/p/box2dweb/) physics objects.
-
-<iframe src="/experiments/concave-shapes/" width="500" height="410" scrolling="no">bla</iframe>
-
-What makes this cool is the ability to draw concave polygon shapes. Box2D can't do this natively, but that's solved here by [decomposing concave shapes](http://www.flipcode.com/archives/Efficient_Polygon_Triangulation.shtml) into a mesh of triangles.
+Some code I ported over to JavaScript that lets you draw arbitrary concave shapes - [check it out!](/experiments/concave-shapes)
diff --git a/_posts/2012-07-19-slide-guitar-building-workshop.md b/_posts/2012-07-19-slide-guitar-building-workshop.md
diff --git a/_posts/2012-08-20-canvas-jumper-javascript-game.md b/_posts/2012-08-20-canvas-jumper-javascript-game.md
@@ -3,10 +3,8 @@ layout: post
 title: canvasjumper - JavaScript game
 ---
 
-I made a simple little platform game using JavaScript, HTML5 Canvas, [Node.js](http://nodejs.org) and [socket.io](http://socket.io).
-
-[Check out the demo](http://canvasjumper.com). Source code available on [github](https://github.com/jmettes/canvasjumper).
-
 [![canvasjumper screenshot](https://lh4.googleusercontent.com/-AWHsCfQ7Uzc/UDHEfpi4N_I/AAAAAAAAAak/1GzhSJWsVTY/s500/canvasjumper-screenshot.png)](http://canvasjumper.com)
 
-I slapped on some quick and dirty multiplayer functionality, so open it up in another window to try it out (if no-one else is playing)!
+I made a simple little multiplayer platform game using JavaScript, HTML5 Canvas, Node.js and socket.io.
+
+[Check out the demo](http://canvasjumper.com). Source code available on [github](https://github.com/jmettes/canvasjumper).
diff --git a/_posts/2012-10-18-blender-3d-model.md b/_posts/2012-10-18-blender-3d-model.md
@@ -3,10 +3,10 @@ layout: post
 title: Blender 3D model
 ---
 
-My first attempt at 3D modelling, made using [Blender](http://www.blender.org).
-
 <iframe frameborder="0" height="480" width="500" src="http://skfb.ly/li2eba?autostart=0&transparent=0&autospin=1&controls=1&watermark=0"><a href="https://sketchfab.com/show/rqnFNDwRip8cyzxtvCn2N8nB3R4">View model at Sketchfab</a></iframe>
 
-![Progress](https://lh3.googleusercontent.com/-6srDGeAWn-c/UH-WYlUdA4I/AAAAAAAAAcY/qY0Akj7Hkz4/s500/screenshot-small.png)
+My first attempt at 3D modelling, made using [Blender](http://www.blender.org).
 
 ![Reference](https://lh5.googleusercontent.com/-Y95PwG1uEms/UH-Z77sKYTI/AAAAAAAAAeU/iq7R6TPt4u0/s500/reference.png)
+
+Reference sketch I drew for the model.
diff --git a/css/style.css b/css/style.css
@@ -3,8 +3,8 @@ body {
   font-family: helvetica, arial, sans-serif;
   font-size: 100%;
   color: #555;
-  background-color: #fff;
-  margin-bottom: 8em;
+  background: #fff url('https://lh5.googleusercontent.com/-7b4gJh-AqIc/UJxkbsPKp-I/AAAAAAAAAmc/yzTYI5P8Tp0/s212/faux-column.png') repeat-y left top;
+  margin: 0 0 4em 0;
 }
 a {
   color: #333;
@@ -29,94 +29,115 @@ code {
 p code {
   font-size: .8em;
 }
-#wrapper {
+/*#wrapper {
   width: 500px;
   margin: 0 auto;
   padding-left: 260px;
-}
+}*/
 #sidebar {
   float: left;
   position: absolute;
-  margin: 30px auto -200px -270px;
-}
-#bg {
-  float: left;
-  background: url('/images/logo.png') no-repeat;
-  width: 317px;
-  height: 392px;
+  left: 0;
+  top: 0;
+  width: 212px;
 }
-#bg a {
-  display: block;
-  width: 204px;
-  height: 220px;
-  margin-left: 85px;
-  border: 0;
+#logo {
+  width: 151px;
+  margin: 4em 0 1em 35px;
 }
-#bg a:after {
-  content: '';
-  display: block;
-  width: 100px;
-  height: 206px;
-  margin-left: -88px;
-  padding-top: 119px;
+#about {
+  margin-left: 30px;
 }
-#blurb {
-  margin: 0 0 0 -90px;
-  width: 265px;
-}
-#blurb p {
+#about p {
   margin: 0;
-  padding: 0 0 0 75px;
+  text-shadow: 2px 2px #fff;
+}
+#about p:first-child {
+  font-size: 16px;
+  margin-bottom: 5px;
+  letter-spacing: 0.1em;
 }
-#blurb p:first-child {
-  font-size: 1.140em;
-  margin-bottom: 13px;
-  letter-spacing: 0.16em;
+#about p:first-child + p {
+  font-size: 11px;
+  padding-bottom: 4px;
+  word-spacing: 0.2em;
 }
-#blurb p:first-child + p {
-  font-size: 0.9em;
-  padding-bottom: 7px;
+#about p:first-child + p + p {
+  font-size: 11px;
+  letter-spacing: 0;
   word-spacing: 0.1em;
+  width: 155px;
 }
-#blurb p:first-child + p + p {
-  font-size: 0.8em;
-  letter-spacing: 0.08em;
+#links {
+  width: 155px;
+  margin: 2.5em 0 1em 30px;
 }
-#nav {
-  margin: 40px 0 0 -15px;
-  font-size: x-small;
+#links img {
+  padding: 0 1px;
 }
-#posts {
-  position: absolute;
-  margin-top: 222px;
-  float: right;
+#search {
+  width: 145px;
+  border-right: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  margin-left: 30px;
 }
-.post h2 a {
-  color: #333;
+#search input[type="text"] {
+  border: 2px solid #333;
+  border-right: 0;
+  width: 117px;
+  background-color: #eee;
+  padding: 3px;
+  margin: 0;
+}
+#search input[type="submit"] {
+  border: 2px solid #333;
+  border-left: 0;
+  width: 20px;
+  text-indent: -99999px;
+  background: #EEE url('https://lh4.googleusercontent.com/-wcieZXjkZvM/UJvJ2_P5ZKI/AAAAAAAAAlo/mFB2lBSs248/s17/search.png') no-repeat right;
+  padding: 3px 0;
+  cursor: pointer;
+  margin: 0;
+}
+#search input[type="submit"]::-moz-focus-inner { border: 0; } /* make button height even */
+#articles {
+  width: 500px;
+  padding-left: 260px;
+}
+article {
+  padding: 6em 0;
+  border-bottom: 1px solid #eee;
 }
-.post {
-  margin: 8em 0;
+article h2:first-child {
+  margin-top: 0;
 }
-.post h2 {
-    font-size: 18px;
-    line-height: .8em;
-    margin-bottom: 5px;
-    width: 500px;
-    text-shadow: 0 0 1px rgba(51, 51, 51, 0.1);
-    padding: 5px 5px 10px 0;
+article:first-child {
+  padding-top: 4em;
 }
-.post p {
+article:last-child {
+  border: 0;
+}
+article .permalink {
+  font-weight: normal;
+  color: #ccc;
+  float: right;
+  display: block;
+  margin-right: -20px;
+}
+article p {
   width: 500px;
   font-size: 14px;
 }
+article p:first-of-type {
+  margin-top: 0;
+}
 
 /*
 * Post types
 */
 
-.post img, .post iframe {
+article img, article iframe {
   max-width: 500px;
-  margin: 5px 0;
   border: 0;
 }
 
@@ -125,7 +146,8 @@ p code {
 */
 
 #paginate {
-  margin-bottom: 50px;
+  text-align: center;
+  margin: 2em 0 50px 0;
 }
 #paginate:after {
   content: '';