docs theme tweaks to align with explorer styles

docs/.vitepress/config.ts

@@ -77,10 +77,10 @@ export default defineConfig({
       ]
     },
 
-    docFooter: {
-      prev: false,
-      next: false,
-    },
+    //docFooter: {
+    //  prev: false,
+    //  next: false,
+    //},
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/aldeacomputer' }

docs/.vitepress/theme/custom.css

@@ -0,0 +1,176 @@
+/**
+ * Some customisations and tweaks to the default VitePress theme to Aldearize it.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
+
+/**
+ * Typography
+ */
+
+:root {
+  --vp-font-family-base: 'IBM Plex Sans', sans-serif;
+  --vp-font-family-mono: 'IBM Plex Mono', monospace;
+}
+
+/*
+.VPDocAside .content,
+.VPDocAside .outline-title {
+  font-size: 14px;
+}
+*/
+
+/**
+ * Colors
+ */
+
+:root {
+  --aldea-blue-1: #8fc2d7; /* aldea blue 40 */
+  --aldea-blue-2: #5592ac; /* aldea blue 70 */
+  --aldea-blue-3: #2c799b; /* aldea blue 60 */
+
+  --aldea-gray-1: #a8a8a8; /* aldea gray 40 */
+  --aldea-gray-2: #636363; /* aldea gray 70 hover  */
+  --aldea-gray-3: #525252; /* aldea gray 70 */
+
+  --support-info: var(--aldea-blue-3);
+  --support-info-bg: rgba(44, 121, 155, 0.1);
+  --support-tip: var(--aldea-blue-1);
+  --support-tip-bg: rgba(44, 121, 155, 0.1); /* aldea blue 60 @ 10% */
+  --support-warning: #f1c21b; /* aldea yellow 30 */
+  --support-warning-bg: rgba(241, 194, 27, 0.05); /* aldea yellow 60 @ 5% */
+  --support-danger: #fa4d56; /* aldea red 50 */
+  --support-danger-bg: rgba(250, 77, 86, 0.05); /* aldea red 50 @ 5% */
+
+  /* Changed colors on Light Theme */
+  --vp-c-bg: #fffcf8;
+  --vp-c-bg-alt: #fdf8f0;
+  --vp-c-bg-elv: #faf1e2;
+  --vp-c-bg-soft: #fdf8f0;
+
+  /*--vp-custom-block-details-bg: var(--vp-c-bg-alt);*/
+  --vp-code-line-highlight-color: var(--vp-c-bg-elv);
+
+  --vp-c-default-1: var(--aldea-gray-1);
+  --vp-c-default-2: var(--aldea-gray-2);
+  --vp-c-default-3: var(--aldea-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--aldea-blue-3);
+  --vp-c-brand-2: var(--aldea-blue-2);
+  --vp-c-brand-3: var(--aldea-blue-3);
+  --vp-c-brand-soft: var(--vp-c-gray-soft);
+}
+
+.dark {
+  --vp-c-bg: #202020;
+  --vp-c-bg-alt: #161616;
+  --vp-c-bg-elv: #262626;
+  --vp-c-bg-soft: var(--vp-c-bg-alt);
+  --vp-c-brand-1: var(--aldea-blue-1);
+  --vxp-code-line-highlight-color: rgba(255,255,255,0.1);
+}
+
+/**
+ * Layout: Home
+ */
+
+:root {
+  --vp-home-hero-name-color: black;
+}
+
+.dark {
+  --vp-home-hero-name-color: white;
+}
+
+.VPHome .name,
+.VPHome .text {
+  font-weight: 300;
+}
+
+.VPHome .VPButton {
+  width: 11rem;
+  text-align: left;
+  padding: 4px 16px 4px 16px;
+  font-weight: 400;
+}
+
+.VPHome .VPButton.brand,
+.VPHome .VPButton.alt {
+  border-radius: 0;
+}
+
+.VPHome .VPButton.alt,
+.VPHome .VPButton.alt:hover {
+  color: white;
+}
+
+.VPHome .VPFeature {
+  border-radius: 0;
+}
+
+@media (min-width: 640px) {
+  .VPHome .name,
+  .VPHome .text {
+    max-width: 576px;
+  }
+}
+
+/**
+ * Layout: Docs
+ */
+
+.VPDoc .custom-block {
+  margin: 16px 0;
+  border-left-style: solid;
+  border-radius: 4px;
+  border-left-width: 4px;
+}
+
+.VPDoc .custom-block.tip {
+  border-left-color: var(--support-tip);
+  background-color: var(--support-tip-bg);
+}
+
+.VPDoc .custom-block.info {
+  border-left-color: var(--support-info);
+  background-color: var(--support-info-bg);
+}
+
+.VPDoc .custom-block.warning {
+  border-left-color: var(--support-warning);
+  background-color: var(--support-warning-bg);
+}
+
+.VPDoc .custom-block.danger {
+  border-left-color: var(--support-danger);
+  background-color: var(--support-danger-bg);
+}
+
+@media (min-width: 640px) {
+  .VPDoc div[class*='language-'],
+  .VPDoc .vp-block {
+    border-radius: 2px;
+  }
+}
+
+/**
+ * Component: Prev/Next links
+ */
+
+.prev-next .pager-link {
+  border-radius: 0;
+}
+
+.VPNavBar .VPMenu {
+  border-radius: 4px;
+  background-color: var(--vp-c-bg-alt);
+}
+
+.VPMenu .link {
+  border-radius: 2px;
+}
+
+.VPMenu .link:hover {
+  background-color: transparent;
+}

docs/.vitepress/theme/index.ts

@@ -1,7 +1,7 @@
 // https://vitepress.dev/guide/custom-theme
 import { h } from 'vue'
 import Theme from 'vitepress/theme'
-import './style.css'
+import './custom.css'
 
 export default {
   extends: Theme,

docs/examples/markdown.md

@@ -37,14 +37,14 @@ export default {
 **Input**
 
 ```md
-::: info
-This is an info box.
-:::
-
 ::: tip
 This is a tip.
 :::
 
+::: info
+This is an info box.
+:::
+
 ::: warning
 This is a warning.
 :::
@@ -60,14 +60,14 @@ This is a details block.
 
 **Output**
 
-::: info
-This is an info box.
-:::
-
 ::: tip
 This is a tip.
 :::
 
+::: info
+This is an info box.
+:::
+
 ::: warning
 This is a warning.
 :::