Fix homepage button (#912)

docs/tools.md

@@ -1,5 +1,5 @@
 ---
-title: Privacy Tools
+title: Recommended Privacy Tools
 icon: material/tools
 hide:
     - toc

theme/overrides/home.css

@@ -54,9 +54,13 @@
     color: var(--md-primary-bg-color);
 }
 .mdx-hero .md-button--primary {
-    color: var(--md-primary-fg-color)!important;
+    color: var(--md-primary-fg-color);
     background-color: var(--md-primary-bg-color);
-    border-color: var(--md-primary-bg-color);
+    border-color: transparent;
     margin-right: 0.5rem;
     margin-top: 0.5rem;
 }
+
+.mdx-hero .md-button--primary:is(:focus, :hover) {
+    color: white;
+}

theme/overrides/home.html

@@ -11,8 +11,8 @@
         <div class="mdx-hero__content">
           <h1>The guide to restoring your online privacy.</h1>
           <p>{{ config.site_description }}</p>
-          <a href="{{ 'tools/' | url }}" title="Recommended services, tools, and knowledge to protect your privacy" class="md-button md-button--primary">
-            Privacy Tools
+          <a href="{{ 'tools/' | url }}" title="Recommended privacy tools, services, and knowledge" class="md-button md-button--primary">
+            Recommended Tools
           </a>
           <a href="{{ 'blog/' | url }}" title="Blog posts from Privacy Guides contributors" class="md-button">
             Read our blog