From 6948a8fdaa81fa9d176c5518fbae8725fc8aa2d8 Mon Sep 17 00:00:00 2001
From: Laura Kalbag <me@laurakalbag.com>
Date: Wed, 15 Jan 2020 12:50:50 +0000
Subject: [PATCH 1/4] Add cache folder to gitignore.

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index c37e42b4..4346e32e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .DS_Store
 node_modules
 dist
-config.codekit3
\ No newline at end of file
+config.codekit3
+.cache
\ No newline at end of file

From a4bc2a16f3ab28ac6cf2361a5c4795fa7fc4e57d Mon Sep 17 00:00:00 2001
From: Laura Kalbag <me@laurakalbag.com>
Date: Wed, 15 Jan 2020 12:54:40 +0000
Subject: [PATCH 2/4] Remove div containing intro title and description.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This div is not used in any CSS, and is preventing the title and description from being positionable on the containing grid. I’ve moved the title ID attribute on to the title itself so we don’t lose the landmark.
---
 11ty/index.njk | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/11ty/index.njk b/11ty/index.njk
index 00b0828b..4e2f1cee 100644
--- a/11ty/index.njk
+++ b/11ty/index.njk
@@ -3,10 +3,8 @@ layout: layouts/index.njk
 ---
 
 <section id="introduction" class="auto-grid">
-      <div id="title">
-        <h1 class="title__thicc">Self-Defined</h1>
-        <p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
-      </div>
+      <h1 class="title__thicc" id="title">Self-Defined</h1>
+      <p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
       <div>
         <p class="summary">
           Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the diverse perspectives of the modern world.

From bb1469c2f3030732e4df1d73a4647f922078d158 Mon Sep 17 00:00:00 2001
From: Laura Kalbag <me@laurakalbag.com>
Date: Wed, 15 Jan 2020 12:56:05 +0000
Subject: [PATCH 3/4] Make title span two columns on viewports > 800px.

Also ensure following paragraph remains below title, as following the default grid behaviour, it would flow into adjacent column.
---
 assets/css/base.scss | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/assets/css/base.scss b/assets/css/base.scss
index fa5edc53..5ed719b6 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -142,11 +142,20 @@ ul[class] {
   line-height: 0.75;
   padding: 0;
   margin: 0.5rem 0rem;
-  grid-column: span 2;
   // transform: rotateZ(90deg);
   // margin: 13rem -7rem;
 }
 
+@media (min-width: 800px) {
+  .title__thicc {
+      grid-column: 1 / 3;
+  }
+
+  .title__thicc + p {
+    grid-column: 1 / 2;
+  }
+}
+
 .help {
   margin: 1rem 0;
   li {

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 4/4] 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;