From 08ef8dea7b1fcaab68b845e3b2463ffb3313055a Mon Sep 17 00:00:00 2001
From: Adrien POLY <adrienpoly@gmail.com>
Date: Sun, 27 Aug 2023 13:03:28 +0200
Subject: [PATCH] fix responsive footer

---
 .../images/icons/heroicons/solid/heart.svg    |  2 +-
 app/views/shared/_footer.html.erb             | 37 +++++++++----------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/app/assets/images/icons/heroicons/solid/heart.svg b/app/assets/images/icons/heroicons/solid/heart.svg
index d9560252..adf55ff2 100644
--- a/app/assets/images/icons/heroicons/solid/heart.svg
+++ b/app/assets/images/icons/heroicons/solid/heart.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
   <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
 </svg>
diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb
index de2ad2ea..7b1fb249 100644
--- a/app/views/shared/_footer.html.erb
+++ b/app/views/shared/_footer.html.erb
@@ -1,23 +1,22 @@
 <footer class="bg-white">
-  <div class="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
-    <div class="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12" aria-label="Footer">
-      <div class="pb-6">
-        <%= link_to "Status", "https://status.rubyvideo.dev/", target: "_blank", class: "link" %>
-      </div>
-      <div class="pb-6">
-        <%= link_to "Open analytics", analytics_dashboards_path, class: "link" %>
-      </div>
-      <div class="pb-6">
-        <%= link_to "Uses", uses_path, class: "link" %>
-      </div>
-    </div>
-    <div class="mt-6 text-center leading-5 text-gray flex items-center justify-center gap-1">
-      Made with
-      <%= heroicon :heart, variant: :solid, size: :sm, class: "text-brand" %>
-      for the ruby community by
-      <%= link_to "@adrienpoly", "https://twitter.com/adrienpoly", target: "_blank", class: "link" %>
-      and wonderful
-      <%= link_to "contributors", "https://github.com/adrienpoly/rubyvideo/graphs/contributors", target: "_blank", class: "link" %>
+  <div class="flex flex-col justify-center max-w-7xl mx-auto overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
+    <div class="flex justify-center items-center flex-wrap gap-4 sm:gap-8" aria-label="Footer">
+      <%= link_to "Status", "https://status.rubyvideo.dev/", target: "_blank", class: "link" %>
+      <%= link_to "Open analytics", analytics_dashboards_path, class: "link" %>
+      <%= link_to "Uses", uses_path, class: "link" %>
     </div>
+    <p class="mt-6 text-center text-gray inline leading-relaxed">
+      <% output = []
+        output << "Made with"
+        output << heroicon(:heart, variant: :solid, size: :sm, class: "text-brand inline")
+        output << "for the Ruby community by"
+        output << link_to("@adrienpoly", "https://twitter.com/adrienpoly", target: "_blank", class: "link")
+        output << "and wonderful"
+        output << link_to("contributors", "https://github.com/adrienpoly/rubyvideo/graphs/contributors", target: "_blank", class: "link")
+        output << "using an"
+        output << link_to("edge stack.", uses_path, class: "link")
+      %>
+      <%= raw(output.join(" ")) %>
+    </p>
   </div>
 </footer>