update

Author: thorrester

src/lib/components/nav/Navbar.svelte

@@ -17,16 +17,16 @@
   
   </script>
 
-  <nav class="fixed left-0 top-0 z-20 mx-auto flex h-[75px] w-full items-center border-b-4 border-border bg-primary-700 border-b-2 border-black px-5 m500:h-16">
-    <div class="mx-auto flex w-full items-center justify-between px-10 md:px-20">
+  <nav class="fixed left-0 top-0 z-20 mx-auto flex h-[75px] w-full items-center border-b-4 border-border bg-primary-700 border-b-2 border-black px-2 m500:h-16">
+    <div class="mx-auto flex w-full items-center justify-between px-4 md:px-20">
 
 
       <div class="flex items-center justify-start gap-10">
         <a href="/" class="items-center">
-          <div class="h-12">
+          <div class="h-8 sm:h-12">
             <img 
               src={logo} 
-              class="h-12 object-contain"
+              class="h-8 sm:h-12 object-contain"
               alt="Opsml Logo"
             />
           </div>

src/routes/+layout.svelte

@@ -10,7 +10,7 @@
 
 <div class="layout h-screen font-sans overflow-hidden">
   <Navbar/>
-  <div class="flex-1 overflow-auto pt-[75px]">
+  <div class="flex-1 overflow-auto">
     {@render children()}
   </div>
 </div>

src/routes/+page.svelte

@@ -10,12 +10,12 @@
     });
 </script>
 
-<div class="grid-background min-h-screen flex flex-col">
+<div class="grid-background min-h-screen flex flex-col overflow-auto">
   <!-- Overview Section -->
-  <div class="flex flex-col items-center justify-center p-10 max-w-4xl mx-auto">
+  <div class="flex flex-col items-center justify-center p-10 max-w-4xl mx-auto pt-20">
     <div class="flex flex-col p-10 text-center items-center justify-center" id="overview">
-      <h1 class="text-4xl font-bold mb-4 text-primary-800">Quality Control For Machine Learning</h1>
-      <p class="text-lg text-black">Our mission is to standardize and unify machine learning workflow management through high-performance developer tools</p>
+      <h1 class="text-2xl md:text-4xl font-bold mb-4 text-primary-800">Quality Control For Machine Learning</h1>
+      <p class="md:text-lg text-black">Our mission is to standardize and unify machine learning workflow management through high-performance developer tools</p>
     </div>
   </div>
 
@@ -25,27 +25,27 @@
       <h1 class="text-4xl font-bold mb-4 text-primary-800 w-full text-left">Projects</h1>
     </div>
     <div class="flex flex-row flex-wrap gap-4 justify-center">
-      <a class="text-black rounded-base shadow border-2 border-black bg-primary-500 w-[400px] h-[90px] overflow-hidden hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none p-2" href="https://docs.demml.io/opsml">
+      <a class="text-black rounded-base shadow border-2 border-black bg-primary-500 w-[300px] min-h-[90px] overflow-hidden hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none p-2" href="https://docs.demml.io/opsml">
         <div class="h-12 flex justify-center items-center">
           <img 
             src={opsml_logo} 
             class="h-12 object-contain"
             alt="Opsml Logo"
           />
         </div>
-        <span class="text-sm text-black text-center block pt-1">
+        <span class="text-xs sm:text-sm text-black text-center block pt-1">
           High performance artifact management for Python
         </span>
       </a>
-      <a class="text-black rounded-base shadow border-2 border-black bg-error-500 w-[400px] h-[90px] overflow-hidden hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none p-2" href="https://docs.demml.io/scouter">
+      <a class="text-black rounded-base shadow border-2 border-black bg-error-500 w-[300px] min-h-[90px] overflow-hidden hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none p-2" href="https://docs.demml.io/scouter">
         <div class="h-12 flex justify-center items-center">
           <img 
             src={scouter_logo} 
             class="h-12 object-contain"
             alt="Scouter Logo"
           />
         </div>
-        <span class="text-sm text-black text-center block pt-1">
+        <span class="text-xs sm:text-sm text-black text-center block pt-1">
           High performance model monitoring for Python
         </span>
       </a>