Merge branch 'taxonomies'

7 files changed, 59 insertions, 38 deletions

diff --git a/archetypes/default.md b/archetypes/default.md
index e111a46..e5a889b 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -2,4 +2,5 @@
 title = ""
 description = ""
 tags = ["x", "y"]
+categories = ["x", "y"]
 +++
diff --git a/layouts/index.html b/layouts/index.html
index 1a783ed..8d51ea5 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -7,7 +7,6 @@
     </section>
     <main class="content" role="main" id="main-content">
         <h1>Yay!</h1>
-        {{ $baseurl := .Site.BaseURL }}
         {{ $paginator := .Paginate (where .Data.Pages.ByDate.Reverse "Type" "post") 3 }}
         {{ range $paginator.Pages }}
         <article class="post post--preview">
@@ -18,11 +17,7 @@
                 <ul class="post__meta__infos">
                     <li class="post-meta__date"><time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "02 January 2006" }}</time></li>
                 </ul>
-                <ul class="post__meta__tags">
-                    {{ range .Params.tags }}
-                    <li><a href="{{ $baseurl }}tags/{{ . }}">{{ . }} </a></li>
-                    {{ end }}
-                </ul>
+                {{ partial "post-taxonomies" . }}
             </footer>
             <section class="post__excerpt">
                 <p>{{ .Summary }}&hellip;</p>
diff --git a/layouts/partials/post-list.html b/layouts/partials/post-list.html
index 486e423..941ceb0 100644
--- a/layouts/partials/post-list.html
+++ b/layouts/partials/post-list.html
@@ -1,4 +1,3 @@
-{{ $baseurl := .Site.BaseURL }}
 {{ $paginator := .Paginate (where .Data.Pages.ByDate.Reverse "Type" "post") }}
 {{ range $paginator.Pages }}
 <article class="post post--preview">
@@ -9,11 +8,7 @@
         <ul class="post__meta__infos">
             <li class="post-meta__date"><time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "02 January 2006" }}</time></li>
         </ul>
-        <ul class="post__meta__tags">
-            {{ range .Params.tags }}
-            <li><a href="{{ $baseurl }}tags/{{ . }}">{{ . }} </a></li>
-            {{ end }}
-        </ul>
+        {{ partial "post-taxonomies" . }}
     </footer>
 </article>
 {{ end }}
diff --git a/layouts/partials/post-meta.html b/layouts/partials/post-meta.html
index 1790b69..411db61 100644
--- a/layouts/partials/post-meta.html
+++ b/layouts/partials/post-meta.html
@@ -1,13 +1,8 @@
-{{ $baseurl := .Site.BaseURL }}
 <ul class="post__meta__infos">
     <li class="post__meta__author" itemprop="author">{{ .Site.Params.author }}</li>
     <li class="post__meta__date"><time datetime="{{ .Date.Format "2006-01-02" }}" itemprop="datePublished">{{ .Date.Format "02 January 2006" }}</time></li>
 </ul>
-<ul class="post__meta__tags">
-    {{ range .Params.tags }}
-    <li><a href="{{ $baseurl }}tags/{{ . }}">{{ . }} </a></li>
-    {{ end }}
-</ul>
+{{ partial "post-taxonomies" . }}
 <meta itemprop="url" content="{{ .Permalink }}">
 <meta itemprop="wordCount" content="{{ .WordCount }}" />
 <meta itemprop="timeRequired" content="{{ .ReadingTime }} Min" />
diff --git a/layouts/partials/post-taxonomies.html b/layouts/partials/post-taxonomies.html
new file mode 100644
index 0000000..da4733d
--- /dev/null
+++ b/layouts/partials/post-taxonomies.html
@@ -0,0 +1,9 @@
+{{ $baseurl := .Site.BaseURL }}
+<ul class="post__meta__taxonomies">
+    {{ range .Params.tags }}
+    <li class="tags"><a href="{{ $baseurl }}tags/{{ . | urlize }}">{{ . }} </a></li>
+    {{ end }}
+    {{ range .Params.categories }}
+    <li class="categories"><a href="{{ $baseurl }}categories/{{ . | urlize }}">{{ . }} </a></li>
+    {{ end }}
+</ul>
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index e91623f..55e3ff4 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -542,9 +542,7 @@ html {
 
 .post__meta {
     color: #52616D;
-    display: table;
     font-style: italic;
-    width: 100%;
 }
 
 .post__meta a {
@@ -564,9 +562,7 @@ html {
 }
 
 .post__meta [class^=post__meta__] {
-    display: table-cell;
-    vertical-align: middle;
-    margin: 0;
+    margin: .25em 0 0;
     padding-left: 0;
     list-style-type: none;
 }
@@ -586,12 +582,28 @@ html {
     margin-right: 0.5em;
 }
 
-.post__meta .post__meta__infos {
-    text-align: left;
+.post__meta [class^=post__meta__] .tags + .categories::before {
+    color: #E5E1D1;
+    content: "|";
+    display: inline-block;
+    margin-right: 0.5em;
 }
 
-.post__meta .post__meta__tags {
-    text-align: right;
+@media screen and (min-width: 60em) {
+    .post__meta {
+        display: table;
+        width: 100%;
+    }
+    .post__meta [class^=post__meta__] {
+        display: table-cell;
+        vertical-align: middle;
+    }
+    .post__meta .post__meta__infos {
+        text-align: left;
+    }
+    .post__meta .post__meta__taxonomies {
+        text-align: right;
+    }
 }
 
 .pagination {
diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss
index 23859ab..1aede19 100644
--- a/static/sass/custom/layout.scss
+++ b/static/sass/custom/layout.scss
@@ -67,9 +67,7 @@ html {
 // Post meta
 .post__meta {
     color: $light;
-    display: table;
     font-style: italic;
-    width: 100%;
 
     a { color: $light; }
     a:hover { color: $base; }
@@ -77,9 +75,7 @@ html {
     a:active { color: $shadow; }
 
     [class^=post__meta__] {
-        display: table-cell;
-        vertical-align: middle;
-        margin: 0;
+        margin: .25em 0 0;
         padding-left: 0;
         list-style-type: none;
 
@@ -94,18 +90,36 @@ html {
         li + li::before {
             @include  _separator-before($light);
         }
-    }
 
-    .post__meta__infos {
-        text-align: left;
+        .tags + .categories::before {
+            @include  _separator-before($neutral, "|");
+        }
     }
+}
+
+// Desktop breakpoint
+@media screen and (min-width: 60em) {
+    .post__meta {
+        display: table;
+        width: 100%;
 
-    .post__meta__tags {
-        text-align: right;
+        [class^=post__meta__] {
+            display: table-cell;
+            vertical-align: middle;
+        }
+
+        .post__meta__infos {
+            text-align: left;
+        }
+
+        .post__meta__taxonomies {
+            text-align: right;
+        }
     }
 }
 
 
+
 // Pagination
 .pagination {
     color: $light;
@@ -142,7 +156,7 @@ html {
         display: table;
         padding: .5em 1.5em;
         width: 100%;
-        
+
         .headline {
             padding: 0;
         }