use flexbox for links

3 files changed, 12 insertions, 12 deletions

diff --git a/exampleSite/themes/black-and-light b/exampleSite/themes/black-and-light
new file mode 120000
index 0000000..c25bddb
--- /dev/null
+++ b/exampleSite/themes/black-and-light
@@ -0,0 +1 @@
+../..
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index d20c4f8..2e31470 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -15,10 +15,10 @@
 
   <div id=links>
     {{ if .PrevInSection }}
-      <a class="left-justify" href="{{.PrevInSection.Permalink}}">&laquo; {{.PrevInSection.Title}}</a>
+      <a href="{{.PrevInSection.Permalink}}">&laquo;&nbsp;{{.PrevInSection.Title}}</a>
     {{ end }}
     {{ if .NextInSection }}
-      <a class="right-justify" href="{{.NextInSection.Permalink}}">{{.NextInSection.Title}} &raquo;</a>
+      <a href="{{.NextInSection.Permalink}}">{{.NextInSection.Title}}&nbsp;&raquo;</a>
     {{ end }}
   </div>
 </section>
diff --git a/layouts/partials/styles.html b/layouts/partials/styles.html
index 8647880..5d2122a 100644
--- a/layouts/partials/styles.html
+++ b/layouts/partials/styles.html
@@ -33,15 +33,8 @@
     display: block;
   }
 
-  .left-justify {
-    float: left;
-    width: 45%;
-  }
-
-  .right-justify {
-    float:right;
-    width: 45%;
-  }
+  .left-justify { float: left; }
+  .right-justify { float:right; }
 
   pre, code {
     font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
@@ -272,11 +265,17 @@
   }
 
   #links {
+    display: flex;
+    justify-content: space-between;
     margin: 50px 0 0 0;
   }
 
+  #links :nth-child(1) {
+    margin-right:0.5em;;
+  }
+
   #links :nth-child(2) {
-    float:right;
+    margin-left:0.5em;;
   }
 
   #not-found {