av/homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix styles

Browse Source
This commit is contained in:
Anton Vakhrushev
2026-03-07 12:01:41 +03:00
parent 0658459dfb
commit 4f7ee5f0d9
4 changed files with 194 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
astro.config.mjs
View File

@@ -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()],
},

4
src/layouts/ArticleLayout.astro
View File

@@ -18,7 +18,9 @@ const formattedDate = date.toLocaleDateString('ru-RU', {
---
<InternalLayout title={title} description={description} keywords={keywords}>
<h1 class="text-4xl font-bold mt-3 mb-4">{title}</h1>
<slot />
<div class="prose">
<slot />
</div>
<div class="border-t border-rule mt-8 pt-4">
<p>{formattedDate},&nbsp;<a href="mailto:anton@vakhrushev.me">anton@vakhrushev.me</a></p>
</div>

1
src/layouts/BaseLayout.astro
View File

@@ -21,6 +21,7 @@ const pageUrl = `${siteUrl}${Astro.url.pathname}`;
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>{pageTitle}</title>
{pageDescription && <meta name="description" content={pageDescription} />}
{keywords && keywords.length > 0 && <meta name="keywords" content={keywords.join(',')} />}

183
src/styles/global.css
View File

@@ -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;
}
}
}