wip(fs.dev): Better padding

packages/freesewing.dev/components/header.js

@@ -74,7 +74,9 @@ const Header = ({ app }) => {
                 </a>
               </Link>
             </div>
-            <ThemePicker app={app} />
+            <div className="hidden sm:block">
+              <ThemePicker app={app} />
+            </div>
           </div>
         </div>
         <div className={`theme-gradient h-1 w-full z-10 relative -mb-1 ${app.loading ? 'loading' : ''}`}></div>

packages/freesewing.shared/components/layouts/default.js

@@ -85,8 +85,9 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
         <aside className={`
           fixed top-0 right-0
           ${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
-          pt-24
-          sm:pt-4
+          pt-28
+          pb-4 px-2
+          sm:px-1 md:px-4 lg:px-8 xl:px-16 2xl:px-32
           sm:relative sm:transform-none
           h-screen w-screen
           bg-base-100
@@ -95,14 +96,16 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
           sm:flex sm:flex-row-reverse
           sm:sticky
           overflow-y-scroll
-          py-4
           z-20
-          bg-neutral bg-opacity-95
+          bg-neutral sm:bg-opacity-95
           text-neutral-content
         `}>
           <PrimaryNavigation app={app} active={slug}/>
         </aside>
-        <section className='max-w-61.8% lg:pt-8 p-4 w-full'>
+        <section className={`
+          max-w-61.8% p-4 pt-24 sm:pt-28 w-full
+          sm:px-1 md:px-4 lg:px-8 xl:px-16 2xl:px-32
+        `}>
           <div className="max-w-5xl">
             {title && (
               <>

packages/freesewing.shared/components/navigation/primary.js

@@ -149,49 +149,6 @@ const TopLevel = ({ icon, title, nav, current, slug, hasChildren=false, active }
   </details>
 )
 
-// Component that renders the logo first entry
-const TopLogo = ({ app }) => (
-  <div className={`
-    flex flex-row uppercase gap-4 font-bold text-lg
-    items-center
-    p-2
-    text-neutral-content
-  `}>
-    <Link href='/'>
-      <a className="hover:pointer text-secondary-focus">
-        <Logo size={24} fill='currentColor' stroke={false}/>
-      </a>
-    </Link>
-    <Link href='/'>
-      <a className={`grow ${linkClasses}`}>
-        freesewing.{app.site}
-      </a>
-    </Link>
-  </div>
-)
-
-// Component that renders the theme picker first entry
-const TopTheme = ({ app }) => (
-  <>
-  <div className={`
-    flex flex-row uppercase gap-4 font-bold text-lg
-    items-center
-    p-2
-    text-neutral-content
-  `}>
-    <span className="text-secondary-focus-focus">
-      <ThemeIcon  />
-    </span>
-    <div className={`grow`}>
-      Theme
-    </div>
-  </div>
-  <div className="p-2">
-    <ThemePicker app={app} className="pr-8"/>
-  </div>
-  </>
-)
-
 const Navigation = ({ app, active }) => {
   if (!app.navigation) return null
   const output = []
@@ -211,9 +168,8 @@ const Navigation = ({ app, active }) => {
 
 const PrimaryMenu = ({ app, active }) => (
   <nav className="sm:max-w-lg grow mb-12">
-    <TopLogo app={app}/>
+    <ThemePicker app={app} className="w-full sm:hidden"/>
     <Navigation app={app} active={active} />
-    <TopTheme app={app}/>
   </nav>
 )
 

packages/freesewing.shared/components/theme-picker.js

@@ -3,7 +3,7 @@ import ThemeIcon from 'shared/components/icons/theme.js'
 
 const ThemePicker = ({ app, className='' }) => {
   return (
-      <div className="dropdown">
+      <div className={`dropdown ${className}`}>
         <div tabIndex="0" className="m-0 btn flex flex-row gap-2 hover:bg-neutral hover:border-neutral-content">
           <ThemeIcon />
           <span>{app.theme}</span>