From 3c878200e4fb012de5a4ac0b93377a6643e33027 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Tue, 12 Mar 2024 19:47:28 -0700
Subject: Fix home style

---
 src/components/Home.tsx | 78 +++++++++++++++++++++++--------------------------
 1 file changed, 37 insertions(+), 41 deletions(-)

(limited to 'src/components/Home.tsx')

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index da9eb6b..4d4428a 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -28,48 +28,44 @@ function Home() {
   };
 
   return (
-    <>
-      <div style={{ margin: 'auto', overflow: 'hidden' }}>
-        <div
-          style={{
-            whiteSpace: 'nowrap',
-            transform: `translate3d(${-index * 100}%, 0, 0)`,
-            transition: 'ease 1000ms',
-          }}
-        >
-          {colors.map((backgroundColor, colorIndex) => (
-            <div
-              key={colorIndex}
-              style={{
-                display: 'inline-block',
-                backgroundColor,
-                height: '80vh',
-                width: '100%',
-              }}
-            />
-          ))}
-        </div>
-        <div style={{ textAlign: 'center' }}>
-          {colors.map((_, colorIndex) => (
-            <div
-              key={colorIndex}
-              style={{
-                display: 'inline-block',
-                height: '0.8rem',
-                width: '0.8rem',
-                borderRadius: '50%',
-                cursor: 'pointer',
-                margin: '0.7rem 0.7rem 0.7rem',
-              }}
-              className={colorIndex === index ? 'active' : 'inactive'}
-              onClick={() => {
-                setIndex(colorIndex);
-              }}
-            />
-          ))}
-        </div>
+    <div style={{ margin: 'auto', overflow: 'hidden' }}>
+      <div
+        style={{
+          whiteSpace: 'nowrap',
+          transform: `translateX(${-index * 100}%)`,
+          transition: 'ease 1000ms',
+        }}
+      >
+        {colors.map((backgroundColor, colorIndex) => (
+          <div
+            key={colorIndex}
+            style={{
+              display: 'inline-block',
+              backgroundColor,
+              height: '80vh',
+              width: '100%',
+            }}
+          />
+        ))}
       </div>
-    </>
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        {colors.map((_, colorIndex) => (
+          <div
+            key={colorIndex}
+            style={{
+              height: '0.75rem',
+              width: '0.75rem',
+              borderRadius: '50%',
+              margin: '0.75rem',
+            }}
+            className={colorIndex === index ? 'active' : 'inactive'}
+            onClick={() => {
+              setIndex(colorIndex);
+            }}
+          />
+        ))}
+      </div>
+    </div>
   );
 }
 
-- 
cgit v1.2.3