Use the setup from DocumenterVitepress.jl

.vitepress/theme/index.ts

@@ -0,0 +1,21 @@
+// .vitepress/theme/index.ts
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import AsideTrustees from '../../components/AsideTrustees.vue'
+
+import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
+import './style.css'
+
+export default {
+ extends: DefaultTheme,
+ Layout() {
+ return h(DefaultTheme.Layout, null, {
+ // 'home-hero-info-after': () => h(HomeTrustees),
+ 'aside-ads-before': () => h(AsideTrustees),
+ })
+ },
+ enhanceApp({ app, router, siteData }) {
+ enhanceAppWithTabs(app)
+ }
+} satisfies Theme

.vitepress/theme/style.css

@@ -1,18 +1,27 @@
 @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
+/* Customize default theme styling by overriding CSS variables:
+https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
  */
 
-/**
- * Fonts
- * -------------------------------------------------------------------------- 
- */
+/* Layouts */
+
+/* 
+ :root {
+ --vp-layout-max-width: 1440px;
+} */
+
+.VPHero .clip {
+ white-space: pre;
+ max-width: 500px;
+}
+
+/* Fonts */
+
 :root {
  /* Typography */
- --vp-font-family-base: "Space Grotesk", "Inter var experimental", "Inter var",
+ --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;
 
@@ -21,28 +30,24 @@
  monospace;
 }
 
-/**
- * Colors
- * -------------------------------------------------------------------------- */
+/* Colors */
 
 :root {
- --julia-blue: rgb(56.475, 87.3, 190.575);
- --julia-purple: rgb(131.4, 77.625, 157.05);
- --julia-red: rgb(179.10, 52.875, 45.0);
- --julia-green: rgb(49.5, 134.1, 33.525);
+ --julia-blue: #4063D8;
+ --julia-purple: #9558B2;
+ --julia-red: #CB3C33;
+ --julia-green: #389826;
 
- --vp-c-brand: #646cff;
- --vp-c-brand-light: #747bff;
+ --vp-c-brand: #389826;
+ --vp-c-brand-light: #3dd027;
  --vp-c-brand-lighter: #9499ff;
  --vp-c-brand-lightest: #bcc0ff;
  --vp-c-brand-dark: #535bf2;
  --vp-c-brand-darker: #454ce1;
- --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+ --vp-c-brand-dimm: #212425;
 }
 
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
+/* Component: Button */
 
 :root {
  --vp-button-brand-border: var(--vp-c-brand-light);
@@ -56,23 +61,18 @@
  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
 }
 
-/**
- * Component: Home
- * -------------------------------------------------------------------------- */
+/* Component: Home */
 
 :root {
  --vp-home-hero-name-color: transparent;
- --vp-home-hero-name-background: -webkit-linear-gradient(
- 120deg,
- #bd34fe 30%,
- #41d1ff
- );
-
- --vp-home-hero-image-background-image: linear-gradient(
- -45deg,
- #bd34fe 50%,
- #47caff 50%
- );
+ --vp-home-hero-name-background: -webkit-linear-gradient(120deg,
+ #9558B2 30%,
+ #CB3C33);
+
+ --vp-home-hero-image-background-image: linear-gradient(-45deg,
+ #9558B2 30%,
+ #389826 30%,
+ #CB3C33);
  --vp-home-hero-image-filter: blur(40px);
 }
 
@@ -88,35 +88,45 @@
  }
 }
 
-/**
- * Component: Custom Block
- * -------------------------------------------------------------------------- */
-
-:root {
- --vp-custom-block-tip-border: var(--vp-c-brand);
- --vp-custom-block-tip-text: var(--vp-c-brand-darker);
- --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
-}
+/* Component: Custom Block */
 
