Merge pull request #158 from LuxDL/la/better_layout

wider layout, is it better?
LuxDL · Jun 22, 2024 · a4dfed4 · a4dfed4
2 parents d76a150 + fa3266c
commit a4dfed4
Show file tree

Hide file tree

Showing 5 changed files with 252 additions and 7 deletions.
diff --git a/docs/make.jl b/docs/make.jl
@@ -48,6 +48,7 @@ makedocs(;
             "MIME output" => "mime_examples.md",
             "Updating to DocumenterVitepress" => "documenter_to_vitepress_docs_example.md",
             "DocumenterCitations integration" => "citations.md",
+            "CSS Styling" => "style_css.md",
 
         ],
         "Developers' documentation" => [

diff --git a/docs/src/.vitepress/theme/style.css b/docs/src/.vitepress/theme/style.css
@@ -197,3 +197,47 @@ mjx-container > svg {
 :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;
+} */
diff --git a/docs/src/components/AsideTrustees.vue b/docs/src/components/AsideTrustees.vue
@@ -33,7 +33,7 @@
     href="https://beautiful.makie.org"
     target="_blank"
   >
-    <img width="32" height="32" src="https://beautiful.makie.org/test_alpha_s.png" />
+    <img width="32" height="32" src="https://beautiful.makie.org/dev/test_alpha_s.png" />
     <span>
       <p class="extra-info">Visualize your data</p>
       <p class="heading">BeautifulMakie</p>

diff --git a/docs/src/style_css.md 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.
diff --git 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,15 +16,20 @@ 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",
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
     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;
-}
+}
+
+/**
+ * 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;
+} */