feat: improve hero buttons

frouriojs · Nov 14, 2022 · c024321 · c024321
1 parent e1cc20a
commit c024321
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -140,16 +140,13 @@ function Home() {
           <p className={styles.heroTitle}>in one command</p>
           <p className={clsx(styles.heroTitle, styles.heroTitleBold)}>All you need is TypeScript</p>
           <div className={styles.buttons}>
-            <Link
-              className={clsx('button button--primary button--lg', styles.getStarted)}
-              to={useBaseUrl('docs/')}
-            >
+            <Link className="button button--primary button--lg" to={useBaseUrl('docs/')}>
               Get Started
             </Link>
             <Link
               className={clsx(
                 'button button--outline button--primary button--lg',
-                styles.getStarted
+                styles.startTutorial
               )}
               to={useBaseUrl('/docs/tutorial')}
             >

diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
@@ -44,6 +44,20 @@
   margin: 10px 0 30px 0;
 }
 
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+[data-theme='dark'] .startTutorial {
+  background: rgba(0, 0, 0, 0.3);
+}
+[data-theme='dark'] .startTutorial:hover {
+  color: #fff;
+}
+
 /* How to setup */
 .setupWrapper {
   display: flex;
@@ -218,12 +232,6 @@
   margin: 0;
 }
 
-.buttons {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 .features {
   padding: 2rem 0;
 }