+ 
Visualize your data
BeautifulMakie
diff --git a/docs/src/style_css.md b/docs/src/style_css.md new file mode 100644 index 00000000..f472fff4 --- /dev/null +++ b/docs/src/style_css.md @@ -0,0 +1,136 @@ +# CSS Styling + +You can customize the appearance of your site by modifying the `style.css` file: + +``` +docs +└── src + └── .vitepress + └── theme + └── style.css +``` + +## Layout options + +For example, the following settings can be adjusted to increase the available space for your content. + +::: warning + +To restore the default options, copy and paste the `style.css` file into `docs/src/.vitepress/theme/` and delete the following lines: + +::: + +```css + +.VPDoc.has-aside .content-container { + max-width: 100% !important; +} +.aside { + max-width: 200px !important; + padding-left: 0 !important; +} +.VPDoc { + padding-top: 15px !important; + padding-left: 5px !important; + +} +/* This one does the right menu */ + +.VPDocOutlineItem li { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 200px; +} + +.VPNavBar .title { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +@media (max-width: 960px) { + .VPDoc { + padding-left: 25px !important; + } +} + +``` + +## All available space + +The following settings allows your content to fill out all available space on screen. + +```css +/* https://bddxg.top/article/note/vitepress优化/一些细节上的优化.html#文档页面调整-加宽 */ + +@media (min-width: 1440px) { + .VPSidebar { + padding-left: 20px !important; + width: 250px !important; + } + .VPNavBar .title { + padding-left: 15px !important; + width: 230px !important; + } + .VPContent.has-sidebar { + padding-left: 250px !important; + padding-right: 5vw !important; + } + .VPNavBar .curtain { + width: 100% !important; + } + .VPDoc { + padding: 32px 0 0 !important; + } + .VPNavBar.has-sidebar .content { + padding-left: 250px !important; + padding-right: 20px !important; + } + + .VPNavBar .divider { + padding-left: 250px !important; + } +} + +@media (min-width: 960px) { + .VPDoc { + padding: 32px 32px 0 10 !important; + } + .VPContent.has-sidebar { + padding-left: 255px !important; + } +} + +.VPNavBar { + padding-right: 0px !important; +} + +.VPDoc.has-aside .content-container { + max-width: 100% !important; +} +.aside { + max-width: 200px !important; + padding-left: 0 !important; +} + +/* This one does the right menu */ + +.VPDocOutlineItem li { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 200px; +} + +.VPNavBar .title { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +``` + +## More + +Other attributes can also be modified there, i.e., text colors, link colors, font family, etc. \ No newline at end of file diff --git a/template/src/.vitepress/theme/style.css b/template/src/.vitepress/theme/style.css index d2ca479c..95f97b57 100644 --- a/template/src/.vitepress/theme/style.css +++ b/template/src/.vitepress/theme/style.css @@ -1,6 +1,3 @@ -@import url(https://fonts.googleapis.com/css?family=Space+Mono:regular,italic,700,700italic); -@import url(https://fonts.googleapis.com/css?family=Space+Grotesk:regular,italic,700,700italic); - /* Customize default theme styling by overriding CSS variables: https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ @@ -19,6 +16,11 @@ https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/var /* Fonts */ +@font-face { + font-family: JuliaMono-Regular; + src: url("https://cdn.jsdelivr.net/gh/cormullion/juliamono/webfonts/JuliaMono-Regular.woff2"); +} + :root { /* Typography */ --vp-font-family-base: "Barlow", "Inter var experimental", "Inter var", @@ -26,8 +28,8 @@ https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/var Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; /* Code Snippet font */ - --vp-font-family-mono: "Space Mono", Menlo, Monaco, Consolas, "Courier New", - monospace; + --vp-font-family-mono: JuliaMono-Regular, monospace; + } .mono { @@ -37,6 +39,12 @@ https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/var This is pretty bad for Julia folks reading even though copy+paste retains the same text. */ font-feature-settings: 'calt' 0; + pre { + font-family: JuliaMono-Light; +}; +code { + font-family: JuliaMono-Light; + }; } /* Colors */ @@ -176,4 +184,60 @@ mjx-container > svg { --vp-c-brand-3: #91dd33; --vp-c-sponsor: #91dd33; --vitest-c-sponsor-hover: #e51370; -} \ No newline at end of file +} + +/** + * Change images from light to dark theme + * -------------------------------------------------------------------------- */ + + :root:not(.dark) .dark-only { + display: none; +} + +:root:is(.dark) .light-only { + display: none; +} + +/* https://bddxg.top/article/note/vitepress优化/一些细节上的优化.html#文档页面调整-加宽 */ + +.VPDoc.has-aside .content-container { + max-width: 100% !important; +} +.aside { + max-width: 200px !important; + padding-left: 0 !important; +} +.VPDoc { + padding-top: 15px !important; + padding-left: 5px !important; + +} +/* This one does the right menu */ + +.VPDocOutlineItem li { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 200px; +} + +.VPNavBar .title { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +@media (max-width: 960px) { + .VPDoc { + padding-left: 25px !important; + } +} + +/* This one does the left menu */ + +/* .VPSidebarItem .VPLink p { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 200px; +} */ \ No newline at end of file