Improve visual spacing

Author: Speedrunyourknowledge

calc-frontend/src/App/RootLayout.tsx

@@ -12,7 +12,7 @@ function RootLayout(){
     <>
       <ScrollRestoration/>
 
-      <div className="header flex items-center justify-between gap-6">
+      <div className="header flex items-center justify-between gap-4">
 
         <div className="flex items-center gap-2">
           <Link to ='/'>
@@ -27,8 +27,8 @@ function RootLayout(){
 
         </div>
 
-          <a href="https://www.ucf.edu/" target="_blank" className="w-fit h-[75px]">
-            <img className="rounded-sm max-h-[100%]" src={ucfLogo} alt="UCF logo"></img>
+          <a href="https://www.ucf.edu/" target="_blank" className="h-[75px] shrink-0">
+            <img className="rounded-sm h-[100%] object-contain" src={ucfLogo} alt="UCF logo"></img>
           </a>  
 
       </div>

calc-frontend/src/App/app.css

@@ -2,7 +2,7 @@
 
 :root{
     margin: 0 auto;
-    padding: 1.5rem;
+    padding: 1rem;
 
 }
 
@@ -34,6 +34,10 @@ body {
     duration-200;
   }
 
+  .topic-header{
+    margin-bottom:.25rem;
+  }
+
   .topic-box{
     @apply h-20 flex w-1/2 items-center justify-center 
     bg-amber-300 rounded-lg hover:bg-amber-400 transition transform hover:scale-103 
@@ -59,12 +63,23 @@ body {
     font-weight: bold;
   }
 
+  @media (max-width: 768px) {
+
+    .topic-list{
+      @apply gap-4;
+    }
+  }
+
+
   h1{
     font-size:2rem; 
+    line-height:1.25;
+
   }
 
   h2{
     font-size:1.75rem;
+    line-height:1.25;
   }
 
   h3{

calc-frontend/src/pages/Derivatives.tsx

@@ -11,8 +11,8 @@ function Derivatives() {
     <div>
       <button className="back-button" onClick={() => navigate(-1)}>&#8249; Back</button>
 
-      <div className="flex flex-col flex-grow justify-center gap-6 items-center">
-        <h2 style={{ marginBottom: '1rem' }}>The Derivative of Common Functions</h2>
+      <div className="flex flex-col flex-grow justify-center gap-6 items-center topic-list">
+        <h2 className = "topic-header">The Derivative of Common Functions</h2>
 
         <Link to="/derivatives/linear" className="topic-box">
           <button className="px-10 text-2xl cursor-pointer">Linear</button>

calc-frontend/src/pages/Integrals.tsx

@@ -12,7 +12,7 @@ function Integrals(){
           <button className="back-button" onClick={()=> navigate(-1)}>&#8249; Back</button>
 
           <div className="flex flex-col flex-grow justify-center gap-6 items-center">
-          <h2 style={{marginBottom:'1rem'}}>The Integral of Common Functions</h2>
+          <h2 className="topic-header">The Integral of Common Functions</h2>
 
 
           <Link to="/integrals/linear" className="topic-box">

calc-frontend/src/pages/Limits.tsx

@@ -11,7 +11,7 @@ function Limits() {
       <button className="back-button" onClick={() => navigate(-1)}>&#8249; Back</button>
 
       <div className="flex flex-col flex-grow justify-center gap-6 items-center">
-        <h2 style={{ marginBottom: '1rem' }}>The Limit of Common Functions</h2>
+        <h2 className="topic-header">The Limit of Common Functions</h2>
 
         <Link to="/limits/parabola" className="topic-box">
           <button className="px-10 text-2xl cursor-pointer">Parabola</button>