diff --git a/docs/.vitepress/theme/styles/custom.scss b/docs/.vitepress/theme/styles/custom.scss index 33c1982b..3d0551c2 100644 --- a/docs/.vitepress/theme/styles/custom.scss +++ b/docs/.vitepress/theme/styles/custom.scss @@ -153,61 +153,228 @@ img.VPImage.image-src { // maximum document width style ends // vitepress navbar title line breaking issue tweak -// @media (max-width: 1080px) { -// :root { -// --vp-sidebar-width: 260px; -// } -// .VPNav { -// // refering solutions by https://cn.vuejs.org -// .DocSearch-Button-Placeholder { -// display: none; -// } -// .VPNavBarMenuLink, -// .VPNavBarMenuGroup .button { -// padding-left: 10px; -// padding-right: 10px; -// } -// } -// } -// @media (max-width: 992px) { -// .VPNav { -// .VPNavBar { -// padding-left: 24px; -// padding-right: 24px; -// } -// .VPNavBarMenuLink, -// .VPNavBarMenuGroup .button { -// padding-left: 8px; -// padding-right: 8px; -// } -// } -// } -// @media (max-width: 800px) { -// .VPNav { -// .VPNavBarSearch { -// padding-left: 16px; -// } -// .VPNavBarMenuLink, -// .VPNavBarMenuGroup .button { -// padding-left: 6px; -// padding-right: 6px; -// } -// } -// } +@media (max-width: 1080px) { + :root { + --vp-sidebar-width: 260px; + } + .VPNav { + // refering solutions by https://cn.vuejs.org + .DocSearch-Button-Placeholder { + display: none; + } + .VPNavBarMenuLink, + .VPNavBarMenuGroup .button { + padding-left: 10px; + padding-right: 10px; + } + } +} +@media (max-width: 992px) { + .VPNav { + .VPNavBar { + padding-left: 24px; + padding-right: 24px; + } + .VPNavBarMenuLink, + .VPNavBarMenuGroup .button { + padding-left: 8px; + padding-right: 8px; + } + } +} +@media (max-width: 800px) { + .VPNav { + .VPNavBarSearch { + padding-left: 16px; + } + .VPNavBarMenuLink, + .VPNavBarMenuGroup .button { + padding-left: 6px; + padding-right: 6px; + } + } +} -// // menu new-lining issue on title -// .VPMenuGroup .title { -// white-space: nowrap; -// } +// menu new-lining issue on title +.VPMenuGroup .title { + white-space: nowrap; +} // vitepress navbar style ends -// VP Footer -.VPFooter { - z-index: none; -} +// VP Footer .VPFooter { +// z-index: none; +// } // remove search box footer text .DocSearch-Logo { display: none; } +// remove search box footer text section styles ends + +.link-preview-widget { + display: table; + width: 100%; + border: 2px solid rgba(55, 53, 47, 0.16); + border-radius: 5px; +} + +.link-preview-widget-title { + font-size: 16px; + font-weight: 700; + display: -webkit-box; + overflow: hidden; + margin-bottom: 8px; + word-break: break-all; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.link-preview-widget-description { + font-size: 12px; + font-style: normal; + line-height: 1.5; + display: -webkit-box; + overflow: hidden; + max-height: 3em; + margin-bottom: 4px; + word-break: break-all; + color: rgba(55, 53, 47, 0.65); + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.link-preview-widget-url { + font-size: 12px; + font-style: normal; + line-height: 1.5; + display: block; + margin-bottom: 0; + color: rgba(55, 53, 47, 0.65); +} + +.link-preview-widget > a { + text-decoration: none !important; + display: table-cell; + flex-direction: column; + padding: 16px; + cursor: pointer; + vertical-align: middle; + color: inherit; + background-color: transparent; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-box-flex: 1; + flex: 1; + transition: background-color 0.2s ease-in-out; + border-radius: 5px; + // border-style: solid; + // border-color: rgba(55, 53, 47, 0.16); // background color: var(--vp-c-text-light-1) + // border-right: none; +} + +.link-preview-widget > a:hover { + background-color: var(--vp-custom-block-tip-bg); +} + +.link-preview-widget-image { + width: 260px; + min-width: 220px; + height: 150px; + padding: 0; + vertical-align: middle; + border-left: 1px rgba(55, 53, 47, 0.16) #f2f2f2; + border-radius: 5px; + background-repeat: no-repeat; + background-position: 50%; + background-size: cover; + -webkit-box-flex: 0; + flex: 0; + // border-left: none; +} + +// dark theme text & url color scheme var(--vp-c-text-2) for text color + +html.dark { + .link-preview-widget { + display: table; + width: 100%; + border: 2px solid rgba(55, 53, 47, 0.16); + border-radius: 5px; + } + + .link-preview-widget-title { + font-size: 16px; + font-weight: 700; + display: -webkit-box; + overflow: hidden; + margin-bottom: 8px; + word-break: break-all; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + + .link-preview-widget-description { + font-size: 12px; + font-style: normal; + line-height: 1.5; + display: -webkit-box; + overflow: hidden; + max-height: 3em; + margin-bottom: 4px; + word-break: break-all; + color: var(--vp-c-text-2); + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + + .link-preview-widget-url { + font-size: 12px; + font-style: normal; + line-height: 1.5; + display: block; + margin-bottom: 0; + color: var(--vp-c-text-2); + } + + .link-preview-widget > a { + text-decoration: none !important; + display: table-cell; + flex-direction: column; + padding: 16px; + cursor: pointer; + vertical-align: middle; + color: inherit; + background-color: transparent; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-box-flex: 1; + flex: 1; + transition: background-color 0.2s ease-in-out; + // border-style: solid; + // border-color: rgba(55, 53, 47, 0.16); // background color: var(--vp-c-text-light-1) + // border-right: none; + } + + .link-preview-widget > a:hover { + background-color: var(--vp-custom-block-tip-bg); + } + + .link-preview-widget-image { + width: 260px; + min-width: 220px; + height: 150px; + padding: 0; + vertical-align: middle; + border-left: 1px rgba(55, 53, 47, 0.16) #f2f2f2; + border-radius: 5px; + background-repeat: no-repeat; + background-position: 50%; + background-size: cover; + -webkit-box-flex: 0; + flex: 0; + // border-left: none; + } +} + +// link preview markdown-it plugin dark mode style ends \ No newline at end of file diff --git a/docs/application/markdown-it-katex/tips.md b/docs/application/markdown-it-katex/tips.md index a55c93bd..f968eb27 100644 --- a/docs/application/markdown-it-katex/tips.md +++ b/docs/application/markdown-it-katex/tips.md @@ -23,7 +23,7 @@ The above situation is undoubtedly annoying for user experiences while reading d If you happened to search over KaTeX's official repo issue tracker on GitHub, there are several user-made css tweaks hack already, the fix is simple by adjusting the overflows of both x and y axes of the KaTeX render `
` blocks. The `katex-display > .katex` selector targets the child element of the `.katex-display` class that has the `.katex` class. This is the element that contains the KaTeX math expression. The first block of styles is mostly concerned with making sure that the KaTeX expression doesn't overflow its container and can be scrolled horizontally if needed. The second block of styles sets the font and line-height for the KaTeX expression and makes sure that its text is properly indented. - +[@preview](https://github.com/KaTeX/KaTeX/issues/327) But, the issue here is, the overflowing issue is resolved on the webpage, but the style itself left with a slight whitish "box" at the crossing corner of both horizontal as well as vertical scrollbar tracks, this might not be so explicit in the light mode of the webpage, but when it turns to dark mode, the box become annoying. Some people might say it's an easy tweak via setting the display property of the "box" element to `display: none;` to directly remove the box out of the page, this is a smart approach; however, while the box is gone, the two crossing tracks is going to form an untouched invisible box again against two bars without color. Thus, neither ways seems to perfectly solve the problem. @@ -31,7 +31,7 @@ But, the issue here is, the overflowing issue is resolved on the webpage, but th After running a quick research on Google, I found a simple hack tweak used in a theme of VuePress, [vuepress-theme-hope](https://github.com/vuepress-theme-hope/vuepress-theme-hope) on GitHub, the theme both integrate with KaTeX and MathJax for math supports. - +[@preview](https://github.com/vuepress-theme-hope/vuepress-theme-hope) Under the styles directory of the repository, several line of scss styles came across my eyes, @@ -119,9 +119,8 @@ The third section targets the `.katex-error` class and sets the color to red to If you do not have native scss support for your site, such as a static HTML based documentation site or content management site builder such as Wiki.JS that works as an SaaS which only allows users to apply custom stylesheets within slots provided and make effects, you could use some scss to css converter online with options follows, - +- [@preview](https://jsonformatter.org) +- [@preview](https://json2csharp.com) to precompile from source scss into normal css styles and use them based on your needs, below are auto-generated compiled css, **ONLY take it as reference**, I do not guarantee the usability. diff --git a/docs/vite.config.ts b/docs/vite.config.ts index b4d81bb1..2865ef75 100644 --- a/docs/vite.config.ts +++ b/docs/vite.config.ts @@ -11,4 +11,7 @@ export default defineConfig({ ssr: { noExternal: ['@andatoshiki/vitepress-plugin-nprogress', '@arco-design/web-vue'], }, + build: { + chunkSizeWarningLimit: 1600, + }, })