🎨 Fix frontmatter in safari (#299)

jupyter-book · Dec 9, 2023 · 9bbf381 · 9bbf381
1 parent 0fd2e5e
commit 9bbf381
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 39 deletions.
diff --git a/.changeset/brown-foxes-drop.md b/.changeset/brown-foxes-drop.md
@@ -0,0 +1,6 @@
+---
+'@myst-theme/frontmatter': patch
+'@myst-theme/site': patch
+---
+
+Fix article frontmatter in safari
diff --git a/packages/frontmatter/src/FrontmatterBlock.tsx b/packages/frontmatter/src/FrontmatterBlock.tsx
@@ -144,16 +144,18 @@ export function OpenAccessBadge({ open_access }: { open_access?: boolean }) {
 export function Journal({
   venue,
   biblio,
+  className,
 }: {
   venue?: Required<PageFrontmatter>['venue'];
   biblio?: Required<PageFrontmatter>['biblio'];
+  className?: string;
 }) {
   if (!venue) return null;
   const { title, url } = typeof venue === 'string' ? { title: venue, url: null } : venue;
   if (!title) return null;
   const { volume, issue } = biblio ?? {};
   return (
-    <div className="flex-none mr-2">
+    <div className={classNames('flex-none mr-2', className)}>
       {url ? (
         <ExternalOrInternalLink
           className="font-semibold no-underline smallcaps"

diff --git a/packages/site/src/components/Headers.tsx b/packages/site/src/components/Headers.tsx
@@ -44,62 +44,53 @@ export function ArticleHeader({
           style={{
             backgroundImage: `url(${frontmatter?.banner})`,
           }}
-        >
-          <div
-            className={classNames(
-              'absolute border-white shadow-2xl bg-white/80 dark:bg-black/80 backdrop-blur',
-              'w-full',
-              'top-[2rem] h-[calc(100%-4rem)] md:top-[4rem] md:h-[calc(100%-8rem)]',
-              positionBackground,
-            )}
-          />
-        </div>
+        />
       )}
       <div
         className={classNames(
           'w-full relative col-screen article',
           grid,
           'subgrid-gap',
           {
-            'my-[2rem] pb-[2rem] md:my-[4rem]': frontmatter?.banner,
+            'my-[2rem] pb-[1rem] md:my-[4rem]': frontmatter?.banner,
             'my-[2rem]': !frontmatter?.banner,
           },
           className,
         )}
       >
         <div
-          className={classNames('flex w-full align-middle py-2 mb-[1rem] text-sm', {
-            'px-4 w-full': frontmatter?.banner,
-            'bg-white/80 dark:bg-black/80': frontmatter?.banner,
-            ...positionBackground,
+          className={classNames(positionBackground, {
+            'shadow-2xl bg-white/80 dark:bg-black/80 backdrop-blur': frontmatter?.banner,
           })}
         >
-          {subject && (
-            <div
-              className={classNames('flex-none pr-2 smallcaps', {
-                'border-r mr-2': venue,
-              })}
-            >
-              {subject}
+          <div
+            className={classNames('flex w-full align-middle py-2 mb-[1rem] text-sm', {
+              'px-4 w-full': frontmatter?.banner,
+              'bg-white/80 dark:bg-black/80': frontmatter?.banner,
+              ...positionBackground,
+            })}
+          >
+            {subject && <div className={classNames('flex-none pr-2 smallcaps')}>{subject}</div>}
+            <Journal venue={venue} biblio={biblio} className="hidden pl-2 border-l md:block" />
+            <div className="flex-grow"></div>
+            <div className="hidden sm:block">
+              <LicenseBadges license={frontmatter?.license} />
+              <OpenAccessBadge open_access={frontmatter?.open_access} />
+              <GitHubLink github={frontmatter?.github} />
             </div>
-          )}
-          <Journal venue={venue} biblio={biblio} />
-          <div className="flex-grow"></div>
-          <div className="hidden sm:block">
-            <LicenseBadges license={frontmatter?.license} />
-            <OpenAccessBadge open_access={frontmatter?.open_access} />
-            <GitHubLink github={frontmatter?.github} />
+            {toggleTheme && <ThemeButton className="inline-block w-5 h-5 mt-0.5 ml-1" />}
+          </div>
+          <div className="flex flex-col mb-10 md:flex-row">
+            <FrontmatterBlock
+              frontmatter={rest}
+              authorStyle="list"
+              className={classNames({ 'pt-4 px-6': frontmatter?.banner, ...positionFrontmatter })}
+              hideBadges
+              hideExports
+            />
+            {children}
           </div>
-          {toggleTheme && <ThemeButton className="inline-block w-5 h-5 mt-0.5 ml-1" />}
         </div>
-        <FrontmatterBlock
-          frontmatter={rest}
-          authorStyle="list"
-          className={classNames({ 'pt-4 px-6': frontmatter?.banner, ...positionFrontmatter })}
-          hideBadges
-          hideExports
-        />
-        {children}
       </div>
     </header>
   );