UI Improvements for Site

docusaurus.config.ts

@@ -359,8 +359,9 @@ const config: Config = {
       ],
     },
     prism: {
-      theme: prismThemes.nightOwl,
-      darkTheme: prismThemes.okaidia,
+      theme: prismThemes.github,
+      darkTheme: prismThemes.oneDark,
+      additionalLanguages: ["bash", "sql", "python", "yaml", "json"],
     },
     // Change website analytics from Google Analytics to Matomo
     matomo: {

src/components/bootcamp/Card/styles.module.scss

@@ -1,37 +1,46 @@
 .card {
-  border: 1px solid var(--box-border-color);
-  border-radius: var(--normal-box-radius);
-  padding: 0 21px;
-  padding-top: 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-surface);
+  padding: 24px;
   cursor: pointer;
+  box-shadow: var(--shadow-xs);
+  transition: border-color var(--motion-fast),
+    box-shadow var(--motion-fast),
+    transform var(--motion-fast);
+
   &:hover {
-    background-color: var(--active-color);
-    color: var(--hover-full-bg-text-color);
-    .link,
-    a {
-      color: var(--hover-full-bg-text-color);
-    }
-    .content {
-      color: var(--sub-text-color-3);
-    }
-    svg {
-      fill: var(--hover-full-bg-text-color) !important;
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+    .link {
+      color: var(--color-accent);
+      svg {
+        fill: var(--color-accent);
+        transform: translateX(2px);
+      }
     }
   }
+
   .content {
-    line-height: 26px;
-    padding-bottom: 22px;
+    line-height: 1.7;
+    color: var(--color-text-muted);
+    padding-bottom: 16px;
+    font-size: 0.9375rem;
   }
   .link {
-    padding-bottom: 25px;
-    font-size: 14px;
-    color: var(--active-color);
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--color-accent);
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     svg {
-      fill: var(--active-color);
+      fill: var(--color-accent);
       vertical-align: middle;
+      transition: transform var(--motion-fast);
+      width: 12px;
+      height: 12px;
     }
   }
-  @media screen and (max-width: 1440px) {
-    width: auto !important;
-  }
 }

src/components/bootcamp/MainContent/styles.module.scss

@@ -1,14 +1,8 @@
 .mainContent {
   .cardLine {
-    display: flex;
-    justify-content: space-between;
-  }
-  @media screen and (max-width: 1440px) {
-    .cardLine {
-      display: grid;
-      gap: 32px;
-    }
-
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 20px;
   }
   @media screen and (max-width: 768px) {
     .cardLine {

src/components/common/Breadcrumbs/styles.module.scss

@@ -1,58 +1,83 @@
 .breadcrumbs {
   display: flex;
-  align-items: self-start;
-  height: 21px;
-  font-size: 13px;
-  color: var(--sub-text-color-2);
-  &.mdxPage {
-    .backPath {
-      color: #fff !important;
-    }
-  }
+  align-items: center;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  gap: 4px;
 
   .backLogoA {
-    position: relative;
-    top: 1px;
+    display: inline-flex;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    color: var(--color-text-muted);
+    transition: color var(--motion-fast);
+    &:hover {
+      color: var(--color-text);
+    }
     .backLogoSvg {
       display: inline-block;
-      fill: var(--back-home-logo-color);
+      fill: var(--color-text-muted);
     }
     .backLogoLightSvg {
       display: none;
+      fill: currentColor;
     }
   }
+
   .line {
-    fill: #4c4c4c;
+    fill: var(--color-border-strong);
     vertical-align: middle;
+    width: 12px;
+    height: 12px;
+    opacity: 0.6;
   }
 
   .path {
-    span.leafPath {
-      color: var(--active-color);
-      vertical-align: middle;
-    }
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+
     .backPath {
       text-decoration: none;
+      color: var(--color-text-muted);
+      padding: 4px 6px;
+      border-radius: var(--radius-sm);
+      transition: background-color var(--motion-fast),
+        color var(--motion-fast);
+      &:hover {
+        background-color: var(--color-bg-muted);
+        color: var(--color-text);
+      }
+    }
+    span.leafPath {
+      color: var(--color-accent);
+      vertical-align: middle;
+      padding: 4px 6px;
+      font-weight: 600;
     }
   }
 }
 
 html[data-theme="light"] {
-  .breadcrumbs:not(.mdxPage) {
-    color: #000;
-  }
-  .breadcrumbs:not(.mdxPage) svg {
-    fill: #000;
-  }
-  .breadcrumbs:not(.mdxPage) .line {
-    opacity: 1;
-  }
-  .breadcrumbs:not(.mdxPage) {
+  .breadcrumbs {
+    color: var(--color-text-muted);
+    .backLogoSvg {
+      display: none !important;
+    }
     .backLogoLightSvg {
       display: inline-block !important;
     }
+  }
+}
+
+html[data-theme="dark"] {
+  .breadcrumbs {
     .backLogoSvg {
-      display: none !important;
+      display: inline-block;
+    }
+    .backLogoLightSvg {
+      display: none;
     }
   }
 }

src/components/common/ColorCard/styles.module.scss

@@ -1,37 +1,40 @@
+.main {
+  width: 100%;
+  max-width: var(--global-main-width);
+  margin: 0 auto;
+  position: relative;
+
+  .content {
+    max-width: 880px;
+    .bigText {
+      font-family: var(--font-family-display);
+      font-weight: 800;
+      font-size: clamp(2rem, 4vw, 2.75rem);
+      line-height: 1.1;
+      letter-spacing: -0.02em;
+      color: var(--color-text);
+      margin-top: 16px;
+    }
+    .smallText {
+      font-size: 1.0625rem;
+      line-height: 1.65;
+      color: var(--color-text-muted);
+      margin-top: 16px;
+    }
+  }
+}
+
 html[data-theme="light"] {
   .main {
     &.mdxCard {
       .content {
         .bigText {
-          color: #fff;
+          color: var(--color-text);
         }
         .smallText {
-          color: rgba(255, 255, 255, 0.6);
+          color: var(--color-text-muted);
         }
       }
     }
   }
 }
-.main {
-  width: var(--global-main-width);
-  margin: 0 auto;
-  position: relative;
-
-  .content {
-    max-width: 949px;
-    .bigText {
-      max-width: 847px;
-      font-weight: 700;
-      margin-top: 12px;
-      font-size: 32px;
-      line-height: 40px;
-      color: var(--title-text-color);
-    }
-    .smallText {
-      font-size: 16px;
-      line-height: 24px;
-      color: var(--sub-text-color-2);
-      margin-top: 20px;
-    }
-  }
-}