@brillout/docpress 0.15.13-commit-f0b224b → 0.15.13-commit-253f5e5

package/EditLink.tsx

@@ -12,18 +12,7 @@ function EditLink({
 }: { className?: string; style: React.CSSProperties; verbose?: boolean }) {
   const pageContext = usePageContext()
   const iconSize = 13
-  const icon = (
-    <img
-      src={iconPencil}
-      width={iconSize}
-      height={iconSize}
-      style={{
-        marginRight: 6,
-        position: 'relative',
-        top: -1,
-      }}
-    />
-  )
+  const icon = <img src={iconPencil} width={iconSize} height={iconSize} style={{ marginRight: 6 }} />
   const { urlPathname } = pageContext
   const fsPath = urlPathname === '/' ? '/index/+Page.tsx' : `${urlPathname}/+Page.mdx`
   const docsDir = pageContext.globalContext.config.docpress.docsDir ?? 'docs'
@@ -35,20 +24,21 @@ function EditLink({
       style={{
         display: 'inline-flex',
         alignItems: 'center',
-        paddingTop: 4,
-        paddingBottom: 1,
+        paddingTop: 7,
+        paddingBottom: 7,
         paddingLeft: 8,
-        paddingRight: 8,
+        paddingRight: 7,
         border: '1px solid #e0e0e0',
         borderRadius: 7,
         fontSize: '0.91em',
         color: '#6c6c6c',
         background: '#f8f8f8',
         letterSpacing: 0.4,
+        lineHeight: 0,
         ...style,
       }}
     >
-      {icon} Edit{verbose ? ' this page' : ''}
+      {icon} Edit{verbose ? ' page' : ''}
     </a>
   )
 }

package/Layout.css

@@ -0,0 +1,9 @@
+body {
+  background: var(--background-color);
+  /* TODO */
+  --background-color: #fbfbfb;
+  --background-color: #fcfcfc;
+  --background-color: white;
+  --background-color: #fefefe;
+  --background-color: #fdfdfd;
+}

package/Layout.tsx

@@ -4,6 +4,7 @@ export { viewDesktop }
 export { viewTablet }
 export { navLeftWidthMin }
 export { navLeftWidthMax }
+export { bodyMaxWidth }
 export { unexpandNav }
 export { blockMargin }
 
@@ -33,8 +34,9 @@ import { Style } from './utils/Style'
 import { cls } from './utils/cls'
 import { iconBooks } from './icons'
 import { EditLink } from './EditLink'
+import './Layout.css'
 
-const blockMargin = 3
+const blockMargin = 4
 const mainViewPadding = 20
 const mainViewWidthMaxInner = 800
 const mainViewWidthMax = (mainViewWidthMaxInner + mainViewPadding * 2) as 840 // 840 = 800 + 20 * 2
@@ -42,8 +44,10 @@ const navLeftWidthMin = 300
 const navLeftWidthMax = 370
 const viewMobile = 450
 const viewTablet = 1016
-const viewDesktop = (mainViewWidthMax + navLeftWidthMin) as 1140 // 1140 = 840 + 300
-const viewDesktopLarge = (mainViewWidthMax + navLeftWidthMax + blockMargin) as 1213 // 1213 = 840 + 370 + 3
+const viewDesktop = (mainViewWidthMax + navLeftWidthMin + blockMargin) as 1144 // 1140 = 840 + 300 + 4
+const viewDesktopLarge = (mainViewWidthMax + navLeftWidthMax + blockMargin) as 1214 // 1214 = 840 + 370 + 4
+// TODO
+const bodyMaxWidth = 1300
 
 // Avoid whitespace at the bottom of pages with almost no content
 const whitespaceBuster1: React.CSSProperties = {
@@ -77,6 +81,8 @@ function Layout({ children }: { children: React.ReactNode }) {
         // We don't add `container` to `body` nor `html` beacuse in Firefox it breaks the `position: fixed` of <MenuModal>
         // https://stackoverflow.com/questions/74601420/css-container-inline-size-and-fixed-child
         container: 'container-viewport / inline-size',
+        maxWidth: bodyMaxWidth,
+        margin: 'auto',
       }}
     >
       <MenuModal isTopNav={isLandingPage} />
@@ -108,14 +114,22 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
         <PageContent>{children}</PageContent>
       </div>
       <Style>{css`
+@container container-viewport (max-width: ${viewDesktopLarge - 1}px) {
+  #nav-left {
+    flex-grow: 1;
+    min-width: ${navLeftWidthMin + blockMargin}px;
+  }
+}
 @container container-viewport (min-width: ${viewDesktopLarge}px) {
   .low-prio-grow {
     flex-grow: 1;
   }
-  #navigation-container {
-    width: ${navLeftWidthMax}px !important;
+  #nav-left {
+    min-width: ${navLeftWidthMax + blockMargin}px;
   }
-}`}</Style>
+}
+
+`}</Style>
     </>
   )
 }
@@ -140,7 +154,8 @@ function PageContent({ children }: { children: React.ReactNode }) {
     <div
       className="page-wrapper low-prio-grow"
       style={{
-        // Avoid overflow, see https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container/66689926#66689926
+        // We must set min-width to avoid layout overflow on mobile/desktop view.
+        // https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container/66689926#66689926
         minWidth: 0,
         ...ifDocPage({
           backgroundColor: 'var(--bg-color)',
@@ -180,9 +195,16 @@ function NavLeft() {
         id="nav-left"
         className="link-hover-animation"
         style={{
+          /* TODO
           flexGrow: 1,
-          borderRight: 'var(--block-margin) solid white',
+          */
+          borderRight: 'var(--block-margin) solid var(--background-color)',
           zIndex: 1,
+          // We must set min-width to avoid layout overflow when the text of a navigation item exceeds the available width.
+          // https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container/66689926#66689926
+          // TODO: remove
+          // minWidth: navLeftWidthMin + blockMargin,
+          // maxWidth: navLeftWidthMax,
         }}
       >
         <div
@@ -195,8 +217,10 @@ function NavLeft() {
           <div
             style={{
               backgroundColor: 'var(--bg-color)',
+              /* TODO: remove?
               display: 'flex',
               justifyContent: 'flex-end',
+              */
             }}
           >
             <div
@@ -208,7 +232,6 @@ function NavLeft() {
                 overscrollBehavior: 'contain',
                 paddingBottom: 40,
                 minWidth: navLeftWidthMin,
-                maxWidth: navLeftWidthMax,
                 width: '100%',
               }}
             >
@@ -298,10 +321,11 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
     <div
       className={cls(['nav-head link-hover-animation', isNavLeft && 'is-nav-left', !!navMaxWidth && 'has-max-width'])}
       style={{
-        display: 'flex',
-        justifyContent: isNavLeft ? 'flex-end' : 'center',
+        // TODO: remove?
+        // display: 'flex',
+        // justifyContent: isNavLeft ? 'flex-end' : 'center',
         backgroundColor: 'var(--bg-color)',
-        borderBottom: 'var(--block-margin) solid white',
+        borderBottom: 'var(--block-margin) solid var(--background-color)',
         position: 'relative',
       }}
     >
@@ -311,8 +335,9 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
           // DON'T REMOVE this container: it's needed for the `cqw` values
           container: 'container-nav-head / inline-size',
           width: '100%',
-          minWidth: isNavLeft && navLeftWidthMin,
-          maxWidth: isNavLeft && navLeftWidthMax,
+          // TODO
+          // minWidth: isNavLeft && navLeftWidthMin,
+          // maxWidth: isNavLeft && navLeftWidthMax,
         }}
       >
         <div
@@ -343,6 +368,12 @@ function getStyleNav() {
 
   // Mobile
   style += css`
