From 4f7ee5f0d9c47c1bf73dcfd28b9d041810ff11c1 Mon Sep 17 00:00:00 2001 From: Anton Vakhrushev Date: Sat, 7 Mar 2026 12:01:41 +0300 Subject: [PATCH] Fix styles --- astro.config.mjs | 8 ++ src/layouts/ArticleLayout.astro | 4 +- src/layouts/BaseLayout.astro | 1 + src/styles/global.css | 183 +++++++++++++++++++++++++++++++- 4 files changed, 194 insertions(+), 2 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index e67fc71..72b2fb0 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -7,6 +7,14 @@ import sitemap from '@astrojs/sitemap'; export default defineConfig({ site: 'https://vakhrushev.me', integrations: [mdx(), vue(), sitemap()], + markdown: { + shikiConfig: { + themes: { + light: 'github-light', + dark: 'github-dark', + }, + }, + }, vite: { plugins: [tailwindcss()], }, diff --git a/src/layouts/ArticleLayout.astro b/src/layouts/ArticleLayout.astro index 4fb2534..162ffa5 100644 --- a/src/layouts/ArticleLayout.astro +++ b/src/layouts/ArticleLayout.astro @@ -18,7 +18,9 @@ const formattedDate = date.toLocaleDateString('ru-RU', { ---

{title}

- +
+ +

{formattedDate}, anton@vakhrushev.me

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 6cadd18..eef460e 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -21,6 +21,7 @@ const pageUrl = `${siteUrl}${Astro.url.pathname}`; + {pageTitle} {pageDescription && } {keywords && keywords.length > 0 && } diff --git a/src/styles/global.css b/src/styles/global.css index 7586d56..db80e29 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -5,8 +5,14 @@ --font-mono: 'Source Code Pro', monospace; --color-text: #24292e; + --color-text-secondary: #57606a; --color-link: #0366d6; --color-rule: #e6e6e6; + --color-bg: #ffffff; + --color-code-bg: #f6f8fa; + --color-code-text: #24292e; + --color-blockquote-border: #d0d7de; + --color-blockquote-text: #57606a; --max-width-content: 740px; --breakpoint-content: 740px; @@ -15,6 +21,7 @@ @layer base { html { font-size: 20px; + color-scheme: light dark; @media (max-width: theme(--breakpoint-content)) { font-size: 18px; @@ -22,7 +29,8 @@ } body { - @apply font-serif text-text; + @apply font-serif text-text bg-bg; + transition: background-color 0.2s, color 0.2s; } h1, h2, h3, h4, h5, h6 { @@ -36,4 +44,177 @@ a:hover, a:focus, a:active { @apply underline; } + + @media (prefers-color-scheme: dark) { + :root { + --color-text: #c9d1d9; + --color-text-secondary: #8b949e; + --color-link: #58a6ff; + --color-rule: #30363d; + --color-bg: #0d1117; + --color-code-bg: #161b22; + --color-code-text: #c9d1d9; + --color-blockquote-border: #30363d; + --color-blockquote-text: #8b949e; + } + } +} + +@layer components { + .prose { + line-height: 1.7; + + > * + * { + margin-top: 1.25em; + } + + h2 { + font-size: 1.5em; + font-weight: bold; + margin-top: 2em; + margin-bottom: 0.75em; + } + + h3 { + font-size: 1.25em; + font-weight: bold; + margin-top: 1.5em; + margin-bottom: 0.5em; + } + + h4 { + font-size: 1.1em; + font-weight: bold; + margin-top: 1.25em; + margin-bottom: 0.5em; + } + + h2 + *, h3 + *, h4 + * { + margin-top: 0; + } + + p { + margin-top: 1em; + margin-bottom: 0; + } + + ul, ol { + margin-top: 1em; + margin-bottom: 0; + padding-left: 1.5em; + } + + ul { + list-style-type: disc; + } + + ol { + list-style-type: decimal; + } + + li { + margin-top: 0.35em; + } + + li > ul, li > ol { + margin-top: 0.35em; + } + + blockquote { + margin-top: 1em; + margin-bottom: 0; + padding: 0.25em 1em; + border-left: 4px solid var(--color-blockquote-border); + color: var(--color-blockquote-text); + } + + blockquote > p:first-child { + margin-top: 0; + } + + code { + font-family: var(--font-mono); + font-size: 0.85em; + background-color: var(--color-code-bg); + color: var(--color-code-text); + padding: 0.15em 0.35em; + border-radius: 4px; + } + + pre { + margin-top: 1em; + margin-bottom: 0; + background-color: var(--color-code-bg); + border-radius: 6px; + padding: 1em; + overflow-x: auto; + font-size: 0.85em; + line-height: 1.5; + } + + pre code { + background: none; + padding: 0; + border-radius: 0; + font-size: inherit; + color: inherit; + } + + /* Shiki dual-theme: light by default, dark when preferred */ + pre.astro-code { + background-color: var(--shiki-light-bg, var(--color-code-bg)) !important; + color: var(--shiki-light, inherit) !important; + } + + pre.astro-code span { + color: var(--shiki-light, inherit) !important; + } + + @media (prefers-color-scheme: dark) { + pre.astro-code { + background-color: var(--shiki-dark-bg, var(--color-code-bg)) !important; + color: var(--shiki-dark, inherit) !important; + } + + pre.astro-code span { + color: var(--shiki-dark, inherit) !important; + } + } + + hr { + border: none; + border-top: 1px solid var(--color-rule); + margin-top: 2em; + margin-bottom: 2em; + } + + img { + max-width: 100%; + height: auto; + border-radius: 4px; + } + + table { + width: 100%; + border-collapse: collapse; + margin-top: 1em; + margin-bottom: 0; + font-size: 0.9em; + } + + th, td { + border: 1px solid var(--color-rule); + padding: 0.5em 0.75em; + text-align: left; + } + + th { + font-weight: bold; + background-color: var(--color-code-bg); + } + + strong { + font-weight: bold; + } + } }