Stylize pagination buttons

1 files changed, 46 insertions, 0 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 49b1f88..0b50f03 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -698,3 +698,49 @@ figure:not(.code-container) figcaption .figure-number {
     text-transform: uppercase;
     color: #333
 }
+
+#pagination {
+    display: flex;
+    justify-content: space-between;
+    margin: 30px 0;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border: 1px solid #ccc
+}
+
+#pagination a {
+    text-transform: uppercase;
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    padding: 6px 12px;
+    color: #fff;
+    background: linear-gradient(to bottom,#333 0,#222 40%,#111 50%,#222 60%,#333 100%);
+    border: 1px solid #000;
+    border-left: 4px solid #2e8b57;
+    text-decoration: none;
+    box-shadow: 2px 2px 0#ccc
+}
+
+#pagination a:hover {
+    background: #2e8b57;
+    border-color: #000;
+    color: #fff
+}
+
+#pagination a:only-child {
+    margin-left: auto
+}
+
+#pagination a[rel=prev]:only-child {
+    margin-right: auto;
+    margin-left: 0
+}
+
+#pagination a[rel=next]:only-child {
+    margin-left: auto
+}
+
+#pagination:empty {
+    display: none;
+}