From 586c73ab3e35a514d3cd0785f5ed385d285ec725 Mon Sep 17 00:00:00 2001
From: Samuel Breznjak <samuelbreznjak35@gmail.com>
Date: Mon, 10 Jul 2023 01:15:27 +0200
Subject: [PATCH] made app responsive

---
 src/components/Card.tsx                  |  20 ++-
 src/components/IconButton.tsx            |   7 +-
 src/components/LeaderboardMain.tsx       |  15 +-
 src/components/Navbar.tsx                |   7 +-
 src/components/ProfileDropdown.tsx       |   2 +-
 src/components/ProfileDropdownButton.tsx |   2 +-
 src/components/Score.tsx                 |   2 +-
 src/components/SignInMain.tsx            |   3 +-
 src/components/TryAgainModal.tsx         |   8 +-
 src/components/VSComponent.tsx           |   5 +-
 src/index.css                            | 219 +++++++++++++++++++----
 src/pages/ErrorPage.tsx                  |  10 +-
 src/pages/Game.tsx                       |   8 +-
 src/pages/Home.tsx                       |   6 +-
 tailwind.config.js                       |  26 +++
 15 files changed, 257 insertions(+), 83 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index b7fe252..1c99b30 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -22,34 +22,36 @@ export default function Card({ name, avatar_url, stargazers_count, showButtonsPr
   }
   
   return (
-    <div className="flex flex-col justify-center items-center text-center">
-      <img width={100} src={avatar_url} alt={name} />
+    <div className="card-wrapper">
+      <img className="img-repo" src={avatar_url} alt={name} />
 
-      <h1 className="text-[35px] font-bold mt-6">{name}</h1>
+      <h1 className="repo-name-heading">{name}</h1>
 
-      <p className="my-2">has</p>
+      <p className="has-word">has</p>
 
       {showButtons ?
         <div>
           <div className="flex flex-col w-min mx-auto">
             <IconButton 
-              icon={<AiOutlineCaretUp className="w-6 h-6 ml-3" />}
+              icon={<AiOutlineCaretUp className="w-6 h-6 ml-3 m700:w-4 m700:h-4" />}
               onClick={() => handleButtonClick((stargazers_count > prevRepo?.stargazers_count))}
               text="Higher"
+              classNames="card-button m700:mb-2"
             />
 
             <IconButton 
-              icon={<AiOutlineCaretDown className="w-6 h-6 ml-4" />}
+              icon={<AiOutlineCaretDown className="w-6 h-6 ml-4 m700:w-4 m700:h-4" />}
               onClick={() => handleButtonClick(stargazers_count < prevRepo?.stargazers_count)}
               text="Lower"
+              classNames="card-button m700:mb-1"
             />
           </div>
 
-          <p className="mt-2">stars than {prevRepo?.name}</p>
+          <p className="stars-than">stars than {prevRepo?.name}</p>
         </div>
         :
         <div>
-          <h2 className="text-[30px] font-bold">
+          <h2 className="stars-count">
             {showButtonsProp ?
               <CountUp
                 isCounting={true}
@@ -62,7 +64,7 @@ export default function Card({ name, avatar_url, stargazers_count, showButtonsPr
             }
           </h2>
       
-          <p className="my-2">stars on github</p>
+          <p className="stars-on-github">stars on github</p>
         </div>
       }
     </div>
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index d1a52ab..c48de0e 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -1,12 +1,13 @@
 type ButtonProps = {
   onClick: any
   icon: JSX.Element,
-  text: string
+  text: string,
+  classNames: string
 }
 
-export default function IconButton({ onClick, icon, text }: ButtonProps) {
+export default function IconButton({ onClick, icon, text, classNames }: ButtonProps) {
   return (
-    <button onClick={onClick} className="button flex items-center px-14 py-3.5 my-2">
+    <button onClick={onClick} className={classNames}>
       {text}
       {icon}
     </button>
diff --git a/src/components/LeaderboardMain.tsx b/src/components/LeaderboardMain.tsx
index 175f968..b89c8ce 100644
--- a/src/components/LeaderboardMain.tsx
+++ b/src/components/LeaderboardMain.tsx
@@ -36,18 +36,19 @@ export default function LeaderboardMain() {
 
   return (
     <main className="main">
-      <div>
-        <h1 className="text-white font-bold mx-auto text-[40px]">
+      <div className="w-[600px] mx-5 m500:mx-0">
+        <h1 className="leaderboard-heading">
           Leaderboard
         </h1>
 
-        <div className="w-[600px] mt-[50px] border border-white/30 rounded-xl">
-          <table className="w-full text-white rounded-xl">
+        <div className="w-full mt-[50px] border border-white/30 rounded-xl">
+          <table className="w-full text-white rounded-xl m600:text-sm">
             <thead>
               <tr className="bg-primaryBlack hover:bg-secondaryBlack transition">
-                <td className="w-[50px] py-2">#</td>
+                <td className="w-[50px] m550:w-10 py-2">#</td>
                 <td className="text-left pl-4 py-2">Username</td>
-                <td className="w-[120px] py-2">High score</td>
+                <td className="w-[120px] hidden leaderboardDesktop:table-cell py-2">High score</td>
+                <td className="w-[50px] hidden leaderboardMobile:table-cell py-2">HS</td>
               </tr>
             </thead>
             <tbody>
@@ -55,7 +56,7 @@ export default function LeaderboardMain() {
                 return(
                   <tr className="bg-primaryBlack hover:bg-secondaryBlack transition" key={index}>
                     <td className="py-2">{index + 1}</td>
-                    <td className="py-2 pl-4 text-left">{player.username}</td>
+                    <td className="username-table-cell">{player.username}</td>
                     <td className="py-2">{player.high_score}</td>
                   </tr>
                 )
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f531c43..fc131d7 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -11,17 +11,18 @@ export default function Navbar() {
     <nav>
       <div className="navbar justify-between">
         <Link to={"/"}>
-          <h1 className="font-bold text-2xl hover:text-white/80">Higher Lower</h1>
+          <h1 className="font-bold hidden desktop:block text-2xl hover:text-white/80">Higher Lower</h1>
+          <h1 className="font-bold hidden mobile:block text-2xl hover:text-white/80">HL</h1>
         </Link>
 
         <div className="flex items-center">
-          <Link className="hover:text-white/80" to={"/leaderboard"}>Leaderboard</Link>
+          <Link className="hover:text-white/80 m600:text-[13px]" to={"/leaderboard"}>Leaderboard</Link>
 
           {signedIn ?
             <ProfileButton />
             :
             <Button 
-              classNames={"px-5 py-3 ml-8 button"}
+              classNames={"navbar-sign-in-button"}
               onClick={() => {navigate('/sign-in')}}
               text={"Sign In"}
             />
diff --git a/src/components/ProfileDropdown.tsx b/src/components/ProfileDropdown.tsx
index a158493..50d3c32 100644
--- a/src/components/ProfileDropdown.tsx
+++ b/src/components/ProfileDropdown.tsx
@@ -18,7 +18,7 @@ export default function ProfileDropdown({ active }: { active: boolean } ) {
   return (
     <div className={active ? "profile-dropdown-active" : "hidden"}>
       <div className='px-5 py-2'>
-        <h4 className='font-medium text-center'>{username}</h4>
+        <h4 className='profile-dropdown-username'>{username}</h4>
       </div>
 
       <ProfileDropdownButton 
diff --git a/src/components/ProfileDropdownButton.tsx b/src/components/ProfileDropdownButton.tsx
index d2151d0..996be34 100644
--- a/src/components/ProfileDropdownButton.tsx
+++ b/src/components/ProfileDropdownButton.tsx
@@ -7,7 +7,7 @@ type ButtonProps = {
 export default function ProfileDropdownButton({ onClick, icon, text }: ButtonProps) {
   return (
     <button onClick={onClick} className="profile-dropdown-button">
-      <span className="mr-5">
+      <span className="mr-5 m600:mr-3">
         {icon}
       </span>
       {text}
diff --git a/src/components/Score.tsx b/src/components/Score.tsx
index a51ca63..cc5e8e2 100644
--- a/src/components/Score.tsx
+++ b/src/components/Score.tsx
@@ -6,7 +6,7 @@ export default function Score() {
   const { score, highScore } = useScoreStore()
 
   return (
-    <div className={signedIn ? "score justify-between" : "score justify-center"}>
+    <div className={signedIn ? "score justify-between" : "score justify-center portrait:justify-between"}>
       <p>Score: {score}</p>
       {signedIn && <p>High score: {highScore}</p>}
     </div>
diff --git a/src/components/SignInMain.tsx b/src/components/SignInMain.tsx
index 0285ea2..4091fbc 100644
--- a/src/components/SignInMain.tsx
+++ b/src/components/SignInMain.tsx
@@ -19,7 +19,7 @@ export default function SignInMain() {
 
   return (
     <div className="main items-center flex-col">
-      <h1 className="text-white font-bold w-[80%] mb-8 mx-auto text-[40px]">
+      <h1 className="sign-in-heading">
         Sign in
       </h1>
 
@@ -28,6 +28,7 @@ export default function SignInMain() {
           onClick={() => signIn("github")}
           icon={<AiFillGithub className="w-6 h-6 ml-3" />}
           text="Sign in with"
+          classNames="icon-button"
         />
       </div>
     </div>
diff --git a/src/components/TryAgainModal.tsx b/src/components/TryAgainModal.tsx
index f7523ff..7e77726 100644
--- a/src/components/TryAgainModal.tsx
+++ b/src/components/TryAgainModal.tsx
@@ -14,19 +14,19 @@ export default function TryAgainModal({ active }: Props) {
   return (
     <div className={active ? "active-modal" : "not-active-modal"}>
       <div className="modal-main">
-        <h2 className="font-bold text-[30px]">You scored</h2>
+        <h2 className="font-bold text-[30px] m700:text-[25px]">You scored</h2>
 
-        <h3 className="font-bold text-[35px] my-5">{score}</h3>
+        <h3 className="font-bold text-[35px] m700:text-[28px] m700:my-4 my-5">{score}</h3>
 
         <div className="flex flex-col w-max">
           <Button
-            classNames="button px-8 py-2.5 mb-4 text-[18px]"
+            classNames="button px-8 py-2.5 mb-4 text-[18px] m700:text-base"
             onClick={() => navigate("/")}
             text="Back to home"
           />
 
           <Button
-            classNames="button px-8 py-2.5 text-[18px]"
+            classNames="button px-8 py-2.5 text-[18px] m700:text-base"
             onClick={() => navigate(0)}
             text="Play again"
           />
diff --git a/src/components/VSComponent.tsx b/src/components/VSComponent.tsx
index 59275b2..d0049e6 100644
--- a/src/components/VSComponent.tsx
+++ b/src/components/VSComponent.tsx
@@ -15,10 +15,9 @@ export default function VSComponent({ active, correct }: Props) {
         vs
 
         <div
-          style={{ top: correct ? '0' : '65px'  }}
-          className="vs-component-icon-wrapper"
+          className={correct ? "vs-component-icon-wrapper top-0" : "vs-component-icon-wrapper-hidden"}
         >
-          <IoMdCheckmark className="w-8 h-8 fill-[#111111]" />
+          <IoMdCheckmark className="vs-component-checkmark" />
         </div>
 
         <div className="vs-component-hiding-layer"></div>
diff --git a/src/index.css b/src/index.css
index 536a653..68a748e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,7 +10,7 @@
 
 body {
   font-family: "Space Grotesk", sans-serif;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .radial-gradient-bg {
@@ -22,40 +22,158 @@ body {
   );
 }
 
-.main {
-  @apply min-h-[calc(100vh-98px-72px)] w-container px-containerDesktop mx-auto flex text-center py-[50px] justify-center;
+/* --------------------  Components A-Z  -------------------- */
+
+/* Card */
+
+.card-wrapper {
+  @apply flex flex-col justify-center items-center text-center
 }
 
-.button {
-  @apply bg-buttonBg font-medium outline outline-1 outline-transparent transition-all rounded-xl hover:bg-buttonHoverBg text-white;
+.img-repo {
+  @apply w-[100px] m1000:w-16 portrait-lg:w-16 m700:w-8
+}
+
+.repo-name-heading {
+  @apply text-[35px] font-bold mt-6 m1200:text-[28px] m1000:text-[20px] portrait-lg:text-[20px] m700:text-[17px] 
+  m700:mt-3 m550:text-[14px] m550:mt-1
+}
+
+.has-word {
+  @apply my-2 portrait-lg:my-2 m700:text-sm m550:text-[12px] m550:my-1
+}
+
+.card-button {
+  @apply icon-button m1000:px-9 m1000:text-sm m1000:py-2.5 portrait-lg:px-9 portrait-lg:text-sm portrait-lg:py-2.5 
+  m700:py-1.5 m700:text-[12px] m700:mt-0 m550:text-[11px] m550:py-1
+}
+
+.stars-count {
+  @apply text-[30px] m1000:text-xl portrait-lg:text-xl m700:text-base tracking-wider font-bold m550:text-[14px]
 }
 
+.stars-than {
+  @apply mt-2 portrait-lg:my-2 m700:text-sm m550:text-[12px] m550:my-1
+}
+
+.stars-on-github {
+  @apply my-2 portrait-lg:my-2 m700:text-sm m550:text-[12px] m550:my-1
+}
+
+/* IconButton */
+
+.icon-button {
+  @apply button flex items-center px-14 py-3.5 my-2
+}
+
+/* LeaderboardMain */
+
+.leaderboard-heading {
+  @apply text-white font-bold mx-auto text-[40px] m1000:text-[30px] m600:w-full m600:text-[25px]
+}
+
+.username-table-cell {
+  @apply max-w-[300px] m450:max-w-[150px] py-2 px-4 text-left overflow-hidden overflow-ellipsis whitespace-nowrap
+}
+
+table,
+th,
+td {
+  border-collapse: collapse;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+table {
+  border-collapse: collapse;
+  border-radius: 1em;
+  overflow: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/* Navbar */
+
 .navbar {
-  @apply w-container px-containerDesktop max-w-full h-[98px] mx-auto flex items-center text-white;
+  @apply w-container px-containerDesktop m700:px-containerMobile max-w-full h-[98px] mx-auto flex items-center
+  text-white;
+}
+
+.navbar-sign-in-button {
+  @apply px-5 py-3 ml-8 button m600:text-[13px] m600:py-2 m600:px-3.5 m600:ml-6
 }
 
+/* ProfileButton */
+
 .profile-button {
-  @apply w-11 h-11 rounded-full bg-center bg-cover bg-no-repeat outline outline-2 outline-transparent transition-all hover:outline-white/50;
+  @apply w-11 h-11 rounded-full bg-center bg-cover bg-no-repeat outline outline-2 outline-transparent transition-all 
+  hover:outline-white/50;
 }
 
+/* ProfileDropdown */
+
 .profile-dropdown-active {
   @apply absolute top-16 right-0 bg-primaryBlack border-white/50 border-2 w-max block p-2 rounded-xl;
 }
 
+.profile-dropdown-username {
+  @apply font-medium text-center m600:text-[13px] max-w-[200px] m400:max-w-[140px] overflow-hidden overflow-ellipsis 
+  whitespace-nowrap
+}
+
+/* ProfileDropdownButton */
+
 .profile-dropdown-button {
-  @apply px-5 py-2 rounded-xl hover:bg-secondaryBlack transition w-full text-left flex items-center justify-center;
+  @apply px-5 py-2 rounded-xl hover:bg-secondaryBlack transition w-full text-left flex items-center justify-center 
+  m600:text-[13px];
 }
 
+/* Score */
+
 .score {
-  @apply absolute w-full left-0 bottom-0 p-10 text-[20px] flex items-center text-white;
+  @apply absolute w-full left-0 bottom-0 p-10 text-[20px] flex items-center text-white portrait-main:text-[12px] 
+  portrait-main:p-5 portrait-smallest:text-[10px] portrait-smallest:p-3;
+}
+
+/* SignInMain */
+
+.sign-in-heading {
+  @apply text-white font-bold w-[80%] mb-8 mx-auto text-[40px] m1000:text-[30px] m1000:mb-4
+}
+
+/* SignInMessage */
+
+.sign-in-message-wrapper {
+  @apply w-full fixed left-0 bottom-0 z-10 my-[25px] h-[70px] px-5;
+}
+
+.sign-in-message-main {
+  @apply mx-auto h-full text-center bg-primaryBlack border-white/50 px-6 border-2 flex justify-center rounded-xl 
+  items-center text-white w-[600px] m650:w-max m650:max-w-full m600:text-[13px]
+}
+
+/* TryAgainModal */
+
+.active-modal {
+  @apply z-20 fixed w-full h-full left-0 top-0 flex bg-transparent items-center duration-[500ms] backdrop-blur-sm 
+  justify-center visible;
+}
+
+.not-active-modal {
+  @apply invisible fixed w-full h-full left-0 top-0 flex bg-transparent items-center duration-[500ms] justify-center;
 }
 
+/* VSComponent */
+
 .vs-component-wrapper {
-  @apply transition w-16 h-16 text-white flex rounded-full items-center justify-center absolute top-[calc(50vh-32px)] left-[calc(50%-32px)];
+  @apply transition w-16 h-16 text-white flex rounded-full items-center justify-center absolute top-[calc(50vh-32px)] 
+  left-[calc(50%-32px)] m1000:w-10 m1000:h-10 m1000:top-[calc(50vh-20px)] m1000:left-[calc(50%-20px)] m700:top-[calc(50vh-10px)] 
+  m700:left-[calc(50%-10px)] m700:w-5 m700:h-5 portrait-smaller:w-10 portrait-smaller:h-10 portrait-smaller:top-[calc(50vh-20px)] 
+  portrait-smaller:left-[calc(50%-20px)];
 }
 
 .vs-component-secondary-wrapper {
-  @apply w-full h-full relative flex items-center justify-center text-[20px];
+  @apply w-full h-full relative flex items-center justify-center text-[20px] m1000:text-base portrait-smaller:text-base 
+  m700:text-[12px];
 }
 
 .vs-component-icon-wrapper {
@@ -63,48 +181,75 @@ body {
 }
 
 .vs-component-hiding-layer {
-  @apply top-[65px] absolute w-full h-full flex items-center justify-center bg-primaryBlack;
+  @apply top-[65px] m1000:top-[41px] portrait-smaller:top-[41px] m700:top-[21px] absolute w-full h-full flex items-center 
+  justify-center bg-primaryBlack;
 }
 
-.game-wrapper {
-  @apply w-[150%] overflow-hidden text-white grid grid-cols-3 h-screen radial-gradient-bg;
+.vs-component-icon-wrapper-hidden {
+  @apply vs-component-icon-wrapper top-[65px] m1000:top-[41px] m700:top-[21px] portrait-smaller:top-[41px]
 }
 
-.active-modal {
-  @apply z-20 fixed w-full h-full left-0 top-0 flex bg-transparent items-center duration-[500ms] backdrop-blur-sm justify-center visible;
-}
+.vs-component-checkmark {
+  @apply w-8 h-8 m1000:w-6 m1000:h-6 m700:w-3 m700:h-3 portrait-smaller:w-6 portrait-smaller:h-6 fill-[#111111]
+} 
 
-.not-active-modal {
-  @apply invisible fixed w-full h-full left-0 top-0 flex bg-transparent items-center duration-[500ms] justify-center;
+/* --------------------  Pages A-Z  -------------------- */
+
+/* ErrorPage */
+
+.error-page {
+  @apply w-full fixed top-0 left-0 z-20 flex justify-center items-center min-h-screen radial-gradient-bg text-center
 }
 
 .modal-main {
-  @apply bg-primaryBlack border-2 text-white border-white/50 flex flex-col items-center p-10 rounded-lg mx-5;
+  @apply bg-primaryBlack border-2 max-w-[800px] m700:p-7 text-white border-white/50 flex flex-col items-center 
+  p-10 rounded-lg mx-5;
 }
 
-table,
-th,
-td {
-  border-collapse: collapse;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.3);
+/* Game */
+
+.game-wrapper {
+  @apply landscape:w-[150%] landscape:h-screen mobile-height overflow-hidden text-white grid landscape:grid-cols-3 
+  portrait:grid-rows-3 radial-gradient-bg;
 }
 
-table {
-  border-collapse: collapse;
-  border-radius: 1em;
-  overflow: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.3);
+.grid-is-moved {
+  @apply game-wrapper blankbg landscape:-translate-x-1/3 portrait:-translate-y-1/3 transition-all duration-500
 }
 
-.sign-in-message-wrapper {
-  @apply w-full fixed left-0 bottom-0 z-10 my-[25px] h-[70px];
+.grid-isnt-moved {
+  @apply game-wrapper blankbg translate-x-0 translate-y-0 transition-none
 }
 
-.sign-in-message-main {
-  @apply mx-auto h-full text-center bg-primaryBlack border-white/50 px-3 border-2 flex justify-center rounded-xl items-center text-white w-[600px]
+/* Home */
+
+.home-heading {
+  @apply text-white font-bold w-[80%] mx-auto text-[40px] m1000:text-[30px] m600:w-full m600:text-[25px] m400:text-[20px]
 }
 
-.error-page {
-  @apply w-full fixed top-0 left-0 z-20 flex justify-center items-center min-h-screen radial-gradient-bg
+.home-cta-button {
+  @apply button px-10 py-3.5 text-[22px] m600:text-lg m600:px-8 m600:py-3 mt-6 m400:mt-4 m400:text-base m400:px-6 m400:py-2.5
+}
+
+/* --------------------  Other classes  -------------------- */
+
+.main {
+  @apply min-h-[calc(100vh-98px-72px)] w-container px-containerDesktop m700:px-containerMobile mx-auto flex text-center 
+  py-[70px] justify-center max-w-full;
+}
+
+.button {
+  @apply bg-buttonBg font-medium outline outline-1 outline-transparent transition-all rounded-xl hover:bg-buttonHoverBg 
+  text-white;
 }
+
+@media screen and (orientation:portrait) {
+  .blankbg {
+    background: #111111 !important;
+  }
+
+  .mobile-height {
+    height: 150vh;
+    height: 150svh;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/ErrorPage.tsx b/src/pages/ErrorPage.tsx
index 91d8a6c..f1fc321 100644
--- a/src/pages/ErrorPage.tsx
+++ b/src/pages/ErrorPage.tsx
@@ -9,16 +9,16 @@ export default function ErrorPage(props: FallbackProps) {
   return (
     <div className="error-page">
       <div className="modal-main">
-        <h2 className="font-bold text-[30px]">An error has occured.</h2>
+        <h2 className="font-bold text-[30px] m700:text-[25px]">An error has occured.</h2>
 
-        <p className="my-5 text-lg">Error: {error.message}</p>
+        <p className="my-5 text-lg m700:text-base m400:text-sm">{error.message}</p>
 
-        <p className="mb-3 text-lg">If this error keeps occurring please contact me via</p>
+        <p className="mb-3 text-lg m700:text-base m400:text-sm">If this error keeps occurring please contact me via</p>
 
-        <a className="underline mb-6" href="mailto:samuelbreznjak35@gmail.com">samuelbreznjak35@gmail.com</a>
+        <a className="underline mb-6 m400:text-sm" href="mailto:samuelbreznjak35@gmail.com">samuelbreznjak35@gmail.com</a>
 
         <Button
-          classNames="button px-8 py-2.5 mb-4 text-[18px]"
+          classNames="button px-8 py-2.5 mb-4 text-[18px] m700:text-base m400:text-sm"
           onClick={() => navigate(0)}
           text="Refresh page"
         />
diff --git a/src/pages/Game.tsx b/src/pages/Game.tsx
index 2ce180e..48a415b 100644
--- a/src/pages/Game.tsx
+++ b/src/pages/Game.tsx
@@ -118,11 +118,9 @@ export default function Game() {
   return (
     <>
       <div
-        style={{
-          transform: `translateX(${isGridMoved ? "-33.3%" : "0"})`,
-          transition: isGridMoved ? "all 0.5s" : "none",
-        }}
-        className="game-wrapper"
+        className={
+          isGridMoved ? "grid-is-moved" : "grid-isnt-moved"
+        }
       >
         {cards.map((card: Repository) => {
           return (
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index d5c279d..ad37734 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -5,20 +5,20 @@ import { useNavigate } from "react-router-dom"
 
 export default function Home() {
   const navigate = useNavigate()
-
+  
   return (
     <div className="w-full min-h-screen radial-gradient-bg ">
       <Navbar />
       <main className="main items-center">
         <div>
-          <h1 className="text-white font-bold w-[80%] mx-auto text-[40px]">
+          <h1 className="home-heading">
             Guess which github repository has a higher or lower amount of stars!
           </h1>
 
           <Button
             onClick={() => navigate("/app")}
             text="Play"
-            classNames="button px-10 py-3.5 text-[22px] mt-6"
+            classNames="home-cta-button"
           />
         </div>
       </main>
diff --git a/tailwind.config.js b/tailwind.config.js
index 2a58dc6..25bfb57 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,32 @@ export default {
       padding: {
         containerDesktop: '30px',
         containerMobile: '20px'
+      },
+      screens: {
+        'mobile': { 'raw': '(max-width: 599px)' },
+        'desktop': { 'raw': '(min-width: 600px)' },
+
+        'leaderboardDesktop': { 'raw': '(min-width: 550px)' },
+        'leaderboardMobile': { 'raw': '(max-width: 549px)' },
+
+        'm1200': { 'raw': '(max-width: 1200px)' },
+        'm1000': { 'raw': '(max-width: 1000px)' },
+        'm900': { 'raw': '(max-width: 900px)' },
+        'm850': { 'raw': '(max-width: 850px)' },
+        'm750': { 'raw': '(max-width: 750px)' },
+        'm700': { 'raw': '(max-width: 700px)' },
+        'm650': { 'raw': '(max-width: 650px)' },
+        'm600': { 'raw': '(max-width: 600px)' },
+        'm550': { 'raw': '(max-width: 550px)' },
+        'm500': { 'raw': '(max-width: 500px)' },
+        'm450': { 'raw': '(max-width: 450px)' },
+        'm400': { 'raw': '(max-width: 400px)' },
+        'm350': { 'raw': '(max-width: 350px)' },
+
+        'portrait-main': {'raw': '(orientation: portrait) and (max-height: 3000px)'},
+        'portrait-lg': {'raw': '(orientation: portrait) and (min-height: 770px)'},
+        'portrait-smaller': {'raw': '(orientation: portrait) and (min-height: 630px)'},
+        'portrait-smallest': {'raw': '(orientation: portrait) and (max-height: 540px)'}, 
       }
     },
   },