update responsive styling

Author: dabit3

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'
  }
  },
  },