style tweak, move some files around

yianL · Jun 11, 2024 · 4e1d63f · 4e1d63f
1 parent aef1586
commit 4e1d63f
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 32 deletions.
diff --git a/app/play/page.tsx b/app/play/page.tsx
@@ -2,17 +2,18 @@ import Link from "next/link";
 import React from "react";
 
 import { GameBundles, getGamePath } from "../../lib/gameCatalog";
+import styles from "../../styles/styles.module.css";
 
 const CardClassNames = {
-  base: "relative rounded-lg md:h-[400px] md:w-[400px] w-full h-fit min-h-[300px] m-4 bg-cover bg-center bg-no-repeat transition origin-center overflow-hidden shadow-sm",
-  hover: "hover:scale-105 hover:shadow-md",
+  base: "relative rounded-lg md:h-[400px] md:w-[400px] w-full h-fit min-h-[300px] m-4 bg-cover bg-center bg-no-repeat transition origin-center overflow-hidden shadow-sm flex flex-col justify-stretch",
+  hover: "hover:scale-[1.02] hover:shadow-md",
   hide: "translate-x-full rotate-90 opacity-0",
 };
 
 export default function Index(): JSX.Element {
   return (
     <>
-      <h1 className="text-center m-4">Play</h1>
+      <h1 className="text-center text-6xl m-4">Play</h1>
       <div className="flex flex-wrap justify-center w-full p-4 max-w-4xl mx-auto">
         {Object.keys(GameBundles).map((handle, i) => (
           <div
@@ -22,21 +23,22 @@ export default function Index(): JSX.Element {
               backgroundImage: `url(${GameBundles[handle].screenshots[0]})`,
             }}
           >
-            <div className="absolute flex items-center w-full bottom-0 left-0 min-h-[100px] bg-black bg-opacity-50 backdrop-blur-sm p-3 text-neutral-100">
-              <div className="flex flex-col flex-grow">
-                <h2>
-                  {GameBundles[handle].name}
-                  <span className="text-xs mx-1 text-neutral-400">{`[v${GameBundles[handle].version}]`}</span>
-                </h2>
-                <div className="text-neutral-300">
-                  {GameBundles[handle].description ||
-                    "No Description. Just hit play."}
+            <div className={`w-full flex-grow ${styles.cardOverlay}`}>
+              <div className="absolute flex items-center w-full bottom-0 left-0 min-h-[100px] p-5 text-brand-200">
+                <div className="flex flex-col flex-grow">
+                  <h2 className="text-3xl">
+                    {GameBundles[handle].name}
+                    <span className="text-xs mx-1 text-neutral-400">{`[v${GameBundles[handle].version}]`}</span>
+                  </h2>
+                  <div className="text-neutral-300 my-4">
+                    {GameBundles[handle].description || "No Description yet."}
+                  </div>
+                </div>
+                <div className="flex-grow-0 text-4xl">
+                  <Link href={getGamePath(handle)} target="_blank">
+                    <i className="fas fa-play transition-colors hover:text-green-200 "></i>
+                  </Link>
                 </div>
-              </div>
-              <div className="flex-grow-0 text-4xl">
-                <Link href={getGamePath(handle)} target="_blank">
-                  <i className="fas fa-play transition-colors hover:text-green-200 "></i>
-                </Link>
               </div>
             </div>
           </div>

diff --git a/components/home.tsx b/components/home.tsx
@@ -15,8 +15,8 @@ const Home = ({ posts }: Props): JSX.Element => {
         <Link href={"/play"}>
           <Logo />
         </Link>
-        <h1>Yi-An Lai</h1>
-        <h2>Fullstack | Roadie</h2>
+        <h1 className="text-4xl">Yi-An Lai</h1>
+        <h2 className="text-2xl">Fullstack | Roadie</h2>
         <div className="flex flex-row items-center justify-center gap-2 text-2xl min-h-[40px]">
           <a
             href="https://www.linkedin.com/in/yi-an-lai-andrew/"

diff --git a/components/page-footer.tsx b/components/page-footer.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-import styles from "./styles.module.css";
+import styles from "../styles/styles.module.css";
 
 const PageFooter = (): JSX.Element => {
   return (

diff --git a/components/post-body.tsx b/components/post-body.tsx
@@ -1,4 +1,4 @@
-import markdownStyles from "./markdown-styles.module.css";
+import markdownStyles from "../styles/markdown-styles.module.css";
 
 interface Props {
   content: string;

diff --git a/components/styles.module.css b/components/styles.module.css
diff --git a/styles/index.css b/styles/index.css
@@ -7,13 +7,6 @@
     @apply bg-brand-50 text-brand-400 relative;
   }
 
-  h1 {
-    @apply text-4xl;
-  }
-  h2 {
-    @apply text-2xl;
-  }
-
   a {
     @apply hover:underline;
   }

diff --git a/components/markdown-styles.module.css → styles/markdown-styles.module.css b/components/markdown-styles.module.css → styles/markdown-styles.module.css
diff --git a/styles/styles.module.css b/styles/styles.module.css
@@ -0,0 +1,11 @@
+.footer li:not(:last-child)::after {
+  content: "|";
+  @apply mx-4;
+}
+
+.cardOverlay {
+  background-image: linear-gradient(
+    transparent 25%,
+    theme(colors.brand.950) 90%
+  );
+}