Smaller (768px and less) screen masthead adjustment

Author: gamecubate

templates/home/masthead.html

@@ -21,15 +21,15 @@
 
           <!-- tabs -->
           <div class="border-b border-gray-200 border-gray-700">
-            <nav class="-mb-0.5 flex justify-center space-x-6" aria-label="Tabs" role="tablist">
+            <nav class="-mb-0.5 flex justify-center space-x-4 md:space-x-6 flex-wrap md:flex-nowrap" aria-label="Tabs" role="tablist">
 
               {% for excerpt in excerpts %}
               {% if loop.index == 1 %}{% set active = "active" %}
               {% else %}{% set active = "" %}
               {% endif %}
 
               <button type="button"
-                class="hs-tab-active:font-semibold hs-tab-active:border-yellow-600 hs-tab-active:text-yellow-600 py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-300 hover:text-yellow-600 {{ active }}"
+                class="hs-tab-active:font-semibold hs-tab-active:border-yellow-600 hs-tab-active:text-yellow-600 py-1 md:py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-300 hover:text-yellow-600 {{ active }}"
                 id="horizontal-alignment-item-{{ excerpt.id }}" data-hs-tab="#horizontal-alignment-{{ excerpt.id }}"
                 aria-controls="horizontal-alignment-{{ excerpt.id }}" role="tab">
                 {{ excerpt.name }}
@@ -49,11 +49,11 @@
 
             <div id="horizontal-alignment-{{ excerpt.id }}" class="{{ hidden }}" role="tabpanel"
               aria-labelledby="horizontal-alignment-item-{{ excerpt.id }}">
-              <div class="grid grid-cols-3 gap-4">
-                <div class="col-span-2">
+              <div class="grid grid-cols-1 md:grid-cols-3 md:gap-4">
+                <div class="md:col-span-2">
                   {{ excerpt.code | markdown(inline=true) | safe }}
                 </div>
-                <div class="pr-2">
+                <div class="px-4 py-2 md:pr-2">
                   <p class="font-thin text-gray-300">
                     {{ excerpt.desc | markdown(inline=true) | safe }}
                   </p>
@@ -69,14 +69,14 @@
       </div>
     </div> <!-- center justification wrapper -->
 
-    <div class="max-w-[70rem] grid grid-cols-2 gap-4">
+    <div class="max-w-[70rem] grid grid-cols-1 md:grid-cols-2 md:gap-4">
       <div>
         &nbsp;
       </div>
       <div>
         <h2>
           {{ section.extra.summary.content | markdown(inline=true) | safe }}
-          <a href="/learn">
+          <a href="/learn" class="block mt-1 md:inline md:mt-0">
             <button type="button"
               class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-yellow-500 text-slate-700 hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
               {{ section.extra.summary.link_text }} &raquo;