Update style/theme

config.toml

@@ -9,3 +9,4 @@ copyright = "Ariejan de Vroom"
 
 [permalinks] 
   posts =  "/:year/:month/:day/:slug/"
+

themes/outerspace/layouts/_default/single.html

@@ -4,13 +4,13 @@
             <h1>{{ .Title }}</h1>
 
             {{ if eq .Section "posts" }}
-            <time class="date">{{ .Date.Format "2 January, 2006" }}</time>
-
-            <ul class="tags">
-                {{ range .Params.tags }}
-                <li><a href="/tags/{{ . | urlize }}">{{ . }}</a></li>
-                {{ end }}
-            </ul>
+            <p class="meta">
+              <time class="date">{{ .Date.Format "2 January, 2006" }}</time>
+              • tagged {{ partial "post/tag/list" . }}
+              • {{ .WordCount }} words
+              • ~{{ .ReadingTime }} minutes
+              </p>
+            </p>
             {{ end }}
 
             <div class="body">

themes/outerspace/layouts/index.html

@@ -1,16 +1,28 @@
 {{ partial "header.html" . }}
 
 <section class="posts">
-    {{ range where .Data.Pages "Section" "posts" }}
+    {{ range first 10 (where .Data.Pages "Section" "posts") }}
     <article id="{{ .Slug }}" class="teaser-post">
         <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+        <p class="meta">
         <time class="date">{{ .Date.Format "2 January, 2006" }}</time>
-        <ul class="tags">
-            {{ range .Params.tags }}
-            <li><a href="/tags/{{ . | urlize }}">{{ . }}</a></li>
-            {{ end }}
-        </ul>
-        <div class="separator"></div>
+        • tagged {{ partial "post/tag/list" . }}
+        • {{ .WordCount }} words
+        • ~{{ .ReadingTime }} minutes
+        </p>
+        <p class="description">{{ .Description | safeHTML }}</p>
+    </article>
+    {{ end }}
+
+    {{ range after 10 (where .Data.Pages "Section" "posts") }}
+    <article id="{{ .Slug }}" class="teaser-post">
+        <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
+        <p class="meta">
+        <time class="date">{{ .Date.Format "2 January, 2006" }}</time>
+        • tagged {{ partial "post/tag/list" . }}
+        • {{ .WordCount }} words
+        • ~{{ .ReadingTime }} minutes
+        </p>
     </article>
     {{ end }}
 </section>

themes/outerspace/layouts/partials/post/tag/link.html

@@ -0,0 +1 @@
+<a href="{{ . | urlize }}">{{ . }}</a>

themes/outerspace/layouts/partials/post/tag/list.html

@@ -0,0 +1,3 @@
+{{ with .Params.tags }}
+{{ delimit (apply (apply (sort .) "partial" "post/tag/link" ".") "chomp" ".") ", " " and " }}
+{{ end }}

themes/outerspace/static/css/outerspace.css

@@ -1,5 +1,5 @@
 @charset 'UTF-8';
-@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
+@import url(//fonts.googleapis.com/css?family=PT+Sans:400,400italic,700);
 
 /* Rest */
 html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
@@ -9,9 +9,9 @@ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre
 
 body {
     background: #FFFFFF;
-    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
-    font-size: 13px;
-    line-height: 20px;
+    font-family: "PT Sans", Helvetica, Arial, sans-serif;
+    font-size: 1em;
+    line-height: 1.25em;
 }
 
 .container {
@@ -24,20 +24,21 @@ p, ul, ol, pre {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    font-family: 'Source Sans Pro';
+    font-family: "PT Sans", Helvetica, Arial, sans-serif;
     font-weight: 700;
-    color: #191919;
+    color: #333;
+}
+
+h2 {
+    font-size: 1.2em;
+    line-height: 1.4em;
 }
 
 a {
-    color: #f00;
+    color: #ff2c00;
     text-decoration: none;
 }
 
-a:hover {
-    border-bottom: 1px solid #f00;
-}
-
 strong {
     font-weight: 700;
     background-color: #f9ffbf;
@@ -47,6 +48,18 @@ em {
     font-style: italic;
 }
 
+pre > code {
+    font-size: 1.2em;
+}
+
+code {
+    font-size: 1.1em;
+    color: #f00;
+    background-color: #efefef;
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
 blockquote {
     display: block;
     margin-left: 2em;
@@ -58,7 +71,7 @@ blockquote {
 header {
     padding-bottom: 2em;
     margin-bottom: 2em;
-    font-family: 'Source Sans Pro';
+    font-family: "PT Sans", Helvetica, Arial, sans-serif;
     border-bottom: 1px solid #e9e9e9;
 }
 
@@ -125,37 +138,40 @@ footer {
 
 .posts .teaser-post {
     margin-bottom: 2em;
-    text-align: center;
 }
 
 .posts .teaser-post h2 {
     font-size: 1.6em;
-    padding-bottom: 0.5em;
 }
 
-.posts .teaser-post h2 a {
+.posts .teaser-post h3 {
+    font-size: 1.2em;
+}
+
+.posts .teaser-post h2 a,
+.posts .teaser-post h3 a {
     color: #191919;
 }
 
 .posts .teaser-post .date {
-    padding-bottom: 0.5em;
-}
-
-ul.tags {
-    padding-bottom: 0.5em;
-    margin-left: 0;
-}
-
-ul.tags li {
     display: inline-block;
 }
 
-ul.tags li::before {
-    content: " • ";
+/* .posts .teaser-post .meta { */
+.single-post .meta {
+    padding: 0 0.3em;
+    color: #999;
+    font-size: 0.8em;
 }
 
-ul.tags li:first-child:before {
-    content: "";
+.posts .teaser-post .meta {
+    margin-bottom: 0;
+    color: #999;
+    font-size: 0.8em;
+}
+
+.posts .teaser-post .meta a {
+    color: #f66;
 }
 
 .posts .teaser-post .separator {
@@ -219,11 +235,6 @@ ul#social li a {
 }
 
 @media (min-width: 720px) {
-    body {
-        font-size: 16px;
-        line-height: 24px;
-    }
-
     .container {
         width: 630px;
     }