Brand style update with fonts (#2224)

* Update styles to reflect our brand refresh * Update favicon * Only highlight collapsible sidebar sections when they are selectable * Darken links in light theme slightly * Updated fonts to match marketing site * Tweak logo size
gruntwork-io · Nov 26, 2024 · eb29669 · eb29669
1 parent b9bde78
commit eb29669
Show file tree

Hide file tree

Showing 17 changed files with 427 additions and 154 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -4,7 +4,7 @@ const path = require("path")
 
 const { themes } = require("prism-react-renderer")
 const lightCodeTheme = themes.github
-const darkCodeTheme = themes.dracula
+const darkCodeTheme = themes.nightOwl
 
 const cfg = require("config")
 
@@ -79,6 +79,118 @@ const config = {
       ? algoliaConfig.libraryIndexName
       : undefined,
   },
+  headTags: [
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "https://gruntwork.io/_next/static/media/66f30814ff6d7cdf-s.p.woff2", // Geist Mono
+        as: "font",
+        type: "font/woff2",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "https://gruntwork.io/_next/static/media/97ff73edc14fdb02-s.p.woff2", // General Sans Italic
+        as: "font",
+        type: "font/woff2",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "https://gruntwork.io/_next/static/media/a34f9d1faa5f3315-s.p.woff2", // General Sans Bold
+        as: "font",
+        type: "font/woff2",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "https://gruntwork.io/_next/static/media/d9532b38a05b0008-s.p.woff2", // General Sans Normal
+        as: "font",
+        type: "font/woff2",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "https://gruntwork.io/_next/static/media/55c55f0601d81cf3-s.woff2", // Inter
+        as: "font",
+        type: "font/woff2",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "https://gruntwork.io/_next/static/media/26a46d62cd723877-s.woff2", // Inter
+        as: "font",
+        type: "font/woff2",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "https://gruntwork.io/_next/static/media/97e0cb1ae144a2a9-s.woff2", // Inter
+        as: "font",
+        type: "font/woff2",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "https://gruntwork.io/_next/static/media/581909926a08bbc8-s.woff2", // Inter
+        as: "font",
+        type: "font/woff2",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "https://gruntwork.io/_next/static/media/df0a9ae256c0569c-s.woff2", // Inter
+        as: "font",
+        type: "font/woff2",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "https://gruntwork.io/_next/static/media/6d93bde91c0c2823-s.woff2", // Inter
+        as: "font",
+        type: "font/woff2",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "https://gruntwork.io/_next/static/media/a34f9d1faa5f3315-s.p.woff2", // Inter
+        as: "font",
+        type: "font/woff2",
+        crossorigin: "anonymous",
+      },
+    },
+  ],
   presets: [
     [
       "@docusaurus/preset-classic",

diff --git a/src/components/Card.module.css b/src/components/Card.module.css
@@ -113,7 +113,11 @@ html[data-theme="dark"] .icon {
   display: inline-block;
   margin-right: 1.5rem;
   margin-top: -1rem !important;
-  color: #5849a6;
+  color: #49b8d0;
+}
+
+html[data-theme="dark"] .card .num {
+  color: #87e0e1;
 }
 
 /* TAGS */
@@ -127,19 +131,20 @@ ul.tags li {
   list-style: none;
   display: inline-block;
   border-radius: 4px;
-  background-color: #e7f0f5;
+  background-color: #c5dde4;
   padding: 0 0.5rem;
   margin-right: 0.5em;
   text-transform: uppercase;
   font-size: 0.75rem;
   letter-spacing: 0.05em;
   font-weight: 600;
-  color: #333;
+  color: #15192d;
 }
 
 html[data-theme="dark"] ul.tags li {
-  background-color: #666;
-  color: black;
+  background-color: #87e0e1;
+  opacity: 0.4;
+  color: #0d0622;
 }
 
 /* LINKS & HOVER */

diff --git a/src/components/VersionBadge.module.css b/src/components/VersionBadge.module.css
@@ -8,7 +8,8 @@
 }
 
 html[data-theme="dark"] .versionBadge {
-  background-color: #666;
+  background-color: #fff;
+  opacity: 0.2;
   color: black;
 }