From ffea80f77b6b9bdcb35c752af2eb2e06adb4ce63 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Thu, 9 Jun 2022 17:14:17 +0200
Subject: [PATCH] wip(org): Changes to layouts and modal images

---
 packages/freesewing.org/components/layouts/docs.js        | 6 +++---
 packages/freesewing.org/pages/blog/[slug].js              | 4 ++--
 packages/freesewing.shared/components/mdx/figure.js       | 8 ++++++--
 packages/freesewing.shared/components/modal.js            | 7 +++++--
 packages/freesewing.shared/components/navigation/aside.js | 4 ++--
 packages/freesewing.shared/components/pinked-ribbon.js    | 2 +-
 packages/freesewing.shared/styles/globals.css             | 6 ++++++
 7 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/freesewing.org/components/layouts/docs.js b/packages/freesewing.org/components/layouts/docs.js
index 8965dd803d1..1683652295f 100644
--- a/packages/freesewing.org/components/layouts/docs.js
+++ b/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>
diff --git a/packages/freesewing.org/pages/blog/[slug].js b/packages/freesewing.org/pages/blog/[slug].js
index 625eb087c0d..88433dfd731 100644
--- a/packages/freesewing.org/pages/blog/[slug].js
+++ b/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>
diff --git a/packages/freesewing.shared/components/mdx/figure.js b/packages/freesewing.shared/components/mdx/figure.js
index 36e68a09ace..f9e2b31db0c 100644
--- a/packages/freesewing.shared/components/mdx/figure.js
+++ b/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>
diff --git a/packages/freesewing.shared/components/modal.js b/packages/freesewing.shared/components/modal.js
index 1e055a31553..eea6366202c 100644
--- a/packages/freesewing.shared/components/modal.js
+++ b/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>
diff --git a/packages/freesewing.shared/components/navigation/aside.js b/packages/freesewing.shared/components/navigation/aside.js
index 1f6fe7b7dd0..5a3ba2ff961 100644
--- a/packages/freesewing.shared/components/navigation/aside.js
+++ b/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
-    xl:w-max xl:border-0
+    lg:w-96 lg:pr-2 lg:border-r-2
+    xl:w-lg xl:border-0
     2xl:pr-8
     ${mobileOnly ? 'block md:hidden' : ''}
   `}>
diff --git a/packages/freesewing.shared/components/pinked-ribbon.js b/packages/freesewing.shared/components/pinked-ribbon.js
index 2b3ff936d81..001e283a163 100644
--- a/packages/freesewing.shared/components/pinked-ribbon.js
+++ b/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"
diff --git a/packages/freesewing.shared/styles/globals.css b/packages/freesewing.shared/styles/globals.css
index faec9700e4f..3cf9a3748ef 100644
--- a/packages/freesewing.shared/styles/globals.css
+++ b/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 {