True centre on full height fix

hmziqrs · Oct 9, 2024 · 6af53c7 · 6af53c7
1 parent 34f6b4e
commit 6af53c7
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 18 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -43,7 +43,7 @@ export default function RootLayout({
         />
       </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased dark:bg-gray-900 dark:text-white`}
       >
         {children}
       </body>
@@ -94,6 +94,8 @@ export default function RootLayout({
 
 
 
+
+
 
 
 
diff --git a/app/page.tsx b/app/page.tsx
@@ -3,22 +3,64 @@ import SocialLinks from './socials';
 
 export default function Home() {
   return (
-    <div className="dark:bg-gray-900 dark:text-white grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start font-[family-name:var(--font-geist-mono)]">
-        <div className="list-inside list-decimal text-sm text-center sm:text-left">
-          <h1 className="text-2xl md:text-4xl sm:text-3xl">
-            Busy building and accelerating
-          </h1>
-          <div className="h-2" />
-          <p>more updates coming soon!</p>
-          <div className="h-4" />
-          <p className="text-lg sm:text-xl">follow @{username}</p>
-        </div>
-        <SocialLinks />
-      </main>
-    </div>
+    <main className="fixed h-full w-full flex flex-col items-center justify-center bg-red-900 font-[family-name:var(--font-geist-mono)]">
+      <div className="text-center sm:text-left">
+        <h1 className="text-3xl md:text-5xl sm:text-4xl">
+          Busy building and accelerating
+        </h1>
+        <div className="h-2" />
+        <p className="text-sm">more updates coming soon!</p>
+        <div className="h-4" />
+        <p className="text-lg sm:text-xl">follow @{username}</p>
+        <div className="h-4" />
+      </div>
+      <SocialLinks />
+    </main>
   );
 }
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/socials.tsx b/app/socials.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { links } from './data';
 
-function SocialLinks() {
+export default function SocialLinks() {
   return (
-    <div className="flex flex-row self-stretch space-x-5">
+    <div className="flex flex-row space-x-5">
       {links.map(({ name, url, Icon }) => (
         <a
           target="_blank"
@@ -19,5 +19,7 @@ function SocialLinks() {
   );
 }
 
-export default SocialLinks;
+
+
+