Introduce color variables

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

assets/styles/layouts/single.scss

@@ -1,5 +1,5 @@
 body.kind-page {
-  background-color: #e5e9f2;
+  background-color: $bg-secondary;
   position: relative;
 
   .wrapper {
@@ -20,11 +20,10 @@ body.kind-page {
       padding-right: 1rem;
 
       .content {
-        background: #e5e9f2;
         padding-top: 1.5rem;
 
         .read-area {
-          background-color: #f9fafc;
+          background-color: $bg-primary;
 
           .hero-area {
             margin-top: 3rem;
@@ -55,12 +54,9 @@ body.kind-page {
                 width: 120px;
                 -o-object-fit: cover;
                 object-fit: cover;
-                background-color: #f9fafc;
+                background-color: $bg-primary;
                 padding: 5px;
               }
-              p {
-                color: #8392a5;
-              }
             }
 
             .title {
@@ -84,19 +80,6 @@ body.kind-page {
               h6 {
                 margin-top: 1.3rem;
               }
-
-              blockquote {
-                border-left: 4px solid #248aaa;
-                background-color: #248baa15;
-                padding: 0.3rem;
-                padding-left: 1rem;
-
-                & > p {
-                  color: #3c4858;
-                  margin-top: 0.5rem;
-                  margin-bottom: 0.5rem;
-                }
-              }
             }
 
             .next-prev-navigator {
@@ -120,7 +103,7 @@ body.kind-page {
       flex: 20%;
       order: 3;
       max-width: 20%;
-      transition: all ease-out 0.5s;
+      @include transition();
 
       .toc-holder {
         position: sticky;
@@ -128,14 +111,14 @@ body.kind-page {
         padding-top: 1rem;
         overflow-x: hidden;
         overflow-y: auto;
-        background-color: #f9fafc;
+        background-color: $bg-primary;
         margin-right: 0.5rem;
-        transition: all ease-out 0.3s;
+        @include transition();
 
         .toc {
           position: relative;
           padding-top: 0px;
-          transition: all ease-out 0.3s;
+          @include transition();
 
           nav {
             padding-top: 0px;
@@ -143,7 +126,7 @@ body.kind-page {
             display: flex;
             flex-direction: column;
             align-items: flex-start;
-            transition: all ease-out 0.3s;
+            @include transition();
 
             ul {
               list-style: none;
@@ -155,17 +138,17 @@ body.kind-page {
             .nav-link {
               padding: 0;
               padding-left: 0.5rem;
-              transition: all ease-out 0.3s;
-              color: #1c2d41;
+              @include transition();
+              color: $heading-color;
 
               &:hover,
               &:focus,
               &.active {
                 padding-left: 1rem;
                 padding-right: 0.5rem;
-                background-color: #248aaa;
-                color: #f9f9f9;
-                transition: all ease-out 0.3s;
+                background-color: $accent-color;
+                color: $text-over-accent-color;
+                @include transition();
               }
             }
           }
@@ -193,21 +176,21 @@ body.kind-page {
     position: fixed;
     bottom: 0rem;
     right: 1rem;
-    color: #248aaa;
+    color: $accent-color;
     font-size: 24pt;
     z-index: 900000;
     visibility: hidden;
 
     &:hover {
-      color: #2098d1;
+      color: $hover-over-accent-color;
     }
     &.show {
       visibility: visible;
     }
 
     i {
-      box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-      background-color: #f9f9f9;
+      box-shadow: $box-shadow;
+      background-color: $bg-primary;
       border-radius: 50%;
     }
   }