🦘 Update z-index

See #140
jupyter-book · Jul 4, 2023 · 2797995 · 2797995
1 parent d9703c6
commit 2797995
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 11 deletions.
diff --git a/packages/site/src/components/Navigation/Navigation.tsx b/packages/site/src/components/Navigation/Navigation.tsx
@@ -23,7 +23,7 @@ export function Navigation({
       {children}
       {open && (
         <div
-          className="fixed inset-0 bg-black opacity-50"
+          className="fixed inset-0 z-30 bg-black opacity-50"
           style={{ marginTop: top }}
           onClick={() => setOpen(false)}
         ></div>

diff --git a/packages/site/src/components/Navigation/TableOfContents.tsx b/packages/site/src/components/Navigation/TableOfContents.tsx
@@ -165,6 +165,7 @@ export const TableOfContents = ({
       className={classNames(
         'fixed xl:article-grid article-grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',
         { hidden: !open },
+        { 'z-30': open },
       )}
       style={{
         top: top ?? 0,

diff --git a/packages/site/src/components/Navigation/TopNav.tsx b/packages/site/src/components/Navigation/TopNav.tsx
@@ -92,7 +92,7 @@ function NavItem({ item }: { item: SiteNavItem }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute w-48 py-1 mt-2 origin-top-left bg-white rounded-sm shadow-lg left-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute w-48 py-1 mt-2 bg-white rounded-sm shadow-lg origin-top-left left-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
           {item.children?.map((action) => (
             <Menu.Item key={action.url}>
               {/* This is really ugly, BUT, the action needs to be defined HERE or the click away doesn't work for some reason */}
@@ -160,7 +160,7 @@ function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 w-48 py-1 mt-2 origin-top-right bg-white rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute right-0 w-48 py-1 mt-2 bg-white rounded-sm shadow-lg origin-top-right ring-1 ring-black ring-opacity-5 focus:outline-none">
           {actions?.map((action) => (
             <Menu.Item key={action.url}>
               {({ active }) => (

diff --git a/packages/site/src/pages/Article.tsx b/packages/site/src/pages/Article.tsx
@@ -40,7 +40,7 @@ export const ArticlePage = React.memo(function ({ article }: { article: PageLoad
             </div>
           )}
           {canCompute && article.kind === SourceFileKind.Notebook && <NotebookToolbar showLaunch />}
-          {canCompute && article.kind === SourceFileKind.Article && <NotebookToolbar />}
+          {/* {canCompute && article.kind === SourceFileKind.Article && <NotebookToolbar />} */}
           <ContentBlocks pageKind={article.kind} mdast={article.mdast as GenericParent} />
           <Bibliography />
           <ConnectionStatusTray />

diff --git a/packages/site/src/pages/Root.tsx b/packages/site/src/pages/Root.tsx
@@ -60,7 +60,7 @@ export function Document({
           analytics_plausible={config?.analytics_plausible}
         />
       </head>
-      <body className="m-0 transition-colors duration-500 bg-white dark:bg-stone-900">
+      <body className="m-0 bg-white transition-colors duration-500 dark:bg-stone-900">
         <ThemeProvider theme={theme} renderers={renderers} {...links}>
           <BaseUrlProvider baseurl={baseurl}>
             <ThebeBundleLoaderProvider loadThebeLite publicPath={baseurl}>

diff --git a/styles/block-styles.css b/styles/block-styles.css
@@ -4,10 +4,10 @@
 
 @layer base {
   .shaded {
-    @apply pt-5 bg-slate-100 dark:bg-slate-800 my-5;
+    @apply pt-5 my-5 bg-slate-100 dark:bg-slate-800;
   }
   .framed {
-    @apply p-5 border shadow bg-slate-50 dark:bg-slate-800 my-5;
+    @apply p-5 my-5 border shadow bg-slate-50 dark:bg-slate-800;
   }
   .shaded-children > * {
     @apply p-2 bg-slate-50 dark:bg-slate-800;

diff --git a/styles/hover.css b/styles/hover.css
@@ -1,6 +1,7 @@
 .hover-card-content {
   animation-duration: 0.6s;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 10;
 }
 .hover-card-content[data-side='top'] {
   animation-name: slideUp;
@@ -32,9 +33,9 @@
 }
 
 .hover-document {
-  @apply bg-white dark:bg-slate-800 text-sm rounded border border-gray-50 shadow-xl article;
+  @apply text-sm bg-white border rounded shadow-xl dark:bg-slate-800 border-gray-50 article;
 }
 
 .hover-link {
-  @apply text-blue-700 dark:text-blue-100 no-underline hover:text-blue-500 font-normal;
+  @apply font-normal text-blue-700 no-underline dark:text-blue-100 hover:text-blue-500;
 }
diff --git a/styles/typography.css b/styles/typography.css
@@ -10,7 +10,7 @@
 
 @layer base {
   .prose table td {
-    @apply p-1 sm:p-2 align-top;
+    @apply p-1 align-top sm:p-2;
   }
   .prose table p,
   .prose table li {
@@ -43,6 +43,6 @@
     min-height: calc(100vh);
   }
   .article {
-    @apply prose max-w-none prose-stone dark:prose-invert break-words;
+    @apply prose break-words max-w-none prose-stone dark:prose-invert;
   }
 }