feat: add hover styles to homepage and minor styles fixes (#11)

* fix: add correct table header spacing and font size * fix: center edit page icon on mobile devices * feat(homepage): add styles on hover fix: add correct background to steps card for light theme * fix(intro): correct margin bottom for mobile view * fix(homepage): more steps/card improvements * fix(concepts): update broken links
Basis-Theory · Dec 28, 2022 · b369502 · b369502 · vercel · Dec 28, 2022
1 parent 2838d93
commit b369502
Show file tree

Hide file tree

Showing 28 changed files with 282 additions and 667 deletions.
diff --git a/docs/concepts/index.mdx b/docs/concepts/index.mdx
@@ -31,57 +31,57 @@ Explore the knowledge base about the core concepts, terminology, and FAQ's relat
     Use tokens to secure and share your sensitive data.
   </Card>
 
-  <Card
-    column
-    img={<Info />}
-    href="/docs/concepts/what-is-search"
-    heading="What is Search?"
-  >
-    Search your data without decrypting it.
-  </Card>
+<Card
+  column
+  img={<Info />}
+  href="/docs/concepts/what-is-search"
+  heading="What is Search?"
+>
+  Search your data without decrypting it.
+</Card>
 
-  <Card
-    column
-    img={<Info />}
-    href="/docs/concepts/what-are-containers"
-    heading="What are Token Containers?"
-  >
-    Create hierarchies and classifications of your data.
-  </Card>
+<Card
+  column
+  img={<Info />}
+  href="/docs/concepts/what-are-containers"
+  heading="What are Token Containers?"
+>
+  Create hierarchies and classifications of your data.
+</Card>
 
-  <Card
-    column
-    img={<Info />}
-    href="/docs/api/access-controls"
-    heading="Access Controls"
-  >
-    Use granular controls to limit the scope of your data.
-  </Card>
+<Card
+  column
+  img={<Info />}
+  href="/docs/concepts/access-controls"
+  heading="Access Controls"
+>
+  Use granular controls to limit the scope of your data.
+</Card>
 
-  <Card
-    column
-    img={<Info />}
-    href="/docs/api/what-is-the-proxy"
-    heading="What is the Proxy?"
-  >
-    Send and receive sensitive data without touching it.
-  </Card>
+<Card
+  column
+  img={<Info />}
+  href="/docs/concepts/what-is-the-proxy"
+  heading="What is the Proxy?"
+>
+  Send and receive sensitive data without touching it.
+</Card>
 
-  <Card
-    column
-    img={<Info />}
-    href="/docs/api/what-are-reactors"
-    heading="What are Reactors?"
-  >
-    Run code against your data in a secure environment.
-  </Card>
+<Card
+  column
+  img={<Info />}
+  href="/docs/concepts/what-are-reactors"
+  heading="What are Reactors?"
+>
+  Run code against your data in a secure environment.
+</Card>
 
   <Card
     column
     img={<Info />}
-    href="/docs/api/what-are-mats"
+    href="/docs/concepts/what-are-mats"
     heading="What are Monthly Active Tokens?"
   >
     Learn about how tokens are tracked for billing.
   </Card>
-</Card.TwoColumnLayout>
+</Card.TwoColumnLayout>
diff --git a/src/components/shared/Intro.module.css b/src/components/shared/Intro.module.css
@@ -27,7 +27,7 @@
     height: auto;
     place-content: space-between;
     padding: 0px 0px 24px;
-    margin-bottom: 0;
+    margin-bottom: 20px;
     border-bottom: 1px solid var(--bt-default-border-color);
   }
 

diff --git a/src/css/global.scss b/src/css/global.scss
@@ -29,3 +29,13 @@ code {
   font-weight: 500 !important;
   font-size: 14px !important;
 }
