all posts back to 2011 done

Gruntfile.js

@@ -43,7 +43,8 @@ module.exports = function(grunt){
         less: {
             production: {
                 files: {
-                    '<%= config.site %>/<%= config.assets.css %>/kremalicious3.min.css' : '<%= config.src %>/<%= config.assets.less %>/kremalicious3.less'
+                    '<%= config.site %>/<%= config.assets.css %>/kremalicious3.min.css' : '<%= config.src %>/<%= config.assets.less %>/kremalicious3.less',
+                    '<%= config.site %>/<%= config.assets.css %>/poststyle-2300.min.css' : '<%= config.src %>/<%= config.assets.less %>/poststyle-2300.less'
                 },
             },
         },
@@ -61,7 +62,8 @@ module.exports = function(grunt){
         cssmin: {
             production: {
                 files: {
-                    '<%= config.site %>/<%= config.assets.css %>/kremalicious3.min.css': ['<%= config.site %>/<%= config.assets.css %>/*.css']
+                    '<%= config.site %>/<%= config.assets.css %>/kremalicious3.min.css': ['<%= config.site %>/<%= config.assets.css %>/*.css'],
+                    '<%= config.site %>/<%= config.assets.css %>/poststyle-2300.min.css': ['<%= config.site %>/<%= config.assets.css %>/poststyle-2300.min.css']
                 }
             }
         },

_src/_layouts/base.html

@@ -38,6 +38,9 @@
         <meta http-equiv="cleartype" content="on">
         
         <link rel="stylesheet" href="/assets/css/kremalicious3.min.css">
+        {% if page.style %}
+            <link rel="stylesheet" href="/assets/css/{{ page.style }}">
+        {% endif %}
         
     	<script data-cfasync="false" src="//use.typekit.com/msu4qap.js"></script>
     	<script data-cfasync="false">try{Typekit.load();}catch(e){}</script>

_src/_layouts/post.html

@@ -9,7 +9,7 @@ layout: base
 
     <section class="entry-content">
         {% if page.image %}
-            <img src="/media/{{ page.image }}" />
+            <img class="teaser" src="/media/{{ page.image }}" />
         {% endif %}
         
         {{ content }}
@@ -22,6 +22,11 @@ layout: base
             {% endfor %}
         </p>
 		<p class="byline author vcard source-org"><span class="by">by</span> <a class="fn" rel="author" href="/about/">{{ page.author }}</a></p>
-		<p class="time">{{ page.date | date_to_string }} <span class="modtime"></span></p>
+		<div class="time">
+		    <p>{{ page.date | date_to_string }}</p>
+		    {% if page.moddate %}
+		    <p class="modtime">updated: {{ page.moddate | date_to_string }}</p>
+		    {% endif %}
+		</div>
     </footer>
 </article>

_src/_posts/2009-12-17-wordpress-post-thumbnails.markdown

@@ -23,10 +23,10 @@ tags:
 ![Add WordPress Post Thumbnail Support To Theme](/media/wordpress-thumbnail-1.png)For whatever reason you first have to activate the feature with an entry in your theme's _functions.php_ file in order to get the Post Thumbnail box in the Editor.
 
 So just open up your theme's _functions.php_ file in your favorite editor or create it if there's no such file in your theme folder. Add this little code snippet to this file:
-[php]add_theme_support('post-thumbnails');[/php]
+{% highlight php %}add_theme_support('post-thumbnails');{% endhighlight %}
 For backwards compatibility you should wrap this inside a function check for the new add_theme_support:
-[php]if ( function_exists( 'add_theme_support' ) ) 
-  add_theme_support( 'post-thumbnails' );[/php]
+{% highlight php %}if ( function_exists( 'add_theme_support' ) ) 
+  add_theme_support( 'post-thumbnails' );{% endhighlight %}
 This makes sure WordPress installation prior to 2.9 won't get screwed up when using a theme with this new feature.
 
 
@@ -48,17 +48,17 @@ You can close the media dialogue now and you will see the image in the Post Thum
 
 
 ![Add to theme](/media/wordpress-thumbnail-5.png)Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file:
-[php]<?php the_post_thumbnail(); ?>[/php]
+{% highlight php %}<?php the_post_thumbnail(); ?>{% endhighlight %}
 This template tag will display the thumbnail sized post thumbnail by default and is essentially the same as:
 
-[php]<?php the_post_thumbnail('thumbnail'); ?>[/php]
+{% highlight php %}<?php the_post_thumbnail('thumbnail'); ?>{% endhighlight %}
 
 But of course you can grab the other sizes WordPress automatically creates when you upload an image:
 
-[php]<?php 
+{% highlight php %}<?php 
   the_post_thumbnail('medium'); 
   the_post_thumbnail('large'); 
-?>[/php]
+?>{% endhighlight %}
 _(Note: Matt [left a comment on WP Engineer](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/#comment-3053) stating he wouldn't recommend using these named arguments but provided no explanation for it yet.)_
 
 The code will output a generic `<img />` tag with a class of wp-post-image. Needless to say this is what you can select with css to style just the post thumbnails further:
@@ -69,19 +69,19 @@ The code will output a generic `<img />` tag with a class of wp-post-image. Need
 
 
 If you want to adjust the generated output of the <img /> tag you can do this by using some array stuff. So let's say you want to have the post thumbnails to be 200x200px big and another class assigned to it, you can extend the template tag like so:
-[php]<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>[/php]
+{% highlight php %}<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>{% endhighlight %}
 
 If you want to add more than one class you can do this like so:
 
-[php]<?php the_post_thumbnail('medium', array('class' => 'alignleft another_class')); ?>[/php]
+{% highlight php %}<?php the_post_thumbnail('medium', array('class' => 'alignleft another_class')); ?>{% endhighlight %}
 
 And you can add any attributes to the <img /> tag like a title, rel or an alt attribute. For accessibility reasons you should always add at least the alt-attribute:
 
-[php]<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext')); ?>[/php]
+{% highlight php %}<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext')); ?>{% endhighlight %}
 
 As for the title attribute this will be grabbed automatically from the entry you've made in your Media Library during the upload process but you even could override this too:
 
-[php]<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>[/php]
+{% highlight php %}<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>{% endhighlight %}
 
 
 
@@ -90,21 +90,21 @@ As for the title attribute this will be grabbed automatically from the entry you
 
 Finally if you want to respect the custom sizes you or your users have set under Settings > Media you can first grab those sizes with [get_option function](http://codex.wordpress.org/Function_Reference/get_option) and then put it in the array:
 
-[php]<?php 
+{% highlight php %}<?php 
   $width = get_option('thumbnail_size_w');  // get the width of the thumbnail setting
   $height = get_option('thumbnail_size_h'); // get the height of the thumbnail setting
   the_post_thumbnail(array($width, $height), array('class' => 'alignleft')); 
-?>[/php]
+?>{% endhighlight %}
 
 You can also detect the Media settings for the other sizes and whether the crop setting is active or not:
 
-[php]<?php 
+{% highlight php %}<?php 
   get_option('medium_size_w');  // Width of the medium size
   get_option('medium_size_h');  // Height of the medium size
   get_option('large_size_w');   // Width of the large size
   get_option('large_size_h');   // Height of the large size
   get_option('thumbnail_crop'); // Check for crop, On=1, Off=0 
-?>[/php]
+?>{% endhighlight %}
 
 
 
@@ -115,14 +115,14 @@ With the check in your functions.php at the beginning there's already ensured ol
 
 So it's a pretty good idea to make this backwards compatible with some quick if else voodoo, code shamelessly [adapted from WP-Recipes](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility):
 
-[php]if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { 
+{% highlight php %}if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { 
   the_post_thumbnail(); 
 } else { 
   $postimage = get_post_meta($post->ID, 'post-image', true); 
   if ($postimage) { 
     echo '<img src="'.$postimage.'" alt="" />';
   }
-}[/php]
+}{% endhighlight %}
 
 This first checks if the feature exists and if a post thumbnail was addd with this new feature. If it was, it simply returns the post thumbnail. If not, it falls back to whatever you've used in your theme before, the usual way is to check for and get the value of a special custom field named e.g. post-image and output it. You can add whatever you've used before inside the else statement. Et voilà, it's nicely backwards compatible now, yay!
 

_src/_posts/2011-01-08-enjoying-paper.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2011-01-08 15:43:14+00:00
-layout: post
-slug: enjoying-paper
+layout: image
+
 title: Enjoying Paper
+image: Enjoying-Paper.jpg
+author: Matthias Kretschmann
+
+date: 2011-01-08 15:43:14+00:00
 wordpress_id: 1867
 categories:
 - photos

_src/_posts/2011-01-08-glowing-star-inside.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2011-01-08 15:45:26+00:00
-layout: post
-slug: glowing-star-inside
+layout: image
+
 title: Glowing Star Inside
+image: Glowing-Star-Inside.jpg
+author: Matthias Kretschmann
+
+date: 2011-01-08 15:45:26+00:00
 wordpress_id: 1870
 categories:
 - photos

_src/_posts/2011-01-18-historic-flood-levels.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2011-01-18 15:40:12+00:00
-layout: post
-slug: historic-flood-levels
+layout: image
+
 title: Historic Flood Levels
+image: Historic-Flood-Levels.jpg
+author: Matthias Kretschmann
+
+date: 2011-01-18 15:40:12+00:00
 wordpress_id: 1864
 categories:
 - photos

_src/_posts/2011-10-11-broken-nexus-s-screen.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2011-10-11 14:37:06+00:00
-layout: post
-slug: broken-nexus-s-screen
+layout: image
+
 title: Broken Nexus S Screen
+image: Broken-Nexus-S-Screen.jpg
+author: Matthias Kretschmann
+
+date: 2011-10-11 14:37:06+00:00
 wordpress_id: 1861
 categories:
 - photos

_src/_posts/2011-12-15-badged.markdown

@@ -1,10 +1,12 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2011-12-15 07:56:46+00:00
 layout: post
-slug: badged
+
 title: Badged - iOS Style Notification Badges for WordPress
+image: Badged-Teaser-kremalicious.png
+author: Matthias Kretschmann
+moddate: 2013-11-10 07:56:46+00:00
+
+date: 2011-12-15 07:56:46+00:00
 wordpress_id: 1468
 categories:
 - goodies
@@ -12,123 +14,78 @@ categories:
 
 Made a quick WordPress plugin which transforms the standard WordPress update & comment notification badges into iOS-styled ones.
 
-<!-- more -->
+Badged transforms the standard WordPress update & comment notification badges into iOS-styled ones. Upon activation it automatically replaces the badge styles in the admin menu and the admin bar. An optional settings page allows to control whether the badges show up as the new default iOS style or styled as pre-iOS 7 badges.
 
-The badges are CSS only (box shadows, gradients, pseudo elements, you name it) and were tested in current versions of Safari, Chrome & Firefox. It should degrade gracefully in older Browsers with some details missing like drop shadows or the highlight shine. If you care for how it's done exactly, you can peek around in the [css file on github](https://github.com/kremalicious/Badged/blob/master/css/badged-menu.css).
+The badges are CSS only (box shadows, gradients, pseudo elements, you name it) and were tested in current versions of Safari, Chrome, Firefox and Internet Explorer. If you care for how it’s done exactly, you can peek around in the [repository on github](https://github.com/kremalicious/Badged/).
 
 The plugin is localized in english & german, which is only important for the settings page.
 
-
-
 ## Download & Installation
 
-
 You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
 
-
-
-
-[Plugin Page](http://wordpress.org/extend/plugins/badged) [Github](https://github.com/kremalicious/Badged) [Donate](http://krlc.us/givecoffee)
-
-
-
+<p class="clearfix">
+<a href="http://wordpress.org/extend/plugins/badged" class="btn btn-primary btn-block icon-wordpress-alt col2">Plugin Page</a> 
+<a class="btn btn-primary btn-block icon-github-alt col2" href="https://github.com/kremalicious/Badged">GitHub</a> 
+<a href="http://krlc.us/givecoffee" class="icon-heart btn btn-block col2">Donate</a>
+</p>
 
 The plugin is hosted on github and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually:
-
-
-
 	
   1. Upload the badged plugin folder to the `/wp-content/plugins/` directory
-
-	
   2. Activate the plugin through the _Plugins_ menu in WordPress
-
-	
   3. Enjoy
-
-	
   4. (optional) Adjust options under _Settings > Badged_. Upon activation the plugin sets both options by default: 
 
-
-
 ![](/media/badged-settings.png)
 
 If you find any problems you can [open an issue on Github](https://github.com/kremalicious/Badged/issues) or just drop me a line in the comments or on [Twitter](http://twitter.com/kremalicious).
 
-
-
 ## Version History
 
+**v1.0.0**
+
+  * new default style based on iOS 7
+  * new setting to switch back to pre-iOS 7 style
+  * rewritten from the ground up based on Tom McFarlin’s excellent WordPress Plugin Boilerplate
+  * settings through WordPress Settings API
+  * Retina banner for WordPress plugin repository listing
+  * drop IE 8 support (still present in pre-iOS 7 style)
+  * using Grunt for optimized images and minified css
+  * confusing and ridiculous version number jump
 
 **v0.3.6**
 
-
-
-	
   * tested for WP 3.4
-
-	
   * settings page: Retina ready icon for high dpi devices, css only submit button
-
-	
   * updated german translation
 
-
-
 **v0.3.5**
 
-
-
-	
   * IE 8 improvements: box shadow, light gradient through DXImageTransform filters (but no rounded corners, sorry)
-
-	
   * current versions of IE & Opera are now among the tested browsers
-
-	
   * updated settings page links
 
 
 **v0.3.4**
-
-
-
 	
   * more descriptive readme and settings footer with links to blog post & github page
-
-	
   * updated translation
 
-
 **v0.3.2**
-
-
-
 	
   * Make the plugin work if symlinked
 
-
 **v0.3**
-
-
-
 	
   * initial beta release
 
 
 **v0.2**
-
-
-
 	
   * added options to control whether the badges show up in admin menu or toolbar (default is both)
 
-
 **v0.1**
-
-
-
 	
   * initial alpha release
 
-

_src/_posts/2012-02-26-mk-v2.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-02-26 21:29:54+00:00
 layout: post
-slug: mk-v2
+
 title: Personal Site v2
+image: mkv2.jpg
+author: Matthias Kretschmann
+
+date: 2012-02-26 21:29:54+00:00
 wordpress_id: 1506
 categories:
 - personal
@@ -12,12 +13,8 @@ categories:
 
 Today I finally launched v2 of my personal site, still following the concept of a business card web site but with a portfolio added to it. You should totally [have a look](http://matthiaskretschmann.com).
 
-<!-- more -->
-
-
 ## Who needs images anyway
 
-
 One goal was to use as less images as possible. Yes, it would have been easier to just use images instead of like 10 box-shadows on one element but this wouldn't have been any fun. And no matter what retina/high dpi devices come up next all interface elements will look just as sharp without any additional work.
 
 ![](/media/mkv2-detail.png)

_src/_posts/2012-03-04-relaxing-cat.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-03-04 08:00:32+00:00
-layout: post
-slug: relaxing-cat
+layout: image
+
 title: Relaxing Cat
+image: 7f9397a265d811e1b9f1123138140926_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-03-04 08:00:32+00:00
 wordpress_id: 1729
 categories:
 - photos
@@ -12,6 +13,7 @@ post_format:
 - Image
 tags:
 - instagram
+- sitamun
 ---
 
 

_src/_posts/2012-04-03-blaue-turme.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-04-03 12:41:01+00:00
-layout: post
-slug: blaue-turme
+layout: image
+
 title: Blaue Türme
+image: Blaue-Türme-1.jpg
+author: Matthias Kretschmann
+
+date: 2012-04-03 12:41:01+00:00
 wordpress_id: 1753
 categories:
 - photos

_src/_posts/2012-04-03-skeletor.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-04-03 17:56:49+00:00
-layout: post
-slug: skeletor
+layout: image
+
 title: Skeletor
+image: 6313cc1e7db611e180c9123138016265_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-04-03 17:56:49+00:00
 wordpress_id: 1745
 categories:
 - photos

_src/_posts/2012-04-03-train-station-leipzig.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-04-03 18:21:44+00:00
-layout: post
-slug: train-station-leipzig
+layout: image
+
 title: Train Station Leipzig
+image: de2ac24c7db911e1b9f1123138140926_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-04-03 18:21:44+00:00
 wordpress_id: 1747
 categories:
 - photos

_src/_posts/2012-04-04-android-tab-conundrum.markdown

@@ -10,7 +10,7 @@ categories:
 - design
 ---
 
-![](/media/tabs_overview-540x103.png)
+![](/media/tabs_overview.png)
 With [Instagram for Android](https://play.google.com/store/apps/details?id=com.instagram.android&hl=en) there's once again an app getting ported to Android from iOS which doesn't follow the platform specific guidelines with a lot of elements. Most obviously in the form of the app's main navigation tabs which Instagram for Android puts at the bottom as opposed to Google's suggested placement of tabs at the top as part of the action bar. Now smart Android designers [chime in and call foul](https://plus.google.com/109726284197282147930/posts/5McKooqNnnd) for this Android Design Guideline violation [as others](http://www.androiduipatterns.com/2011/07/tabs-top-or-bottom.html) and [I have done](http://exquisitedroid.com/cardcloud/) in the past with other apps.
 
 But this time it's a bit complicated, let me explain.

_src/_posts/2012-04-05-current-sushi-status.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-04-05 19:15:20+00:00
-layout: post
-slug: current-sushi-status
+layout: image
+
 title: Current Sushi Status
+image: aff38e2c7f5311e1b10e123138105d6b_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-04-05 19:15:20+00:00
 wordpress_id: 1731
 categories:
 - photos

_src/_posts/2012-04-07-buna.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-04-07 02:42:08+00:00
-layout: post
-slug: buna
+layout: image
+
 title: Buna
+image: 44af28f2805b11e18cf91231380fd29b_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-04-07 02:42:08+00:00
 wordpress_id: 1733
 categories:
 - photos

_src/_posts/2012-04-07-cat-enjoying-a-good-ipad-game.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-04-07 16:26:46+00:00
-layout: post
-slug: cat-enjoying-a-good-ipad-game
+layout: image
+
 title: Cat enjoying a good iPad game
+image: 7838011c80ce11e19e4a12313813ffc0_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-04-07 16:26:46+00:00
 wordpress_id: 1739
 categories:
 - photos

_src/_posts/2012-04-07-ipad-porn.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-04-07 13:43:00+00:00
-layout: post
-slug: ipad-porn
+layout: image
+
 title: iPad Porn
+image: 97a44d6080b711e181bd12313817987b_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-04-07 13:43:00+00:00
 wordpress_id: 1735
 categories:
 - photos

_src/_posts/2012-04-07-opera.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-04-07 15:50:15+00:00
-layout: post
-slug: opera
+layout: image
+
 title: Opera
+image: 5df6e0a280c911e1a87612313804ec91_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-04-07 15:50:15+00:00
 wordpress_id: 1737
 categories:
 - photos

_src/_posts/2012-04-08-common-kitchen-decoration.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-04-08 19:29:33+00:00
-layout: post
-slug: common-kitchen-decoration
+layout: image
+
 title: Common kitchen decoration
+image: 2ba6eeba81b111e1989612313815112c_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-04-08 19:29:33+00:00
 wordpress_id: 1741
 categories:
 - photos

_src/_posts/2012-04-08-graffiti-old-school-style.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-04-08 20:14:49+00:00
-layout: post
-slug: graffiti-old-school-style
+layout: image
+
 title: Graffiti, old school style
+image: 7e2b28f881b711e1af7612313813f8e8_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-04-08 20:14:49+00:00
 wordpress_id: 1743
 categories:
 - photos

_src/_posts/2012-04-20-the-origins-of-the-blink-tag.markdown

@@ -1,10 +1,11 @@
 ---
+layout: link
+
+title: The origins of the <blink> tag
+linkurl: http://www.montulli.org/theoriginofthe%3Cblink%3Etag
 author: Matthias Kretschmann
-comments: true
+
 date: 2012-04-20 08:48:46+00:00
-layout: post
-slug: the-origins-of-the-blink-tag
-title: The origins of the blink tag
 wordpress_id: 1712
 categories:
 - design
@@ -16,10 +17,7 @@ tags:
 
 Funny story from [Lou Montulli](http://www.montulli.org/lou), who is the credited inventor of the <blink> tag. As suspected of generations of web designers, it involved a bar and much alcohol:
 
-
-
-> 
-It turns out that one of the engineers liked my idea so much that he left the bar sometime past midnight, returned to the office and implemented the blink tag overnight. He was still there in the morning and quite proud of it.
+> It turns out that one of the engineers liked my idea so much that he left the bar sometime past midnight, returned to the office and implemented the blink tag overnight. He was still there in the morning and quite proud of it.
 
 
 

_src/_posts/2012-04-30-announcing-sketch2.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-04-30 12:37:05+00:00
-layout: post
-slug: announcing-sketch2
+layout: link
+
 title: Announcing Sketch 2.0
+linkurl: http://www.bohemiancoding.com/about/blog/announcing-sketch-2-0/
+author: Matthias Kretschmann
+
+date: 2012-04-30 12:37:05+00:00
 wordpress_id: 1950
 categories:
 - design
@@ -14,8 +15,6 @@ post_format:
 
 Remarkable update to Bohemian Coding's [Sketch](http://bohemiancoding.com/sketch) app. It's like Photoshop but with only the UI design related features included:
 
-
-
 > We wanted to provide a real alternative to Adobe’s Photoshop or Fireworks and we believe we have succeeded. It’s an ambitious goal for sure but if you’ve been using Photoshop’s vector capabilities combined with Layer Styles, we think we may have something better.
 
 

_src/_posts/2012-05-02-a-call-foropen-free-access-to-academic-research.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-02 03:12:40+00:00
-layout: post
-slug: a-call-foropen-free-access-to-academic-research
+layout: link
+
 title: A call for open, free access to academic research
+linkurl: http://www.guardian.co.uk/commentisfree/2012/may/01/open-free-access-academic-research
+author: Matthias Kretschmann
+
+date: 2012-05-02 03:12:40+00:00
 wordpress_id: 1989
 categories:
 - links
@@ -14,19 +15,12 @@ post_format:
 
 David Willetts, a minister of state for universities and science in the UK, is calling for more open access in academics:
 
-
-
 > Giving people the right to roam freely over publicly funded research will usher in a new era of academic discovery and collaboration
 
-
-
 If you ever worked in an academic environment or just wanted to read some scientific studies, you probably know this is currently an outrageous mess, not only in the UK. Because most research gets published in very expensive journals and magazines, a huge amount of publicly paid academic research and its outcome can't be accessed by the public.
 
 So yes:
 
-
 > Moving from an era in which taxpayer-funded academic articles are stuck behind paywalls for much of their life to one in which they are available free of charge will not be easy.
 
-
-
 But they basically [have Jimmy Wales on board](http://www.guardian.co.uk/technology/2012/may/01/wikipedia-research-jimmy-wales-online), so it looks like this isn't just the usual politician jibber-jabber.

_src/_posts/2012-05-03-antique-chrome.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-03 15:55:15+00:00
-layout: post
-slug: antique-chrome
+layout: image
+
 title: Antique Chrome
+image: 5fc688aa953811e180c9123138016265_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-05-03 15:55:15+00:00
 wordpress_id: 1996
 categories:
 - photos

_src/_posts/2012-05-04-world-press-photo-2012.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-04 13:12:54+00:00
-layout: post
-slug: world-press-photo-2012
+layout: link
+
 title: World Press Photo 2012
+linkurl: http://www.worldpressphoto.org/gallery/2012-world-press-photo
+author: Matthias Kretschmann
+
+date: 2012-05-04 13:12:54+00:00
 wordpress_id: 1997
 categories:
 - photography

_src/_posts/2012-05-09-media-query-asset-downloading-results.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-09 09:48:19+00:00
-layout: post
-slug: media-query-asset-downloading-results
+layout: link
+
 title: Media Query & Asset Downloading Results
+linkurl: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
+author: Matthias Kretschmann
+
+date: 2012-05-09 09:48:19+00:00
 wordpress_id: 2019
 categories:
 - design

_src/_posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-12 13:19:02+00:00
-layout: post
-slug: nielsen-vs-clark-theyre-both-wrong
+layout: link
+
 title: Nielsen vs Clark – they're both wrong
+linkurl: http://netmagazine.com/opinions/nielsen-vs-clark-theyre-both-wrong
+author: Matthias Kretschmann
+
+date: 2012-05-12 13:19:02+00:00
 wordpress_id: 2024
 categories:
 - design
@@ -17,5 +18,4 @@ tags:
 
 Great middle ground arguments from Jason Mark in this recent controversy about mobile web experiences:
 
-
 > The truth is when working on mobile you should always look at the site analytics and make smart decisions based on what you find. If you find that your mobile users use the site in a significantly different way than desktop users, check out Nielsen's guidelines and see which apply to you. And if you find that your mobile users are accessing the same content as desktop users then consider a responsive design.

_src/_posts/2012-05-12-which-responsive-images-solution-should-you-use.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-12 17:52:53+00:00
-layout: post
-slug: which-responsive-images-solution-should-you-use
+layout: link
+
 title: Which responsive images solution should you use?
+linkurl: http://css-tricks.com/which-responsive-images-solution-should-you-use/
+author: Matthias Kretschmann
+
+date: 2012-05-12 17:52:53+00:00
 wordpress_id: 2041
 categories:
 - design

_src/_posts/2012-05-14-welcome-to-kremalicious2.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-14 19:33:22+00:00
 layout: post
-slug: welcome-to-kremalicious2
+
 title: Welcome to kremalicious2
+image: kremalicious2-teaser.jpg
+author: Matthias Kretschmann
+
+date: 2012-05-14 19:33:22+00:00
 wordpress_id: 1920
 categories:
 - personal
@@ -12,39 +13,26 @@ categories:
 
 It finally happened. After so many rejected revisions, so many pauses, so much coffee: kremalicious2 is here.
 
-<!-- more -->
-
-
-
 ## Reduction & Addition
 
-
 Instead of a full site with the blog as one part, this is now a simple blog. No weird pages with subpages anymore. Just a blog with some topic archives.
 
 The development process was and is a very agile one, so new features and changes will be incorporated as they happen. If it's in the [master branch](https://github.com/kremalicious/kremalicious2), it's live.
 
-
-
 ## Mobile & Content First, Retinasized
 
-
 The blog theme was designed from the inside out with a [responsive](http://www.alistapart.com/articles/responsive-web-design/), [mobile first](http://www.lukew.com/ff/entry.asp?933) approach. I’ve gone from small screens first to bigger screens and started by designing the article single view before anything else. This is usually the moment where you may resize your browser window if you're a design geek.
 
 To make future maintenance a bit easier, I’m using the simple [HS Responsive](http://kremalicious.github.com/hsresponsive/) HTML/CSS framework I’ve recently created for a university but with some modifications. For instance, iPad users will get two different layouts in portrait and landscape mode easily by kind of misusing the iOS rotation scale bug and using a media query breakpoint of 769px. Yes, I know, this breaks the no-single-device-targeting approach but by now there’re more readers visiting this site from an iPad than with Internet Explorer or Linux so this seemed appropriate.
 
-
 ## Typography
 
-
 ![](/media/kremalicious2-typography.jpg)After much experimentation, all fonts (that is, those for texts) on this blog are now coming from TypeKit. The body text is set in [Rooney Web](http://www.janfromm.de/typefaces/rooney/overview/) from [Jan Fromm](https://twitter.com/janfromm) which looks just gorgeous on Retina screens. All headings & buttons use Adobe's [Cronos Pro](https://typekit.com/fonts/cronos-pro).
 
 Sadly, Typekit [only works in webkit based mobile browsers](http://help.typekit.com/customer/portal/articles/6786) which is a real bummer. Sorry Firefox & Opera users on mobile devices.
 
-
-
 ## Icons
 
-
 ![](/media/kremalicious2-topicicons.jpg)All icons on the site are coming from the awesome icon font [Font Awesome](http://fortawesome.github.com/Font-Awesome/) made by Dave Gandy. But the original font was missing some needed glyphs so I’m using a fork called [Font Awesome More](http://gregoryloucas.github.com/Font-Awesome-More/) from Gregory Loucas ([@gregoryLpaul](https://twitter.com/gregoryLpaul)). This makes things like changing icon colors so much easier but using icon fonts still has the problem of small icons not rendering super crisp, although `font-smoothing: antialiased` helps a bit.
 
 
@@ -74,18 +62,15 @@ If you want to peek around in the theme files, you can head over to the kremalic
 The blog stream got more content types. Apart from normal posts, links and photos will be added to it.
 
 
-
 ### Link posts
 
 
 Link post means a short comment from me to a valuable or interesting resource where the post title is linked to the original source. I put them in topics just like all the other articles.
 
 
-
 ### Photo posts
 
 
-
 ![](/media/kremalicious2-photoposts.jpg)
 
 [Photo posts](/photos) are my new favorite: beside selected images from my Flickr and 500px profiles, they include automatic posting of my Instagram images. After being taken, a new Instagram image is posted immediately as a special styled photo post in this blog.
@@ -112,12 +97,8 @@ I saw no reason to include a prominent date along with a post title. Besides, I
 
 I’ve decided to keep this functionality intact but hide the whole comment section under each post by default. This is a compromise between those users seeing comments as interface clutter and those valuing comments in blogs. The whole comment section is even taken completely off the DOM on page load with jQuery's detach(), only clicking/tapping the comment section heading will bring them back.
 
-
 ## Subscriptions
 
-
-
-
 ### RSS Feeds
 
 

_src/_posts/2012-05-15-wp-icons-template.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-15 16:00:44+00:00
 layout: post
-slug: wp-icons-template
+
 title: WordPress Admin Icons Template
+image: kremalicious-Teaser-WP-Icon-Template.png
+author: Matthias Kretschmann
+
+date: 2012-05-15 16:00:44+00:00
 wordpress_id: 2043
 categories:
 - design
@@ -17,46 +18,28 @@ tags:
 
 Here’s a template for designing your own icons for the admin area of WordPress including icons ready for Retina screens and some recommendations for the workflow of implementing these.
 
-<!-- more -->
-
 There are basically two scenarios where you really need custom icons for WordPress’ admin area: when creating custom post types and when creating option pages for a plugin/theme. No matter what case, at least 3 icons are needed if you want to get it right:
 
-
-
-	
   * two 16px icons for the admin menu, one non-colored and one colored icon for the hover state
-
-	
   * one 32px icon for the actual screen
 
-
 And since the admin area gets constantly optimized for devices which happen to have high-dpi screens (like 3rd generation iPad’s Retina screen) it’s a very good idea to include double sized @2x assets for all the icons mentioned above.
 
 So if you value quality and want pixel perfect icons in your admin area you need to create a total of 6 icon sizes.
 
-
 ## The Template
 
-
-![](/media/WordPress-Admin-Icons-Template-Filled-540x405.png)
+![](/media/WordPress-Admin-Icons-Template-Filled.png)
 
 I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:
 
-[Download Template & Code](https://github.com/kremalicious/wp-icons-template/zipball/master)
-
-
-
-
-[GitHub](https://github.com/kremalicious/wp-icons-template)[Donate](http://krlc.us/givecoffee)
-
-
-
-
+<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn btn-primary icon-download-alt">Download Template &amp; Code</a>
+<a href="https://github.com/kremalicious/wp-icons-template" class="icon-github btn">GitHub</a> 
+<a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
 
 
 ### Usage
 
-
 The psd file in there has room for all the icon sizes mentioned above. As you can see, I’ve added an umbrella icon to better illustrate the various sizes. Turn on the “Icon Frames - White” layer to see the dimensions for each icon.
 
 Additionally, I’ve added two shapes with base layer styles which resemble the default admin icon style. This is by no means a magic bullet to make every shape look exactly like a WordPress default icon. It’s just a starting point from where you can modify it for your own needs.
@@ -65,34 +48,26 @@ And because consistency is key, the default WordPress admin icon sprites are inc
 
 The psd is sliced for multiple sprites. You’re of course encouraged to make only one sprite out of it, this just made it more universal for the following code examples. When you’re finished designing the icons just hide the background layers and use Save for Web in Photoshop to export the sliced areas. Running them through ImageOptim or something like that afterwards is a good idea.
 
-
 ## Implementation, or: Ignore The Codex
 
-
 While `register_post_type()` and `add_menu_page()` let you define a URL for an icon this doesn’t allow for controlling hover or @2x assets. That’s because this will put the icon as an `img` element into the menu as opposed to the icons for the built-in items (they’re css background images from sprites). Furthermore, WordPress will add a default opacity to all img elements in the admin menu, with 100% opacity only on hover.
 
 So when using this template with all those icons, I suggest you use the following snippets in your functions.php instead. Yes, I’m telling you to ignore the codex. But this is the only way to get what we want:
 
-
-
-	
   * hover state consistent to WordPress default menu behavior
-
-	
   * control the display of the various image sizes for high-dpi devices with css media queries
 
-
 So the following code just injects a stylesheet snippet into the `<head>` of all admin pages. This is a modification of [Randy Jensen’s code idea](http://randyjensenonline.com/thoughts/wordpress-custom-post-type-fugue-icons/).
 
-You can always to refer to the inline commented versions of these snippets in the [github repository](https://github.com/kremalicious/wp-icons-template).
-
+You can always refer to the inline commented versions of these snippets in the [github repository](https://github.com/kremalicious/wp-icons-template).
 
 ### Custom Post Type Icons
 
-
 WordPress automatically puts an ID around your new menu item which contains the name of your custom post type (the $post_type parameter in `register_post_type()`). Just change this to your own post type name:
 
-[php gutter="true"]<?php
+{% highlight php %}
+
+<?php
 /**
  * Custom Post Type Icon for Admin Menu & Post Screen
  */
@@ -137,18 +112,16 @@ function custom_post_type_icon() {
     </style>
 <?php } 
 
-?>[/php]
-
+?>
 
+{% endhighlight %}
 
 ### Plugin And Theme Options Icons
 
-
-
 The easiest way is to just use this markup on your option page before the page heading which is the default on all admin pages:
 
-[html]<div id="PLUGINNAME" class="icon32"></div>
-<h2>My cool option page</h2>[/html]
+{% highlight html %}<div id="PLUGINNAME" class="icon32"></div>
+<h2>My cool option page</h2>{% endhighlight %}
 
 This is the markup being addressed in the snippet block for option page icons. The `icon32` class will make sure everything is aligned consistent to all other pages without redefining everything in css.
 
@@ -158,7 +131,9 @@ Putting your plugin or option page in the top level of the admin menu via `add_m
 
 So all this combined leads to this snippet:
 
-[php gutter="true"]<?php
+{% highlight php %}
+
+<?php
 
 /**
  * Option Page Icon for Admin Menu & Option Screen
@@ -215,50 +190,30 @@ function option_page_icon() {
     </style>
 <?php } 
 
-?>[/php]
+?>
+
+{% endhighlight %}
 
 Just replace the bits in the ID selectors with your stuff. If you have problems finding the correct ID selector just inspect element in the admin area.
 
-
-
-
 * * *
 
-
-
 Please note these snippets are just suggestions. I tried to make them as much universal as possible and tested them but depending on your project this could need adjustments. And obviously the css rules for high-dpi assets depend on a browser capable of CSS media queries but I guess all devices with such screens have modern browsers handling this.
 
 But there are a lot of ways to improve on that:
 
-
-
-	
   * add these css rules to your own stylesheet if you’re using a custom admin area css file for your theme or plugin
-
-	
   * enqueue the snippets with `wp_enqueue_style()` and the `admin_enqueue_scripts()` action hook
-
-	
   * better yet, put them in a single stylesheet and enqueue them only on pages where they’re actually needed
 
-
-
-
-
 ## License
 
-
 All code snippets are under the [GPL](http://opensource.org/licenses/gpl-3.0.html). The template psd is public domain, so you’re free to use and bundle this in any personal & commercial project without any requirements.
 
 But if you’re super cool and want to catch some karma you place a link back to this release post ([http://kremalicious.com/wp-icons-template](http://kremalicious.com/wp-icons-template)) somewhere in your project or [buy me some delicious coffee](http://krlc.us/givecoffee).
 
-
-
 ## More Resources
 
-
-
 If you need some inspiration for nicely consistent icons you should check out [these great admin icons from Laura Kalbag](http://laurakalbag.com/wordpress-admin-icons/).
 
-And Julien Chaumond wrote a great piece, in his own words "less about the sizes, more about the style". It's a must-read: [How to design a good native-looking WordPress Admin icon](http://julien-c.fr/2012/07/wordpress-admin-icons/)
-
+And Julien Chaumond wrote a great piece, in his own words "less about the sizes, more about the style". It's a must-read: [How to design a good native-looking WordPress Admin icon](http://julien-c.fr/2012/07/wordpress-admin-icons/)

_src/_posts/2012-05-21-why-comic-sans.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-21 21:18:17+00:00
-layout: post
-slug: why-comic-sans
+layout: link
+
 title: Why Comic Sans?
+linkurl: http://www.connare.com/whycomic.htm
+author: Matthias Kretschmann
+
+date: 2012-05-21 21:18:17+00:00
 wordpress_id: 2120
 categories:
 - design
@@ -16,15 +17,8 @@ tags:
 
 The creator of Comic Sans, Vincent Connare, [revealing the irony of it](http://www.connare.com/whycomic.htm):
 
+> Comic Sans was NOT designed as a typeface but as a solution to a problem with the often overlooked part of a computer program's interface, the typeface used to communicate the message.
 
-
-> 
-Comic Sans was NOT designed as a typeface but as a solution to a problem with the often overlooked part of a computer program's interface, the typeface used to communicate the message.
-
-There was no intention to include the font in other applications other than those designed for children when I designed Comic Sans. The inspiration came at the shock of seeing Times New Roman used in an inappropriate way.
-
-
-
+> There was no intention to include the font in other applications other than those designed for children when I designed Comic Sans. The inspiration came at the shock of seeing Times New Roman used in an inappropriate way.
 
 He also has this presentation dubbed [I hate Comic Sans (pdf)](http://www.connare.com/ihatecomic.pdf)
-

_src/_posts/2012-05-22-how-yahoo-killed-flickr-and-lost-the-internet.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-22 01:00:03+00:00
-layout: post
-slug: how-yahoo-killed-flickr-and-lost-the-internet
+layout: link
+
 title: How Yahoo Killed Flickr and Lost the Internet
+linkurl: http://gizmodo.com/5910223/how-yahoo-killed-flickr-and-lost-the-internet
+author: Matthias Kretschmann
+
+date: 2012-05-22 01:00:03+00:00
 wordpress_id: 2125
 categories:
 - photography
@@ -14,10 +15,6 @@ post_format:
 
 Great insight article into what and how exactly Yahoo managed to screw this up.
 
-
-
 > It is a case study of what can go wrong when a nimble, innovative startup gets gobbled up by a behemoth that doesn't share its values. What happened to Flickr? The same thing that happened to so many other nimble, innovative startups who sold out for dollars and bandwidth: Yahoo.
 
-
-
 As a year long Flickr user I'm just sad about this but hey, we got [500px](http://500px.com/kremalicious) which probably wouldn't exist without Flickr's decline.

_src/_posts/2012-05-22-responsive-images-and-web-standards-at-the-turning-point.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-22 06:23:26+00:00
-layout: post
-slug: responsive-images-and-web-standards-at-the-turning-point
+layout: link
+
 title: Responsive Images and Web Standards at the Turning Point
+linkurl: http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/
+author: Matthias Kretschmann
+
+date: 2012-05-22 06:23:26+00:00
 wordpress_id: 2133
 categories:
 - design
@@ -18,12 +19,8 @@ tags:
 
 Good overview about the patterns currently being discussed:
 
-
-
 > Recently, all of the ongoing discussion around responsive images just got real: a solution is currently being discussed with the WHATWG. And we’re in the thick of it now: we’re throwing around references to `picture` and `img set`; [...]
 
 The markup pattern that gets selected stands to have a tremendous influence on how developers build websites in the future. Not just responsive or adaptive websites, either. All websites.
 
-
-
 Naturally I'm in the `picture` camp, this just makes most sense to me.

_src/_posts/2012-05-23-like-modern-heating-only-more-badass.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-23 14:23:38+00:00
-layout: post
-slug: like-modern-heating-only-more-badass
+layout: image
+
 title: Like modern heating only more badass
+image: 41b5a454a43811e1989612313815112c_7.jpeg
+author: Matthias Kretschmann
+
+date: 2012-05-23 14:23:38+00:00
 wordpress_id: 2142
 categories:
 - photos

_src/_posts/2012-05-26-html-for-icon-font-usage.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-26 05:13:58+00:00
-layout: post
-slug: html-for-icon-font-usage
+layout: link
+
 title: HTML for Icon Font Usage
+linkurl: http://css-tricks.com/html-for-icon-font-usage/
+author: Matthias Kretschmann
+
+date: 2012-05-26 05:13:58+00:00
 wordpress_id: 2154
 categories:
 - design
@@ -14,25 +15,12 @@ post_format:
 
 Chris Coyier on an accessible implementation for icon fonts:
 
-
-
 > Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best. [...]
 
 And our major goals here are:
 
-
-> 
-> 
-	
 >   1. As good of semantics as we can get
-> 
-	
 >   2. As little awkwardness for screen readers as possible
-> 
-
-
-
-
 
 Spoiler: the key is to map the icons to the _Private Use Area_ instead of "real" characters in the font files and injecting them with pseudo elements.
 

_src/_posts/2012-05-27-balloon.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-05-27 17:16:11+00:00
-layout: post
-slug: balloon
+layout: image
+
 title: Balloon
+image: 690fe368a81911e1b2fe1231380205bf_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-05-27 17:16:11+00:00
 wordpress_id: 2167
 categories:
 - photos

_src/_posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-06-05 16:25:56+00:00
-layout: post
-slug: can-we-please-move-past-apples-silly-faux-real-uis
+layout: link
+
 title: Can We Please Move Past Apple's Silly, Faux-Real UIs?
+linkurl: http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis
+author: Matthias Kretschmann
+
+date: 2012-06-05 16:25:56+00:00
 wordpress_id: 2187
 categories:
 - design
@@ -14,18 +15,8 @@ post_format:
 
 Much has been written about the good and bad of skeuomorphism. Tom Hobbs wrote a [great piece](http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis) putting everything together.
 
-
-
 > Digitally re-creating real materials and analog objects very quickly becomes aesthetics for aesthetics sake. It’s hard to believe that all but a minute percentage of Apple’s user base has a tan-suede–bound calendar or book of any sort, or anything else that looks remotely similar. Unfortunately, these are the characteristics of skeuomorphism that a vast majority of UI designers employ when they use this approach (see Blackberry’s Playbook). Ultimately, it encourages designers to become less critical and less inventive, which is detrimental to evolving new and improved solutions.
 
-
-
 He argues skeuomorphism hinders designers in creating something truly innovative. Also, some good arguments on why Microsoft's Metro interface isn't the answer:
 
-
-
 > Sure, these graphic elements don’t use “superfluous” drop shadows and renderings, but they don’t really use space any more efficiently than many skeuomorphic iPhone apps. It is highly debatable whether they need to be as graphically dominant or whether the aesthetic form is purely driven by function. Metro’s graphic elements are largely abstracted representations of their function, so from a modernist point of view, it is interesting to think of what else could be stripped away to enhance their function.
-
-
-
-

_src/_posts/2012-06-13-retina-icons-in-wordpress-3-4.markdown

@@ -1,10 +1,10 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-06-13 19:01:20+00:00
 layout: post
-slug: retina-icons-in-wordpress-3-4
+
 title: Retina icons in WordPress 3.4
+author: Matthias Kretschmann
+
+date: 2012-06-13 19:01:20+00:00
 wordpress_id: 2195
 categories:
 - design
@@ -18,11 +18,10 @@ And it looks gorgeous. Here's a detail screenshot of the admin area in 3.4 in fu
 
 ![](/media/wp34_retina_icons.png)
 
-
 So if you're a plugin developer you absolutely want to make sure to include retina assets for your plugin, like a double sized admin menu icon.
 
 There's just one problem: WordPress doesn't include anything to make this easy for developers. The functions `register_post_type()` and `add_menu_page()` only allow you to define one image as menu icon which then gets inserted as `img` tag. 
 
-[![](/media/kremalicious-Teaser-WP-Icon-Template-150x150.png)](/wp-icons-template/)If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my [WordPress icons template post](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved.
+[![](/media/kremalicious-Teaser-WP-Icon-Template.png)](/wp-icons-template/)If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my [WordPress icons template post](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved.
 
 And no, [SVG for your icons are not the solution](http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html).

_src/_posts/2012-06-27-typography-window.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-06-27 01:29:13+00:00
-layout: post
-slug: typography-window
+layout: image
+
 title: Typography window
+image: 80a136dabff711e188131231381b5c25_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-06-27 01:29:13+00:00
 wordpress_id: 2215
 categories:
 - photos

_src/_posts/2012-06-30-why-files-exist.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-06-30 18:17:33+00:00
-layout: post
-slug: why-files-exist
+layout: link
+
 title: Why Files exist
+linkurl: http://blog.filepicker.io/post/26157006600/why-files-exist
+author: Matthias Kretschmann
+
+date: 2012-06-30 18:17:33+00:00
 wordpress_id: 2219
 categories:
 - design
@@ -14,59 +15,16 @@ post_format:
 
 [This](http://blog.filepicker.io/post/26157006600/why-files-exist) has been said many times, but it bears repeating:
 
-
-
-
-
-> 
-  
-> 
 > Files are abstraction layers around content that are necessary for interoperability. Without the notion of a File or other similar shared content abstraction, the ability to use different applications with the same information grinds to a halt, which hampers innovation and user experience.
-> 
-> 
-
-
-
-
-
 
 A good example are all those note taking apps on iOS which usually only require plain text. When using Apple's iCloud to sync their data, they lock your content into one app without any way to access this from another app. Compare that to apps using Dropbox for note syncing: I can throw as many apps I would like at my notes folder full of .txt files. The note app you're using has some new quirks after the latest update? Just switch to another app. Apple's iCloud syncing Notes.app having some new quirks after the latest update? Well, you and your content are doomed.
 
-
-
-
-
 But the solution can't be throwing a full file system at the user:
 
-
-
-
-
-> 
-  
-> 
 > Now, I agree with Steve Jobs [saying in 2005](http://tech.fortune.cnn.com/2012/06/06/steve-jobs-why-is-the-file-system-the-face-of-the-os/) that a full blow filesystem with folders and all the rest might not be necessary, but in every OS there needs to be at least some user-facing notion of a file, some system-wide agreed upon way to package content and send it between applications. Otherwise we’ll just end up with a few monolithic applications that do everything poorly.
-> 
-> 
-
-
-
-
-
 
 Just applying the PC concept of a file system to post-PC devices, like Android and Dropbox did, makes only geeks happy but not the majority of users. While useful it's still too abstract for most users. That's why even Android kind of hides the file system, there's no built in app to browse it directly. But at least Android has [Intents](http://developer.android.com/guide/components/intents-filters.html), allowing users to send any data between different apps.
 
-
-
-
-
 Apple already solved the problem of a file system being too abstract for users a long time ago, but without any app lock in. The [Newton OS on MessagePads](http://en.wikipedia.org/wiki/Newton_(platform)) stored everything in object-oriented databases called [soups](http://www.canicula.com/newton/prog/soups.htm). The "union soup" could be accessed by any app ("packages" to be exactly) on the system. Today, this is happening  only rudimentarily on iOS, like when you start typing a recipient in Mail and it gets auto-completed from the Address Book data which obviously is only possible with Apple's apps.
 
-
-
-
-
 Soups took away the need of manual file management without cutting access to the content. iCloud needs to be the new soup.
-
-
-

_src/_posts/2012-07-04-newton-reconsidered.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-07-04 01:19:17+00:00
-layout: post
-slug: newton-reconsidered
+layout: link
+
 title: Newton, Reconsidered
+linkurl: http://techland.time.com/2012/06/01/newton-reconsidered/
+author: Matthias Kretschmann
+
+date: 2012-07-04 01:19:17+00:00
 wordpress_id: 2239
 categories:
 - design
@@ -17,12 +18,8 @@ tags:
 
 Skeuomorphism on mobile devices has come a long way:
 
-
-
 > Using a second unit, Steve Capps, one of Newton’s creators, showed how you could use it to order a pizza by moving topping icons onto a pie and then sending out a fax. In 1992, that was show-stopping stuff.
 
-
-
 But instead of another Newton history article, this one is an interesting "hands-on assessment" of Apple's first PDA. Almost 20 years after its release, Harry McCracken got himself a fully working MessagePad H1000 over eBay and tested it. 
 
 Would be interesting to know if the same could be done with an iPhone 4S or Galaxy Nexus in 2032. I doubt it.

_src/_posts/2012-07-07-what-makes-twitter-twitter.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-07-07 08:18:58+00:00
-layout: post
-slug: what-makes-twitter-twitter
+layout: link
+
 title: What makes Twitter Twitter?
+linkurl: http://alt.adrianshort.co.uk/blog/2012/06/30/what-makes-twitter-twitter/
+author: Matthias Kretschmann
+
+date: 2012-07-07 08:18:58+00:00
 wordpress_id: 2252
 categories:
 - links
@@ -14,14 +15,10 @@ post_format:
 
 Couldn't agree more:
 
-
-
 > People. 140-character messages. That’s Twitter.
 
 So simple. So powerful. So fragile.
 
 So leave it alone. We’re talking. Don’t interrupt.
 
-
-
 But just rebuilding Twitter before it gets more "richer stories" and crammed by ads probably won't help: [We could build an open Twitter, but would anyone use it?](http://gigaom.com/2012/07/04/we-could-build-an-open-twitter-but-would-anyone-use-it/)

_src/_posts/2012-07-11-crossdressing-compression-and-colliders-the-first-photo-on-the-web.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-07-11 21:00:07+00:00
-layout: post
-slug: crossdressing-compression-and-colliders-the-first-photo-on-the-web
+layout: link
+
 title: 'Crossdressing, Compression and Colliders: The First Photo on the Web'
+linkurl: http://motherboard.vice.com/2012/7/10/crossdressing-compression-and-colliders-the-first-photo-on-the-web
+author: Matthias Kretschmann
+
+date: 2012-07-11 21:00:07+00:00
 wordpress_id: 2261
 categories:
 - photography
@@ -16,10 +17,6 @@ tags:
 
 Great piece about the first photo on the web, not only interesting from a technical point of view:
 
-
-
 > de Gennaro had been toying around with a scanned .gif version of the July 18th photo, using version one of Photoshop on his color Macintosh. The .gif format was only five years old at the time, but its efficient compression had made it the best way to edit color images without slowing PCs to a crawl.
 
-
-
 The photo is quite horrible but so emblematic for a lot of stuff the web is used for today. As the article states, this was basically the beginning of fun on the web. But, although really not great, I don't think [Niépce's photo](/niepces-camera-obscura-and-the-history-of-the-first-photograph/) was that horrible.

_src/_posts/2012-07-15-add-your-web-site-to-the-windows-8-metro-ui.markdown

@@ -1,10 +1,10 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-07-15 16:19:55+00:00
 layout: post
-slug: add-your-web-site-to-the-windows-8-metro-ui
 title: Add your web site to the Windows 8 Metro UI
+image: kremalicious-Teaser-Metro-Tile.jpg
+author: Matthias Kretschmann
+
+date: 2012-07-15 16:19:55+00:00
 wordpress_id: 2269
 categories:
 - design
@@ -15,52 +15,25 @@ tags:
 
 Windows 8 and Internet Explorer 10 make it possible to pin your site to the Metro start screen as a new tile. The tile then is a bookmark to your site and you can control the icon and background color being used.
 
-
-
-
-
 There was a great [post](https://github.com/h5bp/html5-boilerplate/issues/1136) about that in the H5BP issues section and Microsoft has a [full explanation](https://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx). It all comes down to this:
 
-
-
 <!-- more -->
 
-
-
-
-
   * create a 144x144px image with your logo/icon filling the whole canvas and a transparent background
-
-
   * add two `meta` tags in the `head` of your site defining the image path and optionally the tile color
-
-
   * as noted in the [issue post](https://github.com/h5bp/html5-boilerplate/issues/1136), the image must be saved as a transparent 32bit PNG ("24bit" in Photoshop's Save For Web dialogue) without running it through image optimisers like [ImageOptim](http://imageoptim.com)
-
-
-
-
-
+  
 While the size is the same as for the iPad 3 homescreen icon, I strongly suggest not using the apple-touch-icon for this. In fact, it might be best not using a full color image at all. Using a white monochrome version of your logo or icon will make your site's tile blend in perfectly with the default Metro UI system tiles.
 
-
-
-
-
 As an example, I just [pushed](https://github.com/kremalicious/kremalicious2/commit/4c7e215f4abecde4385028767b633be1278f277e) the Metro [tile image](/metro-tile.png) for kremalicious.com with those `meta` tags:
 
-
-
-[html]<meta name="msapplication-TileImage" content="/metro-tile.png"/>
+{% highlight html %}
+<meta name="msapplication-TileImage" content="/metro-tile.png"/>
 <meta name="msapplication-TileColor" content="#015565"/>
-[/html]
-
-
+{% endhighlight %}
 
 When browsing the site in Windows 8/Internet Explorer 10, users have the choice of pinning it to the start screen:
 
-
-
 ![](/media/Windows-8-Metro-tile-kremalicious.png)
 
 And this is how it looks like on the Windows 8 start screen:

_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.markdown

@@ -1,10 +1,12 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-07-16 14:36:58+00:00
 layout: post
-slug: using-kbd-for-fun-and-profit
-title: Using <kbd> for fun and profit
+
+title: Using &lt;kbd&gt; for fun and profit
+image: kremalicious-kbdfun-teaser.png
+style: poststyle-2300.min.css
+author: Matthias Kretschmann
+
+date: 2012-07-16 14:36:58+00:00
 wordpress_id: 2300
 categories:
 - design
@@ -13,142 +15,58 @@ categories:
 
 There's this HTML element meant for marking up keyboard keys named `<kbd>`. Obviously it can be styled with CSS so why not use it to make those elements look a bit more like hardware or the iOS and Android software keys.
 
-<!-- more -->
-
 The above picture might be blurry depending on the device you're using so here's a live rendered demo:
 
-
-
-Light Dark iOS An dro id
-
-
-
-
+<kbd>Light</kbd> <kbd class="dark">Dark</kbd> <kbd class="ios">iOS</kbd> <kbd class="android">An</kbd> <kbd class="android dark">dro</kbd> <kbd class="android color">id</kbd>
 
 They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.
 
-
-
-
-
-[Demo](http://lab.kremalicious.com/kbdfun/) [Download](https://github.com/kremalicious/kbdfun/zipball/master) [Github](https://github.com/kremalicious/kbdfun/)
-
-
-
-
+<a class="btn btn-primary" href="http://lab.kremalicious.com/kbdfun/">Demo</a> 
+<a class="btn btn-primary icon-download" href="https://github.com/kremalicious/kbdfun/zipball/master">Download</a> 
+<a class="btn icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
 
 ## Usage
 
 
-
-
-
 ### CSS
 
-
-
-
-
 Just drop in the kbdftw.css in your `head`:
 
-
-
-
-
-[html]<link rel="stylesheet" href="kbdfun.css">[/html]
-
-
-
-
+{% highlight html %}<link rel="stylesheet" href="kbdfun.css">{% endhighlight %}
 
 If you want to use the Android key style, include roboto.css before:
 
-
-
-
-
-[html]<link rel="stylesheet" href="roboto.css">
-<link rel="stylesheet" href="kbdfun.css">[/html]`
-
-
+{% highlight html %}<link rel="stylesheet" href="roboto.css">
+<link rel="stylesheet" href="kbdfun.css">{% endhighlight %}
 
 You also need to add all the Roboto font files from assets/fonts to your project.
 
-
-
 ### LESS
 
-
-
-
-
 There're some variables in the kbdfun.less file you can customize. 
 
-
-
-
-
 For the Android style, there's roboto.less as include at the end. But the font files won't load unless you uncomment the .font-roboto line in kbdftw.less. This is to make sure, users won't download all the font files if you don't use the Android style.
 
-
-
-
-
 ### Markup
 
-
-
-
-
 The default styling are light keys with Lucida Grande as font:
 
-
-[html]<kbd>Q</kbd>[/html] becomes Q
-
-
+{% highlight html %}<kbd>Q</kbd>{% endhighlight %} becomes <kbd>Q</kbd>
 
 Add a dark class to get the dark keys:
 
-
-
-
-
-[html]<kbd class="dark">Q</kbd>[/html] becomes Q
-
-
-
-
+{% highlight html %}<kbd class="dark">Q</kbd>{% endhighlight %} becomes <kbd class="dark">Q</kbd>
 
 Adding an ios or android class gives a replica of those system keys. Android uses three different colors on the default keyboard.
 
+{% highlight html %}<kbd class="ios">Q</kbd>{% endhighlight %} becomes <kbd class="ios">Q</kbd>
 
+{% highlight html %}<kbd class="android">Q</kbd>{% endhighlight %} becomes <kbd class="android">Q</kbd>
 
+{% highlight html %}<kbd class="android dark">Q</kbd>{% endhighlight %} becomes <kbd class="android dark">Q</kbd>
 
-
-[html]<kbd class="ios">Q</kbd>[/html] becomes Q
-
-
-
-
-
-[html]<kbd class="android">Q</kbd>[/html] becomes Q
-
-
-
-
-
-[html]<kbd class="android dark">Q</kbd>[/html] becomes Q
-
-
-
-
-
-[html]<kbd class="android color">Q</kbd>[/html] becomes Q
-
-
+{% highlight html %}<kbd class="android color">Q</kbd>{% endhighlight %} becomes <kbd class="android color">Q</kbd>
 
 I've let the default `display: inline` intact so all padding on the `kbd` elements won't affect the line-height of the surrounding text. This leads to problems when you want to use them over multiple lines so just make them `display: inline-block` in this scenario.
 
-
-
-Pro Tip: if you want to replicate all Mac keyboards after 2003 you have to get VAG rounded for the font.
+Pro Tip: if you want to replicate all Mac keyboards after 2003 you have to get VAG rounded for the font.

_src/_posts/2012-07-19-first-computer-generated-graphics-film-from-1963.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-07-19 12:30:56+00:00
-layout: post
-slug: first-computer-generated-graphics-film-from-1963
+layout: link
+
 title: First computer generated graphics film from 1963
+linkurl: http://techchannel.att.com/play-video.cfm/2012/7/18/AT&T-Archives-First-Computer-Generated-Graphics-Film
+author: Matthias Kretschmann
+
+date: 2012-07-19 12:30:56+00:00
 wordpress_id: 2336
 categories:
 - design
@@ -16,8 +17,6 @@ tags:
 
 From the [AT&T; Archives](http://techchannel.att.com/play-video.cfm/2012/7/18/AT&T-Archives-First-Computer-Generated-Graphics-Film):
 
-
-
 > This film was a specific project to define how a particular type of satellite would move through space. Edward E. Zajac made, and narrated, the film, which is considered to be possibly the very first computer graphics film ever. Zajac programmed the calculations in FORTRAN, then used a program written by Zajac's colleague, Frank Sinden, called ORBIT. The original computations were fed into the computer via punch cards [...]
 
 

_src/_posts/2012-07-20-mmmmh-coffee.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-07-20 11:02:30+00:00
-layout: post
-slug: mmmmh-coffee
+layout: image
+
 title: Mmmmh, Coffee
+image: 66a6e0c0d25a11e1a94522000a1e8aaf_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-07-20 11:02:30+00:00
 wordpress_id: 2345
 categories:
 - photos

_src/_posts/2012-08-07-projectpurple.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-08-07 13:15:44+00:00
 layout: post
-slug: projectpurple
+
 title: Project Purple
+image: Teaser-Project-Purple.png
+author: Matthias Kretschmann
+
+date: 2012-08-07 13:15:44+00:00
 wordpress_id: 2350
 categories:
 - goodies
@@ -14,54 +15,32 @@ tags:
 ---
 
 It [has been revealed](http://www.theverge.com/2012/8/3/3218846/schiller-forstall-fight-club-day-three-apple-samsung-trial/in/2971889) the original iPhone was developed in a locked down building under the name "Project Purple". Because of the secrecy involved, the team decorated the building with [Fight Club](http://www.imdb.com/title/tt0137523/) references:
-
-
-
 > Forstall said that "on the front door of the Purple Dorm we put a sign up that said 'Fight Club'... because the first rule of that project was to not talk about it outside those doors."
 
-
-
 If you don't think this demands a wallpaper, you're weird.
 
 <!-- more -->
 
-![](/media/project-purple-nexus-kremalicious-960x600.png)
+![](/media/project-purple-nexus-kremalicious.png)
 
 The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple uses 3200px as width for the default wallpapers in Mountain Lion but it seems a good width for now. And a height of 2048px makes this big size perfectly usable for the iPad 3 too.
 
 ![](/media/Project-Purple-Dribbble.png)
 
-
-
 ## Download
 
-
-
 Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files:
 
-[download_button]
-
-
-
-
+<a class="btn btn-block icon-download-alt" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
 	
   * [Desktop/rMBP/iPad 3 (3200x2048)](/media/project-purple-kremalicious.png)
-
 	
   * [Laptop/Nexus 7/Galaxy Nexus (1280x800)](/media/project-purple-nexus-kremalicious.png)
-
 	
   * [iPad (1024x1024)](/media/project-purple-ipad-kremalicious.png)
 
-
   * [iPhone (640x960)](/media/project-purple-iphone4-kremalicious.png)
 
-
-
-
-
 ## License
 
-
-
 ![Creative Commons License](http://i.creativecommons.org/l/by-nc/3.0/de/88x31.png)Project Purple by [Matthias Kretschmann](http://kremalicious.com) is licensed under a [Creative Commons Attribution-Noncommercial 3.0 Germany License](http://creativecommons.org/licenses/by-nc/3.0/de/).

_src/_posts/2012-08-08-amazingly-early.markdown

@@ -1,10 +1,11 @@
 ---
-author: Matthias Kretschmann
-comments: true
-date: 2012-08-08 04:11:48+00:00
-layout: post
-slug: amazingly-early
+layout: image
+
 title: Amazingly early
+image: 2ca7a094e10f11e1868c12313817a130_7.jpg
+author: Matthias Kretschmann
+
+date: 2012-08-08 04:11:48+00:00
 wordpress_id: 2384
 categories:
 - photos

_src/assets/less/content.less

@@ -22,7 +22,7 @@
 
 // post content
 .entry-content {
-	h1, h2, h3, h4 {
+	h1, h2 {
 		.heading-band;
 	}
 }
@@ -75,6 +75,8 @@
 		color: @text-color-light;
 		font-size: @font-size-mini;
         
+        p { margin-bottom: 0; }
+        
         @media @breakpoint2 {
             text-align: right;
         }
@@ -100,6 +102,10 @@
     a { margin-right: 1em }
 }
 
+.modtime {
+    
+}
+
 
 // LINK POST
 /////////////////////////////////////

_src/assets/less/media.less

@@ -31,6 +31,11 @@ a.linkedImage img {
 	border-color: @link-color-hover;
 }
 
+.teaser {
+    margin-top: @line-height-computed*1.5;
+    margin-bottom: @line-height-computed*1.5;
+}
+
 
 // WORDPRESS MEDIA 
 /////////////////////////////////////

_src/assets/less/poststyle-2300.less

@@ -0,0 +1,102 @@
+/*
+KBDFUN
+
+*/
+
+/*  Le kbd
+---------------------- */
+
+kbd {
+	font-size: 18px;
+	color: #444444;
+	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
+	font-weight: normal;
+	font-style: normal;
+	text-align: center;
+	line-height: 1em;
+	text-shadow: 0 1px 0 #fff;
+	display: inline;
+	padding: .3em .55em;
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	border-radius: 6px;
+	-moz-background-clip: padding;
+	-webkit-background-clip: padding-box;
+	background-clip: padding-box;
+	border: 1px solid #bbb;
+	background-color: #f7f7f7;
+	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0)));
+	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+	background-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+	background-repeat: repeat-x;
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a000000', endColorstr='#00000000', GradientType=0);
+	box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc;
+}
+
+kbd.dark {
+	color: #eeeeee;
+	text-shadow: 0 -1px 0 #000000;
+	border-color: #000;
+	background-color: #4d4c4c;
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.5)), color-stop(80%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
+	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
+	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
+	background-image: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
+	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
+	background-repeat: no-repeat;
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=0);
+	box-shadow: 0px 2px 0 #000000, 0 3px 1px #999999, inset 0 1px 1px #aaaaaa, inset 0 -1px 3px #272727;
+}
+
+kbd.ios {
+	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
+	color: #000;
+	border-color: rgba(0, 0, 0, 0.6);
+	border-top-color: rgba(0, 0, 0, 0.4);
+	background-color: ##b7b7bc;
+	background-image: -moz-linear-gradient(top, #efeff0, #b7b7bc);
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#efeff0), to(#b7b7bc));
+	background-image: -webkit-linear-gradient(top, #efeff0, #b7b7bc);
+	background-image: -o-linear-gradient(top, #efeff0, #b7b7bc);
+	background-image: linear-gradient(top, #efeff0, #b7b7bc);
+	background-repeat: repeat-x;
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffefeff0', endColorstr='#ffb7b7bc', GradientType=0);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
+}
+
+kbd.android {
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	color: #ffffff;
+	text-shadow: none;
+	padding: .3em;
+	border: 1px solid rgba(0, 0, 0, 0.05);
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	-moz-background-clip: padding;
+	-webkit-background-clip: padding-box;
+	background-clip: padding-box;
+	background: #5e5e5e;
+	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #868686;
+}
+
+kbd.android.dark {
+	background: #222222;
+	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050;
+}
+
+kbd.android.color {
+	background: #083c5b;
+	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b;
+}
+
+@font-face {
+	font-family: 'RobotoRegular';
+	src: url('../fonts/Roboto-Regular-webfont.eot');
+	src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+

_src/assets/less/typography.less

@@ -39,11 +39,11 @@ h1,h2,h3,h4,h5,h6,
 }
 
 h1,
-h2,
-h3 {
+h2 {
   margin-top: @line-height-computed*2;
   margin-bottom: @line-height-computed*2;
 }
+h3,
 h4,
 h5,
 h6 {
@@ -111,6 +111,12 @@ em {
 	font-style: italic;
 }
 
+hr {
+    border: 0;
+    .divider-bottom;
+    margin-bottom: @line-height-computed*2
+}
+
 
 // QUOTES
 /////////////////////////////////////

_src/index.html

@@ -49,7 +49,7 @@ title: Home
                 
                 {% if post.image %}
                     <a href="{{ post.url }}">
-                        <img src="/media/{{ post.image }}" />
+                        <img class="teaser" src="/media/{{ post.image }}" />
                     </a>
                 {% endif %}