refactor: change article header layout

astro.config.mjs

@@ -1,17 +1,17 @@
-import { defineConfig } from 'astro/config';
-import solid from '@astrojs/solid-js';
-import compress from 'astro-compress';
+import { defineConfig } from "astro/config";
+import solid from "@astrojs/solid-js";
+import compress from "astro-compress";
 
 // https://astro.build/config
 export default defineConfig({
-	site: 'https://yarkov.tech',
-	integrations: [solid(), compress({ img: false })],
+	site: "https://yarkov.tech",
+	integrations: [solid(), compress({ img: false, html: false })],
 	markdown: {
-		syntaxHighlight: 'prism',
+		syntaxHighlight: "prism",
 	},
 	vite: {
 		ssr: {
-			external: ['svgo'],
+			external: ["svgo"],
 		},
 	},
 	experimental: {

src/components/ArticleContent/ArticleContent.scss

@@ -21,7 +21,7 @@
 
 	& q {
 		font-style: italic;
-		quotes: '«' '»';
+		quotes: "«" "»";
 	}
 
 	& h1,
@@ -135,10 +135,16 @@
 		}
 	}
 
-	li::marker {
-		color: var(--color-blue-500);
-		font-size: 1.3rem;
-		line-height: var(--line-height-none);
+	& li {
+		list-style: disc;
+		& li {
+			list-style-type: circle;
+		}
+		&::marker {
+			color: var(--color-blue-500);
+			font-size: 1.3rem;
+			line-height: var(--line-height-none);
+		}
 	}
 
 	& blockquote {

src/components/ArticlePost/ArticlePost.astro

@@ -1,6 +1,6 @@
 ---
-import { DateFormatter } from '@root/utils';
-import './ArticlePost.scss';
+import { DateFormatter } from "@root/utils";
+import "./ArticlePost.scss";
 
 export interface Props {
 	data: ArticleType;
@@ -10,33 +10,31 @@ const { data } = Astro.props as Props;
 const { title, tags, author, published_at } = data;
 ---
 
-<article class='article'>
+<article class="article">
 	<header>
-		<div class='meta'>
-			<ul class='list-links'>
+		<div class="tags">
+			<ul>
 				{tags.map((tag) => (
 					<li>
-						<a class="btn-link" href={`/articles?tags=${tag.toLocaleLowerCase()}`}>
-							{tag}
-						</a>
+						<a href={`/articles?tags=${tag.toLocaleLowerCase()}`}>{`${tag}${tags.at(-1) === tag ? "" : ","}`}</a>
 					</li>
 				))}
 			</ul>
-			<div>
-				<time datetime={published_at}>{DateFormatter.format(new Date(published_at))}</time>
-				<span>Опубликовал&nbsp;<b>{author}</b></span>
-			</div>
 		</div>
-		<div class='heading'>
+		<div class="heading">
 			<h1>{title}</h1>
 		</div>
+		<div class="published">
+			<time datetime={published_at}>{DateFormatter.format(new Date(published_at))}</time>
+			<span>{author}</span>
+		</div>
 		<div>
 			<figure>
-				<img src='https://picsum.photos/1920/1080' alt='Article Image' />
+				<img src="https://picsum.photos/1920/1080" alt="Article Image" />
 			</figure>
 		</div>
 	</header>
-	<slot></slot>
+	<slot />
 	<footer>
 		<h2>Comments</h2>
 	</footer>

src/components/ArticlePost/ArticlePost.scss

@@ -1,29 +1,7 @@
 .article {
 	& header {
-		& .meta {
-			display: flex;
-			justify-content: space-between;
-			align-items: flex-end;
-			column-gap: 5px;
-
-			& ul {
-				max-width: 350px;
-			}
-
-			& div {
-				display: flex;
-				flex-direction: column;
-				text-align: right;
-				white-space: nowrap;
-				& time {
-					text-transform: uppercase;
-					font-size: var(--font-size-sm);
-				}
-			}
-		}
-
 		& .heading {
-			margin-top: 2rem;
+			margin-top: 1.125rem;
 
 			& h1 {
 				font-weight: 600;
@@ -36,6 +14,22 @@
 			}
 		}
 
+		& .tags {
+			font-size: var(--font-size-sm);
+			text-transform: uppercase;
+			& ul {
+				display: flex;
+				flex-wrap: wrap;
+				column-gap: 5px;
+				row-gap: 7px;
+			}
+		}
+
+		& .published {
+			margin-bottom: 1.25em;
+			color: var(--font-color-gray);
+		}
+
 		& figure {
 			margin: 0;
 
@@ -55,24 +49,8 @@
 
 @media screen and (max-width: 560px) {
 	.article {
-		& header {
-			& .heading h1 {
-				font-size: 2rem;
-			}
-
-			& .meta {
-				flex-direction: column-reverse;
-				align-items: flex-start;
-
-				& ul {
-					max-width: 100%;
-				}
-
-				& div {
-					align-self: flex-end;
-					margin-bottom: 1.2rem;
-				}
-			}
+		& header .heading h1 {
+			font-size: 2rem;
 		}
 	}
 }

src/styles/global.scss

@@ -88,6 +88,12 @@ p {
 	margin-bottom: 1.5rem;
 }
 
+ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
 h1,
 h2,
 h3,
@@ -101,7 +107,6 @@ input,
 textarea {
 	-webkit-appearance: none;
 	font-family: var(--font-family-base);
-	font-size: 20px;
 	padding: 8px 15px;
 	border-radius: var(--border-radius-md);
 	background-color: var(--background-inputs-color);