diff --git a/astro.config.mjs b/astro.config.mjs index 0f513c3..8906563 100644 --- a/astro.config.mjs +++ b/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: { diff --git a/src/components/ArticleContent/ArticleContent.scss b/src/components/ArticleContent/ArticleContent.scss index b1b8129..846845a 100644 --- a/src/components/ArticleContent/ArticleContent.scss +++ b/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 { diff --git a/src/components/ArticlePost/ArticlePost.astro b/src/components/ArticlePost/ArticlePost.astro index 788f978..95c5da6 100644 --- a/src/components/ArticlePost/ArticlePost.astro +++ b/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; --- -
+
-
-
- + diff --git a/src/components/ArticlePost/ArticlePost.scss b/src/components/ArticlePost/ArticlePost.scss index b61fae7..34e03f1 100644 --- a/src/components/ArticlePost/ArticlePost.scss +++ b/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; } } } diff --git a/src/styles/global.scss b/src/styles/global.scss index 8eddea8..dec216b 100644 --- a/src/styles/global.scss +++ b/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);