refactor: use flexbox instead of margin spacing

JasonWeinzierl · JasonWeinzierl · commit a19ffa045b0c · 2024-09-01T10:00:05.000-05:00
diff --git a/src/index.html b/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="min-h-dvh">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -23,20 +23,20 @@
   </script>
 </head>
 
-<body>
-  <main class="max-w-2xl mx-auto mt-52 md:flex place-items-center">
-      <h1 class="flex-1 text-xl md:pe-12 mb-10">
+<body class="min-h-dvh flex flex-col gap-10 justify-center p-4">
+  <main class="w-full max-w-2xl mx-auto flex flex-col md:flex-row md:flex-1 justify-center md:justify-normal md:items-center md:mb-[max(1rem,5%)]">
+      <h1 class="md:flex-1 text-xl md:pe-12 mb-10">
         <img class="m-auto" src="https://kbckcstorage.blob.core.windows.net/photos/kbc-logo-black-on-transparent.png" alt="Koinonia Bible Church" width="264">
       </h1>
-      <nav class="flex-1 md:border-l md:ps-12 mx-4 md:mx-0 text-center text-lg flex flex-col gap-4">
+      <nav class="md:flex-1 md:border-l md:ps-12 mx-4 md:mx-0 text-center text-lg flex flex-col gap-4">
         <a class="text-white font-semibold rounded-3xl py-1 bg-gradient-to-r from-pco-topaz to-pco-emerald" href="https://kbckc.churchcenter.com/">Home</a>
         <a class="text-white font-semibold rounded-3xl py-1 bg-gradient-to-r from-pco-topaz to-pco-emerald" href="https://kbckc.churchcenter.com/directory">Directory</a>
         <a class="text-white font-semibold rounded-3xl py-1 bg-gradient-to-r from-pco-topaz to-pco-emerald" href="https://kbckc.churchcenter.com/calendar">Calendar</a>
         <a class="text-white font-semibold rounded-3xl py-1 bg-gradient-to-r from-pco-topaz to-pco-emerald" href="https://kbckc.churchcenter.com/login">Log In</a>
       </nav>
   </main>
   <footer>
-    <address class="text-center md:hidden mt-10">
+    <address class="text-center md:hidden">
       <p>Koinonia Bible Church</p>
       <p>7020 Richmond Ave</p>
       <p>Kansas City, MO 64133</p>
