Fix for mobile viewport overflows on home page

Author: zachleat

src/css/tailwind.css

@@ -260,6 +260,14 @@ details[open] .summary-swap-open {
 }
 
 /* special text treatment on home page */
+.hero-text {
+  font-size: 2.5em;
+}
+@media (min-width: 40em) { /* 640px */
+  .hero-text {
+    font-size: 3em; /* 48px /16 */
+  }
+}
 @media (min-width: 64em) { /* 1024px */
   .hero-text {
     font-size: 4em; /* 64px /16 */

src/site/_includes/components/section-heading.njk

@@ -12,10 +12,10 @@
 
 
 {% macro benefit(title, icon, description ) %}
-  <div class="flex content-start space-x-8 my-12">
+  <div class="sm:flex sm:content-start sm:space-x-8 my-12">
 
     {% if icon %}
-    <svg role="img" aria-label="{{ title }}" aria-hidden="true" focusable="false" width="60" height="60" class="flex-none mt-2">
+    <svg role="img" aria-label="{{ title }}" aria-hidden="true" focusable="false" width="60" height="60" class="flex-none my-2">
       <use xlink:href="{{ icon }}"></use>
     </svg>
     {% endif %}

src/site/index.njk

@@ -60,7 +60,7 @@ layout: layouts/base.njk
 <section class="mb-20">
   <h2 class="text-2xl">The future is highly distributed</h2>
   <p class="mt-6 mb-8">
-    Jamstack is the new standard architecture for the web. Using Git workflows and modern build tools, pre-rendered   content is served to a CDN and made dynamic through APIs and serverless functions.Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs.
+    Jamstack is the new standard architecture for the web. Using Git workflows and modern build tools, pre-rendered   content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs.
   </p>
   <img src="/img/svg/architecture.svg" alt="Jamstack architecture diagram, Bidirectional arrows between Client and CDN, Client and Microservices">
 </section>
@@ -85,7 +85,7 @@ layout: layouts/base.njk
   </p>
   <div class="mt-12 flex flex-wrap justify-around lg:justify-between">
     {% for item in examples | iterable | selectattr("featured") | luckydip(6) %}
-      <div class="md:w-1/2 lg:w-1/3 text-left mb-8 pr-10">
+      <div class="md:w-1/2 lg:w-1/3 text-left mb-8 md:pr-10">
       {% include "components/example-thumbnail.njk" %}
       </div>
     {% endfor %}