Add some variables to the scss files

Use the period API call for the program schema

resources/assets/sass/abstracts/_mixin.scss

@@ -9,16 +9,19 @@
   padding: 0;
   list-style: none;
 }
-@mixin post_date {
-  display: block;
-  height: 30px;
+@mixin font_small {
   font-family: Nunito, serif;
   font-size: 12px;
   font-weight: 500;
   line-height: 3.17;
   letter-spacing: normal;
   text-align: left;
-  color: #666;
+}
+@mixin post_date {
+  @include font_small;
+  color: $text-secondary-color;
+  display: block;
+  height: 30px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -34,11 +37,7 @@
 }
 
 @mixin program_name {
-  font-family: Nunito, serif;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 3.17;
-  text-align: left;
+  @include font_small;
   color: #000;
   margin-right: 10px;
   text-decoration: none;