more styling on the website, setting up the desktop view

Author: Kyler-Chiago

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

@@ -1,28 +1,32 @@
-import Image from "next/image";
+import Image from 'next/image';
 
-const DemoCard = ({ header, blurb }: {
-    key: string,
-    blurb: string,
-    header: string
-  }) => {
-    return (
-      <div className='demoCard'>
-        <Image
-            src='https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExaW9tcWttZ3R0YTVpNWxwcGJ4M2YyZ2ExcmxlazN5N3JyenF0ajl4dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FqdGGgugkC4Xm/giphy.gif'
-            alt=''
-            width={700}
-            height={475}
-            sizes="100vw"
-            style={{
-                width: "100%",
-                height: "auto",
-            }}
-        />
+const DemoCard = ({
+  header,
+  blurb,
+}: {
+  key: string;
+  blurb: string;
+  header: string;
+}) => {
+  return (
+    <div className='demoCard'>
+      <Image
+        src='https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExaW9tcWttZ3R0YTVpNWxwcGJ4M2YyZ2ExcmxlazN5N3JyenF0ajl4dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FqdGGgugkC4Xm/giphy.gif'
+        alt=''
+        width={700}
+        height={475}
+        sizes='100vw'
+        style={{
+          width: '100%',
+          height: 'auto',
+        }}
+      />
+      <div className='demoCardText'>
         <div className='demoCardHeader'>{header}</div>
-        {blurb}
+        <div className='demoCardInfo'>{blurb}</div>
       </div>
-    );
-  };
-  
-  export default DemoCard;
-  
+    </div>
+  );
+};
+
+export default DemoCard;

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

@@ -13,7 +13,7 @@ const Features = () => {
     'Feature 4',
   ];
   const featureCardBlurbs = [
-    'Feature Card Blurb 1.  Feature Card Blurb 1.  Feature Card Blurb 1.  Feature Card Blurb 1.  ',
+    'Feature Card Blurb 1.  Feature Card Blurb 1.  Feature Card Blurb 1.  Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. Feature Card Blurb 1. ',
     'Feature Card Blurb 2.  Feature Card Blurb 2.  Feature Card Blurb 2.  Feature Card Blurb 2.  ',
     'Feature Card Blurb 3.  Feature Card Blurb 3.  Feature Card Blurb 3.  Feature Card Blurb 3.  ',
     'Feature Card Blurb 4.  Feature Card Blurb 4.  Feature Card Blurb 4.  Feature Card Blurb 4.  '
@@ -32,7 +32,7 @@ const Features = () => {
     <div className='features' id='features'>
       <div className='featureHeader'>{featureHeader}</div>
       <div className='featureLongBlurb'>{featureLongBlurb}</div>
-      <div className=''>{cards}</div>
+      <div className='featureCardsSection'>{cards}</div>
     </div>
   );
 };

mlflow-site/src/app/globals.css

