feat: better table styling on plugin and blog pages

Author: Yusyuriv

src/assets/styles/reset.css

@@ -21,7 +21,6 @@ time, mark, audio, video {
     border: 0;
     font-size: 100%;
     font: inherit;
-    vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,

src/assets/styles/variables.css

@@ -56,6 +56,9 @@
     --plugin-official-text: #594504;
     --font-family: "Noto Sans", "Segoe UI", "Inter", sans-serif;
     --font-family-mono: "Source Code Pro", "JetBrains Mono", "Fira Code", "Roboto Mono", monospace;
+    --table-row-bg: #fff;
+    --table-row-bg-alternate: #f7fbff;
+    --table-cell-sep: #e0e8f0;
 }
 
 :root[data-theme="dark"] {
@@ -107,4 +110,7 @@
     --theme-toggle-button-icon: #d8d8d8;
     --plugin-official-background: #594504;
     --plugin-official-text: #f2bd0c;
+    --table-row-bg: #161b22;
+    --table-row-bg-alternate: #0d1117;
+    --table-cell-sep: #3b4554;
 }

src/layouts/Layout.astro

@@ -230,6 +230,27 @@ button {
 	list-style: revert;
 }
 
+.blog-content table {
+	margin-bottom: 1em;
+}
+
+.blog-content :is(th, td) {
+	padding: 0.25em 0.5em;
+	border: 1px solid var(--table-cell-sep);
+}
+
+.blog-content thead tr :is(th, td) {
+	background-color: var(--table-row-bg);
+}
+
+.blog-content tbody tr:nth-child(odd) :is(th, td) {
+	background-color: var(--table-row-bg-alternate);
+}
+
+.blog-content tbody tr:nth-child(even) :is(th, td) {
+	background-color: var(--table-row-bg);
+}
+
 [data-theme="dark"] .astro-code,
 [data-theme="dark"] .astro-code span {
 	color: var(--shiki-dark) !important;