chore: style table

kobaltedev · Oct 17, 2024 · 6a5c013 · 6a5c013
1 parent 4e7c882
commit 6a5c013
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 3 deletions.
diff --git a/src/client/components/Article.module.css b/src/client/components/Article.module.css
@@ -15,6 +15,7 @@
 	max-height: calc(100dvh - var(--header-height) - 4rem + var(--header-offset));
 	right: 0;
 	transition: transform .3s ease-in-out;
+	overflow-y: auto;
 }
 
 @media screen and (max-width: 1300px) {

diff --git a/src/client/components/Layout.tsx b/src/client/components/Layout.tsx
@@ -157,7 +157,10 @@ const Navigation = (props: NavigationProps) => {
 								<For each={section.items}>
 									{(item) => (
 										<li>
-											<a class={styles["sidenav-link"]} href={item.link}>
+											<a
+												class={styles["sidenav-link"]}
+												href={(item as { link: string }).link}
+											>
 												{item.title}
 											</a>
 										</li>

diff --git a/src/client/components/mdx-components.module.css b/src/client/components/mdx-components.module.css
@@ -224,3 +224,41 @@ a[data-footnote-ref] {
 		color: var(--danger-text-color);
 	}
 }
+
+.table {
+	overflow-x: auto;
+
+	& > table {
+		width: 100%;
+		table-layout: auto;
+		text-align: left;
+		margin-top: 2em;
+		margin-bottom: 2em;
+		font-size: .875em;
+		line-height: 1.7;
+
+		& > thead {
+			color: var(--heading-color);
+			font-family: var(--font-headings);
+			border-bottom: 1px solid var(--decoration-color);
+		}
+
+		& tr {
+			color: var(--text-color);
+			border-bottom: 1px solid
+				color-mix(in hsl, var(--decoration-color) 20%, transparent);
+
+			& > * {
+				padding: .5rem;
+
+				&:first-child {
+					padding-left: 0;
+				}
+
+				&:last-child {
+					padding-right: 0;
+				}
+			}
+		}
+	}
+}
diff --git a/src/client/components/mdx-components.tsx b/src/client/components/mdx-components.tsx
@@ -56,8 +56,8 @@ export function table(props: ComponentProps<"table">) {
 	const [local, others] = splitProps(props, ["class"]);
 
 	return (
-		<div style={{ "overflow-x": "auto" }}>
-			<table class="" {...others} />
+		<div class={styles.table}>
+			<table {...others} />
 		</div>
 	);
 }