wip(org): Changes to layouts and modal images

packages/freesewing.org/components/layouts/docs.js

@@ -16,16 +16,16 @@ const DefaultLayout = ({ app, title=false, crumbs=false, children=[] }) => {
   return (
     <div className="m-auto flex flex-row justify-center">
       <Aside app={app} slug={slug} before={<ThemePicker app={app} className="block sm:hidden"/>}/>
-      <section className="py-28 md:py-36">
+      <section className="py-28 md:py-36 max-w-7xl px-8 xl:pl-8 2xl:pl-16">
         <div>
           {title && (
-            <div className="px-8 xl:pl-8 2xl:pl-16">
+            <>
               <Breadcrumbs title={title} crumbs={breadcrumbs} />
               {title
                 ? <h1>{title}</h1>
                 : <h1>{app.getTitle(slug)}</h1>
               }
-            </div>
+            </>
           )}
           {children}
         </div>

packages/freesewing.org/pages/blog/[slug].js

@@ -69,7 +69,7 @@ const PostPage = ({ post, author }) => {
         <meta property="og:locale" content="en_US" key='locale' />
         <meta property="og:site_name" content="freesewing.dev" key='site' />
       </Head>
-      <article className="mb-12 px-8 xl:pl-8 2xl:pl-16 max-w-7xl">
+      <article className="mb-12">
         <div className="flex flex-row justify-between text-sm mb-1 mt-2">
           <span><TimeAgo date={post.date} /> [{post.date}]</span>
           <span>
@@ -89,7 +89,7 @@ const PostPage = ({ post, author }) => {
               className="shadow m-auto"
             />
             <figcaption
-              className="text-center mb-8 prose m-auto"
+              className="text-center mb-8 prose m-auto mt-1"
               dangerouslySetInnerHTML={{__html: post.caption}}
             />
           </Modal>

packages/freesewing.shared/components/mdx/figure.js

@@ -16,10 +16,14 @@ const Figure = props => {
           src={props?.src}
           alt={props?.alt || ''}
           title={title || ''}
-          className="m-auto max-h-full max-w-full"
+          className="m-auto"
+          style={{
+            maxHeight: "calc(100vh - 6rem)",
+            maxWidth: "calc(100vw - 6rem)",
+          }}
         />
         {title
-          ? <figcaption className="text-center italic text-base-content mt-1">{title}</figcaption>
+          ? <figcaption className="text-center italic mt-1">{title}</figcaption>
           : (
             <Popout fixme>
               <h5>This image does not have an alt of title specified</h5>

packages/freesewing.shared/components/modal.js

@@ -7,10 +7,13 @@ const Modal = ({ cancel, children }) => {
   if (modal) return (
     <div className={`
       fixed top-0 left-0 right-0 w-screen h-screen
-      bg-base-100 bg-opacity-90 z-30
+      bg-neutral bg-opacity-90 z-30
       hover:cursor-zoom-out flex flex-col justify-center
       `} onClick={() => setModal(false)}>
-        <div className="p-8 max-h-full max-w-full">
+        <div className="m-auto text-neutral-content lightbox" style={{
+          maxHeight: "calc(100vh - 6rem)",
+          maxWidth: "calc(100vw - 6rem)",
+        }}>
           {children}
         </div>
     </div>

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

@@ -12,8 +12,8 @@ const Aside = ({ app, slug, mobileOnly=false, before=[], after=[]}) => (
     px-8 py-24
     shrink-0
     md:w-24 md:px-2 md:justify-center
-    lg:w-max lg:pr-2 lg:border-r-2
+    lg:w-96 lg:pr-2 lg:border-r-2
-    xl:w-max xl:border-0
+    xl:w-lg xl:border-0
     2xl:pr-8
     ${mobileOnly ? 'block md:hidden' : ''}
   `}>

packages/freesewing.shared/components/pinked-ribbon.js

@@ -1,7 +1,7 @@
 import themes from 'shared/themes/runtime.js'
 
 const svg = (color, d, shadowShift) => `url('data:image/svg+xml;base64,` +
-  new Buffer(`<svg
+  Buffer.from(`<svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     stroke="none"

packages/freesewing.shared/styles/globals.css

@@ -235,6 +235,12 @@
    }
 }
 
+/* modal */
+.lightbox img {
+  max-width: calc(100vw - 6rem);
+  max-height: calc(100vh - 6rem);
+}
+
 /* Style for navigation */
 details { user-select: none; }
 details > summary > svg.details-toggle {