reactive to screen size

Author: Kyler-Chiago

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

@@ -4,7 +4,7 @@ const Headline = () => {
   return (
     <div className='home' id='headline'>
       <div className='bigHeadline'>MLOps workflow for Javascript</div>
-      <div>Harness MLflow&apos;s MLOps functionality for your Javascript application with MLflow.js</div>
+      <div className='headLineText'>Harness MLflow&apos;s MLOps functionality for your Javascript application with MLflow.js</div>
       <Button />
     </div>
   );

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

@@ -45,7 +45,7 @@ const NavBar = () => {
           href='https://github.com/oslabs-beta/mlflow-js'
           className='navBarLinksGithub'
         >
-          <Image src={'/assets/GithubLogo.png'} width={24} height={24} alt='G' />
+          <Image src={'/assets/GithubLogo.png'} width={24} height={24} alt='G' className='navbarGithub'/>
         </a>
       </div>
     </div>

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

@@ -26,6 +26,12 @@ const Team = () => {
       linkedIn: 'https://www.linkedin.com/in/stephanyho/',
       pfp: '',
     },
+    {
+      name: 'Winston Ludlam',
+      github: 'https://github.com/winjolu/',
+      linkedIn: 'https://www.linkedin.com/in/wjludlam/',
+      pfp: '',
+    },
   ];
 
   return (
@@ -42,13 +48,6 @@ const Team = () => {
           />
         ))}
       </div>
-      <TeamCard 
-      key={'soloCard'}
-      name={'Winston Ludlam'}
-      github={'https://github.com/winjolu/'}
-      linkedIn={'https://www.linkedin.com/in/wjludlam/'}
-      pfp={''}
-      />
     </div>
   );
 };

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

@@ -10,19 +10,19 @@ interface TeamCardProps {
 const TeamCard: React.FC<TeamCardProps> = ({ name, github, linkedIn, pfp }) => {
   return (
     <div className='teamcard'>
-      <Image src={pfp} width={70} height={70} alt='No Image' />
+      <Image src={pfp} width={80} height={80} alt='No Image' className='teamCardImg'/>
       <div>{name}</div>
       <div className='teamcardLinks'>
         <a href={github} className='teamCardLink1'>
-          <Image
+          <Image className='navbarGithub'
             src={'/assets/GithubLogo.png'}
             width={20}
             height={20}
             alt='G'
           />
         </a>
         <a href={linkedIn} className='teamCardLink2'>
-          <Image
+          <Image className='navbarGithub'
             src={'/assets/LinkedInLogo.png'}
             width={20}
             height={20}

mlflow-site/src/app/globals.css

@@ -7,6 +7,7 @@ body {
   background: var(--background);
   font-family: Inter;
   font-size: 1rem;
+  /* font-size: 4.43vw; */
   color: rgb(0, 0, 0);
 }
 
@@ -30,7 +31,8 @@ body {
   width: 100%;
   height: 100%;
   display: grid;
-  grid-template-columns: 1fr 360px 1fr;
+  /* grid-template-columns: 1fr 360px 1fr; */
+  grid-template-columns: 1fr 100vw 1fr;
   grid-template-rows: 1fr;
   overflow-y: auto;
 }
@@ -74,6 +76,7 @@ body {
   display: grid;
   grid-template-columns: auto auto;
   grid-template-rows: 100%;
+  font-size: clamp(1rem, 4.43vw, 1.2rem);
 }
 
 .navBarLinks {
@@ -103,19 +106,27 @@ body {
   grid-column: 5;
 }
 
+.navbarGithub {
+  width: clamp(1.5rem, 6.645vw, 1.8rem);
+}
+
 .navBarMlflow {
   color: rgb(66, 107, 31);
-  font-size: 1.2rem;
+  font-size: clamp(1.2rem, 5.316vw, 1.9rem);
   font-family: Newsreader;
   display: flex;
   align-items: center;
 }
 
 .bigHeadline {
-  font-size: 1.7rem;
+  font-size: clamp(1.7rem, 6.531vw, 3rem);
   font-family: Newsreader;
 }
 
+.headLineText {
+  font-size: clamp(1rem, 4.43vw, 1.76rem);
+}
+
 .mobileInnerWrapper {
   grid-column: 3;
   grid-row: 3;
@@ -142,11 +153,11 @@ body {
 }
 
 .homeButton {
-  padding: 3px;
-  padding-left: 6px;
-  padding-right: 6px;
-  border-radius: 5px;
-  font-size: 0.8rem;
+  padding: clamp(0.1875rem, 0.830625vw, 0.328125rem);
+  padding-left: clamp(0.375rem, 1.66125vw, .65625rem);
+  padding-right: clamp(0.375rem, 1.66125vw, .65625rem);
+  border-radius: clamp(0.3125rem, 1.384375vw, 0.546875rem);
+  font-size: clamp(0.8rem, 3.544vw, 1rem);
   margin-right: 8px;
 }
 
@@ -198,27 +209,55 @@ body {
 }
 
 .teamHead {
-  font-size: 1.35rem;
+  font-size: clamp(1.35rem, 5.9805vw, 2.376rem);
 }
 
 .teamCards {
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+
+/* .teamCards {
   width: 100%;
   display: grid;
   grid-template-columns: 50% 50%;
   grid-template-rows: repeat(calc(100%/3), 3);
 }
 
+@media (min-width: 600px) {
+  .teamCards {
+    width: 100%;
+    display: grid;
+    grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
+    grid-template-rows: 50% 50%;
+  }
+}
+
+@media (min-width: 900px) {
+  .teamCards {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 25% 25% 25% 25%;
+    grid-template-rows: 100%;
+    background-color: red;
+  }
+} */
+
 .teamcard {
   margin-top: 0.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  font-size: clamp(1rem, 4.43vw, 1.3rem);
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;
 }
 
 .teamCardImg {
-  width: 50px;
-  height: 50px;
+  width: clamp(80px, 22.155vw, 100px)
 }
 
 .teamcardLinks {

mlflow-site/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
+import { Viewport } from "next";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -18,6 +19,13 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
+export const viewport: Viewport = {
+  themeColor: "#000000",
+  initialScale: 1,
+  width: "device-width",
+  maximumScale: 1,
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{