refactored Features and Demo to CSS from Tailwind

Author: austinbfraser

mlflow-site/src/app/components/Demo.tsx

@@ -22,7 +22,7 @@ const Demo = () => {
     );
   }
   return (
-    <div className='demo text-black bg-white'>{demos}</div>
+    <div className='demo'>{demos}</div>
   );
 };
 

mlflow-site/src/app/components/DemoCard.tsx

@@ -6,7 +6,7 @@ const DemoCard = ({ header, blurb }: {
     header: string
   }) => {
     return (
-      <div className='demoCard gap-5 p-1 mb-2 text-center'>
+      <div className='demoCard'>
         <Image
             src='https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExaW9tcWttZ3R0YTVpNWxwcGJ4M2YyZ2ExcmxlazN5N3JyenF0ajl4dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FqdGGgugkC4Xm/giphy.gif'
             alt=''
@@ -18,7 +18,7 @@ const DemoCard = ({ header, blurb }: {
                 height: "auto",
             }}
         />
-        <div className='text-2xl'>{header}</div>
+        <div className='demoCardHeader'>{header}</div>
         {blurb}
       </div>
     );

mlflow-site/src/app/components/FeatureCard.tsx

@@ -4,8 +4,8 @@ const FeatureCard = ({ header, blurb }: {
   header: string
 }) => {
   return (
-    <div className='featureCard p-1 mb-2'>
-      <div className='text-2xl'>{header}</div>
+    <div className='featureCard'>
+      <div className='featureCardHeader'>{header}</div>
       {blurb}
     </div>
   );

mlflow-site/src/app/components/Features.tsx

@@ -29,9 +29,9 @@ const Features = () => {
     );
   }
   return (
-    <div className='features p-2 mb-20 text-center text-black bg-white'>
-      <div className='text-3xl mb-2'>{featureHeader}</div>
-      <div className='mb-2'>{featureLongBlurb}</div>
+    <div className='features'>
+      <div className='featureHeader'>{featureHeader}</div>
+      <div className='featureLongBlurb'>{featureLongBlurb}</div>
       <div className=''>{cards}</div>
     </div>
   );

mlflow-site/src/app/globals.css

@@ -168,6 +168,20 @@ body {
   width: 100%;
   display: grid;
   place-items: center;
+  padding: 0.5rem;
+  margin-bottom: 5rem;
+  text-align: center;
+  color: black;
+  background-color: white;
+}
+
+.featureHeader {
+  font-size: 1.875rem;
+  margin-bottom: 0.5rem;
+}
+
+.featureLongBlurb {
+  margin-bottom: 0.5rem;
 }
 
 .featureCard {
@@ -177,6 +191,12 @@ body {
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: min-content;
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.featureCardHeader {
+  font-size: 1.5rem;
 }
 
 .demo {
@@ -186,6 +206,20 @@ body {
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: calc(100%/3) calc(100%/3) calc(100%/3);
+  color: black;
+  background-color: white;
+  margin-bottom: 5rem;
+}
+
+.demoCard {
+  gap: 1.25rem;
+  padding: 0.25rem;
+  margin-bottom: 5rem;
+  text-align: center;
+}
+
+.demoCardHeader {
+  font-size: 1.5rem;
 }
 
 .demoSplit {