From 887231517a013bfd5cda152723c3bad6d33c9c71 Mon Sep 17 00:00:00 2001
From: Ramon de C Valle <rcvalle@users.noreply.github.com>
Date: Mon, 21 Sep 2020 21:38:03 -0700
Subject: [PATCH] Use CSS custom properties (variables)

---
 _layouts/default.html | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 8df8263..ecf2e59 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -10,12 +10,26 @@
     <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css" crossorigin="anonymous" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" crossorigin="anonymous" rel="stylesheet">
     <style>
+      :root {
+        --color-black: #000;
+        --color-gray-100: #f8f9fa;
+        --color-gray-200: #e9ecef;
+        --color-gray-300: #dee2e6;
+        --color-gray-400: #ced4da;
+        --color-gray-500: #adb5bd;
+        --color-gray-600: #6c757d;
+        --color-gray-700: #495057;
+        --color-gray-800: #343a40;
+        --color-gray-900: #212529;
+        --color-white: #fff;
+      }
+
       article > h1 a {
-        color: #212529;
+        color: var(--color-gray-900);
       }
 
       article > h1 a:hover {
-        color: #212529;
+        color: var(--color-gray-900);
         text-decoration: none;
       }
 
@@ -32,13 +46,13 @@
       }
 
       .pagination > .page-item > .page-link {
-        color: #212529;
+        color: var(--color-gray-900);
       }
 
       .pagination > .page-item.active > .page-link {
-        color: #212529;
-        background-color: #e9ecef;
-        border-color: #dee2e6;
+        color: var(--color-gray-900);
+        background-color: var(--color-gray-200);
+        border-color: var(--color-gray-300);
       }
     </style>
   </head>