Tighten the home page hero.

mblayman · May 12, 2024 · 7105704 · 7105704
1 parent 428e3c7
commit 7105704
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 20 deletions.
diff --git 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
@@ -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;
   }