Repsonsive font sizing #28

getgrav · May 28, 2018 · 31db83b · 31db83b
1 parent 8be85a5
commit 31db83b
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 60 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,8 @@
-# v1.0.4
+# v1.1.0
 ## mm/dd/2018
 
 1. [](#new)
-
-1. [](#improved)
-
+    * Responsive font sizing [#28](https://github.com/getgrav/grav-theme-quark/issues/28)
 1. [](#bugfix)
     * Proper fix for sticky footer in IE10 and IE11 [#21](https://github.com/getgrav/grav-theme-quark/issues/21)
 

diff --git a/css-compiled/theme.css b/css-compiled/theme.css
diff --git a/css-compiled/theme.min.css b/css-compiled/theme.min.css
diff --git a/scss/theme/_forms.scss b/scss/theme/_forms.scss
@@ -7,7 +7,7 @@ form {
   span.required {
     color: $error-color;
     font-weight: 700;
-    font-size: 150%;
+    font-size: 1.2rem;
   }
 
   .form-input[type=range] {

diff --git a/scss/theme/_framework.scss b/scss/theme/_framework.scss
@@ -40,24 +40,34 @@ section.section {
   background-size: cover;
   background-position: center;
 
+  h1 {
+    color: $header-text-dark;
+    font-size: 4rem;
+  }
+
+  h2 {
+    color: rgba($header-text-dark, 0.8);
+    font-size: 2.5rem;
+  }
+
   &.hero-fullscreen {
-    height: 100vh;
+    min-height: 100vh;
   }
 
   &.hero-large {
-    height: 500px;
+    min-height: 500px;
   }
 
   &.hero-medium {
-    height: 400px;
+    min-height: 400px;
   }
 
   &.hero-small {
-    height: 110px;
+    min-height: 110px;
   }
 
   &.hero-tiny {
-    height: 8rem;
+    min-height: 8rem;
   }
 
   .header-fixed & {
@@ -68,19 +78,24 @@ section.section {
   //  background-attachment: fixed;
   //}
 
-  h1 {
-    color: $header-text-dark;
-    font-size: 4rem !important;
+  @include breakpoint(md) {
+    h1 {
+      font-size: 3rem;
+    }
+    h2 {
+      font-size: 1.75rem;
+    }
   }
 
-  h2 {
-    color: rgba($header-text-dark, 0.8);
-    font-size: 2.5rem !important;
+  @include breakpoint(sm) {
+    h1 {
+      font-size: 2rem;
+    }
+    h2 {
+      font-size: 1.25rem;
+    }
   }
 
-  h1 + h2 {
-    margin-top: -45px !important;
-  }
 
   &.text-light {
     h1 {
@@ -92,7 +107,7 @@ section.section {
   }
 
   p {
-    font-size: 130%;
+    font-size: .9rem;
     font-weight: 300;
   }
 

diff --git a/scss/theme/_header.scss b/scss/theme/_header.scss
@@ -85,8 +85,4 @@ body.header-fixed.header-animated {
 
 .login-status-wrapper {
   white-space: nowrap;
-
-  .icon {
-    font-size: 120%;
-  }
 }
diff --git a/scss/theme/_mixins.scss b/scss/theme/_mixins.scss
@@ -52,3 +52,26 @@
     color: $light-color;
   }
 }
+
+@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;
+      }
+    }
+  }
+}
diff --git a/scss/theme/_mobile.scss b/scss/theme/_mobile.scss
@@ -11,7 +11,7 @@
 .mobile-logo {
   svg {
     max-width: 150px;
-    margin-top: 1rem;
+    margin-top: .7rem;
     margin-left: 1.4rem;
 
     path {
@@ -47,6 +47,8 @@
     z-index: 100;
     transition: opacity .25s ease, top 0.5s ease;
 
+    $bar-offset: $mobile-button-height / 3;
+
     &:hover {
       opacity: .7;
     }
@@ -55,7 +57,7 @@
       position: fixed;
 
       .top {
-        transform: translateY(11px) translateX(0) rotate(45deg);
+        transform: translateY($bar-offset) translateX(0) rotate(45deg);
         background: $mobile-color-active;
       }
       .middle {
@@ -64,15 +66,15 @@
       }
 
       .bottom {
-        transform: translateY(-11px) translateX(0) rotate(-45deg);
+        transform: translateY(-($bar-offset)) translateX(0) rotate(-45deg);
         background: $mobile-color-active;
       }
     }
 
     span {
       background: $mobile-color-main;
       border: none;
-      height: 5px;
+      height: 4px;
       width: 100%;
       position: absolute;
       top: 0;
@@ -81,11 +83,11 @@
       cursor: pointer;
 
       &:nth-of-type(2) {
-        top: 11px;
+        top: $bar-offset;
       }
 
       &:nth-of-type(3) {
-        top: 22px;
+        top: $bar-offset * 2;
       }
     }
   }

diff --git a/scss/theme/_typography.scss b/scss/theme/_typography.scss
@@ -1,3 +1,7 @@
+html {
+  @include fluid-type($size-xs, $size-xl, $min-responsive-font-size, $html-font-size);
+}
+
 // Header Overrides
 h1, h2, h3, h4, h5, h6 {
   margin-top: 2rem;
@@ -26,17 +30,23 @@ h6, .h6 {
 .title-h1h2 {
   h1  {
     font-weight: 100;
+    margin-bottom: 0;
+    line-height: 1.1;
+
     strong, bold {
-    font-weight: 400;
+      font-weight: 400;
+    }
   }
+  h1 + h2 {
+    line-height: 1.1;
+    margin-top: 0;
   }
 
 }
 
 // Typography Hints
 .title-h1h2, .title-center {
   h1 + h2 {
-    margin-top: -35px;
     margin-bottom: 50px;
     font-weight: 700;
   }
@@ -119,7 +129,7 @@ strong {
   margin-bottom: 1rem;
 
   .icon {
-    font-size: 120%;
+    font-size: 1rem;
   }
 }
 

diff --git a/scss/theme/_variables.scss b/scss/theme/_variables.scss
@@ -3,6 +3,7 @@ $horiz-padding: 1rem;
 $vert-padding: 2rem 0 2rem;
 
 // Fonts
+$min-responsive-font-size: 16px;
 $title-font-family: $base-font-family, $fallback-font-family !default;
 
 // Header
@@ -24,5 +25,5 @@ $dropmenu-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
 $mobile-color-main: $primary-color;
 $mobile-color-active: #FFF;
 $mobile-color-link: #FFF;
-$mobile-button-height: 27px;
-$mobile-button-width: 35px;
+$mobile-button-height: 24px;
+$mobile-button-width: 28px;