refactor: refactored index page

.prettierrc.json

@@ -1,5 +1,5 @@
 {
-	"printWidth": 100,
+	"printWidth": 150,
 	"semi": true,
 	"singleQuote": true,
 	"tabWidth": 2,

src/components/Splash/Link.astro

@@ -0,0 +1,18 @@
+---
+import { Icon } from 'astro-icon';
+import './Link.scss';
+
+export interface Props {
+	icon: string;
+	href: string;
+}
+
+const { icon, href } = Astro.props as Props;
+---
+
+<div class='splash-link'>
+	<Icon name={icon} width='18' height='18' />
+	<a href={href}>
+		<slot></slot>
+	</a>
+</div>

src/components/Splash/Link.scss

@@ -0,0 +1,9 @@
+.splash-link {
+	display: flex;
+	align-items: center;
+	column-gap: 5px;
+
+	& a {
+		color: var(--font-color-gray);
+	}
+}

src/components/Splash/Splash.astro

@@ -0,0 +1,7 @@
+---
+import './Splash.scss';
+---
+
+<section class='splash container'>
+	<slot></slot>
+</section>

src/components/Splash/Splash.scss

@@ -0,0 +1,4 @@
+.splash {
+	margin-top: 40px;
+	margin-bottom: 150px;
+}

src/components/Splash/SplashHeading.astro

@@ -0,0 +1,7 @@
+---
+import './SplashHeading.scss';
+---
+
+<header class='splash-heading'>
+	<slot></slot>
+</header>

src/components/Splash/SplashHeading.scss

@@ -0,0 +1,21 @@
+.splash-heading {
+	& hgroup {
+		& h1 {
+			font-size: var(--font-size-5xl);
+			font-weight: bold;
+			margin-bottom: 0.5rem;
+		}
+
+		& h2 {
+			font-size: var(--font-size-xl);
+			margin-bottom: 1.25rem;
+			font-weight: normal;
+		}
+	}
+
+	& p {
+		font-size: var(--font-size-lg);
+		max-width: 570px;
+		line-height: 1.5;
+	}
+}

src/components/Splash/SplashLinks.astro

@@ -0,0 +1,7 @@
+---
+import './SplashLinks.scss';
+---
+
+<nav class='splash-links'>
+	<slot></slot>
+</nav>

src/components/Splash/SplashLinks.scss

@@ -0,0 +1,5 @@
+.splash-links {
+	display: flex;
+	align-items: center;
+	column-gap: 20px;
+}

src/components/Splash/index.ts

@@ -0,0 +1,4 @@
+export { default as Splash } from './Splash.astro';
+export { default as SplashHeading } from './SplashHeading.astro';
+export { default as SplashLinks } from './SplashLinks.astro';
+export { default as Link } from './Link.astro';

src/pages/[article].astro

@@ -1,5 +1,5 @@
 ---
-import '../styles/prism-one-light.css';
+import '@root/styles/prism-one-light.css';
 import PageLayout from '@root/layouts/default.astro';
 import { Markdown } from 'astro/components';
 import ArticleContent from '@components/ArticleContent';

src/pages/index.astro

@@ -1,91 +1,29 @@
 ---
 import type { ArticleType } from '@root/types';
 
-import { Icon } from 'astro-icon';
 import * as utils from '@utils/index';
 import PageLayout from '@layouts/default.astro';
 import RecentArticles from '@components/RecentArticles';
+import { Splash, SplashHeading, SplashLinks, Link } from '@components/Splash';
 
 const data = await Astro.glob<ArticleType>('../../content/articles/**/*.md');
 const articles = utils.transformArticles(data);
 ---
 
 <PageLayout>
-	<section class='welcome container'>
-		<header class='welcome-heading'>
-			<hgroup class='welcome-heading__title'>
+	<Splash>
+		<SplashHeading>
+			<hgroup>
 				<h1>Hello, I'am Sergey</h1>
 				<h2>Fullstack <b>web-developer</b> & <b>freelancer</b></h2>
 			</hgroup>
-			<p class='welcome-heading__description'>
-				Я занимаюсь разработкой веб-сайтов и веб-приложений разной сложности, а также публикую
-				различные статьи и туториалы на разные IT темы.
-			</p>
-		</header>
-		<nav class='welcome-links'>
-			<div class='welcome-links__link'>
-				<Icon name='information' width='18' height='18' />
-				<a href='/about'> обо мне</a>
-			</div>
-			<div class='welcome-links__link'>
-				<Icon name='email_filled' width='18' height='18' />
-				<a href='/contacts'> написать мне</a>
-			</div>
-		</nav>
-	</section>
+			<p>Я занимаюсь разработкой веб-сайтов и веб-приложений разной сложности, а также публикую различные статьи и туториалы на разные IT темы.</p>
+		</SplashHeading>
+		<SplashLinks>
+			<Link icon='information' href='/about'>обо мне</Link>
+			<Link icon='email_filled' href='/about'>написать мне</Link>
+		</SplashLinks>
+	</Splash>
 
 	<RecentArticles articles={articles} length={4} />
-
-	<style lang='scss'>
-		.welcome {
-			margin-top: 40px;
-			margin-bottom: 150px;
-
-			&-heading {
-				&__title {
-					& h1 {
-						font-size: var(--font-size-5xl);
-						font-weight: bold;
-						margin-bottom: 0.5rem;
-					}
-
-					& h2 {
-						font-size: var(--font-size-xl);
-						margin-bottom: 1.25rem;
-						font-weight: normal;
-					}
-				}
-
-				&__description {
-					font-size: var(--font-size-lg);
-					max-width: 570px;
-					line-height: 1.5;
-				}
-			}
-
-			&-links {
-				display: flex;
-				align-items: center;
-				column-gap: 20px;
-
-				&__link {
-					display: flex;
-					align-items: center;
-					column-gap: 5px;
-
-					& a {
-						color: var(--font-color-gray);
-					}
-				}
-			}
-		}
-
-		[astro-icon='information'] {
-			fill: var(--color-gray-600);
-		}
-
-		[astro-icon='email_filled'] {
-			fill: var(--color-gray-600);
-		}
-	</style>
 </PageLayout>

src/styles/global.scss

@@ -97,13 +97,11 @@
 	--opacity-hover: 0.7;
 }
 
-/* Text selection */
 ::selection {
 	background: var(--color-yellow-100);
 	color: var(--color-black);
 }
 
-/* Scrollbar */
 ::-webkit-scrollbar {
 	width: 10px;
 	height: 10px;
@@ -164,7 +162,6 @@ body {
 	list-style: none;
 }
 
-/* Buttons */
 .btn-link {
 	cursor: pointer;
 	display: inline-flex;