docs(website): increase 'get started' button contrast (typescript-eslint#5313)

andrmaz · JoshuaKGoldberg · web-flow · commit 5bc4d43bed1c · 2022-07-27T23:35:33.000Z
* docs(website): [Closes typescript-eslint#5211] increase 'get started' button contrast color * docs(website): fix class name convention * docs(website): add thick outline/shadow Co-authored-by: Josh Goldberg <me@joshuakgoldberg.com>
diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx
@@ -127,7 +127,10 @@ function Home(): JSX.Element {
           <h1 className="hero__title">{siteConfig.title}</h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
           <div className={styles.buttons}>
-            <Link className="button button--primary" to={useBaseUrl('docs/')}>
+            <Link
+              className={clsx('button button--primary', styles.buttonPrimary)}
+              to={useBaseUrl('docs/')}
+            >
               Get Started
             </Link>
             <Link
diff --git a/packages/website/src/pages/styles.module.css b/packages/website/src/pages/styles.module.css
@@ -33,6 +33,18 @@
   margin: 1rem 1rem;
 }
 
+.buttonPrimary {
+  border: var(--ifm-button-border-width) solid var(--ifm-button-color);
+}
+
+.buttonPrimary:hover {
+  box-shadow: 0 2px 8px var(--ifm-button-color);
+}
+
+[data-theme='dark'] .buttonPrimary {
+  border: var(--ifm-button-border-width) solid var(--ifm-button-color);
+}
+
 .lightBackground {
   background: var(--ifm-color-emphasis-100);
 }
