Merge pull request #123 from Speedrunyourknowledge/feat/css-grid

update: add css grid for topics

Author: Speedrunyourknowledge

calc-frontend/package-lock.json

@@ -28,32 +28,35 @@ body {
     font-size:1.5rem;
   }
 
-  .link-box{
-    @apply h-20 flex w-full items-center justify-center 
-    bg-amber-300 rounded-lg hover:bg-amber-400 transition transform hover:scale-103 
-    duration-200 border-2 border-solid;
-  }
-
   .topic-header{
     margin-bottom:1.125rem;
   }
 
   .topic-list{
-    width:50%;
+    @apply items-center justify-center;
+
     max-width: 100%;
     margin:auto;
+    padding-right:20px;
+    padding-left:20px;
+
+    display:grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: auto;
+    column-gap: 20px;
+    row-gap:20px;
   }
 
-  .home-list{
-    width:50%;
-    max-width: 100%;
-    margin:auto;
+  .topic-list-3{
+    grid-template-columns: 1fr 1fr 1fr;
+    width:75%;
   }
 
   .topic-box{
-    @apply h-20 flex w-full items-center justify-center 
+    @apply h-20 flex items-center justify-center 
     bg-amber-300 rounded-lg hover:bg-amber-400 transition transform hover:scale-103 
     duration-200 border-2 border-solid;
+
   }
 
   .back-button{
@@ -102,13 +105,11 @@ body {
   @media (max-width: 999px) {
 
     .topic-list{
-      @apply gap-4;
-      width: 70%;
+      grid-template-columns: 1fr 1fr 1fr;
     }
 
-    .home-list{
-      @apply gap-4;
-      width: 70%;
+    .topic-list-3{
+      width:100%;
     }
 
   }
@@ -124,13 +125,12 @@ body {
   @media (max-width: 599px) {
 
     .topic-list{
-      width: 100%;
+      grid-template-columns: 1fr 1fr;
     }
 
-    .home-list{
-      width: 100%;
+    .topic-list-3{
+      grid-template-columns: 1fr 1fr;
     }
-
   }
 
   @media (min-width: 800px) {

calc-frontend/src/App/app.css

@@ -11,7 +11,7 @@ function Derivatives() {
       </Link>
 
       <h2 className="topic-header m-auto w-fit">The Derivative of Common Functions</h2>
-      <div className="flex flex-col gap-6 items-center topic-list">
+      <div className="topic-list">
 
         <Link to="/derivatives/custom" className="topic-box">
           <button className="px-10 text-2xl cursor-pointer">Custom</button>

calc-frontend/src/pages/Derivatives.tsx

@@ -6,7 +6,7 @@ function Home() {
     <div>
       <h2 className = "topic-header m-auto w-fit">Topics</h2>
 
-      <div className="flex flex-col gap-6 m-auto home-list">
+      <div className="topic-list topic-list-3" style={{marginBottom:'1rem'}}>
         {
           /*
           <Link to="/limits" className = "link-box">
@@ -15,20 +15,21 @@ function Home() {
           */
         }
 
-          <Link to="/derivatives" className = "link-box">
+          <Link to="/derivatives" className = "topic-box">
               <div className="link-title">Derivatives</div>
           </Link>
 
-          <Link to="/integrals" className = "link-box">
+          <Link to="/integrals" className = "topic-box">
               <div className="link-title">Integrals</div>
           </Link>
 
-          <Link to="/unit-circle" className = "link-box">
+          <Link to="/unit-circle" className = "topic-box">
               <div className="link-title">Unit Circle</div>
           </Link>
 
-          <h3 className = "topic-header m-auto w-fit">More topics coming soon...</h3>
       </div>
+
+      <h3 className = "topic-header m-auto w-fit">More topics coming soon...</h3>
 
     </div>
   )

calc-frontend/src/pages/Home.tsx

@@ -11,7 +11,7 @@ function Integrals() {
       </Link>
 
       <h2 className="topic-header m-auto w-fit">The Integral of Common Functions</h2>
-      <div className="flex flex-col gap-6 items-center topic-list">
+      <div className="topic-list">
 
         <Link to="/integrals/custom" className="topic-box">
           <button className="px-10 text-2xl cursor-pointer">Custom</button>

calc-frontend/src/pages/Integrals.tsx

@@ -11,7 +11,7 @@ function UnitCircle() {
       </Link>
 
       <h2 className="topic-header m-auto w-fit">Interpreting the Unit Circle</h2>
-      <div className="flex flex-col gap-6 items-center topic-list">
+      <div className="topic-list topic-list-3">
 
         <Link to="/unit-circle/sine" className="topic-box">
           <button className="px-10 text-2xl cursor-pointer">Sine</button>