style: harmonize card styling (#685)

aiven · Feb 11, 2025 · 4c2a02c · 4c2a02c
1 parent c76c08c
commit 4c2a02c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 19 deletions.
diff --git a/src/components/non-swizzled/Card/styles.module.css b/src/components/non-swizzled/Card/styles.module.css
@@ -1,19 +1,6 @@
-:root {
-  --aiven-card-bg: var(--aiven-primary-05);
-  --aiven-card-border: var(--aiven-blue-10);
-  --aiven-card-bg-hover: var(--aiven-primary-05);
-  --aiven-card-border-hover: var(--aiven-blue-30);
-}
-
-[data-theme='dark'] {
-  --aiven-card-bg: var(--ifm-card-background-color);
-  --aiven-card-border: var(--ifm-color-emphasis-200);
-  --aiven-card-bg-hover: var(--ifm-card-background-color);
-  --aiven-card-border-hover: var(--ifm-color-emphasis-300);
-}
-
 .card {
   margin-bottom: 1em;
+  font-family: var(--aiven-card-font-family)
 }
 
 .card a {
@@ -35,8 +22,10 @@
 }
 
 .title {
-  font-size: 115%;
+  font-size: 110%;
   font-weight: 600;
+  line-height: 1.6rem;
+  margin-bottom: 0.8rem;
 }
 
 .card a:hover,

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -58,6 +58,12 @@
   --ifm-button-background-color: var(--nav-btn-primary-bg);
   --ifm-button-border-color: var(--ifm-button-background-color);
   --docusaurus-details-bg: hsl(0, 0%, 98%);
+  --ifm-card-background-color: var(--aiven-card-bg);
+  --aiven-card-bg: var(--aiven-primary-05);
+  --aiven-card-border: var(--aiven-blue-10);
+  --aiven-card-bg-hover: var(--aiven-primary-05);
+  --aiven-card-border-hover: var(--aiven-blue-30);
+  --aiven-card-font-family: var(--ifm-font-family-base);
 }
 
 [data-theme='dark'] {
@@ -98,6 +104,10 @@
   --nav-btn-secondary-text-color: var(--nav-btn-primary-bg);
   --nav-btn-secondary-text-color-hover: var(--nav-btn-primary-bg-hover);
   --docusaurus-details-bg: hsl(0, 0%, 12%);
+  --aiven-card-bg: var(--ifm-card-background-color);
+  --aiven-card-border: var(--ifm-color-emphasis-200);
+  --aiven-card-bg-hover: var(--ifm-card-background-color);
+  --aiven-card-border-hover: var(--ifm-color-emphasis-300);
 }
 
 .markdown details {
@@ -278,11 +288,30 @@ ul+div {
   font-style: italic;
 }
 
-a.card {
+/* Card overrides */
+.card {
+  margin-bottom: 1em;
+}
+
+.card a {
   color: var(--ifm-color-content);
-  text-decoration: none;
+  background-color: var(--aiven-card-bg);
+  padding: 1em;
+  display: flex;
+  flex-direction: column;
+  gap: 0em;
+  border-radius: var(--aiven-radius);
+  border: solid 1px var(--aiven-card-border);
 }
 
-a.card>h2 {
+.card h2 {
   font-size: 115%;
+  font-weight: 600;
+}
+
+.card a:hover,
+.card a:focus {
+  text-decoration: none;
+  background-color: var(--aiven-card-bg-hover);
+  border-color: var(--aiven-card-border-hover);
 }
diff --git a/src/theme/DocCard/index.tsx b/src/theme/DocCard/index.tsx
@@ -45,7 +45,7 @@ function CardContainer({
   return (
     <Link
       href={href}
-      className={clsx('card padding--lg', styles.cardContainer)}>
+      className={clsx('card padding--md', styles.cardContainer)}>
       {children}
     </Link>
   );

diff --git a/src/theme/DocCard/styles.module.css b/src/theme/DocCard/styles.module.css
@@ -0,0 +1,22 @@
+.cardContainer {
+  color: var(--ifm-color-content);
+  background-color: var(--aiven-card-bg);
+  border: 1px solid var(--aiven-card-border);
+  font-family: var(--aiven-card-font-family);
+}
+
+.cardTitle {
+  font-family: var(--aiven-card-font-family);
+}
+
+a.cardContainer:hover,
+a.cardContainer:focus {
+  text-decoration: none;
+  color: var(--ifm-color-content);
+}
+
+.cardContainer:hover,
+.cardContainer:focus {
+  background-color: var(--aiven-card-bg-hover);
+  border-color: var(--aiven-card-border-hover);
+}