refactor: refactored css

src/components/ArticleContent/ArticleContent.scss

@@ -70,6 +70,27 @@
 		margin: 0 0 1em;
 	}
 
+	& hr {
+		background-color: var(--border-color);
+		margin: 40px 0;
+		border: none;
+		height: 1px;
+	}
+
+	& pre {
+		font-size: var(--font-size-sm);
+		border-radius: var(--border-radius-md);
+	}
+
+	& :not(pre) > code {
+		-webkit-font-smoothing: subpixel-antialiased;
+		background: var(--background-inline-code);
+		border-radius: var(--border-radius-lg);
+		font-size: 1rem;
+		font-weight: 500;
+		padding: 0.2rem 0.3rem;
+	}
+
 	& figcaption {
 		font-style: italic;
 		font-size: 1em;
@@ -113,4 +134,17 @@
 			border: none;
 		}
 	}
+
+	li::marker {
+		color: var(--color-blue-500);
+		font-size: 1.3rem;
+		line-height: var(--line-height-none);
+	}
+
+	& blockquote {
+		margin: 1.5rem 0;
+		font-style: italic;
+		border-left: 0.25rem solid var(--border-color);
+		padding-left: 1rem;
+	}
 }

src/components/Button/Button.scss

@@ -0,0 +1,15 @@
+.btn {
+	cursor: pointer;
+	font-family: var(--font-family-base);
+	font-weight: 500;
+	font-size: var(--font-size-md);
+	color: var(--font-color);
+	padding: 4px 16px;
+	border: 1px solid var(--border-color);
+	border-radius: var(--border-radius-md);
+	background: none;
+	font-size: var(--font-size-sm);
+	&:hover {
+		border: 1px solid var(--border-color-hover);
+	}
+}

src/components/Button/Button.tsx

@@ -0,0 +1,17 @@
+import type { ParentComponent, JSX } from 'solid-js';
+
+import { splitProps } from 'solid-js';
+import './Button.scss';
+
+type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const Button: ParentComponent<ButtonProps> = (props) => {
+	const [local, attrs] = splitProps(props, ['children']);
+	return (
+		<button class={`btn`} {...attrs}>
+			{local.children}
+		</button>
+	);
+};
+
+export default Button;

src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default } from './Button';

src/components/ContactForm/ContactForm.tsx

@@ -1,4 +1,6 @@
 import type { Component } from 'solid-js';
+
+import Button from '@components/Button';
 import './ContactForm.scss';
 
 type InputFieldsType = {
@@ -18,7 +20,7 @@ const ContactForm: Component = () => {
 			<input name="subject" placeholder="Тема сообщения" type="text" />
 			<textarea name="message" placeholder="Ваше сообщение..." id="message" cols={30} rows={10} />
 			<div>
-				<button type="submit">Отправить</button>
+				<Button type="submit">Отправить</Button>
 			</div>
 		</form>
 	);

src/components/ProjectItem/ProjectItem.astro

@@ -1,6 +1,6 @@
 ---
-import './ProjectItem.scss';
 import { Icon } from 'astro-icon';
+import './ProjectItem.scss';
 
 export interface Props {
 	data: ProjectType;
@@ -10,18 +10,18 @@ const { data } = Astro.props as Props;
 const { icon, name, year, description, articleUrl, sourceUrl, demoUrl } = data;
 ---
 
-<div class='project-item'>
+<div class="project-item">
-	<div class='project-item__heading'>
+	<div class="project-item__heading">
 		<h2>
-			<Icon name={icon} width='20' height='20' />
+			<Icon name={icon} width="20" height="20" />
 			{name}
 		</h2>
 		<span>{year}</span>
 	</div>
-	<div class='project-item__description'>
+	<div class="project-item__description">
 		<p>{description}</p>
 	</div>
-	<div class='project-item__links'>
+	<div class="project-item__links">
 		{articleUrl && (
 			<a class="btn-link" href={articleUrl} target="_blank">
 				Статья

src/pages/index.astro

@@ -18,8 +18,8 @@ const articles = utils.transformArticles(data);
 			<p>Я занимаюсь разработкой веб-сайтов и веб-приложений разной сложности, а также публикую различные статьи и туториалы на разные IT темы.</p>
 		</SplashHeading>
 		<SplashLinks>
-			<Link icon='information' href='/about'>обо мне</Link>
+			<Link icon="information" href="/about">обо мне</Link>
-			<Link icon='email_filled' href='/contacts'>написать мне</Link>
+			<Link icon="email_filled" href="/contacts">написать мне</Link>
 		</SplashLinks>
 	</Splash>
 	<RecentArticles articles={articles} length={4} />

src/styles/global.scss

@@ -79,24 +79,11 @@ body {
 	}
 }
 
-li::marker {
-	color: var(--color-blue-500);
-	font-size: 1.3rem;
-	line-height: var(--line-height-none);
-}
-
 p {
 	margin-top: 0;
 	margin-bottom: 1.5rem;
 }
 
-hr {
-	background-color: var(--border-color);
-	margin: 40px 0;
-	border: none;
-	height: 1px;
-}
-
 h1,
 h2,
 h3,
@@ -120,48 +107,11 @@ textarea {
 	outline-color: var(--color-blue-500);
 }
 
-button {
-	cursor: pointer;
-	font-family: var(--font-family-base);
-	font-weight: 500;
-	font-size: var(--font-size-md);
-	color: var(--font-color);
-	padding: 4px 16px;
-	border: 1px solid var(--border-color);
-	border-radius: var(--border-radius-md);
-	background: none;
-	font-size: var(--font-size-sm);
-	&:hover {
-		border: 1px solid var(--border-color-hover);
-	}
-}
-
 textarea {
 	max-height: 500px;
 	min-height: 200px;
 }
 
-blockquote {
-	margin: 1.5rem 0;
-	font-style: italic;
-	border-left: 0.25rem solid var(--border-color);
-	padding-left: 1rem;
-}
-
-:not(pre) > code {
-	-webkit-font-smoothing: subpixel-antialiased;
-	background: var(--background-inline-code);
-	border-radius: var(--border-radius-lg);
-	font-size: 1rem;
-	font-weight: 500;
-	padding: 0.2rem 0.3rem;
-}
-
-pre {
-	font-size: var(--font-size-sm);
-	border-radius: var(--border-radius-md);
-}
-
 a {
 	color: var(--color-blue-400);
 	font-weight: 500;
@@ -171,3 +121,8 @@ a {
 		color: var(--color-blue-400);
 	}
 }
+
+button {
+	background: none;
+	border: none;
+}