-.dark {
+:root.dark {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+
+ /* // Tweak the color palette for blacks and dark grays */
+ --vp-c-black: hsl(220 20% 9%);
+ --vp-c-black-pure: hsl(220, 24%, 4%);
+ --vp-c-black-soft: hsl(220 16% 13%);
+ --vp-c-black-mute: hsl(220 14% 17%);
+ --vp-c-gray: hsl(220 8% 56%);
+ --vp-c-gray-dark-1: hsl(220 10% 39%);
+ --vp-c-gray-dark-2: hsl(220 12% 28%);
+ --vp-c-gray-dark-3: hsl(220 12% 23%);
+ --vp-c-gray-dark-4: hsl(220 14% 17%);
+ --vp-c-gray-dark-5: hsl(220 16% 13%);
+
+ /* // Backgrounds */
+ /* --vp-c-bg: hsl(240, 2%, 11%); */
+ --vp-custom-block-info-bg: hsl(220 14% 17%);
+ /* --vp-c-gutter: hsl(220 20% 9%);
+
+ --vp-c-bg-alt: hsl(220 20% 9%);
+ --vp-c-bg-soft: hsl(220 14% 17%);
+ --vp-c-bg-mute: hsl(220 12% 23%);
+ */
 }
 
-/**
- * Component: Algolia
- * -------------------------------------------------------------------------- */
+/* Component: Algolia */
 
 .DocSearch {
  --docsearch-primary-color: var(--vp-c-brand) !important;
 }
 
+/* Component: MathJax */
 
-/**
- * Component: MathJax
- * -------------------------------------------------------------------------- */
-mjx-container > svg {
+mjx-container>svg {
  display: block;
  margin: auto;
 }
@@ -130,7 +140,27 @@ mjx-container {
  margin: auto 2px -2px;
 }
 
-mjx-container > svg {
+mjx-container>svg {
  margin: auto;
  display: inline-block;
+}
+
+/**
+ * Colors links
+ * -------------------------------------------------------------------------- */
+
+:root {
+ --vp-c-brand-1: #CB3C33;
+ --vp-c-brand-2: #CB3C33;
+ --vp-c-brand-3: #CB3C33;
+ --vp-c-sponsor: #ca2971;
+ --vitest-c-sponsor-hover: #c13071;
+}
+
+.dark {
+ --vp-c-brand-1: #91dd33;
+ --vp-c-brand-2: #91dd33;
+ --vp-c-brand-3: #91dd33;
+ --vp-c-sponsor: #91dd33;
+ --vitest-c-sponsor-hover: #e51370;
 }

components/AsideTrustees.vue

@@ -0,0 +1,79 @@
+
+<template>
+ <br>
+ <h2> Trusted by </h2>
+ <a class="enjoyer" href="https://sciml.ai/" target="_blank">
+ <img width="32" height="32" src="https://avatars.githubusercontent.com/u/21238080?v=4" />
+ <span>
+ <p class="extra-info">Scientific Computing</p>
+ <p class="heading">SciML.ai</p>
+ <p class="extra-info">Machine Learning</p>
+ </span>
+ </a>
+
+ <a class="enjoyer" href="https://juliagni.github.io/GeometricMachineLearning.jl/latest/" target="_blank">
+ <img width="32" height="32" src="https://juliagni.github.io/GeometricMachineLearning.jl/latest/assets/logo-dark.png" />
+ <span>
+ <p class="extra-info">Structure Preserving</p>
+ <p class="heading">GeometricMachineLearning.jl</p>
+ <p class="extra-info">Machine Learning</p>
+ </span>
+ </a>
+</template>
+
+<style>
+.enjoyer {
+ margin-top: 0.5rem;
+ margin-bottom: 0.0rem;
+ border-radius: 14px;
+ padding-top: 0.2rem;
+ padding-bottom: 0.2rem;
+ position: relative;
+ font-size: 0.9rem;
+ font-weight: 700;
+ line-height: 1.1rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ gap: 1rem;
+ background-color: var(--vp-c-bg-alt);
+ border: 2px solid var(--vp-c-bg-alt);
+ transition: border-color 0.5s;
+}
+
+.enjoyer:hover {
+ border: 2px solid var(--vp-c-brand-light);
+}
+
+.enjoyer img {
+ transition: transform 0.5s;
+ transform: scale(1.25);
+}
+
+.enjoyer:hover img {
+ transform: scale(1.75);
+}
+
+.enjoyer .heading {
+ background-image: linear-gradient(120deg,
+ #b047ff 16%,
+ var(--vp-c-brand-lighter),
+ var(--vp-c-brand-lighter));
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.enjoyer .extra-info {
+ color: var(--vp-c-text-1);
+ opacity: 0;
+ font-size: 0.7rem;
+ padding-left: 0.1rem;
+ transition: opacity 0.5s;
+}
+
+.enjoyer:hover .extra-info {
+ opacity: 0.9;
+}
+</style>