Modify css style

Author: VaclavMacha

docs_vitepress/src/.vitepress/theme/style.css

@@ -2,7 +2,7 @@
 https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
  */
 
-  /* Layouts */
+/* Layouts */
 
 /* 
  :root {
@@ -17,11 +17,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");
+  font-family: JuliaMono-Regular;
+  src: url("https://cdn.jsdelivr.net/gh/cormullion/juliamono/webfonts/JuliaMono-Regular.woff2");
 }
 
- :root {
+:root {
   /* Typography */
   --vp-font-family-base: "Barlow", "Inter var experimental", "Inter var",
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
@@ -50,7 +50,7 @@ This is pretty bad for Julia folks reading even though copy+paste retains the sa
 }
 
 /* If you want to apply this globally to all monospace text: */
-pre, code {
+pre code {
   font-family: "JuliaMono-Light", monospace;
   font-feature-settings: "calt" off;
 }
@@ -63,16 +63,24 @@ pre, code {
   --julia-red: #CB3C33;
   --julia-green: #389826;
 
-  --vp-c-brand: #389826;
+  /* --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: #212425; */
+
+  --vp-c-brand: #074f73;
+  --vp-c-brand-light: #086b9d;
+  --vp-c-brand-lighter: #2795cc;
+  --vp-c-brand-lightest: #7dc5ea;
+  --vp-c-brand-dark: #535bf2;
+  --vp-c-brand-darker: #454ce1;
   --vp-c-brand-dimm: #212425;
 }
 
- /* Component: Button */
+/* Component: Button */
 
 :root {
   --vp-button-brand-border: var(--vp-c-brand-light);
@@ -90,18 +98,14 @@ pre, code {
 
 :root {
   --vp-home-hero-name-color: transparent;
-  --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-name-background: -webkit-linear-gradient(120deg,
+      #074f73 30%,
+      #389826);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg,
+      #ffffff,
+      #074f73 20%,
+      #ffffff);
   --vp-home-hero-image-filter: blur(40px);
 }
 
@@ -124,38 +128,38 @@ pre, code {
   --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%);
+  /* // 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 */
 
-mjx-container > svg {
+mjx-container>svg {
   display: block;
   margin: auto;
 }
@@ -169,7 +173,7 @@ mjx-container {
   margin: auto 2px -2px;
 }
 
-mjx-container > svg {
+mjx-container>svg {
   margin: auto;
   display: inline-block;
 }
@@ -178,27 +182,27 @@ mjx-container > svg {
  * Colors links
  * -------------------------------------------------------------------------- */
 
- :root {
-  --vp-c-brand-1: #CB3C33;
-  --vp-c-brand-2: #CB3C33;
-  --vp-c-brand-3: #CB3C33;
-  --vp-c-sponsor: #ca2971;
+:root {
+  --vp-c-brand-1: #086b9d;
+  --vp-c-brand-2: #086b9d;
+  --vp-c-brand-3: #086b9d;
+  --vp-c-sponsor: #086b9d;
   --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;
+  --vp-c-brand-1: #2795cc;
+  --vp-c-brand-2: #2795cc;
+  --vp-c-brand-3: #2795cc;
+  --vp-c-sponsor: #2795cc;
+  --vitest-c-sponsor-hover: #CB3C33;
 }
 
 /**
  * Change images from light to dark theme
  * -------------------------------------------------------------------------- */
 
- :root:not(.dark) .dark-only {
+:root:not(.dark) .dark-only {
   display: none;
 }
 
@@ -211,15 +215,18 @@ mjx-container > svg {
 .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 {
@@ -237,7 +244,7 @@ mjx-container > svg {
 
 @media (max-width: 960px) {
   .VPDoc {
-    padding-left: 25px !important;  
+    padding-left: 25px !important;
   }
 }
 
@@ -254,13 +261,13 @@ mjx-container > svg {
 /* Component: Docstring Custom Block */
 
 .jldocstring.custom-block {
-    border: 1px solid var(--vp-c-gray-2);
-    color: var(--vp-c-text-1)
+  border: 1px solid var(--vp-c-gray-2);
+  color: var(--vp-c-text-1)
 }
 
 .jldocstring.custom-block summary {
-    font-weight: 700;
-    cursor: pointer;
-    user-select: none;
-    margin: 0 0 8px;
-}
+  font-weight: 700;
+  cursor: pointer;
+  user-select: none;
+  margin: 0 0 8px;
+}