Merge pull request #680 from craftcms/a11y/homepage-updates

Updates some colors in light and dark modes, adds label to hamburger button

docs/.vuepress/theme/components/Hamburger.vue

@@ -1,9 +1,12 @@
 <template>
-  <button @click="handleClick" class="nav-hamburger">
-    <span></span>
-    <span></span>
-    <span></span>
-  </button>
+  <div>
+    <span id="nav-hamburger-label" class="sr-only" aria-hidden="true">Menu</span>
+    <button @click="handleClick" class="nav-hamburger" aria-labelledby="nav-hamburger-label">
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+  </div>
 </template>
 
 <style lang="postcss">

docs/.vuepress/theme/components/RightBar.vue

@@ -72,7 +72,7 @@ export default {
     .sidebar-link {
       @apply mx-0 px-0 border-0 pr-4;
       color: var(--sidebar-link-color);
-      opacity: 0.6;
+      opacity: 0.7;
 
       &:hover {
         @apply text-blue opacity-100;

docs/.vuepress/theme/styles/color-mode.pcss

@@ -32,7 +32,7 @@
   --dl-color: rgba(0, 0, 0, 0.2);
   --medium-zoom-overlay-color: rgba(23, 29, 40, 1);
   --heading-color: theme("colors.gray.100");
-  --sidebar-link-color: theme("colors.gray.500");
+  --sidebar-link-color: theme("colors.gray.400");
   --hamburger-color: theme("colors.white");
   --tooltip-bg-color: theme("colors.gray.800");
   --border-color: theme("colors.slate");
@@ -46,14 +46,15 @@
     background-color: var(--border-color);
     border-color: rgba(255, 255, 255, 0.05);
 
-    .subtitle {
-      color: rgba(255, 255, 255, 0.4);
+    .subtitle,
+    .version {
+      color: rgba(255, 255, 255, 0.52);
     }
   }
 
   .icon-link {
     .text-slate {
-      color: rgba(255, 255, 255, 0.4);
+      color: rgba(255, 255, 255, 0.52);
     }
   }
 

docs/.vuepress/theme/styles/typography.pcss

@@ -47,7 +47,7 @@
   }
 
   h3 {
-    @apply text-2xl mt-10;
+    @apply text-1.5xl mt-10;
 
     &:first-child {
       @apply mt-0;

docs/README.md

@@ -35,7 +35,7 @@ Learn about the foundation of the Craft platform.
         icon="/docs/icons/icon-cloud.svg" />
 </div>
 
-#### Plugins + Tools
+### Plugins + Tools
 
 Discover solutions and extensions from the Craft team and beyond.
 

tailwind.config.js

@@ -10,6 +10,7 @@ module.exports = {
       },
       fontSize: {
         '2.5xl': '1.5625rem',
+        '1.5xl': '1.37rem',
       },
       colors: {
         slate: "#2d3748",
@@ -20,7 +21,7 @@ module.exports = {
         red: "#da5a47",
         cinder: "#131119",
         green: "#27AB83",
-        "light-slate": "#718096"
+        "light-slate": "#66778A"
       },
       width: {
         80: "20rem"