working on responsivity

sass/_font-mixins.scss

@@ -10,6 +10,9 @@
   &:hover {
     color: #fff;
   }
+  @media #{$tablet} {
+    font-size: 1.4rem;
+  }
   @media #{$smalldesktop} {
     font-size: 2.5rem;
   }
@@ -60,10 +63,12 @@
 
 @mixin home-title-small {
   //small titles on desktop on home and archives
+  @media #{$tablet} {
+    font-size: 1.3rem;
+    color: #000;
+  }
   @media #{$smalldesktop} {
     font-size: 1.5rem;
-    //-webkit-text-stroke: #000 1px;
-    color: #000;
   }
   @media #{$bigdesktop} {
     font-size: 2rem;
@@ -98,9 +103,10 @@
   }
 }
 
-
-
 @mixin home-metadata-big {
+  @media #{$tablet} {
+    font-size: 1.2rem;
+  }
   @media #{$smalldesktop} {
     font-size: 2rem;
   }
@@ -121,6 +127,9 @@
   &.current {
     color: #000 !important;
   }
+  @media #{$tablet} {
+    font-size: 1rem;
+  }
   @media #{$smalldesktop} {
     font-size: 1.2rem;
   }
@@ -129,41 +138,28 @@
   }
 }
 
-// @mixin bedo-hover-title {
-//   font: 900 12rem "Westeinde Caption";
-//   color: transparent;
-//   -webkit-text-stroke: #fff 1px;
-//   text-transform: uppercase;
-// }
-
-// @mixin bedo-hover-sub {
-//   font: 900 1.4rem "Westeinde Caption";
-//   color: #fff;
-// }
-
 @mixin single-title {
   font: 800 3rem "Butler";
   color: #000;
+  @media #{$tablet} {
+    font-size: 3.5rem;
+  }
   @media #{$smalldesktop} {
     font-size: 5rem;
   }
 }
 
-// @mixin single-title2 {
-//   font: bold 3rem "Butler";
-//   color: #000;
-//   @media #{$smalldesktop} {
-//     font-size: 5rem;
-//   }
-// }
-
 @mixin single-metadata {
   font: bold 1.4rem "Westeinde Caption";
-  @media #{$smalldesktop} {
-    font: 900 2rem "Westeinde Caption";
+  @media #{$tablet} {
+    font: 900 1.5rem "Westeinde Caption";
     color: #fff;
     -webkit-text-stroke: #000 1px;
   }
+  @media #{$smalldesktop} {
+    font-size: 2rem;
+    
+  }
 }
 
 @mixin single-author {