fix: tweaked the button group sizes

ribbon-studios · Mar 15, 2024 · 3eb33b3 · 3eb33b3
1 parent 9d9a93f
commit 3eb33b3
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 46 deletions.
diff --git a/src/components/ButtonGroup.module.css b/src/components/ButtonGroup.module.css
@@ -1,5 +1,6 @@
 .buttons {
-  @apply flex gap-[1px] flex-wrap;
+  @apply grid grid-cols-[repeat(3,minmax(min-content,1fr))];
+  /* @apply flex gap-[1px] flex-wrap; */
 
   > * {
     @apply rounded-none flex-grow;

diff --git a/src/components/ButtonGroup.tsx b/src/components/ButtonGroup.tsx
@@ -10,7 +10,7 @@ type Props = {
 
 export const ButtonGroup: FC<Props> = ({ label, children, vertical }) => {
   return (
-    <div className="flex flex-col rounded-md overflow-hidden bg-secondary w-full sm:max-w-80">
+    <div className="flex flex-col rounded-md overflow-hidden bg-secondary w-full">
       <div className="flex items-center justify-between gap-2 p-4 border-b border-b-white/10 font-bold">{label}</div>
       <div className={cn(styles.buttons, vertical && styles.vertical)}>{children}</div>
     </div>

diff --git a/src/pages/SplashPage.tsx b/src/pages/SplashPage.tsx
@@ -9,8 +9,8 @@ export const Component: FC = () => {
   return (
     <>
       <div className="flex flex-col items-center mt-24 gap-4 text-center mx-4">
-        <h1 className="text-4xl sm:text-6xl xl:text-8xl font-bold">Simplified Linux Gaming</h1>
-        <h2 className={`text-4xl sm:text-5xl xl:text-7xl font-bold ${styles.rainbow}`}>Protontweaks</h2>
+        <h1 className="text-4xl sm:text-6xl xl:text-7xl font-bold">Simplified Linux Gaming</h1>
+        <h2 className={`text-4xl sm:text-5xl xl:text-6xl font-bold ${styles.rainbow}`}>Protontweaks</h2>
         <Code>curl -fsSL {location.origin}/install.sh | bash</Code>
         <div className="italic sm:max-w-lg">
           The command above will detect the available package managers on your system and provide you various options
@@ -19,49 +19,52 @@ export const Component: FC = () => {
         <Button className="w-full sm:w-fit" to="/apps">
           Checkout the Tweak Database!~ ❤️🎮
         </Button>
-        <ButtonGroup
-          label={
-            <>
-              Repositories
-              <CodeIcon />
-            </>
-          }
-        >
-          <Button to="https://github.com/rain-cafe/protontweaks">
-            CLI
-            <ExternalLink size={20} />
-          </Button>
-          <Button to="https://github.com/rain-cafe/protontweaks-ui">
-            App
-            <ExternalLink size={20} />
-          </Button>
-          <Button to="https://github.com/rain-cafe/protontweaks-db">
-            Database
-            <ExternalLink size={20} />
-          </Button>
-        </ButtonGroup>
+        <h3 className={`text-2xl sm:text-3xl xl:text-4xl font-bold`}>Checkout our Repos!</h3>
+        <div className="flex flex-col sm:flex-row gap-4 items-start w-full sm:w-fit">
+          <ButtonGroup
+            label={
+              <>
+                Protontweaks
+                <CodeIcon />
+              </>
+            }
+          >
+            <Button to="https://github.com/rain-cafe/protontweaks">
+              CLI
+              <ExternalLink size={20} />
+            </Button>
+            <Button to="https://github.com/rain-cafe/protontweaks-ui">
+              App
+              <ExternalLink size={20} />
+            </Button>
+            <Button to="https://github.com/rain-cafe/protontweaks-db">
+              Database
+              <ExternalLink size={20} />
+            </Button>
+          </ButtonGroup>
 
-        <ButtonGroup
-          label={
-            <>
-              Libraries
-              <LibraryBig />
-            </>
-          }
-        >
-          <Button to="https://github.com/rain-cafe/protontweaks-api-rs" className="justify-between">
-            Rust
-            <ExternalLink size={20} />
-          </Button>
-          <Button to="https://github.com/rain-cafe/protontweaks-api-js" className="justify-between" disabled>
-            NodeJS
-            <ExternalLink size={20} />
-          </Button>
-          <Button to="https://github.com/rain-cafe/protontweaks-db" className="justify-between" disabled>
-            Python
-            <ExternalLink size={20} />
-          </Button>
-        </ButtonGroup>
+          <ButtonGroup
+            label={
+              <>
+                Libraries (interact with our api!)
+                <LibraryBig />
+              </>
+            }
+          >
+            <Button to="https://github.com/rain-cafe/protontweaks-api-rs">
+              Rust
+              <ExternalLink size={20} />
+            </Button>
+            <Button to="https://github.com/rain-cafe/protontweaks-api-js" disabled>
+              NodeJS
+              <ExternalLink size={20} />
+            </Button>
+            <Button to="https://github.com/rain-cafe/protontweaks-db" disabled>
+              Python
+              <ExternalLink size={20} />
+            </Button>
+          </ButtonGroup>
+        </div>
       </div>
     </>
   );