fix: smalls style adjustment (#63)

Author: ErwanDecoster

.vitepress/config.ts

@@ -100,10 +100,26 @@ export default withMermaid(
     themeConfig: {
       // https://vitepress.dev/reference/default-theme-config
       nav: [
-        { text: 'Get Started', link: '/get-started/welcome' },
-        { text: 'Guides', link: '/guides/build-iapp/build-&-test' },
-        { text: 'References', link: '/references/dataProtector' },
-        { text: 'Protocol', link: '/protocol/proof-of-contribution' },
+        {
+          text: 'Get Started',
+          link: '/get-started/welcome',
+          activeMatch: '^/get-started/',
+        },
+        {
+          text: 'Guides',
+          link: '/guides/build-iapp/build-&-test',
+          activeMatch: '^/guides/',
+        },
+        {
+          text: 'References',
+          link: '/references/dataProtector',
+          activeMatch: '^/references/',
+        },
+        {
+          text: 'Protocol',
+          link: '/protocol/proof-of-contribution',
+          activeMatch: '^/protocol/',
+        },
         {
           component: 'ChainSelector',
           props: {
@@ -114,6 +130,9 @@ export default withMermaid(
       outline: {
         level: [2, 4],
       },
+      footer: {
+        copyright: '© All Rights Reserved iExec 2018-present',
+      },
 
       sidebar: getSidebar(),
 

.vitepress/sidebar.ts

@@ -551,6 +551,7 @@ export function getSidebar() {
           },
           {
             text: 'Workers & Workerpools',
+            collapsed: false,
             items: [
               {
                 text: 'Worker Quick Start',
@@ -564,6 +565,7 @@ export function getSidebar() {
           },
           {
             text: '🔒 TEE Technology',
+            collapsed: false,
             items: [
               {
                 text: 'Introduction to TEE Technologies',

.vitepress/theme/style.css

@@ -105,18 +105,14 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  /* --vp-c-text-1: #3c3c43; */
   --vp-c-text-1: #1d1d24;
-  /* --vp-c-text-2: #67676c; */
   --vp-c-text-2: #5d5d69;
   --vp-c-text-3: #929295;
 }
 
 .dark {
-  /* --vp-c-text-1: #dfdfd6; */
   --vp-c-text-1: #fff;
-  /* --vp-c-text-2: #98989f; */
-  --vp-c-text-2: #a3a3a8;
+  --vp-c-text-2: #d3d3d8;
   --vp-c-text-3: #6a6a71;
 }
 
@@ -147,6 +143,11 @@
   --vp-c-default-3: var(--vp-c-gray-3);
   --vp-c-default-soft: var(--vp-c-gray-soft);
 
+  --vp-c-info-1: #0067a8;
+  --vp-c-info-2: var(--vp-c-gray-2);
+  --vp-c-info-3: var(--vp-c-gray-3);
+  --vp-c-info-soft: #e9f7ff;
+
   --vp-c-brand-1: #183ee9;
   --vp-c-brand-2: var(--vp-c-indigo-2);
   --vp-c-brand-3: var(--vp-c-indigo-3);
@@ -172,10 +173,10 @@
   --vp-c-important-3: var(--vp-c-purple-3);
   --vp-c-important-soft: var(--vp-c-purple-soft);
 
-  --vp-c-warning-1: #da7b0b;
+  --vp-c-warning-1: #a85b00;
   --vp-c-warning-2: var(--vp-c-yellow-2);
   --vp-c-warning-3: var(--vp-c-yellow-3);
-  --vp-c-warning-soft: #fdefde;
+  --vp-c-warning-soft: #fff8ef;
 
   --vp-c-danger-1: #bf3131;
   --vp-c-danger-2: var(--vp-c-red-2);
@@ -189,6 +190,9 @@
 }
 
 .dark {
+  --vp-c-info-1: #9edaff;
+  --vp-c-info-soft: #2b3d4c;
+
   --vp-c-brand-1: #a2b3ff;
   --vp-c-brand-soft: #1d2032;
 
@@ -202,32 +206,98 @@
   --vp-c-warning-soft: #312720;
 }
 
+/**
+ * Colors: Background
+ *
+ * - `bg`: The bg color used for main screen.
+ *
+ * - `bg-alt`: The alternative bg color used in places such as "sidebar",
+ *   or "code block".
+ *
+ * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
+ *   such as "dialog".
+ *
+ * - `bg-soft`: The bg color to slightly distinguish some components from
+ *   the page. Used for things like "carbon ads" or "table".
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-bg: #ffffff;
+  --vp-c-bg-alt: #f7f9fd;
+  --vp-c-bg-elv: #ffffff;
+  --vp-c-bg-soft: #f7f9fd;
+}
+
+.dark {
+  --vp-c-bg: #14141b;
+  --vp-c-bg-alt: #17171e;
+  --vp-c-bg-elv: #202127;
+  --vp-c-bg-soft: #17171e;
+}
+
 /**
  * Component: Button
  * -------------------------------------------------------------------------- */
 
 :root {
   --vp-button-brand-border: transparent;
-  --vp-button-brand-text: var(--vp-c-white);
-  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-text: #1b1b1f;
+  --vp-button-brand-bg: #fcd15a;
   --vp-button-brand-hover-border: transparent;
-  --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-hover-text: #1b1b1f;
+  --vp-button-brand-hover-bg: #f9dd90;
   --vp-button-brand-active-border: transparent;
-  --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+  --vp-button-brand-active-text: #1b1b1f;
+  --vp-button-brand-active-bg: #f9dd90;
+
+  --vp-button-alt-border: var(--vp-c-border);
+  --vp-button-alt-text: var(--vp-c-text-1);
+  --vp-button-alt-bg: transparent;
+  --vp-button-alt-hover-border: var(--vp-c-border);
+  --vp-button-alt-hover-text: var(--vp-c-text-1);
+  --vp-button-alt-hover-bg: #ffffff10;
+  --vp-button-alt-active-border: var(--vp-c-border);
+  --vp-button-alt-active-text: var(--vp-c-text-1);
+  --vp-button-alt-active-bg: var(--vp-c-default-1);
 }
 
 .dark {
   --vp-button-brand-border: transparent;
   --vp-button-brand-text: #1b1b1f;
-  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-bg: #fcd15a;
   --vp-button-brand-hover-border: transparent;
-  --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-hover-text: #1b1b1f;
+  --vp-button-brand-hover-bg: #f9dd90;
   --vp-button-brand-active-border: transparent;
-  --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+  --vp-button-brand-active-text: #1b1b1f;
+  --vp-button-brand-active-bg: #f9dd90;
+
+  --vp-button-alt-hover-bg: #00000020;
+}
+
+/**
+ * Colors: Borders
+ *
+ * - `divider`: This is used for separators. This is used to divide sections
+ *   within the same components, such as having separator on "h2" heading.
+ *
+ * - `border`: This is designed for borders on interactive components.
+ *   For example this should be used for a button outline.
+ *
+ * - `gutter`: This is used to divide components in the page. For example
+ *   the header and the lest of the page.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-border: #c2c2c4;
+  --vp-c-divider: #d3d3d8;
+  --vp-c-gutter: #e2e2e3;
+}
+
+.dark {
+  --vp-c-border: #3c3f44;
+  --vp-c-divider: #5d5d69;
+  --vp-c-gutter: #000000;
 }
 
 /**
@@ -239,6 +309,11 @@
   --vp-custom-block-tip-text: var(--vp-c-text-1);
   --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
   --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+
+  --vp-custom-block-info-border: transparent;
+  --vp-custom-block-info-text: var(--vp-c-text-1);
+  --vp-custom-block-info-bg: var(--vp-c-info-soft);
+  --vp-custom-block-info-code-bg: var(--vp-c-info-soft);
 }
 
 /**
@@ -273,6 +348,22 @@ input {
   @apply w-full rounded-md border border-[var(--vp-c-divider)] bg-[var(--vp-c-bg-soft)] px-4 py-3 text-base text-[var(--vp-c-text-1)] transition focus:border-[var(--vp-c-brand-2)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-70;
 }
 
+/**
+ * Component: AskIaButton
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --c-askIa-bg: #f4f7fc;
+  --c-askIa-bg-hover: #e3e7f7;
+  --c-askIa-bg-active: #d1d5db;
+}
+
+.dark {
+  --c-askIa-bg: #1d1d24;
+  --c-askIa-bg-hover: #2b304b;
+  --c-askIa-bg-active: #3b426e;
+}
+
 /**
  * Component: Banner
  * -------------------------------------------------------------------------- */
@@ -307,6 +398,14 @@ input {
   @apply bg-[var(--vp-code-bg)];
 }
 
+.vp-doc .custom-block.info {
+  @apply border-l-4 border-l-[var(--vp-c-info-1)];
+}
+
+.vp-doc .custom-block.info strong {
+  @apply text-[var(--vp-c-info-1)];
+}
+
 .vp-doc .custom-block.warning {
   @apply border-l-4 border-l-[var(--vp-c-warning-1)];
 }
@@ -345,20 +444,22 @@ input {
 
 :root {
   --vp-home-hero-name-color: var(--vp-c-text-1);
-  --vp-button-brand-bg: #fcd15a;
-  --vp-button-brand-hover-bg: #fcd15a;
 }
 
-.VPHero .VPButton {
-  @apply font-medium transition hover:-translate-y-0.5 hover:shadow-md;
+.VPHero.has-image.VPHomeHero {
+  @apply lg:pb-0;
 }
 
-.VPHero .VPButton.brand {
-  @apply text-[var(--vp-c-black)]!;
+.VPHero.has-image.VPHomeHero p {
+  @apply font-normal text-[var(--vp-home-hero-name-color)];
 }
 
-.VPImage.image-src {
-  @apply max-h-none max-w-none lg:size-[448px]!;
+.VPLink.link.VPFeature {
+  @apply relative rounded-[32px] border bg-gradient-to-b from-[var(--vp-c-white)] to-[var(--vp-c-white)] transition-all duration-300 *:relative *:z-20 after:absolute after:inset-px after:z-10 after:rounded-[31px] after:bg-[var(--vp-c-bg-soft)] hover:shadow-lg;
+}
+
+.dark .VPLink.link.VPFeature {
+  @apply from-[var(--c-border)] to-transparent;
 }
 
 article.box .icon {
@@ -368,28 +469,30 @@ article.box .icon {
     12.835px 12.835px 21.392px 0 var(--vp-c-bg);
 }
 
-.image .image-container {
-  @apply relative flex items-center justify-center;
+article.box .icon ._stroke {
+  @apply stroke-[var(--vp-c-brand-1)];
 }
 
-.image .image-container::before {
-  @apply pointer-events-none absolute top-[60%] left-1/2 -z-10 h-[929px] w-[995px] -translate-x-1/2 -translate-y-1/2 bg-contain bg-center bg-no-repeat;
-  content: '';
-  background-image: url('/bg-gradient.svg');
+article.box .icon ._fill {
+  @apply fill-[var(--vp-c-brand-1)];
 }
 
-.image .image-container .VPImage.image-src {
-  @apply relative z-10;
+/* Image */
+
+.VPImage.image-src {
+  @apply lg:size-[448px]! lg:max-h-none lg:max-w-none;
 }
 
-.VPHero.has-image.VPHomeHero {
-  @apply pb-0;
+.image .image-container {
+  @apply relative flex items-center justify-center;
 }
 
-.VPLink.link.VPFeature {
-  @apply relative rounded-[32px] border bg-gradient-to-b from-[var(--vp-c-white)] to-[var(--vp-c-white)] transition-all duration-300 *:relative *:z-20 after:absolute after:inset-px after:z-10 after:rounded-[31px] after:bg-[var(--vp-c-bg-soft)] hover:shadow-lg;
+.image .image-container::before {
+  @apply pointer-events-none absolute top-[60%] left-1/2 -z-10 size-[724px] -translate-x-1/2 -translate-y-1/2 bg-contain bg-center bg-no-repeat lg:h-[929px] lg:w-[995px];
+  content: '';
+  background-image: url('/bg-gradient.svg');
 }
 
-.dark .VPLink.link.VPFeature {
-  @apply from-[var(--c-border)] to-transparent;
+.image .image-container .VPImage.image-src {
+  @apply z-10 lg:relative;
 }