From 71057042d46180262bfd604b3df8de6e2dc5fbb0 Mon Sep 17 00:00:00 2001
From: Matt Layman <matthewlayman@gmail.com>
Date: Sun, 12 May 2024 17:55:23 -0400
Subject: [PATCH] Tighten the home page hero.

---
 themes/tailwind-site/layouts/index.html    | 16 +++++-----
 themes/tailwind-site/static/css/styles.css | 36 +++++++++++++++-------
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/themes/tailwind-site/layouts/index.html b/themes/tailwind-site/layouts/index.html
index 86eccc1..42b7b4a 100644
--- a/themes/tailwind-site/layouts/index.html
+++ b/themes/tailwind-site/layouts/index.html
@@ -2,7 +2,7 @@
 
 <div class="flex flex-col sm:flex-row mb-4 sm:mt-4 py-4 bg-gray-200">
   <div class="w-full sm:w-2/5">
-    <div class="bg-white rounded-full p-1 h-56 w-56 shadow-xl mx-auto mb-8 sm:mb-0">
+    <div class="bg-white rounded-full p-1 h-44 w-44 shadow-xl mx-auto mb-8 sm:mb-0">
       <img src="{{ .Site.Params.authorAvatar | absURL }}" class="rounded-full">
     </div>
   </div>
@@ -13,7 +13,7 @@
     <p class="mb-2 font-extralight text-md">
       I am a Senior Staff Software Engineer at Included Health.
     </p>
-    <p class="mb-8 font-extralight text-md">
+    <p class="mb-4 font-extralight text-md">
       I like to teach others about writing good software
       while streaming on YouTube
       and am committed to helping my local community grow its tech skills
@@ -23,19 +23,17 @@
 </div>
 
 <div class="w-full flex flex-col-reverse sm:flex-row justify-center mb-4">
-  <div class="w-full sm:w-2/3">
-      <div class="px-4 py-8 mx-auto w-full flex flex-col font-extralight text-md">
+  <div class="w-full sm:w-3/4">
+      <div class="px-4 py-0 sm:py-2 mx-auto w-full flex flex-col font-extralight text-md">
         <h2 class="font-semibold text-2xl tracking-wide pb-4">Want to learn Django from top to bottom?</h2>
         <p class="mb-4">
-          My book, Understand Django, will walk you through the Django web framework.
-        </p>
-        <p class="mb-4">
+          <i>Understand Django will walk you through the Django web framework.</i>
           We start from the top at an exploration of the browser and the layers
           that make the internet work, then dig deep down through the framework
           to reveal how you can make web applications using Django.
         </p>
         <p class="mb-4">
-          By the time you finish reading Understand Django,
+          By the time you finish reading this book,
           you'll have a much deeper knowledge of how web applications work
           and, specifically,
           how <i>Python-based</i> web applications are built.
@@ -54,7 +52,7 @@ <h2 class="font-semibold text-2xl tracking-wide pb-4">Want to learn Django from
         </p>
       </div>
   </div>
-  <div class="w-full sm:w-1/3">
+  <div class="w-full sm:w-1/4">
     <a href="{{ "understand-django/" | absURL }}">
       <img src="/img/understand-django-cover.png">
     </a>
diff --git a/themes/tailwind-site/static/css/styles.css b/themes/tailwind-site/static/css/styles.css
index 16719a0..6522e6b 100644
--- a/themes/tailwind-site/static/css/styles.css
+++ b/themes/tailwind-site/static/css/styles.css
@@ -970,10 +970,6 @@ aside {
   height: 12rem;
 }
 
-.h-56 {
-  height: 14rem;
-}
-
 .h-6 {
   height: 1.5rem;
 }
@@ -982,6 +978,10 @@ aside {
   height: 100%;
 }
 
+.h-44 {
+  height: 11rem;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -994,8 +994,8 @@ aside {
   width: 8rem;
 }
 
-.w-56 {
-  width: 14rem;
+.w-48 {
+  width: 12rem;
 }
 
 .w-6 {
@@ -1006,6 +1006,10 @@ aside {
   width: 100%;
 }
 
+.w-44 {
+  width: 11rem;
+}
+
 .max-w-6xl {
   max-width: 72rem;
 }
@@ -1250,6 +1254,11 @@ aside {
   padding-right: 2rem;
 }
 
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1265,11 +1274,6 @@ aside {
   padding-bottom: 1rem;
 }
 
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1609,6 +1613,16 @@ aside {
     padding-right: 1rem;
   }
 
+  .sm\:py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .sm\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
   .sm\:pb-2 {
     padding-bottom: 0.5rem;
   }