feat: added table styles in artcile content

src/components/ArticleContent/ArticleContent.scss

@@ -83,4 +83,34 @@
 		max-width: 100%;
 		margin: 0 auto;
 	}
+
+	& .table-wrapper {
+		overflow-x: auto;
+		margin-bottom: 1.25rem;
+	}
+
+	& table {
+		display: table;
+		border-radius: var(--border-radius-md);
+		min-width: 100%;
+		font-size: var(--font-size-md);
+		border: 1px solid var(--border-color);
+		border-collapse: separate;
+		border-spacing: 0;
+		margin: 5px 0;
+		& thead th {
+			background-color: var(--background-card);
+			border-top-left-radius: var(--border-radius-md);
+			border-top-right-radius: var(--border-radius-md);
+		}
+		& td,
+		th {
+			border-bottom: 1px solid var(--border-color);
+			padding: 0.5rem;
+			text-align: left;
+		}
+		& tbody tr:last-child td {
+			border: none;
+		}
+	}
 }

src/components/BaseHead.astro

@@ -20,6 +20,6 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props;
 </title>
 <meta name="title" content={title} />
 <meta name="description" content={description || SITE_METADATA.description} />
-<meta name="theme-color" content="#1e2327" />
+<meta name="theme-color" content={SITE_METADATA.themeColor} />
 <script is:inline src="/assets/js/detect-theme.js" />
 <slot />

src/config.ts

@@ -4,6 +4,7 @@ export const SITE_METADATA: SiteMetadataType = {
 	author: 'Sergey Yarkov',
 	description:
 		'Здесь я публикую статьи и туториалы на различные IT темы, а также рассказываю о своих проектах которые я сделал за последние несколько лет.',
+	themeColor: '#1e2327',
 	contacts: {
 		email: 'serzh.yarkov@gmail.com',
 		githubUrl: 'https://github.com/sergeyyarkov',

src/styles/theme.scss

@@ -102,6 +102,7 @@
 	--background-btn-link: var(--color-white);
 	--background-btn-link-active: var(--color-white);
 	--background-inputs-color: var(--color-white);
+	--background-card: var(--color-gray-50);
 
 	/* Icons */
 	--icon-primary: var(--color-white);
@@ -117,16 +118,17 @@
 
 	/* Border */
 	--border-color: var(--color-gray-600);
-	--border-color-hover: var(--color-gray-600);
+	--border-color-hover: var(--color-gray-500);
 
 	/* Elements */
 	--background-body-color: var(--color-gray-900);
 	--background-header-color: var(--color-gray-900);
-	--background-inline-code: var(--color-gray-800);
+	--background-inline-code: var(--color-gray-700);
 	--background-color-hover: var(--color-gray-800);
 	--background-btn-link: var(--color-gray-800);
 	--background-btn-link-active: var(--color-gray-700);
 	--background-inputs-color: var(--color-gray-800);
+	--background-card: var(--color-gray-800);
 
 	/* Icons */
 	--icon-primary: var(--color-white);

src/types/main.d.ts

@@ -15,6 +15,7 @@ declare global {
 		name: string;
 		author: string;
 		description: string;
+		themeColor: string;
 		contacts: {
 			email: string;
 			githubUrl: string;