@brillout/docpress 0.5.3 → 0.5.4

package/dist/renderer/_default.page.client.css

@@ -66,7 +66,7 @@ iframe {
 .doc-page h3[id]:hover::before {
   content: "#";
   position: absolute;
-  left: calc(-1 * (0.75em - 23px));
+  left: calc(-1 * (0.75em - 26px));
   color: #aaa;
 }
 

package/dist/renderer/_default.page.client.js

@@ -177,14 +177,28 @@ function sum(arr) {
 activateNavigationMask();
 activateMenuToggle();
 initNavigationFullscreen();
+autoHideNavigationOverlayOnLinkClick();
 function activateMenuToggle() {
   const menuToggle = document.getElementById("menu-toggle");
-  menuToggle.onclick = toggleNavigation;
+  menuToggle.onclick = navigationOverlayToggle;
 }
 function activateNavigationMask() {
   const navigationMask = document.getElementById("navigation-mask");
-  navigationMask.onclick = toggleNavigation;
+  navigationMask.onclick = navigationOverlayToggle;
 }
-function toggleNavigation() {
+function autoHideNavigationOverlayOnLinkClick() {
+  document.addEventListener("click", (ev) => {
+    const el = ev.target;
+    if (!el || !("classList" in el))
+      return;
+    if (!el.classList.contains("nav-item"))
+      return;
+    navigationOverlayHide();
+  });
+}
+function navigationOverlayToggle() {
   document.body.classList.toggle("show-menu");
 }
+function navigationOverlayHide() {
+  document.body.classList.remove("show-menu");
+}

package/dist/renderer/_default.page.server.css

@@ -1,17 +1,17 @@
 /* src/navigation/Navigation-layout.css */
 :root {
   --mobile-header-height: 60px;
-  --navigation-min-height: 300px;
-  --navigation-max-height: 350px;
+  --navigation-min-width: 300px;
+  --navigation-max-width: 350px;
 }
 #navigation-wrapper {
-  min-width: var(--navigation-min-height);
+  min-width: var(--navigation-min-width);
 }
 .doc-page #navigation-wrapper {
-  max-width: var(--navigation-max-height);
+  max-width: var(--navigation-max-width);
 }
 .landing-page #navigation-wrapper {
-  max-width: min(var(--navigation-max-height), max(var(--navigation-min-height), calc(var(--navigation-min-height) + 100vw - 1240px)));
+  max-width: min(var(--navigation-max-width), max(var(--navigation-min-width), calc(var(--navigation-min-width) + 100% - 1240px)));
 }
 #navigation-container {
   position: sticky;
@@ -29,7 +29,7 @@
 }
 #navigation-mask {
   position: fixed;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   top: 0;
   left: 0;
@@ -70,7 +70,7 @@
     margin-left: 0 !important;
   }
   #navigation-container {
-    --width: min(100vw, 350px);
+    --width: min(100%, 350px);
     width: var(--width);
     left: 0;
     height: calc(100vh - var(--mobile-header-height));
@@ -92,9 +92,8 @@
   }
 }
 html.navigation-fullscreen #navigation-container {
-  width: 100vw;
+  width: 100%;
   height: 100vh;
-  overflow-y: scroll;
   position: fixed;
   top: 0;
   left: 0;
@@ -280,7 +279,7 @@ html.navigation-fullscreen #page-content {
 #page-layout {
   display: flex;
   justify-content: center;
-  width: 100vw;
+  width: 100%;
 }
 #page-layout > #navigation-wrapper,
 #page-layout > #page-wrapper {

package/dist/renderer/_default.page.server.js

@@ -169,7 +169,7 @@ function NavigationFullscreenButton() {
 function NavigationFullscreenClose() {
   return /* @__PURE__ */ React2.createElement("a", {
     id: "navigation-fullscreen-close",
-    style: { position: "fixed", top: 11, right: 15, zIndex: 10 },
+    style: { position: "absolute", top: 11, right: 11, zIndex: 10 },
     "aria-label": "Press <Esc>",
     "data-balloon-pos": "left"
   }, /* @__PURE__ */ React2.createElement("img", {
@@ -331,7 +331,7 @@ function MobileHeader() {
     id: "mobile-header",
     style: {
       height: "var(--mobile-header-height)",
-      width: "100vw",
+      width: "100%",
       position: "relative"
     }
   }, /* @__PURE__ */ React4.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "scripts": {
     "// Check types while developing": "",
     "types": "tsc --noEmit --watch",