From 97c0062a3f76f35ea403a3840aa39e8a71d0b1b9 Mon Sep 17 00:00:00 2001
From: Treidex <treidexsemextetry@gmail.com>
Date: Tue, 2 Feb 2021 20:03:42 -0800
Subject: [PATCH 1/3] Change Toolkit SCSS (Part 3)

---
 _sass/components/_toolkit.scss | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/_sass/components/_toolkit.scss b/_sass/components/_toolkit.scss
index 56ddf6ada8..d625225a1c 100644
--- a/_sass/components/_toolkit.scss
+++ b/_sass/components/_toolkit.scss
@@ -12,7 +12,7 @@
     &__banner-item {
         margin-block-end: 0;
         font-weight: 300;
-        font-size: 1.5rem;
+        font-size: 1.25rem;
         margin: 0 4.5rem;
     }
     
@@ -32,8 +32,8 @@
 }
 
 .toolkit-svg {
-    width: 45%;
-    height: 60%;
+    width: auto;
+    height: 240px;
 }
 
 .toolkit-background {
@@ -65,6 +65,7 @@
     padding-left: 2rem;
     padding-right: 2rem;
     align-items: stretch;
+    justify-content: center;
 }
 
 .outer-link {
@@ -73,12 +74,11 @@
 
 .toolkit-flex-item {
     position: relative;
-    max-width: 24.5rem;
+    max-width: 23rem;
     padding: 0rem;
     height: auto;
     margin: 1.2rem 1rem;
     overflow: hidden;
-
 }
 
 .toolkit-flex-item-img-container {
@@ -135,6 +135,10 @@
     margin: 0;
 }
 
+.header-container {
+    display: flex;
+}
+
 @media only screen and (max-width: 1430px) {
     .toolkit-header {
 

From 4cbea86bfeed56a87e2185160a3693df4fbe04de Mon Sep 17 00:00:00 2001
From: Josh Bubar <53061723+jbubar@users.noreply.github.com>
Date: Sun, 7 Feb 2021 00:26:26 -0800
Subject: [PATCH 2/3] Update _toolkit.scss

I fixed the merge conflict incorrectly. My bad. Here is the fix
---
 _sass/components/_toolkit.scss | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/_sass/components/_toolkit.scss b/_sass/components/_toolkit.scss
index 30b8dc85d0..8c7ab69568 100644
--- a/_sass/components/_toolkit.scss
+++ b/_sass/components/_toolkit.scss
@@ -131,15 +131,6 @@
     margin-bottom: 10rem;
 }
 
-.toolkit-button {
-    margin: 0;
-}
-
-.header-container {
-    display: flex;
-}
-
-
 @media only screen and (max-width: 1430px) {
     .toolkit-header {
 
@@ -244,4 +235,4 @@
             margin-bottom: 1rem;
         }
     }
-}  
\ No newline at end of file
+}  

From bbdeb49566cfc63baab78f3d33b872d9e9ab0cc2 Mon Sep 17 00:00:00 2001
From: Treidex <treidexsemextetry@gmail.com>
Date: Wed, 10 Feb 2021 16:58:47 -0800
Subject: [PATCH 3/3] Styling toolkit header for desktop and mobile

---
 _sass/components/_toolkit.scss | 51 ++++++++++++++++++++++++++++------
 toolkit.html                   | 10 ++++---
 2 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/_sass/components/_toolkit.scss b/_sass/components/_toolkit.scss
index 8c7ab69568..d2230fbe4a 100644
--- a/_sass/components/_toolkit.scss
+++ b/_sass/components/_toolkit.scss
@@ -1,4 +1,18 @@
 .toolkit-header {
+    display: flex;
+    justify-content: center;
+
+    &__text {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        margin-right: 5rem;
+
+        h1 {
+            margin-top: 2.25rem;
+            margin-bottom: 3.125rem;
+        }
+    }
 
     &__text-group {
         display: flex; 
@@ -17,12 +31,10 @@
     }
     
     &__p {
-        font-size: 27px;
-        max-width: 895px;
+        font-size: 1.125rem;
+        max-width: 508px;
         text-align: left;
-        padding: 30px;
         margin: 12px auto;
-
     }
 
     &__hero-image {
@@ -36,6 +48,33 @@
     height: 240px;
 }
 
+@media(max-width: 850px) {
+    .toolkit-header {
+        flex-flow: column;
+
+        &__text {
+            margin-right: 0;
+
+            h1 {
+                margin-bottom: 0.4rem;
+            }
+        }
+
+        &__p {
+            margin-bottom: 0;
+        }
+
+        &__hero-image {
+            margin: 10px 0;
+        }
+    }
+
+    .header-container {
+        padding: 2rem;
+        margin-top: 10%;
+    }
+}
+
 .toolkit-background {
     background-color: #030D2D;
     padding: 2rem;
@@ -163,10 +202,6 @@
         }
     }
 
-    .toolkit-svg {
-        width: 75%;
-    }
-
     .suggest-guide-group {
         padding-left: 0rem;
         padding-right: 0rem;
diff --git a/toolkit.html b/toolkit.html
index 57ff8b3dcb..20f493cb85 100644
--- a/toolkit.html
+++ b/toolkit.html
@@ -3,10 +3,12 @@
 title: Toolkit
 --- 
 <div class="toolkit-header header-container">
-    <h1>Our Toolkit</h1>
-    <p class="toolkit-header__p">Toolkit implies that there is one set of tools that is perfect for the job you are tackling!
-What you will find here are tools we have found to be effective. Think of this as the most awesome collective tool shed!
-Here you can find, share, and suggest tools that are of use to the open source civic tech software community.</p>
+    <div class="toolkit-header__text">
+        <h1>Our Toolkit</h1>
+        <p class="toolkit-header__p">Toolkit implies that there is one set of tools that is perfect for the job you are tackling!
+            What you will find here are tools we have found to be effective. Think of this as the most awesome collective tool shed!
+            Here you can find, share, and suggest tools that are of use to the open source civic tech software community.</p>
+    </div>
     <div class="toolkit-header__hero-image">
         {% include svg/toolkit-hero.svg %}
     </div>