Make better at smaller breakpoints

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/templates/landing/index.html.eex

@@ -1,31 +1,37 @@
 <%= if true do %>
 <div class="text-white" style="background: linear-gradient(-32deg, #840000 0%, #E0003C 30%, #FF493F 50%, #FF584A 50%, #FF6F86 90%, #FF584A 120%);">
   <section class="container px-6 pt-12 pb-8">
-    <h1 class="mx-auto max-w-4xl text-5xl text-center leading-snug font-bold text-shadow">
+    <h1 class="mx-auto max-w-4xl px-2 text-3xl sm:text-4xl md:text-5xl text-center leading-snug font-bold text-shadow">
       <%#= "Great apps need great components. Learn how to make them in SwiftUI and React." %>
       <%= "Great apps need great components. Learn by making in SwiftUI or React." %>
     </h1>
-    <p class="mt-6 mb-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-red-100 text-shadow">
+    <p class="mt-6 mb-8 mx-auto max-w-3xl text-2xl sm:text-3xl md:text-4xl text-center leading-snug italic text-red-100 text-shadow">
       <%= "Learn the techniques that work best across a range of component systems." %>
     </p>
-    <p class="mx-auto py-2 max-w-4xl text-xl text-center">
+    <p class="mx-auto py-2 max-w-4xl text-base md:text-xl text-center">
       Topics include:
       <%= for {text, index} <- Enum.with_index(["SwiftUI", "React", "Combine", "RxJS", "Figma", "Sketch", "Performance", "Clarity", "Documentation", "Responsive", "Design Teams"]) do %>
-        <a href="#" class="inline-block mx-1 mb-3 px-4 py-2 font-bold bg-white <%= if index <= 5, do: "text-blue-500 hover:bg-blue-600", else: "text-indigo-500 hover:bg-indigo-600" %> hover:text-white rounded shadow-xl"><%= text %></a>  
+        <a href="#" class="inline-block md:mx-1 mb-2 md:mb-3 px-3 md:px-4 py-1 md:py-2 font-bold bg-white <%= if index <= 5, do: "text-blue-500 hover:bg-blue-600", else: "text-indigo-500 hover:bg-indigo-600" %> hover:text-white rounded shadow-xl"><%= text %></a>  
       <% end  %>
     </p>
-    <div class="max-w-3xl mx-auto mt-8 flex flex-row justify-around">
-      <figure class="flex flex-col items-center">
-        <img src="https://collected.systems/1/github/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/material/play-circle-outline.svg?defaultFill=white" width=92 height=92>
-        <figcaption class="text-xl font-bold">Watch video lessons</figcaption>
+    <div class="max-w-3xl mx-auto mt-8 flex flex-col sm:flex-row justify-around">
+      <figure class="pb-4 flex flex-col items-center">
+        <div style="height: 92px;">
+          <img src="https://collected.systems/1/github/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/material/play-circle-outline.svg?defaultFill=white" width=92 height=92>
+        </div>
+        <figcaption class="text-lg md:text-xl font-bold">Watch video lessons</figcaption>
       </figure>
-      <figure class="flex flex-col items-center">
-        <img src="https://collected.systems/1/github/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/dev/swift.svg?defaultFill=white" width=92 height=92>
-        <figcaption class="text-xl font-bold">Learn SwiftUI & Combine</figcaption>
+      <figure class="pb-4 flex flex-col items-center">
+        <div style="height: 92px;">
+          <img src="https://collected.systems/1/github/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/dev/swift.svg?defaultFill=white" width=92 height=92>
+        </div>
+        <figcaption class="text-lg md:text-xl font-bold">Learn SwiftUI & Combine</figcaption>
       </figure>
-      <figure class="flex flex-col items-center">
-        <img src="https://collected.systems/1/github/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/dev/react.svg?defaultFill=white" width=92 height=92>
-        <figcaption class="text-xl font-bold">Learn React</figcaption>
+      <figure class="pb-4 flex flex-col items-center">
+        <div style="height: 92px;">
+          <img src="https://collected.systems/1/github/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/dev/react.svg?defaultFill=white" width=92 height=92>
+        </div>
+        <figcaption class="text-lg md:text-xl font-bold">Learn React</figcaption>
       </figure>
     </div>
   </section>
@@ -53,7 +59,7 @@
 
 <div class="text-white bg-gray-800">
   <section class="pt-20">
-    <header class="mb-8 mx-auto max-w-4xl text-center">
+    <header class="mb-8 mx-auto max-w-4xl px-4 text-center">
       <h2 class="text-4xl font-bold leading-snug">
         Make modern iOS and macOS apps using reusable components, async data flow.
       </h2>
@@ -73,7 +79,7 @@
   </section>
 
   <section class="pt-20 pb-16">
-    <header class="mb-8 mx-auto max-w-4xl text-center">
+    <header class="mb-8 mx-auto max-w-4xl px-4 text-center">
       <h2 class="text-4xl font-bold">Learn to make modern web apps using components, hooks, async data flow.</h2>
     </header>
     <div class="w-full max-w-md mx-auto rounded overflow-hidden shadow-lg">

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

@@ -1,13 +1,13 @@
 <header class="bg-gray-900 text-white">
   <section class="container flex flex-row items-center">
-    <a href="/" class="block py-4 text-base font-bold text-red-100 tracking-wide">
+    <a href="/" class="block py-4 text-sm 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-row justify-around">
-        <li><a href="/learn-by-building" class="block py-4 font-bold"><%= "Learn by Building" %></a></li>
-        <li><a href="/links" class="block py-4 font-bold"><%= "Recommended Links" %></a></li>
-        <li><a href="/about" class="block py-4 font-bold"><%= "Who?" %></a></li>
+      <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>
         <% 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>