From 936c346b0ae77d6944f426a9733d05ca63735e2d Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@intracto.com>
Date: Thu, 2 Nov 2017 16:24:37 +0100
Subject: #5: two dimentional media-queries and vmin-units

---
 scss/_rfs.scss | 57 ++++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 40 insertions(+), 17 deletions(-)

diff --git a/scss/_rfs.scss b/scss/_rfs.scss
index 91a0fb4..271d95d 100644
--- a/scss/_rfs.scss
+++ b/scss/_rfs.scss
@@ -25,6 +25,9 @@ $rfs-breakpoint-unit: px !default;
 // which doesn't support vw-units to incorrectly render the font-size.
 $rfs-mobile-first: false !default;
 
+// Resize font-size based on screen height and width.
+$rfs-two-dimensional: false !default;
+
 // Factor of decrease.
 $rfs-factor: 5 !default;
 
@@ -32,16 +35,16 @@ $rfs-factor: 5 !default;
 $rfs-rem-value: 16 !default;
 
 // Remove px-unit from $rfs-minimum-font-size for calculations.
-@if (unit($rfs-minimum-font-size) == "px") {
+@if unit($rfs-minimum-font-size) == "px" {
   $rfs-minimum-font-size: $rfs-minimum-font-size / ($rfs-minimum-font-size * 0 + 1);
-} @else if (unit($rfs-minimum-font-size) == "rem") {
+} @else if unit($rfs-minimum-font-size) == "rem" {
   $rfs-minimum-font-size: $rfs-minimum-font-size / ($rfs-minimum-font-size * 0 + (1 / $rfs-rem-value));
 }
 
 // Remove unit from $rfs-breakpoint for calculations.
-@if (unit($rfs-breakpoint) == "px") {
+@if unit($rfs-breakpoint) == "px" {
   $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
-} @else if (unit($rfs-breakpoint) == "rem" or unit($rfs-breakpoint) == "em") {
+} @else if unit($rfs-breakpoint) == "rem" or unit($rfs-breakpoint) == "em" {
   $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + (1 / $rfs-rem-value));
 }
 
@@ -50,7 +53,7 @@ $rfs-rem-value: 16 !default;
   $rfs-suffix: "";
 
   // Add !important suffix if needed.
-  @if ($important) {
+  @if $important {
     $rfs-suffix: " !important";
   }
 
@@ -64,9 +67,9 @@ $rfs-rem-value: 16 !default;
     $rfs-fluid: null;
 
     // Remove px-unit from $fs for calculations.
-    @if (unit($fs) == "px") {
+    @if unit($fs) == "px" {
       $fs: $fs / ($fs * 0 + 1);
-    } @else if (unit($fs) == "rem") {
+    } @else if unit($fs) == "rem" {
       $fs: $fs / ($fs * 0 + (1 / $rfs-rem-value));
     }
 
@@ -87,6 +90,7 @@ $rfs-rem-value: 16 !default;
     // If $rfs-factor == 1, no rescaling will take place.
     @if $fs > $rfs-minimum-font-size and $rfs-factor != 1 {
       $min-width: null;
+      $variable-unit: null;
 
       // Calculate minimum font-size for given font-size.
       $fs-min: $rfs-minimum-font-size + ($fs - $rfs-minimum-font-size) / $rfs-factor;
@@ -101,40 +105,59 @@ $rfs-rem-value: 16 !default;
         $min-width: #{$fs-min}px;
       }
 
+      // If two-dimensional, use smallest of screen width and height.
+      @if $rfs-two-dimensional {
+        $variable-unit: vmin;
+      } @else {
+        $variable-unit: vw;
+      }
+
       // Calculate the variable width between 0 and $rfs-breakpoint.
-      $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}vw;
+      $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};
 
       // Set the calculated font-size.
       $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
     }
 
     // Rendering.
-    @if ($rfs-fluid == null) {
+    @if $rfs-fluid == null {
       // Only render static font-size if no fluid font-size is available.
       font-size: $rfs-static;
     } @else {
-      $mq-width: null;
+      $mq-value: null;
 
       // RFS breakpoint formatting.
       @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
-        $mq-width: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
+        $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
       } @else if $rfs-breakpoint-unit == px {
-        $mq-width: #{$rfs-breakpoint}px;
+        $mq-value: #{$rfs-breakpoint}px;
       } @else {
         @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
       }
 
-      @if ($rfs-mobile-first) {
+      @if $rfs-mobile-first {
         font-size: $rfs-fluid;
 
-        @media (min-width: #{$mq-width}) {
-          font-size: $rfs-static;
+        @if $rfs-two-dimensional {
+          @media (min-width: #{$mq-value}) and (min-height: #{$mq-value}) {
+            font-size: $rfs-static;
+          }
+        } @else {
+          @media (min-width: #{$mq-value}) {
+            font-size: $rfs-static;
+          }
         }
       } @else {
         font-size: $rfs-static;
 
-        @media (max-width: #{$mq-width}) {
-          font-size: $rfs-fluid;
+        @if $rfs-two-dimensional {
+          @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
+            font-size: $rfs-fluid;
+          }
+        } @else {
+          @media (max-width: #{$mq-value}) {
+            font-size: $rfs-fluid;
+          }
         }
       }
     }
-- 
cgit v1.2.3