@brillout/docpress 0.15.13-commit-c682b3d → 0.16.0

package/Layout.css

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

package/Layout.tsx

@@ -46,7 +46,6 @@ const viewMobile = 450
 const viewTablet = 1016
 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
@@ -70,11 +69,11 @@ function Layout({ children }: { children: React.ReactNode }) {
     content = <LayoutDocsPage>{children}</LayoutDocsPage>
   }
 
-  const isNavLeftHidden = isNavLeftAlwaysHidden()
+  const isNavLeftAlwaysHidden_ = isNavLeftAlwaysHidden()
   return (
     <div
       style={{
-        ['--bg-color']: '#f5f5f5',
+        ['--color-bg-gray']: '#f5f5f5',
         ['--block-margin']: `${blockMargin}px`,
         // ['--nav-head-height']: `${isLandingPage ? 70 : 63}px`,
         ['--nav-head-height']: `63px`,
@@ -82,18 +81,18 @@ 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: isNavLeftHidden ? undefined : bodyMaxWidth,
+        maxWidth: isNavLeftAlwaysHidden_ ? undefined : bodyMaxWidth,
         margin: 'auto',
       }}
     >
-      <MenuModal isTopNav={isLandingPage} isNavLeftHidden={isNavLeftHidden} />
+      <MenuModal isTopNav={isLandingPage} isNavLeftAlwaysHidden_={isNavLeftAlwaysHidden_} />
       <div className={isLandingPage ? '' : 'doc-page'} style={whitespaceBuster1}>
         <NavHead />
         {content}
       </div>
       {/* Early toggling, to avoid layout jumps */}
       <script dangerouslySetInnerHTML={{ __html: initializeJsToggle_SSR }}></script>
-      <Style>{getStyleNav()}</Style>
+      <Style>{getStyleLayout()}</Style>
     </div>
   )
 }
@@ -108,7 +107,7 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
             <div
               id="nav-left-margin"
               className="low-prio-grow"
-              style={{ width: 0, maxWidth: 50, background: 'var(--bg-color)' }}
+              style={{ width: 0, maxWidth: 50, background: 'var(--color-bg-gray)' }}
             />
           </>
         )}
@@ -129,7 +128,14 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
     min-width: ${navLeftWidthMax + blockMargin}px;
   }
 }
