From d217b932093a8a11b217558078c6341c077eff5b Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Tue, 2 Aug 2022 12:20:14 +0300
Subject: [PATCH] feat: added table styles in artcile content

---
 .../ArticleContent/ArticleContent.scss        | 30 +++++++++++++++++++
 src/components/BaseHead.astro                 |  2 +-
 src/config.ts                                 |  1 +
 src/styles/theme.scss                         |  6 ++--
 src/types/main.d.ts                           |  1 +
 5 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/components/ArticleContent/ArticleContent.scss b/src/components/ArticleContent/ArticleContent.scss
index 13dbd46..4b7e54f 100644
--- a/src/components/ArticleContent/ArticleContent.scss
+++ b/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;
+		}
+	}
 }
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 9d6975d..d7706d5 100644
--- a/src/components/BaseHead.astro
+++ b/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 />
diff --git a/src/config.ts b/src/config.ts
index d959cd5..b411c15 100644
--- a/src/config.ts
+++ b/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',
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index dfe9dcc..2f99dcb 100644
--- a/src/styles/theme.scss
+++ b/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);
diff --git a/src/types/main.d.ts b/src/types/main.d.ts
index 182e73b..ef30c4d 100644
--- a/src/types/main.d.ts
+++ b/src/types/main.d.ts
@@ -15,6 +15,7 @@ declare global {
 		name: string;
 		author: string;
 		description: string;
+		themeColor: string;
 		contacts: {
 			email: string;
 			githubUrl: string;