+
+table th {
+  border-bottom: 0px;
+  font-size: 18px;
+  padding: 8px;
+}
+
+table thead tr {
+  border: none;
+}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -1,19 +1,108 @@
 :root {
   --bt-card-text-color: var(--ifm-font-color-base);
+
+  --bt-card-background-image: center repeat
+      url("/img/homepage/card-background-light.png"),
+    var(--bt-card-gradient-background);
   --bt-card-gradient-background: linear-gradient(
     99.18deg,
     #ffffff 12.27%,
     #fafbff 71.38%
   );
+
+  --bt-step-getting-started-default-box-shadow: 0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #9fd8e0;
+  --bt-step-getting-started-border-hover: 2px solid #10c0d9;
+  --bt-step-getting-started-box-shadow-hover: 0px 0px 6px
+      rgba(16, 192, 217, 0.3),
+    0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #9fd8e0;
+
+  --bt-step-collect-data-default-box-shadow: 0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #c3d4ff;
+  --bt-step-collect-data-border-hover: 2px solid #5383ff;
+  --bt-step-collect-data-box-shadow-hover: 0px 0px 6px rgba(83, 131, 255, 0.3),
+    0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #9fd8e0;
+
+  --bt-step-share-data-default-box-shadow: 0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #cdc3ff;
+  --bt-step-share-data-border-hover: 2px solid #7e65ff;
+  --bt-step-share-data-box-shadow-hover: 0px 0px 6px rgba(126, 101, 255, 0.3),
+    0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #9fd8e0;
+
+  --bt-step-process-data-default-box-shadow: 0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #f3cae3;
+  --bt-step-process-data-border-hover: 2px solid #e779bb;
+  --bt-step-process-data-box-shadow-hover: 0px 0px 6px rgba(231, 121, 187, 0.3),
+    0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #9fd8e0;
+
+  --bt-step-govern-data-default-box-shadow: 0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05),
+    inset 0px 0px 0px 1px rgba(207, 211, 232, 0.8);
+  --bt-step-govern-data-border-hover: 2px solid #6a738c;
+  --bt-step-govern-data-box-shadow-hover: 0px 0px 6px rgba(106, 115, 140, 0.3),
+    0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #9fd8e0;
 }
 
 [data-theme="dark"] {
   --bt-card-text-color: var(--ifm-heading-color);
+  --bt-card-background-image: center / contain repeat-x
+      url("/img/homepage/card-background-dark.png"),
+    var(--bt-card-gradient-background);
   --bt-card-gradient-background: linear-gradient(
     104.37deg,
     #1c2036 10.89%,
     #0d1025 83.51%
   );
+
+  --bt-step-getting-started-default-box-shadow: 0px 2px 4px -2px rgba(7, 10, 27, 0.2),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.1),
+    inset 0px 0px 0px 1px rgba(159, 216, 224, 0.2);
+  --bt-step-getting-started-border-hover: 2px solid #10c0d9;
+  --bt-step-getting-started-box-shadow-hover: 0px 0px 10px
+      rgba(16, 192, 217, 0.4),
+    0px 2px 4px -2px rgba(7, 10, 27, 0.5), 0px 4px 6px -1px rgba(7, 10, 27, 0.1),
+    inset 0px 0px 0px 1px rgba(159, 216, 224, 0.2);
+
+  --bt-step-collect-data-default-box-shadow: 0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05),
+    inset 0px 0px 0px 1px rgba(83, 131, 255, 0.2);
+  --bt-step-collect-data-border-hover: 2px solid #5383ff;
+  --bt-step-collect-data-box-shadow-hover: 0px 0px 10px rgba(83, 131, 255, 0.4),
+    0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05),
+    inset 0px 0px 0px 1px rgba(83, 131, 255, 0.2);
+
+  --bt-step-share-data-default-box-shadow: 0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05),
+    inset 0px 0px 0px 1px rgba(126, 101, 255, 0.2);
+  --bt-step-share-data-border-hover: 2px solid #7e65ff;
+  --bt-step-share-data-box-shadow-hover: 0px 0px 10px rgba(126, 101, 255, 0.4),
+    0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05),
+    inset 0px 0px 0px 1px rgba(126, 101, 255, 0.2);
+
+  --bt-step-process-data-default-box-shadow: 0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05),
+    inset 0px 0px 0px 1px rgba(174, 119, 155, 0.2);
+  --bt-step-process-data-border-hover: 2px solid #e779bb;
+  --bt-step-process-data-box-shadow-hover: 0px 0px 10px rgba(243, 165, 212, 0.4),
+    0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05),
+    inset 0px 0px 0px 1px rgba(174, 119, 155, 0.2);
+
+  --bt-step-govern-data-default-box-shadow: 0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05),
+    inset 0px 0px 0px 1px rgba(106, 115, 140, 0.2);
+  --bt-step-govern-data-border-hover: 2px solid #6a738c;
+  --bt-step-govern-data-box-shadow-hover: 0px 0px 10px rgba(106, 115, 140, 0.4),
+    0px 2px 4px -2px rgba(7, 10, 27, 0.05),
+    0px 4px 6px -1px rgba(7, 10, 27, 0.05),
+    inset 0px 0px 0px 1px rgba(106, 115, 140, 0.2);
 }
 
 .container {
@@ -27,8 +116,7 @@
 }
 
 .card {
-  background: center / contain repeat-x url("/img/homepage/card-background.png"),
-    var(--bt-card-gradient-background);
+  background: var(--bt-card-background-image);
   padding: 56px;
 }
 
