update responsive styling

README.md

@@ -164,6 +164,7 @@ await Promise.all(
 
 ### Roadmap
 
+- Full product and category search
 - Auto dropdown navigation for large number of categories
 - Ability to add more / more configurable metadata to item details
 - Themeing + dark mode

layouts/layout.js

@@ -13,8 +13,9 @@ export default function Layout({ children, categories }) {
       <nav>
         <div className="flex justify-center">
           <div className="
-          mobile:px-12 sm:flex-row sm:pt-12 sm:pb-6 desktop:px-0
-          px-4 pt-8 flex flex-col w-fw">
+            mobile:px-12 sm:flex-row sm:pt-12 sm:pb-6 desktop:px-0
+            px-4 pt-8 flex flex-col w-fw
+          ">
             <div className="mb-4 sm:mr-16 max-w-48 sm:max-w-none">
               <Link href="/">
                 <a aria-label="Home">

pages/product/[name].js

@@ -35,18 +35,21 @@ const ItemView = (props) => {
         <title>Jamstack ECommerce - {name}</title>
         <meta property="og:title" content={`Jamstack ECommerce - ${name}`} key="title" />
       </Head>
-      <div className="py-12 flex flex-1 flex-col
-      md:flex-row
-      w-full
-      my-0 mx-auto">
+      <div className="
+        sm:py-12
+        md:flex-row
+        py-4 w-full flex flex-1 flex-col my-0 mx-auto
+      ">
         <div className="w-full md:w-1/2 h-112 flex flex-1 bg-light hover:bg-light-200">
           <div className="py-16 p10 flex flex-1 justify-center items-center">
             <Image src={image} alt="Inventory item" className="max-h-full" />
           </div>
         </div>
         <div className="pt-2 px-0 md:px-10 pb-8 w-full md:w-1/2">
-          <h1 className="text-5xl font-light">{name}</h1>
-          <h2 className="text-2xl tracking-wide py-8">${price}</h2>
+          <h1 className="
+           sm:mt-0 mt-2 text-5xl font-light leading-large
+          ">{name}</h1>
+          <h2 className="text-2xl tracking-wide sm:py-8 py-6">${price}</h2>
           <p className="text-gray-600 leading-7">{description}</p>
           <div className="my-6">
             <QuantityPicker

tailwind.config.js

@@ -171,6 +171,9 @@ module.exports = {
         'light': '#f5f5f5',
         'light-200': '#f0f0f0',
         'light-300': '#e8e8e8'
+       },
+       lineHeight: {
+        'large': '54px'
        }
     },
   },