Improve layout / appearance of header

Author: RoyalIcing

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

@@ -1,13 +1,18 @@
 <header class="bg-gray-900 text-white">
-  <section class="container flex flex-row items-center">
-    <a href="/" class="block py-4 text-sm md:text-base font-bold text-red-100 tracking-wide">
+  <section class="container flex flex-col md:flex-row items-center">
+    <a href="/" class="block py-4 text-base md:text-xl md:text-base font-bold text-red-100 tracking-wide">
       <span class="py-1 border-b-4 border-red-400">Components.Guide</span>
     </a>
-    <nav role="navigation" class="flex-grow px-16 text-lg">
-      <ul class="flex flex-col md:flex-row justify-around py-3">
-        <li><a href="/learn-by-building" class="block py-2 md:py-4 font-bold border-b-4 border-transparent hover:border-red-400"><%= "Learn by Building" %></a></li>
-        <li><a href="/links" class="block py-2 md:py-4 font-bold border-b-4 border-transparent hover:border-red-400"><%= "Recommended Links" %></a></li>
-        <li><a href="/about" class="block py-2 md:py-4 font-bold border-b-4 border-transparent hover:border-red-400"><%= "About" %></a></li>
+    <nav role="navigation" class="flex-grow sm:pl-8 lg:px-16 text-base md:text-xl">
+      <ul class="flex flex-col md:flex-row justify-around pt-2 pb-2">
+        <li><a href="/lessons" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:border-red-400"><%= "Lessons" %></a></li>
+        <li><a href="/links" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:border-red-400"><%= "Links" %></a></li>
+        <li><a href="/about" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:border-red-400"><%= "About" %></a></li>
+        <li class="py-1">
+          <a href="/about" 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%);">
+            <%= "Sign in with GitHub" %>
+          </a>
+        </li>
         <% if false do %>
           <li><a href="/swiftui" class="block py-4 font-bold"><%= "SwiftUI + Combine" %></a></li>
           <li><a href="/rxjs" class="block py-4 font-bold"><%= "React + TS + RxJS" %></a></li>