Merge pull request #75 from oslabs-beta/kyler/siteStylingR2

feat: Made site more responsive

Author: austinbfraser

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

@@ -12,6 +12,7 @@ const NavBar = () => {
             const element = document.getElementById('headline');
             element?.scrollIntoView({ behavior: 'smooth' });
           }}
+          className='navBarLinksHome'
         >
           Home
         </button>
@@ -20,6 +21,7 @@ const NavBar = () => {
             const element = document.getElementById('features');
             element?.scrollIntoView({ behavior: 'smooth' });
           }}
+          className='navBarLinksFeatures'
         >
           Features
         </button>

mlflow-site/src/app/globals.css

@@ -118,8 +118,17 @@ body {
   grid-column: 5;
 }
 
+.navBarLinksHome:hover, .navBarLinksFeatures:hover, .navBarLinksDemo:hover, .navBarLinksTeam:hover {
+  color: green;
+}
+
 .navbarGithub {
   width: clamp(1.5rem, 6.645vw, 1.8rem);
+  transition: transform .7s ease-in-out;
+}
+
+.navbarGithub:hover {
+  transform: rotate(10deg);
 }
 
 .navBarMlflow {
@@ -173,16 +182,20 @@ body {
   margin-right: 8px;
 }
 
+.homeButton:hover {
+  border: 1px solid black;
+}
+
 .homeButtonDownload {
   background-color: rgb(66, 107, 31);
-  padding-top: 0.6rem;
-  padding-bottom: 0.6rem;
+  padding-top: clamp(0.375rem, 1.66125vw, 0.65625rem);
+  padding-bottom: clamp(0.375rem, 1.66125vw, 0.65625rem);
 }
 
 .homeButtonRead {
   background-color: rgb(204, 204, 204);
-  padding-top: 0.6rem;
-  padding-bottom: 0.6rem;
+  padding-top: clamp(0.375rem, 1.66125vw, 0.65625rem);
+  padding-bottom: clamp(0.375rem, 1.66125vw, 0.65625rem);
 }
 
 .button {