mixin for before and pagination style

4 files changed, 88 insertions, 18 deletions

diff --git a/static/css/style.css b/static/css/style.css
index bb61016..924f140 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -523,7 +523,7 @@ html {
     color: #FFFFFF;
     content: "|";
     display: inline-block;
-    margin-right: .5em;
+    margin-right: 0.5em;
 }
 
 .content {
@@ -549,6 +549,7 @@ html {
 .post__meta {
     color: #52616D;
     display: table;
+    font-style: italic;
     width: 100%;
 }
 
@@ -588,7 +589,7 @@ html {
     color: #52616D;
     content: "•";
     display: inline-block;
-    margin-right: .5em;
+    margin-right: 0.5em;
 }
 
 .post__meta .post__meta__infos {
@@ -599,9 +600,44 @@ html {
     text-align: right;
 }
 
+.pagination {
+    color: #52616D;
+    margin-top: 1.5em;
+    text-align: right;
+}
+
+.pagination .pagination__infos + a {
+    margin-left: .25em;
+}
+
+.pagination .pagination__current {
+    color: #C44741;
+    font-size: 1.5em;
+}
+
+.pagination .pagination__infos + a::before {
+    color: #E5E1D1;
+    content: "•";
+    display: inline-block;
+    margin-right: 0.5em;
+}
+
+.pagination .pagination__prev + .pagination__next {
+    margin-left: .25em;
+}
+
+.pagination .pagination__prev + .pagination__next::before {
+    color: #E5E1D1;
+    content: "|";
+    display: inline-block;
+    margin-right: 0.5em;
+}
+
 html {
     color: #2C343B;
     font-size: 1em;
+    font-variant-ligatures: common-ligatures;
+    text-rendering: optimizeLegibility;
 }
 
 .template {
diff --git a/static/sass/_mixins.scss b/static/sass/_mixins.scss
index b6f6a40..c845a54 100644
--- a/static/sass/_mixins.scss
+++ b/static/sass/_mixins.scss
@@ -16,4 +16,12 @@
 @mixin _background-opacity($color, $opacity: 0.5) {
     background-color: $color; /* The Fallback */
     background-color: rgba($color, $opacity);
+}
+
+/// Separator on ::before
+@mixin _separator-before($color: inherit, $content: "•", $margin: 0.5em) {
+        color: $color;
+        content: $content;
+        display: inline-block;
+        margin-right: $margin;
 }
\ No newline at end of file
diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss
index 06a3c5a..6a99b84 100644
--- a/static/sass/custom/layout.scss
+++ b/static/sass/custom/layout.scss
@@ -48,10 +48,7 @@ html {
     }
 
     .item + .item::before {
-        color: $white;
-        content:"|";
-        display: inline-block;
-        margin-right: .5em;
+        @include  _separator-before($white, "|");
     }
 }
 
@@ -84,6 +81,7 @@ html {
 .post__meta {
     color: $light;
     display: table;
+    font-style: italic;
     width: 100%;
 
     a { color: $light; }
@@ -98,20 +96,17 @@ html {
         padding-left: 0;
         list-style-type: none;
 
-    > * {
-        display: inline-block;
-    }
+        > * {
+            display: inline-block;
+        }
 
-    li + li {
-        margin-left: .25em;
-    }
+        li + li {
+            margin-left: .25em;
+        }
 
-    li + li::before {
-        color: $light;
-        content:"•";
-        display: inline-block;
-        margin-right: .5em;
-    }
+        li + li::before {
+            @include  _separator-before($light);
+        }
     }
 
     .post__meta__infos {
@@ -121,4 +116,33 @@ html {
     .post__meta__tags {
         text-align: right;
     }
+}
+
+
+// Pagination
+.pagination {
+    color: $light;
+    margin-top: 1.5em;
+    text-align: right;
+
+    .pagination__infos + a {
+        margin-left: .25em;
+    }
+
+    .pagination__current {
+        color: $contrast;
+        font-size: $fontSize * 1.5;
+    }
+
+    .pagination__infos + a::before {
+        @include  _separator-before($neutral);
+    }
+
+    .pagination__prev + .pagination__next {
+        margin-left: .25em;
+    }
+
+    .pagination__prev + .pagination__next::before {
+        @include  _separator-before($neutral, "|");
+    }
 }
\ No newline at end of file
diff --git a/static/sass/custom/typography.scss b/static/sass/custom/typography.scss
index 83d79b7..dda018a 100644
--- a/static/sass/custom/typography.scss
+++ b/static/sass/custom/typography.scss
@@ -5,6 +5,8 @@
 html {
     color: $base;
     font-size: $fontSize;
+    font-variant-ligatures: common-ligatures;
+    text-rendering: optimizeLegibility;
 }
 
 .template {