+/* TODO: move */
+.nav-item {
+  box-sizing: content-box;
+  max-width: ${navLeftWidthMax}px;
+}
+
 @media(max-width: ${viewMobile}px) {
   .nav-head:not(.is-nav-left) {
     .nav-head-menu-toggle {
@@ -397,6 +428,9 @@ function getStyleNav() {
       }
     }
   }
+  .page-wrapper {
+    min-width: ${mainViewWidthMax}px !important;
+  }
 }
 `
 
@@ -488,7 +522,7 @@ function NavHeadLeftFullWidthBackground() {
           left: 0,
           top: 0,
           boxSizing: 'content-box',
-          borderBottom: 'var(--block-margin) solid white',
+          borderBottom: 'var(--block-margin) solid var(--background-color)',
         }}
       />
       <Style>{
@@ -539,6 +573,7 @@ function NavHeadLogo({ isNavLeft }: { isNavLeft?: true }) {
 
   return (
     <a
+      className="nav-head-logo"
       style={{
         display: 'flex',
         alignItems: 'center',
@@ -550,8 +585,10 @@ function NavHeadLogo({ isNavLeft }: { isNavLeft?: true }) {
               paddingRight: 'var(--padding-side)',
             }
           : {
+              /* TODO
               paddingLeft: 15,
               marginLeft: -10,
+            */
             }),
       }}
       href="/"

package/MenuModal.tsx

@@ -3,7 +3,7 @@ export { MenuModal }
 import React from 'react'
 import { usePageContext } from './renderer/usePageContext'
 import { css } from './utils/css'
-import { viewDesktop, viewTablet } from './Layout'
+import { bodyMaxWidth, viewDesktop, viewTablet } from './Layout'
 import { ExternalLinks } from './ExternalLinks'
 import { Style } from './utils/Style'
 import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayout'
@@ -21,11 +21,15 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
           position: isTopNav ? 'absolute' : 'fixed',
           width: '100%',
           top: 'var(--nav-head-height)',
-          left: 0,
           zIndex: 199, // maximum value, because docsearch's modal has `z-index: 200`
           background: '#ededef',
           transitionProperty: 'opacity',
           transitionTimingFunction: 'ease',
+          maxWidth: bodyMaxWidth,
+          // Horizontal align
+          // https://stackoverflow.com/questions/3157372/css-horizontal-centering-of-a-fixed-div/32694476#32694476
+          left: '50%',
+          transform: 'translateX(-50%)',
         }}
         onMouseOver={keepMenuModalOpenOnMouseOver}
         onMouseLeave={closeMenuModalOnMouseLeave}
@@ -66,7 +70,7 @@ function BorderBottom() {
     <div
       id="border-bottom"
       style={{
-        background: '#fff',
+        background: 'var(--background-color)',
         height: 'var(--block-margin)',
         width: '100%',
       }}

package/NavItemComponent.css

@@ -91,6 +91,8 @@
   --box-shadow-top: 0 0;
   --box-shadow-bottom: 0 0;
   box-shadow: var(--box-shadow-top), var(--box-shadow-bottom), var(--box-shadow-left), var(--box-shadow-right);
+  box-shadow: var(--box-shadow-top), var(--box-shadow-right);
+  box-shadow: var(--box-shadow-top), var(--box-shadow-bottom);
 }
 .nav-item-level-3.nav-item-first-of-its-kind {
   padding-top: 10px;
@@ -105,14 +107,28 @@
   position: relative;
 }
 
-.nav-item-level-3::before,
-.nav-item-level-2.is-active::before {
-  background-color: var(--active-color);
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  content: '';
+/* TODO: remove
+.nav-head-content {
+  border-left: 1px solid red;
+}
+.nav-item-level-1 {
+  border-left: 1px solid red;
+}
+.nav-item-level-3 {
+  border-left: 1px solid red;
+}
+*/
+
+#nav-left {
+  .nav-item-level-1 {
+    margin-left: min(25px, max(3px, 30 * (1vw - 12.7px) - 5px));
+  }
+  .nav-head-logo {
+    padding-left: min(25px, max(3px, 30 * (1vw - 12.7px) - 5px));
+  }
+  .nav-item-level-2,
+  .nav-item-level-3,
+  .nav-item-level-4 {
+    padding-left: min(30px, max(6px, 30 * (1vw - 12.7px)));
+  }
 }

package/NavItemComponent.tsx

@@ -68,7 +68,7 @@ function NavItemComponent({
   const icon = navItem.titleIcon && (
     <img
       src={navItem.titleIcon}
-      style={{ height: iconSize, width: iconSize, marginRight: 8, marginLeft: 4, ...navItem.titleIconStyle }}
+      style={{ height: iconSize, width: iconSize, marginRight: 8, marginLeft: 2, ...navItem.titleIconStyle }}
     />
   )
 
@@ -106,7 +106,7 @@ function NavItemComponent({
     className: [
       'nav-item',
       'nav-item-level-' + navItem.level,
-      navItem.url && navItem.isActive && ' is-active',
+      ((navItem.url && navItem.isActive) || navItem.level === 3) && ' is-active',
       navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
       navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
     ]

package/css/colorize-on-hover.css

@@ -7,9 +7,14 @@
   .colorize-on-hover:hover [class*=' decolorize-'] {
     filter: grayscale(0) opacity(1) !important;
   }
+  .is-active {
+    background-color: var(--active-color);
+  }
   .link-hover-animation a:hover {
-    color: black !important;
     background-color: var(--active-color);
+    &.is-active {
+      background-color: var(--double-active-color);
+    }
   }
 }
 
@@ -46,5 +51,7 @@
 }
 
 body {
-  --active-color: rgba(0, 0, 0, 0.03);
+  --active-color-value: 0.03;
+  --active-color: rgba(0, 0, 0, var(--active-color-value));
+  --double-active-color: rgba(0, 0, 0, calc(2 * var(--active-color-value)));
 }

package/dist/NavItemComponent.js

@@ -9,7 +9,7 @@ function NavItemComponent({ navItem, onClick, }) {
     const titleJsx = parseMarkdownMini(navItem.title);
     const titleInNavJsx = parseMarkdownMini(navItem.titleInNav);
     const iconSize = 25;
-    const icon = navItem.titleIcon && (React.createElement("img", { src: navItem.titleIcon, style: { height: iconSize, width: iconSize, marginRight: 8, marginLeft: 4, ...navItem.titleIconStyle } }));
+    const icon = navItem.titleIcon && (React.createElement("img", { src: navItem.titleIcon, style: { height: iconSize, width: iconSize, marginRight: 8, marginLeft: 2, ...navItem.titleIconStyle } }));
     if (navItem.level === 1 || navItem.level === 4) {
         assert(navItem.url === undefined);
     }
@@ -37,7 +37,7 @@ function NavItemComponent({ navItem, onClick, }) {
         className: [
             'nav-item',
             'nav-item-level-' + navItem.level,
-            navItem.url && navItem.isActive && ' is-active',
+            ((navItem.url && navItem.isActive) || navItem.level === 3) && ' is-active',
             navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
             navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
         ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.15.13-commit-f0b224b",
+  "version": "0.15.13-commit-253f5e5",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",