update styles

dbt-labs · Oct 27, 2023 · dac2480 · dac2480
1 parent 493198c
commit dac2480
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/website/src/components/quickstartGuideCard/index.js b/website/src/components/quickstartGuideCard/index.js
@@ -21,7 +21,7 @@ export default function QuickstartGuideCard({ frontMatter }) {
       )}
 
       <span to={`/guides/${id}`} className={styles.start}>
-        Start
+        Start <i className="fa-regular fa-arrow-right"></i>
       </span>
 
       {(tags || level) && (

diff --git a/website/src/components/quickstartGuideCard/styles.module.css b/website/src/components/quickstartGuideCard/styles.module.css
@@ -1,5 +1,5 @@
 .quickstartCard {
-  border: 1px solid #EFF2F3;
+  outline: 1px solid #EFF2F3;
   border-radius: var(--border-radius);
   box-shadow: 0px 11px 24px rgba(138, 138, 138, .1);
   padding: 2.5rem 2.5rem 1.5rem 2.5rem;
@@ -13,6 +13,11 @@
 
 .quickstartCard:hover {
   transform: translateY(-7px);
+  outline: 2px solid var(  --color-green-blue);
+}
+
+.quickstartCard:hover > .start {
+  text-decoration: underline;
 }
 
 .quickstartCard .icon {
@@ -52,19 +57,16 @@
   font-size: 1.125rem;
   margin-top: auto;
   padding-top: 2rem;
+  font-weight: 600;
 }
 
 [data-theme='dark'] .quickstartCard .start {
   color: #fff;
 }
 
-[data-theme='dark'] .quickstartCard:hover .start {
-  text-decoration: underline;
-}
-
-.quickstartCard .start:after {
-  content: " →";
-  margin-left: 5px;
+.quickstartCard .start i {
+  margin-left: 4px;
+  font-size: .9rem;
 }
 
 .quickstartCard .recently_updated {
-Original file line number
+Diff line change
@@ Expand Up @@
           )}
           <span to={`/guides/${id}`} className={styles.start}>
-            Start
+            Start <i className="fa-regular fa-arrow-right"></i>
           </span>
           {(tags || level) && (
@@ Expand Down @@