Move to clamp for scaling font sizes based on screen size.

client/src/scss/_cards.scss

@@ -17,7 +17,7 @@ $response-background: $call-color;
 
 #game {
   --card-aspect-ratio: #{size.$card-ratio};
-  @include size.fluid-type(20rem, 64rem, 0.5rem, 0.8rem);
+  font-size: clamp(0.5rem, 2vw, 1rem);
 }
 
 .game-card {

client/src/scss/_material.scss

@@ -22,6 +22,12 @@
 
   --mdc-icon-size: 0.75em;
   --mdc-icon-button-size: 1.5em;
+
+  --mdc-typography-button-font-size: 1em;
+}
+
+mwc-tab .svg-inline--fa {
+  font-size: 1em;
 }
 
 mwc-icon-button {

client/src/scss/cards/_size.scss

@@ -13,23 +13,6 @@ $card-compact-ratio: 1;
   @return calc(#{$width} * 1 / #{$ratio});
 }
 
-@function strip-unit($value) {
-  @return $value / ($value * 0 + 1);
-}
-
-@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
-  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;
-  }
-}
-
 .minimal-card-size #game {
   --card-aspect-ratio: 0;
 

client/src/scss/pages/_start.scss

@@ -3,7 +3,7 @@
 @use "../_colors";
 
 .start {
-  @include size.fluid-type(20rem, 64rem, 0.8rem, 1rem);
+  font-size: clamp(0.5rem, 3vw, 1rem);
   --card-aspect-ratio: #{size.$card-ratio};
   padding: 0.5em 0 0 0;