-
+.page-content {
+  --hash-offset: 24px;
+}
+@container container-viewport (max-width: ${viewDesktopLarge - 1}px) and (min-width: ${viewDesktop}px) {
+  .page-content {
+    --hash-offset: 27px;
+  }
+}
 `}</Style>
     </>
   )
@@ -159,7 +165,7 @@ function PageContent({ children }: { children: React.ReactNode }) {
         // https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container/66689926#66689926
         minWidth: 0,
         ...ifDocPage({
-          backgroundColor: 'var(--bg-color)',
+          backgroundColor: 'var(--color-bg-gray)',
           paddingBottom: 50,
         }),
       }}
@@ -196,16 +202,10 @@ function NavLeft() {
         id="nav-left"
         className="link-hover-animation"
         style={{
-          /* TODO
-          flexGrow: 1,
-          */
-          borderRight: 'var(--block-margin) solid var(--background-color)',
+          borderRight: 'var(--block-margin) solid var(--color-bg-white)',
           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
@@ -217,11 +217,7 @@ function NavLeft() {
           <NavHead isNavLeft={true} />
           <div
             style={{
-              backgroundColor: 'var(--bg-color)',
-              /* TODO: remove?
-              display: 'flex',
-              justifyContent: 'flex-end',
-              */
+              backgroundColor: 'var(--color-bg-gray)',
             }}
           >
             <div
@@ -247,9 +243,18 @@ function NavLeft() {
       </div>
       {/* Early scrolling, to avoid flashing */}
       <script dangerouslySetInnerHTML={{ __html: autoScrollNav_SSR }}></script>
+      <Style>{getStyleNavLeft()}</Style>
     </>
   )
 }
+function getStyleNavLeft() {
+  return css`
+.nav-item {
+  box-sizing: content-box;
+  max-width: ${navLeftWidthMax}px;
+}`
+}
+
 function NavigationContent(props: {
   navItems: NavItem[]
   showOnlyRelevant?: true
@@ -322,11 +327,8 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
     <div
       className={cls(['nav-head link-hover-animation', isNavLeft && 'is-nav-left', !!navMaxWidth && 'has-max-width'])}
       style={{
-        // TODO: remove?
-        // display: 'flex',
-        // justifyContent: isNavLeft ? 'flex-end' : 'center',
-        backgroundColor: 'var(--bg-color)',
-        borderBottom: 'var(--block-margin) solid var(--background-color)',
+        backgroundColor: 'var(--color-bg-gray)',
+        borderBottom: 'var(--block-margin) solid var(--color-bg-white)',
         position: 'relative',
       }}
     >
@@ -336,9 +338,6 @@ 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%',
-          // TODO
-          // minWidth: isNavLeft && navLeftWidthMin,
-          // maxWidth: isNavLeft && navLeftWidthMax,
         }}
       >
         <div
@@ -364,17 +363,11 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
     </div>
   )
 }
-function getStyleNav() {
+function getStyleLayout() {
   let style = ''
 
   // 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 {
@@ -518,12 +511,12 @@ function NavHeadLeftFullWidthBackground() {
         style={{
           height: '100%',
           zIndex: -1,
-          background: 'var(--bg-color)',
+          background: 'var(--color-bg-gray)',
           position: 'absolute',
           left: 0,
           top: 0,
           boxSizing: 'content-box',
-          borderBottom: 'var(--block-margin) solid var(--background-color)',
+          borderBottom: 'var(--block-margin) solid var(--color-bg-white)',
         }}
       />
       <Style>{
@@ -585,12 +578,7 @@ function NavHeadLogo({ isNavLeft }: { isNavLeft?: true }) {
               paddingLeft: 'var(--main-view-padding)',
               paddingRight: 'var(--padding-side)',
             }
-          : {
-              /* TODO
-              paddingLeft: 15,
-              marginLeft: -10,
-            */
-            }),
+          : {}),
       }}
       href="/"
       onContextMenu={!navLogo ? undefined : onContextMenu}
@@ -696,7 +684,7 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
     height: 100%;
     width: 100%;
     top: var(--nav-head-height);
-    background-color: var(--active-color);
+    background-color: var(--color-active);
     transition-property: top !important;
     transition: top 0.4s ease !important;
     z-index: -1;

package/MenuModal.tsx

@@ -10,7 +10,7 @@ import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayo
 import { closeMenuModal, closeMenuModalOnMouseLeave, keepMenuModalOpenOnMouseOver } from './MenuModal/toggleMenuModal'
 import { EditLink } from './EditLink'
 
-function MenuModal({ isTopNav, isNavLeftHidden }: { isTopNav: boolean; isNavLeftHidden: boolean }) {
+function MenuModal({ isTopNav, isNavLeftAlwaysHidden_ }: { isTopNav: boolean; isNavLeftAlwaysHidden_: boolean }) {
   return (
     <>
       <Style>{getStyle()}</Style>
@@ -25,7 +25,7 @@ function MenuModal({ isTopNav, isNavLeftHidden }: { isTopNav: boolean; isNavLeft
           background: '#ededef',
           transitionProperty: 'opacity',
           transitionTimingFunction: 'ease',
-          maxWidth: isNavLeftHidden ? undefined : bodyMaxWidth,
+          maxWidth: isNavLeftAlwaysHidden_ ? undefined : bodyMaxWidth,
           // Horizontal align
           // https://stackoverflow.com/questions/3157372/css-horizontal-centering-of-a-fixed-div/32694476#32694476
           left: '50%',
@@ -70,7 +70,7 @@ function BorderBottom() {
     <div
       id="border-bottom"
       style={{
-        background: 'var(--background-color)',
+        background: 'var(--color-bg-white)',
         height: 'var(--block-margin)',
         width: '100%',
       }}

package/NavItemComponent.css

@@ -36,11 +36,11 @@
     padding-left: 9px;
     padding-top: 6px;
     padding-bottom: 6px;
-    border-left: 3px solid var(--category-color);
+    border-left: 3px solid var(--color-category);
     .collapsible-expanded &,
     .collapsible-collapsed & {
       text-decoration: underline;
-      text-decoration-color: var(--category-color);
+      text-decoration-color: var(--color-category);
       text-decoration-thickness: 3px;
       text-underline-offset: .3em;
       border: 0;
@@ -53,7 +53,7 @@
     }
   }
   #nav-left & {
-    border-bottom: 3px solid var(--category-color);
+    border-bottom: 3px solid var(--color-category);
     padding-bottom: 2px;
     margin-top: 3px;
     margin-bottom: 10px;
@@ -86,12 +86,13 @@
   --shadow-size-minus: calc(-1 * var(--shadow-size));
   --shadow-top: inset 0px var(--shadow-size) var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
   --shadow-bottom: inset 0px var(--shadow-size-minus) var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
-  --box-shadow-left: inset var(--shadow-size-minus) 0px var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
-  --box-shadow-right: inset var(--shadow-size) 0px var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
   --box-shadow-top: 0 0;
   --box-shadow-bottom: 0 0;
+  /*
+  --box-shadow-left: inset var(--shadow-size-minus) 0px var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
+  --box-shadow-right: inset var(--shadow-size) 0px var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
   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 {
@@ -107,28 +108,16 @@
   position: relative;
 }
 
-/* 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));
+    margin-left: min(25px, max(5px, 30 * (1vw - 12.7px) - 5px));
   }
   .nav-head-logo {
-    padding-left: min(25px, max(3px, 30 * (1vw - 12.7px) - 5px));
+    padding-left: min(25px, max(5px, 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)));
+    padding-left: min(30px, max(8px, 30 * (1vw - 12.7px)));
   }
 }

package/NavItemComponent.tsx

@@ -115,7 +115,7 @@ function NavItemComponent({
   }
   if (navItem.level === 1) {
     props.style = {
-      ['--category-color']: navItem.color!,
+      ['--color-category']: navItem.color!,
     }
   }
 

package/css/colorize-on-hover.css

@@ -8,12 +8,12 @@
     filter: grayscale(0) opacity(1) !important;
   }
   .is-active {
-    background-color: var(--active-color);
+    background-color: var(--color-active);
   }
   .link-hover-animation a:hover {
-    background-color: var(--active-color);
+    background-color: var(--color-active);
     &.is-active {
-      background-color: var(--double-active-color);
+      background-color: var(--color-active-double);
     }
   }
 }
@@ -51,7 +51,7 @@
 }
 
 body {
-  --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)));
+  --color-active-value: 0.03;
+  --color-active: rgba(0, 0, 0, var(--color-active-value));
+  --color-active-double: rgba(0, 0, 0, calc(2 * var(--color-active-value)));
 }

package/css/heading.css

@@ -77,7 +77,13 @@ h3 {
   .doc-page h3[id]:hover::before {
     content: '#';
     position: absolute;
-    left: calc(-1 * (0.75em - 26px));
+    height: 100%;
+    line-height: 0;
+    font-size: 23px;
+    top: 1px;
+    left: calc(-1 * (0.75em - var(--hash-offset)));
     color: #aaa;
+    display: flex;
+    align-items: center;
   }
 }

package/dist/NavItemComponent.js

@@ -46,7 +46,7 @@ function NavItemComponent({ navItem, onClick, }) {
     };
     if (navItem.level === 1) {
         props.style = {
-            ['--category-color']: navItem.color,
+            ['--color-category']: navItem.color,
         };
     }
     if (navItem.level === 2 || navItem.level === 3) {

package/package.json

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