@@ -52,9 +140,68 @@
   text-align: center;
 }
 
+.img-container {
+  width: 104px;
+  height: 104px;
+  border-radius: 50%;
+  margin-bottom: 15px;
+}
+
+.getting-started-img-container {
+  box-shadow: var(--bt-step-getting-started-default-box-shadow);
+}
+
+.collect-data-img-container {
+  box-shadow: var(--bt-step-collect-data-default-box-shadow);
+}
+
+.share-data-img-container {
+  box-shadow: var(--bt-step-share-data-default-box-shadow);
+}
+
+.process-data-img-container {
+  box-shadow: var(--bt-step-process-data-default-box-shadow);
+}
+
+.govern-data-img-container {
+  box-shadow: var(--bt-step-govern-data-default-box-shadow);
+}
+
+.img-container--hover {
+  width: 104px;
+  height: 104px;
+  transition: border var(--ifm-transition-slow);
+  transition: box-shadow var(--ifm-transition-slow);
+}
+
+.step p {
+  color: var(--ifm-heading-color) !important;
+}
+
+.getting-started-img--hover {
+  outline: var(--bt-step-getting-started-border-hover);
+  box-shadow: var(--bt-step-getting-started-box-shadow-hover);
+}
+
+.collect-data-img--hover {
+  outline: var(--bt-step-collect-data-border-hover);
+  box-shadow: var(--bt-step-collect-data-box-shadow-hover);
+}
+.share-data-img--hover {
+  outline: var(--bt-step-share-data-border-hover);
+  box-shadow: var(--bt-step-share-data-box-shadow-hover);
+}
+.process-data-img--hover {
+  outline: var(--bt-step-process-data-border-hover);
+  box-shadow: var(--bt-step-process-data-box-shadow-hover);
+}
+.govern-data-img--hover {
+  outline: var(--bt-step-govern-data-border-hover);
+  box-shadow: var(--bt-step-govern-data-box-shadow-hover);
+}
 .card-body p {
   margin: 0;
-  color: var(--bt-card-text-color);
+  color: var(--ifm-font-color-base);
 }
 
 .quickstarts {
@@ -143,11 +290,6 @@
     align-items: flex-start;
   }
 
-  .card-body img {
-    margin-right: 16px;
-    width: 56px;
-  }
-
   .card-body div {
     display: flex;
     flex-direction: row;
@@ -158,6 +300,13 @@
     margin-top: 24px;
   }
 
+  .img-container {
+    width: 56px;
+    height: 56px;
+    margin-right: 15px;
+    margin-bottom: 0px;
+  }
+
   .arrow {
     display: none;
   }