From a81f7dd4028f73838f109f76e2949c5a817499ca Mon Sep 17 00:00:00 2001
From: lemonpole <srivera.x1@gmail.com>
Date: Sat, 24 Aug 2024 12:10:59 -0400
Subject: [PATCH] refactor: css center tailwind utility

---
 postcss.config.js     |  1 +
 src/index.css         | 16 +++++++++++++---
 src/routes/footer.tsx |  4 ++--
 src/routes/how.tsx    |  6 +++---
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/postcss.config.js b/postcss.config.js
index eaaa628..75b43c6 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -5,6 +5,7 @@
  */
 export default {
   plugins: {
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
   },
diff --git a/src/index.css b/src/index.css
index 8b1e8ad..1a49df1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,7 +13,7 @@ body {
 }
 
 main {
-  @apply grid grid-cols-1 place-items-center gap-24 py-24;
+  @apply center gap-24 py-24;
 }
 
 h2 {
@@ -46,10 +46,10 @@ figure:has(span):has(video) {
 
 /** container sections */
 section[id] {
-  @apply grid scroll-mt-24 grid-cols-1 place-items-center gap-12 px-4 sm:w-2/3;
+  @apply center scroll-mt-24 gap-12 px-4 sm:w-2/3;
 
   & > header {
-    @apply order-first grid grid-cols-1 place-items-center gap-4;
+    @apply center order-first gap-4;
   }
 
   & > header + p {
@@ -102,6 +102,16 @@ section[id] {
 
 /** utilities */
 @layer utilities {
+  .center {
+    &:has(:only-child) {
+      @apply grid grid-cols-1 place-items-center;
+    }
+
+    &:not(:only-child) {
+      @apply flex flex-col items-center justify-center;
+    }
+  }
+
   .gradient-bg {
     @apply bg-gradient-to-br from-indigo-500 via-fuchsia-500 to-pink-500;
   }
diff --git a/src/routes/footer.tsx b/src/routes/footer.tsx
index b5da7f4..ce7ff36 100644
--- a/src/routes/footer.tsx
+++ b/src/routes/footer.tsx
@@ -28,7 +28,7 @@ const links = [
  */
 export default function () {
   return (
-    <footer className="relative grid h-64 grid-cols-1 place-items-center">
+    <footer className="center relative h-64">
       <section className="absolute inset-0 overflow-hidden opacity-90">
         <img
           src={footer}
@@ -40,7 +40,7 @@ export default function () {
         {links.map((link) => (
           <li key={link.url + "__footer"}>
             <a
-              className="grid size-16 grid-cols-1 place-items-center rounded-full border-2 border-current p-4"
+              className="center size-16 rounded-full border-2 border-current p-4"
               href={link.url}
               target="_blank"
             >
diff --git a/src/routes/how.tsx b/src/routes/how.tsx
index acccdb4..f75b8e6 100644
--- a/src/routes/how.tsx
+++ b/src/routes/how.tsx
@@ -73,9 +73,9 @@ export default function () {
         </video>
         <button
           className={cx(
-            "pointer-events-none absolute z-10 grid size-12 grid-cols-1 place-items-center self-center",
+            "center pointer-events-none absolute z-10 size-12 self-center",
             "rounded-full text-white opacity-90 backdrop-blur-md backdrop-filter",
-            playing && "hidden",
+            playing && "!hidden",
           )}
         >
           <FaPlayCircle className="size-12" />
@@ -87,7 +87,7 @@ export default function () {
             key={item.title + "__how"}
             className="flex flex-col items-center gap-4 border border-base-content/10 bg-base-200 p-4"
           >
-            <header className="grid size-16 grid-cols-1 place-items-center rounded-full border-2 border-current">
+            <header className="center size-16 rounded-full border-2 border-current">
               <item.icon className="text-5xl" />
             </header>
             <p className="text-center text-xl font-extrabold">{item.title}</p>