revise: revises the theme of the website

Author: claymcleod

.vitepress/theme/style.css

@@ -3,6 +3,27 @@
  * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
  */
 
+/**
+ * Brand Palette
+ * -------------------------------------------------------------------------- */
+
+:root {
+  /* Primary Brand Color */
+  --primary-brand: #4CD8FA;
+
+  /* Cool Gray Scale - Darkest to Lightest */
+  --cool-gray-900: #0A0C13;
+  --cool-gray-800: #0D0F16;
+  --cool-gray-700: #11131C;
+  --cool-gray-600: #131721;
+  --cool-gray-500: #161B27;
+  --cool-gray-400: #40444E;
+  --cool-gray-300: #6D6F77;
+  --cool-gray-200: #9B9DA1;
+  --cool-gray-100: #C7C8CB;
+  --cool-gray-50: #E8E8E9;
+}
+
 /**
  * Colors
  *
@@ -44,19 +65,20 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-c-default-1: var(--vp-c-gray-1);
-  --vp-c-default-2: var(--vp-c-gray-2);
-  --vp-c-default-3: var(--vp-c-gray-3);
-  --vp-c-default-soft: var(--vp-c-gray-soft);
+  --vp-c-default-1: var(--cool-gray-100);
+  --vp-c-default-2: var(--cool-gray-200);
+  --vp-c-default-3: var(--cool-gray-300);
+  --vp-c-default-soft: var(--cool-gray-800);
 
-  --vp-c-black: #161619;
+  --vp-c-black: var(--cool-gray-900);
 
-  --vp-c-brand-1: #00b4e1;
-  --vp-c-brand-2: #0a96c3;
-  --vp-c-brand-3: #006587;
-  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+  --vp-c-brand-1: var(--primary-brand);
+  --vp-c-brand-2: #3DB5D9;
+  --vp-c-brand-3: #2A7996;
+  --vp-c-brand-soft: rgba(76, 216, 250, 0.14);
 
-  --vp-c-text-1: #D6D6D6;
+  --vp-c-text-1: var(--cool-gray-50);
+  --vp-c-text-2: var(--cool-gray-300);
 
   --vp-c-tip-1: var(--vp-c-brand-1);
   --vp-c-tip-2: var(--vp-c-brand-2);
@@ -134,14 +156,24 @@
 
 :root {
   --vp-button-brand-border: transparent;
-  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-text: var(--cool-gray-900);
   --vp-button-brand-bg: var(--vp-c-brand-2);
   --vp-button-brand-hover-border: transparent;
-  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-text: var(--cool-gray-900);
   --vp-button-brand-hover-bg: var(--vp-c-brand-1);
   --vp-button-brand-active-border: transparent;
-  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-text: var(--cool-gray-900);
   --vp-button-brand-active-bg: var(--vp-c-brand-3);
+
+  --vp-button-alt-border: transparent;
+  --vp-button-alt-text: var(--cool-gray-50);
+  --vp-button-alt-bg: var(--cool-gray-400);
+  --vp-button-alt-hover-border: transparent;
+  --vp-button-alt-hover-text: var(--cool-gray-50);
+  --vp-button-alt-hover-bg: var(--cool-gray-300);
+  --vp-button-alt-active-border: transparent;
+  --vp-button-alt-active-text: var(--cool-gray-50);
+  --vp-button-alt-active-bg: var(--cool-gray-500);
 }
 
 /**
@@ -151,16 +183,43 @@
 :root {
   --vp-home-hero-name-color: transparent;
 
-  --vp-home-hero-name-background: #ffffff;
+  --vp-home-hero-name-background: var(--cool-gray-50);
 
-  --vp-home-hero-image-background-image: linear-gradient(
-    -45deg,
-    #00b4e1 50%,
-    #47caff 50%
-  );
+  --vp-home-hero-image-background-image: linear-gradient(-45deg,
+      var(--primary-brand) 50%,
+      #6FE3FF 50%);
   --vp-home-hero-image-filter: blur(44px);
 }
 
+.VPHero .name {
+  font-family: var(--vp-font-family-mono);
+  font-size: 32px;
+}
+
+.VPHero .tagline {
+  font-size: 16px;
+}
+
+@media (min-width: 640px) {
+  .VPHero .name {
+    font-size: 40px;
+  }
+
+  .VPHero .tagline {
+    font-size: 20px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPHero .name {
+    font-size: 48px;
+  }
+
+  .VPHero .tagline {
+    font-size: 24px;
+  }
+}
+
 @media (min-width: 640px) {
   :root {
     --vp-home-hero-image-filter: blur(56px);
@@ -179,9 +238,9 @@
 
 :root {
   --vp-custom-block-tip-border: transparent;
-  --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-tip-text: var(--cool-gray-50);
+  --vp-custom-block-tip-bg: #002c22;
+  --vp-custom-block-tip-code-bg: #002c22;
 }
 
 /**
@@ -191,3 +250,14 @@
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
+
+/**
+ * Component: Background Colors
+ * -------------------------------------------------------------------------- */
+
+.dark {
+  --vp-c-bg: var(--cool-gray-700);
+  --vp-c-bg-alt: var(--cool-gray-800);
+  --vp-c-bg-elv: var(--cool-gray-500);
+  --vp-c-bg-soft: var(--cool-gray-500);
+}

index.md

@@ -3,7 +3,7 @@
 layout: home
 
 hero:
-  name: "Workflow Description Language Docs"
+  name: "Workflow Description Language"
   tagline: Guides and reference materials for the Workflow Description Language (WDL).
   image: "hero.svg"
   actions: