@brillout/docpress 0.8.2 → 0.8.3

package/Layout.tsx

@@ -410,10 +410,7 @@ function MenuLink(props: PropsAnchor) {
         ev.preventDefault()
         toggleMenuModal()
       }}
-      aria-label={hotkeyMenuOpen}
-      data-balloon-pos="left"
-      data-balloon-blunt
-      data-balloon-nofocus
+      aria-label={'Ctrl\xa0+\xa0M'}
     >
       <MenuIcon />
       Menu

package/MenuModal.tsx

@@ -1,8 +1,6 @@
 export { MenuModal }
 export { toggleMenuModal }
 export { closeMenuModal }
-export { hotkeyMenuOpen }
-export { hotkeyMenuClose }
 
 import React from 'react'
 import { usePageContext } from './renderer/usePageContext'
@@ -11,9 +9,6 @@ import { css } from './utils/css'
 import { containerQueryMobile } from './Layout'
 import { Links } from './Links'
 
-const hotkeyMenuOpen = 'Ctrl + M'
-const hotkeyMenuClose = 'Ctrl+M or Escape'
-
 function MenuModal() {
   return (
     <>
@@ -88,11 +83,9 @@ function CloseButton() {
   return (
     <div
       onClick={toggleMenuModal}
-      style={{ position: 'fixed', top: 0, right: 0, zIndex: 10, padding: 11 }}
-      aria-label={hotkeyMenuClose}
-      data-balloon-pos="left"
-      data-balloon-blunt
-      data-balloon-nofocus
+      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/css/font.css

@@ -1,5 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
 body {
-  font-family: 'Inter';
+  font-family: 'Inter', sans-serif;
 }
 button {
   font-family: inherit;
@@ -9,17 +11,3 @@ body {
   color: var(--color-text);
   line-height: 1.5;
 }
-
-@font-face {
-  font-family: 'Inter';
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: oblique 0deg 12deg;
-  src: url('./Inter-Var.ttf') format('truetype-variations');
-}
-
-em,
-i {
-  font-variation-settings: 'slnt' -10;
-  font-style: normal;
-}

package/css/tooltip.css

@@ -1,11 +1,23 @@
-@import 'balloon-css';
-
-:root {
-  --balloon-color: #444;
-  --balloon-move: 2px;
-  --balloon-font-size: 14px;
-  --balloon-border-radius: 5px;
+[aria-label] {
+  position: relative;
 }
-[aria-label][data-balloon-pos]:after {
-  font-family: 'Inter';
+[aria-label]:hover::before {
+  font-family: monospace;
+  font-size: 12px;
+  content: attr(aria-label);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  margin-top: 5px;
+  background: #fdfdfd;
+  padding: 3px 10px;
+  box-shadow: rgb(0 0 0 / 8%) 2px 4px 7px 0px;
+  border-radius: 5px;
+  color: #333;
+  letter-spacing: -0.02em;
+  border: 1px solid #e3e3e3;
+}
+[data-label-shift]::before {
+  margin-left: -10px;
 }

package/docsearch/SearchLink.tsx

@@ -20,10 +20,7 @@ function SearchLink(props: PropsAnchor) {
         ev.preventDefault()
         openDocsearchModal()
       }}
-      aria-label="Ctrl + K"
-      data-balloon-pos="left"
-      data-balloon-blunt
-      data-balloon-nofocus
+      aria-label={'Ctrl\xa0+\xa0K'}
     >
       <SearchIcon />
       Search

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -11,7 +11,6 @@
     "@mdx-js/rollup": "3.0.1",
     "@shikijs/transformers": "1.2.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "balloon-css": "1.2.0",
     "rehype-pretty-code": "0.13.0",
     "remark-gfm": "4.0.0",
     "shiki": "1.2.0",