Cleanup some CSS

Author: andrewhong04

src/components/get-involved.tsx

@@ -4,21 +4,13 @@ import Button from '@/components/button';
 export default function GetInvolved() {
   return (
     <div className={styles.getinvolved}>
-      <div className={styles.showcasecontainer}>
-        <div className={styles.showcaseimage} />
-        <a href="https://plasmastarfish.itch.io/six-shooter">
-          <p>&quot;Six Shooter&quot; by plasmastarfish</p>
-        </a>
-      </div>
-      <div>
-        <div className={styles.card}>
-          <div className={styles.label}>Get Involved</div>
-          Join the global team behind the most popular Python game framework. Ranging from documentation revisions to
-          introducing new features to the pygame API.
-          <div style={{ display: 'flex', marginTop: '10px' }}>
-            <Button text="GitHub" fontSize="1.2rem" link="https://github.com/pygame-community" />
-            <Button text="Discord" fontSize="1.2rem" link="https://discord.gg/pygame" />
-          </div>
+      <div className={styles.card}>
+        <div className={styles.label}>Get Involved</div>
+        Join the global team behind the most popular Python game framework. Ranging from documentation revisions to
+        introducing new features to the pygame API.
+        <div style={{ display: 'flex', marginTop: '10px' }}>
+          <Button text="GitHub" fontSize="1.2rem" link="https://github.com/pygame-community" />
+          <Button text="Discord" fontSize="1.2rem" link="https://discord.gg/pygame" />
         </div>
       </div>
     </div>

src/components/powered.tsx

@@ -3,6 +3,7 @@ import styles from '@/styles/powered.module.css';
 import drawnDownAbyss1 from '@/assets/drawn-down-abyss-1.png';
 import froggo1 from '@/assets/froggo-swing-n-grapple-1.png';
 import resync1 from '@/assets/resync-1.png';
+import sixshooter1 from '@/assets/six-shooter-1.png';
 import tuxemon1 from '@/assets/tuxemon-1.png';
 import PoweredCard from './powered-card';
 
@@ -38,6 +39,12 @@ const games = [
     image: tuxemon1.src,
     mainlink: 'https://github.com/Tuxemon/Tuxemon',
   },
+  {
+    name: 'Six Shooter',
+    author: 'plasmastarfish',
+    image: sixshooter1.src,
+    mainlink: 'https://plasmastarfish.itch.io/six-shooter',
+  },
 ];
 
 class Powered extends React.Component<any, any> {

src/pages/index.tsx

@@ -1,5 +1,4 @@
 import Head from 'next/head';
-import styles from '@/styles/Home.module.css';
 import Navbar from '@/components/nav-bar';
 import Hero from '@/components/hero';
 import About from '@/components/about';
@@ -16,7 +15,7 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className={styles.main}>
+      <main>
         <Navbar />
         <Hero />
         <About />

src/styles/Home.module.css

@@ -9,24 +9,19 @@
 }
 
 .textcontainer {
-  font-size: 3.5rem;
-}
-
-.disclaimer {
-  font-size: 1rem;
+  font-size: 3vw;
 }
 
 .pipinstallcontainer {
   width: max-content;
   background-color: rgb(20, 20, 20);
-  border-radius: 0.25em;
-  padding: 0.25em 0.5em;
-
-  margin-top: 0.5em;
+  border-radius: 1vw;
+  padding: 1vw;
+  margin-top: 8px;
 }
 
 .pipinstall {
-  font-size: 1.2rem;
+  font-size: 1.2vw;
   font-family: 'Source Code Pro', monospace;
 
   overflow: hidden;
@@ -47,8 +42,8 @@
 }
 
 .showcaseimage {
-  width: 750px;
-  height: 600px;
+  width: 45vw;
+  height: 38vw;
   border-radius: 10px;
   background-color: aliceblue;
   background-image: url(https://i.imgur.com/7mOk5E7.gif);
@@ -86,65 +81,13 @@
   }
 }
 
-@media only screen and (max-width: 1500px) {
-  .textcontainer {
-    font-size: 3rem;
-  }
-
-  .pipinstall {
-    font-size: 1rem;
-  }
-
-  .showcasecontainer {
-    font-size: 0.7rem;
-  }
-
-  .showcaseimage {
-    width: 500px;
-    height: 400px;
-  }
-}
-
-@media only screen and (max-width: 1200px) {
-  .textcontainer {
-    font-size: 2.3rem;
-  }
-
-  .pipinstall {
-    font-size: 0.6rem;
-  }
-
-  .showcasecontainer {
-    font-size: 0.7rem;
-  }
-
-  .showcaseimage {
-    width: 375px;
-    height: 300px;
-  }
-}
-
 @media only screen and (max-width: 950px) {
-  .textcontainer {
-    font-size: 1.9rem;
-  }
-
   .showcasecontainer {
     display: none;
   }
 }
 
 @media only screen and (max-width: 600px) {
-  .textcontainer {
-    font-size: 1.5rem;
-  }
-
-  .pipinstall {
-    font-size: 0.5rem;
-    padding: 15px;
-    border-radius: 10px;
-  }
-
   .pipinstallcontainer,
   .pipinstall {
     display: none;