From dc0d666eb6757a77aa9e27b31b7c5851fec2cda0 Mon Sep 17 00:00:00 2001
From: Laura Kalbag <me@laurakalbag.com>
Date: Wed, 15 Jan 2020 14:18:45 +0000
Subject: [PATCH] Make thicc title heading scale according to viewport height.

But only once the browser is wide enough, and also cap the scaling height before the font gets too big!
---
 assets/css/base.scss | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/assets/css/base.scss b/assets/css/base.scss
index 5ed719b6..58cd1f0b 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -138,7 +138,8 @@ ul[class] {
 }
 
 .title__thicc {
-  font-size: 8vh;
+  // a sensible base font size
+  font-size: 3rem;
   line-height: 0.75;
   padding: 0;
   margin: 0.5rem 0rem;
@@ -146,6 +147,22 @@ ul[class] {
   // margin: 13rem -7rem;
 }
 
+@media (min-width: 51rem) and (min-height: 400px) {
+  // a dramatic font size
+  .title__thicc {
+    font-size: 12vh;
+  } 
+}
+
+@media (min-width: 51rem) and (min-height: 850px) {
+  // cap the max-height of the title
+  // at the same size that 12vh computes to
+  // when the viewport is 850px high
+  .title__thicc {
+    font-size: 6.75rem;
+  } 
+}
+
 @media (min-width: 800px) {
   .title__thicc {
       grid-column: 1 / 3;