Improve landing page

Author: RoyalIcing

apps/components_guide_web/assets/css/app.css

@@ -10,6 +10,8 @@
 
 html {
     @apply bg-gray-900;
+
+    --links-color: currentColor;
 }
 
 [hidden] {

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

@@ -46,33 +46,6 @@ subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the lates
 </div>
 
 <div class="text-white">
-  <aside class="py-20">
-    <div class="w-full max-w-4xl mx-auto space-y-6 text-3xl rounded overflow-hidden shadow-lg">
-      <p>
-        There’s a lot of learning materials on specific technologies out there. But technologies change — rapidly.
-
-      <p>
-        Frameworks will come and go.
-        React might be the hotness today, but in a few years another framework might well rule the roost.
-
-      <p>
-        The guides here cover what will remain relevant for decades to come:
-
-      <ul class="list-disc pl-8 font-bold">
-        <li class="text-red-300"><%= "Great UX and performance" %>
-        <li class="text-teal-300"><%= "Accessibility" %>
-        <li class="text-blue-300"><%= "Component naming & responsibility" %>
-        <li class="text-green-300"><%= "TDD & BDD" %>
-        <li class="text-yellow-100"><%= "Thinking about state" %>
-        <li class="text-orange-300"><%= "Modular styling with modern CSS" %>
-        <li class="text-purple-300"><%= "Leveraging what’s built into browsers first" %>
-      </ul>
-
-      <p>
-        It’s all free to read and share.
-    </div>
-  </aside>
-
   <section class="pt-20 pb-20" style="<%= sections_styles(:cool) %>">
     <header class="mb-8 mx-auto max-w-4xl px-4 text-center">
       <h2 class="text-4xl font-bold leading-snug">
@@ -163,4 +136,31 @@ subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the lates
       </a>
     </div>
   </section>
+
+  <aside class="py-20">
+    <div class="w-full max-w-4xl mx-auto px-4 space-y-6 text-2xl md:text-3xl rounded overflow-hidden shadow-lg">
+      <p>
+        There’s a lot of learning materials on specific technologies out there. But technologies change — rapidly.
+
+      <p>
+        Frameworks will come and go.
+        React might be the hotness today, but in a few years another framework might well rule the roost.
+
+      <p>
+        The guides here cover what will remain relevant for decades to come:
+
+      <ul class="list-disc pl-8 font-bold">
+        <li class="text-red-300"><%= "Great UX and performance" %>
+        <li class="text-teal-300"><%= "Accessibility" %>
+        <li class="text-blue-300"><%= "Component naming & responsibility" %>
+        <li class="text-green-300"><%= "TDD & BDD" %>
+        <li class="text-yellow-100"><%= "Thinking about state" %>
+        <li class="text-orange-300"><%= "Modular styling with modern CSS" %>
+        <li class="text-purple-300"><%= "Leveraging what’s built into browsers first" %>
+      </ul>
+
+      <p>
+        It’s all free to read and share.
+    </div>
+  </aside>
 </div>

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

@@ -0,0 +1,7 @@
+<footer role="contentinfo" class="container pt-4 pb-6 text-gray-500 tracking-wide">
+  <p><small class="text-xs">Copyright © 2020 Patrick Smith</small></p>
+  <ul class="list-none text-xs mt-4 leading-loose text-purple-500">
+    <li><a href="https://github.com/ComponentsTV/components_guide">Source on GitHub</a>
+    <li><a href="https://github.com/ComponentsTV/components_guide/blob/master/LICENSE">License</a>
+  </ul>
+</footer>

apps/components_guide_web/lib/components_guide_web/templates/layout/root.html.leex

@@ -14,13 +14,7 @@
 
     <%= @inner_content %>
 
-    <footer role="contentinfo" class="container pt-4 pb-6 text-gray-600 tracking-wide">
-      <p><small class="text-xs">Copyright © 2020 Patrick Smith</small></p>
-      <ul class="list-none text-xs mt-4 leading-loose">
-        <li><a href="https://github.com/ComponentsTV/components_guide">Source on GitHub</a>
-        <li><a href="https://github.com/ComponentsTV/components_guide/blob/master/LICENSE">License</a>
-      </ul>
-    </footer>
+    <%= render ComponentsGuideWeb.LayoutView, "_contentinfo.html" %>
 
     <!-- Prism syntax highlighting -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js" integrity="sha256-NFZVyNmS1YlmiklazBA+TALYJlJtZj/y/i/oADk6CVE=" crossorigin="anonymous"></script>