Making Banner's font responsive

client/src/styles/styles.scss

@@ -1,24 +1,3 @@
-body{
-  overflow-y:scroll;
-
-  &::-webkit-scrollbar-track {
-    border: 1px solid #000;
-    padding: 2px 0;
-    background-color: #404040;
-  }
-
-  &::-webkit-scrollbar {
-    width: 10px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-    background-color: #737272;
-    border: 1px solid #000;
-  }
-}
-
 $break-big: 1280px;
 $break-middle: 992px;
 $break-small: 768px;
@@ -40,6 +19,52 @@ $transition-time: 0.3s;
 
 $advanced-algos-red: rgb(245,88,88);
 
+@function strip-unit($value) {
+  @return $value / ($value * 0 + 1);
+}
+
+@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
+  $u1: unit($min-vw);
+  $u2: unit($max-vw);
+  $u3: unit($min-font-size);
+  $u4: unit($max-font-size);
+
+  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
+    & {
+
+      font-size: $min-font-size;
+      @media screen and (min-width: $min-vw) {
+        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+      }
+
+      @media screen and (min-width: $max-vw) {
+        font-size: $max-font-size;
+      }
+    }
+  }
+}
+
+body{
+  overflow-y:scroll;
+
+  &::-webkit-scrollbar-track {
+    border: 1px solid #000;
+    padding: 2px 0;
+    background-color: #404040;
+  }
+
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: #737272;
+    border: 1px solid #000;
+  }
+}
+
 header.menu{
   transition: $transition-time;
   &.notOnTop{
@@ -293,13 +318,14 @@ header.menu{
       font-size: 64px;
       line-height: 78px;
       font-weight: 100;
+      @include fluid-type($break-extra-small, $break-big, 26px, 64px);
     }
     .text{
       color: white;
-      font-size: 20px;
       line-height: 30px;
       font-weight: 600;
       padding: 20px 0 0.5em 0;
+      @include fluid-type($break-extra-small, $break-big, 18px, 20px);
     }
   }
 }