@brillout/docpress 0.10.12 → 0.10.14

package/Layout.tsx

@@ -32,7 +32,7 @@ const navLeftWidthMin = 300
 const navLeftWidthMax = 370
 const containerQuerySmallNav = 550
 const containerQueryMobileNav = 1000
-const containerQueryMobileLayout = (mainViewMax + navLeftWidthMin) as 1143 // 1143 = 840 + 300
+const containerQueryMobileLayout = (mainViewMax + navLeftWidthMin) as 1140 // 1140 = 840 + 300
 const containerQueryExtraSpace = (mainViewMax + navLeftWidthMax + blockMargin) as 1213 // 1213 = 840 + 370 + 3
 
 // Avoid whitespace at the bottom of pages with almost no content
@@ -110,7 +110,7 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
     width: ${navLeftWidthMax}px !important;
   }
 }`
-    let navLeftHide = css`
+    let navLeftHidden = css`
 #nav-left, #nav-left-margin {
   display: none;
 }
@@ -127,18 +127,18 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
 }
 `
     if (!hideNavLeftAlways) {
-      navLeftHide = css`
+      navLeftHidden = css`
 @container container-viewport (max-width: ${containerQueryMobileLayout - 1}px) {
-  ${navLeftHide}
+  ${navLeftHidden}
 }
 @container container-viewport (min-width: ${containerQueryMobileLayout}px) {
-  .nav-head-top {
+  .nav-head-full-width {
     display: none !important;
   }
 }
 `
     }
-    style += navLeftHide
+    style += navLeftHidden
 
     return style
   }
@@ -315,13 +315,14 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 
   return (
     <div
-      className={cls(['nav-head-full-width', !isNavLeft && 'nav-head-top', 'link-hover-animation'])}
+      className={cls(['nav-head-top', !isNavLeft && 'nav-head-full-width', 'link-hover-animation'])}
       style={{
         display: 'flex',
         justifyContent: isNavLeft ? 'flex-end' : 'center',
         backgroundColor: 'var(--bg-color)',
         borderBottom: 'var(--block-margin) solid white',
         position: 'relative',
+        marginBottom: !isNavLeft ? -5 : 0,
       }}
     >
       {isNavLeft && <NavHeaderLeftFullWidthBackground />}
@@ -385,6 +386,9 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
     padding: 0;
     margin: 0;
   }
+  .nav-head-top {
+    margin-bottom: -15px !important;
+  }
 }
 @container container-nav-head (min-width: 501px) {
   .nav-head-content {
@@ -430,7 +434,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   transition-property: opacity;
   pointer-events: none;
 }
-html:not(.unexpand-nav) :has(.nav-head-full-width:hover) .show-on-nav-hover,
+html:not(.unexpand-nav) :has(.nav-head-top:hover) .show-on-nav-hover,
 html:not(.unexpand-nav) :has(.show-on-nav-hover:hover) .show-on-nav-hover,
 html:not(.unexpand-nav).menu-modal-show .show-on-nav-hover {
   opacity: 1;

package/MenuModal.tsx

@@ -148,8 +148,6 @@ function CloseButton({ className }: { className: string }) {
       className={className}
       onClick={closeMenuModal}
       style={{ position: 'fixed', top: 0, right: 0, zIndex: 10, padding: 11, cursor: 'pointer' }}
-      aria-label={'Escape\nCtrl\xa0+\xa0M'}
-      data-label-shift
     >
       <svg width="48.855" height="48.855" version="1.1" viewBox="0 0 22.901 22.901" xmlns="http://www.w3.org/2000/svg">
         <circle

package/NavItemComponent.tsx

@@ -43,7 +43,7 @@ function NavItemComponent({
   const icon = navItem.titleIcon && (
     <img
       src={navItem.titleIcon}
-      style={{ height: iconSize, width: iconSize, marginRight: 8, ...navItem.titleIconStyle }}
+      style={{ height: iconSize, width: iconSize, marginRight: 8, marginLeft: 4, ...navItem.titleIconStyle }}
     />
   )
 

package/components/HorizontalLine.tsx

@@ -12,7 +12,7 @@ function HorizontalLine({ primary }: { primary?: true }) {
           margin: 0,
           border: 0,
           // Same as `.doc-page h2::after`
-          borderTop: '1px solid #eaeaea',
+          borderTop: '1px solid rgba(0, 0, 0, 0.1)',
           maxWidth: 500,
           width: '80%',
         }}

package/css/heading.css

@@ -9,7 +9,7 @@ h3 {
 }
 
 .doc-page h1 {
-  margin-top: 20px;
+  margin-top: 15px;
   margin-bottom: 20px;
 }
 
@@ -27,7 +27,7 @@ h3 {
   height: 1px;
   top: -45px;
   /* Same as <HorizontalLine> */
-  background-color: #eaeaea;
+  background-color: rgba(0, 0, 0, 0.1);
   --width: min(80%, 500px);
   width: var(--width);
   left: calc((100% - var(--width)) / 2);

package/css/tooltip.css

@@ -7,6 +7,12 @@
     position: relative;
   }
   [aria-label]:hover::before {
+    opacity: 1;
+  }
+  [aria-label]::before {
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    pointer-events: none;
     font-family: monospace;
     font-size: 12px;
     content: attr(aria-label);
@@ -23,8 +29,9 @@
     letter-spacing: -0.02em;
     border: 1px solid #e3e3e3;
     z-index: 1;
-  }
-  [data-label-shift]::before {
-    margin-left: -10px;
+    /* Atlernative: https://stackoverflow.com/questions/30086913/css-positioned-absolute-element-automatic-width-outside-of-parents-bounds/57379329#57379329
+    width: max-content;
+    */
+    white-space: nowrap;
   }
 }

package/dist/NavItemComponent.js

@@ -24,7 +24,7 @@ function NavItemComponent(_a) {
     var titleJsx = parseMarkdownMini(navItem.title);
     var titleInNavJsx = parseMarkdownMini(navItem.titleInNav);
     var iconSize = 25;
-    var icon = navItem.titleIcon && (React.createElement("img", { src: navItem.titleIcon, style: __assign({ height: iconSize, width: iconSize, marginRight: 8 }, navItem.titleIconStyle) }));
+    var icon = navItem.titleIcon && (React.createElement("img", { src: navItem.titleIcon, style: __assign({ height: iconSize, width: iconSize, marginRight: 8, marginLeft: 4 }, navItem.titleIconStyle) }));
     if (navItem.level === 1 || navItem.level === 4) {
         assert(navItem.url === undefined);
     }

package/dist/components/HorizontalLine.js

@@ -9,7 +9,7 @@ function HorizontalLine(_a) {
                 margin: 0,
                 border: 0,
                 // Same as `.doc-page h2::after`
-                borderTop: '1px solid #eaeaea',
+                borderTop: '1px solid rgba(0, 0, 0, 0.1)',
                 maxWidth: 500,
                 width: '80%',
             } })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.10.12",
+  "version": "0.10.14",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",