Improve site header

Author: RoyalIcing

apps/components_guide_web/assets/css/app.css

@@ -26,7 +26,7 @@ input {
 }
 
 .container {
-    @apply max-w-5xl mx-auto px-4;
+    @apply max-w-5xl mx-auto px-6;
 }
 
 .nums-tabular {

apps/components_guide_web/lib/components_guide_web/templates/layout/_header.html.eex

@@ -1,19 +1,19 @@
-<header class="bg-gray-900 text-white">
-  <section class="container flex flex-col md:flex-row items-stretch">
-    <a href="/" class="block px-3 py-4 text-right text-base font-bold italic uppercase text-red-100 leading-tight tracking-wide hover:bg-gray-800">
+<header role=banner class="bg-gray-900 text-white">
+  <div class="container px-0 flex flex-col md:flex-row items-stretch text-center md:text-left">
+    <a href="/" class="block px-3 py-2 md:py-4 md:text-right text-sm md:text-base font-bold italic uppercase text-red-100 leading-tight tracking-wide hover:bg-gray-800">
       <span>Components <br>·Guide</span>
     </a>
-    <nav role="navigation" class="flex-grow sm:pl-8 lg:px-16 text-base md:text-lg">
-      <ul class="h-full flex flex-col md:flex-row justify-around items-stretch tracking-wide">
+    <nav role="navigation" class="flex-grow sm:pl-8 lg:px-16 text-base md:text-lg text-center">
+      <ul class="h-full grid grid-cols-2 flex flex-col md:flex-row justify-around items-stretch tracking-wide">
         <%= nav_items(@path_info) %>
 
-        <li hidden><a href="/accessibility-first-testing" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "A11Y-First Testing" %></a>
-        <li hidden><a href="/react+typescript" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "React + TypeScript" %></a>
-        <li hidden><a href="/swiftui" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "SwiftUI + Combine" %></a>
-        <li hidden><a href="/links" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "Other Resources" %></a>
+        <li hidden><a href="/accessibility-first-testing" class="block px-4 py-1 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "A11Y-First Testing" %></a>
+        <li hidden><a href="/react+typescript" class="block px-4 py-1 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "React + TypeScript" %></a>
+        <li hidden><a href="/swiftui" class="block px-4 py-1 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "SwiftUI + Combine" %></a>
+        <li hidden><a href="/links" class="block px-4 py-1 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "Other Resources" %></a>
         <% if false do %>
         <li class="py-1">
-          <a href="/signin/github" class="inline-block md:block px-4 py-2 md:py-2 font-bold text-white bg-red-700 rounded" style="background: linear-gradient(0deg, #E0003C 0%, #FF493F 50%, #FF584A 100%);">
+          <a href="/signin/github" class="inline-block md:block px-4 py-1 md:py-2 font-bold text-white bg-red-700 rounded" style="background: linear-gradient(0deg, #E0003C 0%, #FF493F 50%, #FF584A 100%);">
             <%= "Sign in with GitHub" %>
           </a>
         <% end %>
@@ -25,5 +25,5 @@
         <% end %>
       </ul>
     </nav>
-  </section>
+  </div>
 </header>