@@ -25,19 +25,19 @@ body {
 }
 
 .wrapper {
-  position:absolute;
+  position: absolute;
   background: rgb(51, 51, 58);
   width: 100%;
   height: 100%;
   display: grid;
   grid-template-columns: 1fr 100vw 1fr;
   grid-template-rows: 1fr;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 ::-webkit-scrollbar {
-  height: 10px;
-  width: 10px;
+  width: 0px;
 }
 
 /* Track */
@@ -47,12 +47,12 @@ body {
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #3c3c3c;
+  background: #5c5c5c;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #1b1b1b;
+  background: #515151;
 }
 
 .mobileWrapper {
@@ -62,10 +62,22 @@ body {
   grid-column: 2;
   grid-row: 1;
   display: grid;
-  grid-template-columns: 0.7rem 1.3rem 1fr 1.3rem 0.7rem;
+  grid-template-columns:
+    1vw clamp(1.3rem, 6vw, 8vw) 1fr clamp(1.3rem, 6vw, 8vw)
+    1vw;
   grid-template-rows: 1.3rem min-content 1fr min-content 1.3rem;
 }
 
+@media (min-width: 1000px) {
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  .mobileWrapper {
+    grid-template-columns: 1vw 8vw 1fr calc(8vw + 10px) calc(1vw + 10px);
+  }
+}
+
 .navBar {
   grid-column: 2/5;
   grid-row: 2;
@@ -83,9 +95,11 @@ body {
   width: 100%;
   height: 100%;
   display: grid;
-  grid-template-columns: repeat(calc(100%/5), 5);
+  grid-template-columns: repeat(calc(100% / 5), 5);
   grid-template-rows: 100%;
   align-items: center;
+  justify-content: right;
+  column-gap: 2.8vw;
 }
 
 .navBarLinksFeatures {
@@ -117,12 +131,12 @@ body {
 }
 
 .bigHeadline {
-  font-size: clamp(1.7rem, 6.531vw, 3rem);
+  font-size: clamp(1.7rem, 6.531vw, 6.25rem);
   font-family: Newsreader;
 }
 
 .headLineText {
-  font-size: clamp(1rem, 4.43vw, 1.76rem);
+  font-size: clamp(1.1rem, 4.873vw, 2.25rem);
 }
 
 .mobileInnerWrapper {
@@ -152,8 +166,8 @@ body {
 
 .homeButton {
   padding: clamp(0.1875rem, 0.830625vw, 0.328125rem);
-  padding-left: clamp(0.375rem, 1.66125vw, .65625rem);
-  padding-right: clamp(0.375rem, 1.66125vw, .65625rem);
+  padding-left: clamp(0.375rem, 1.66125vw, 0.65625rem);
+  padding-right: clamp(0.375rem, 1.66125vw, 0.65625rem);
   border-radius: clamp(0.3125rem, 1.384375vw, 0.546875rem);
   font-size: clamp(0.8rem, 3.544vw, 1.05rem);
   margin-right: 8px;
@@ -178,18 +192,19 @@ body {
   display: grid;
   place-items: center;
   padding: 0.5rem;
-  margin-bottom: 5rem;
+  margin-bottom: 4rem;
   text-align: center;
   color: black;
   background-color: white;
 }
 
 .featureHeader {
-  font-size: 1.875rem;
+  font-size: clamp(1.3rem, 5.759vw, 3rem);
   margin-bottom: 0.5rem;
 }
 
 .featureLongBlurb {
+  font-size: clamp(1rem, 4.43vw, 1.7rem);
   margin-bottom: 0.5rem;
 }
 
@@ -205,7 +220,19 @@ body {
 }
 
 .featureCardHeader {
-  font-size: 1.5rem;
+  font-size: clamp(1.3rem, 5.316vw, 1.5rem);
+}
+
+@media (min-width: 1000px) {
+  .featureCardsSection {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    column-gap: 10px;
+  }
+
+  .featureCard {
+    text-align: left;
+  }
 }
 
 .demo {
@@ -214,10 +241,10 @@ body {
   width: 100%;
   display: grid;
   grid-template-columns: 100%;
-  grid-template-rows: calc(100%/3) calc(100%/3) calc(100%/3);
+  grid-template-rows: calc(100% / 3) calc(100% / 3) calc(100% / 3);
   color: black;
   background-color: white;
-  margin-bottom: 5rem;
+  margin-bottom: 3rem;
 }
 
 .demoCard {
@@ -227,8 +254,27 @@ body {
   text-align: center;
 }
 
+@media (min-width: 1000px) {
+  .demoCard {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    column-gap: 10px;
+    text-align: left;
+  }
+}
+
+@media (max-width: 1000px) {
+  .demoCardText {
+    margin-top: 0.8rem;
+  }
+}
+
 .demoCardHeader {
-  font-size: 1.5rem;
+  font-size: clamp(1.3rem, 5.759vw, 2rem);
+}
+
+.demoCardInfo {
+  font-size: clamp(1rem, 4vw, 1.25rem);
 }
 
 .demoSplit {
@@ -256,7 +302,7 @@ body {
   justify-content: center;
   align-items: center;
   font-size: clamp(1rem, 4.43vw, 1.3rem);
-  padding: clamp(.22rem, 1.1927vw,0.35rem);
+  padding: clamp(0.22rem, 1.1927vw, 0.35rem);
   margin-left: 0.2rem;
   margin-right: 0.2rem;
   background-color: rgb(217, 225, 210);
@@ -279,4 +325,4 @@ body {
 
 .teamCardLink2 {
   grid-column: 3;
-}
+}