style for taxonomies

2 files changed, 45 insertions, 19 deletions

diff --git a/static/css/style.css b/static/css/style.css
index ca10bfd..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__taxonomies {
-    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 abe4883..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%;
+
+        [class^=post__meta__] {
+            display: table-cell;
+            vertical-align: middle;
+        }
 
-    .post__meta__taxonomies {
-        text-align: right;
+        .post__meta__infos {
+            text-align: left;
+        }
+
+        .post__meta__taxonomies {
+            text-align: right;
+        }
     }
 }
 
 
+
 // Pagination
 .pagination {
     color: $light;