From 7b6a3a00199388610c31bd7be52954688744352a Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 16 Sep 2022 14:57:36 -0400
Subject: [PATCH] Content for style guide page.

---
 src/layouts/page/style-guide.html | 29 +++++++++++++++++++++++++++++
 src/static/css/style.css          |  8 ++++----
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/layouts/page/style-guide.html b/src/layouts/page/style-guide.html
index e69de29..1600149 100644
--- a/src/layouts/page/style-guide.html
+++ b/src/layouts/page/style-guide.html
@@ -0,0 +1,29 @@
+{{ define "main" }}
+<section>
+  <div class="container style-guide-container">
+    <div class="row">
+      <div class="col">
+        <h1>The tea style guide. Also, this is an H1.</h1>
+        <h2>We believe in open-sourcing everything... right down to our brand's look and feel. Also, this is an H2.</h2>
+        <h3>Working with a visible grid system in a responsive framework is difficult, but you can inspect these elements to see how we did it.</h3>
+        <h4>This H4 is intended to explain how we convert 'px' meaurements from design specs to 'vw' units. The formula for that is (vw = pixels / viewport total width x 100).</h4>
+        <h5>This is an H5, and it's primarily used for things like the headers inside the footer section. It's a small one, but should still always be in our primary tea'l color.</h5>
+        <p class="lead">This is our 'lead' text and it's displays slightly larger than our regular paragraph text. This variant is used for sub-heads and important 'call-out' information. Each line's height should be equivalent to roughly 1/3 the height of a grid box.</p>
+        <p>And this is our good old-fashioned body copy. This font-size is on the larger end of what's considered standard for paragraph text. The monospace typeaces we're using, while super-cool, are not quite as ledgible as their variable-spaced counterparts. Thusly, we're over-compensating slightly. This variant, as well as the 'lead' text, should either be white (#fff) or 'Soft Black' (#1A1A1A)... depending on the background.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+
+  .style-guide-container{
+    background-image: url("/Images/x-large-grid.svg");
+    background-attachment: fixed;
+    background-repeat: repeat-y;
+    background-size: cover;
+  }
+
+</style>
+
+{{ end }}
diff --git a/src/static/css/style.css b/src/static/css/style.css
index c27dff3..b14bcc1 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -130,9 +130,9 @@ li{
   }
 
   h2{
-    font-size: 6rem;
-    line-height: 7rem;
-    margin-bottom: 37px;
+    font-size: 6vw;
+    line-height: 8.5vw;
+    margin-bottom: 2.065vw;
   }
 
   h3{
@@ -144,7 +144,7 @@ li{
 
   h4{
     font-size: 2.121vw;
-    line-height: 1.116vw;
+    line-height: 4.116vw;
   }
 
   .lead{