add text colors

assets/scss/_typography.scss

@@ -1,5 +1,3 @@
-
-
 .base-font {
     font-family: $font-family-base;
 }
@@ -7,18 +5,20 @@
 a.text-light, a.text-dark {
     transition: all .3s ease;
     &:hover{
-        color: $primary !important; // Yeah, I'm using "!important", what of it?
+        color: $primary !important;
     }
 }
 
 .top-title{
     font-size: 20px;
-    position: relative;
     display: block;
-    margin-bottom: 30px;
+    color: $dark;
+    @extend .mb-3;
 }
+
 .pre-line{
     margin-left: 20px;
+    position: relative;
     &::before{
         position: absolute;
         content: '';
@@ -30,42 +30,18 @@ a.text-light, a.text-dark {
         background: $secondary-color;
     }
 }
-// body{
-//   font-family: $primary-font;
-//   font-size: 16px;
-//   color: $text-color;
-// }
-
-// h1, .h1, h2, h3, h4, h5, h6{
-//   font-family: $font-family-header;
-// }
-
-// p{
-//   font-size: 16px;
-//   color: $text-color;
-// }
-
-// h1{
-//   font-size: 60px;
-// }
 
-// h2{
-//   font-size: 50px;
-// }
-
-// h3{
-//   font-size: 30px;
-// }
-
-// h4{
-//   font-size: 25px;
-// }
-
-// h5{
-//   font-size: 18px;
-// }
-
-// h6{
-//   font-size: 15px;
-//   font-weight: 300;
-// }
+// This fixes the fact that with `markdownify` we can't add `text-light`
+// directly onto the generated `h1`, `h2` etc.
+.text-white {
+    h1, h2, h3, h4, h5, h6 {
+        color: $white;
+    }
+}
+@each $color, $value in $theme-colors {
+    .text-#{$color} {
+        h1, h2, h3, h4, h5, h6, p, span {
+            color: $value;
+        }
+    }
+}

assets/scss/_variables.scss

@@ -50,7 +50,9 @@ $h6-font-size:   15px;
 $headings-margin-bottom: 1.5rem;
 $line-height-base: 1.75;
 
-
+// Coloring
+$headings-color: #282f49;
+$body-color: #7e7e8a;
 
 // Misc
 $link-hover-decoration: none;