deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(blog): add custom prose styling

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-04-07 09:11:31 +02:00
parent d86f6b38df
commit 9a6ad69378
2 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/blog/[...slug].astro
View File

@ -3,6 +3,7 @@ import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import BaseLayout from '@/layouts/BaseLayout.astro';
import Table from '@/components/blog/Table.astro';
import '@/styles/prose.css';
export async function getStaticPaths() {
const blogEntries = await getCollection('blog');

18
src/styles/prose.css Normal file
View File

@ -0,0 +1,18 @@
.prose {
@apply break-words;
@apply prose-a:text-primary-600 prose-a:underline prose-a:transition prose-a:duration-150 prose-a:ease-in-out prose-a:hover:text-primary-500 prose-a:focus:outline-none prose-a:focus:ring-2 prose-a:focus:ring-primary-500 prose-a:dark:text-primary-400 prose-a:dark:hover:text-primary-300;
@apply prose-ul:mb-4 prose-ul:ml-8;
@apply prose-ol:mb-4 prose-ol:ml-8;
@apply prose-li:mb-2;
@apply prose-code:rounded prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:text-sm prose-code:text-base-600 prose-code:dark:bg-gray-800 prose-code:dark:text-base-400;
code::before {
content: '';
}
code::after {
content: '';
}
pre code {
@apply block overflow-auto rounded bg-gray-800 p-4 text-white;
}
@apply prose-blockquote:my-4 prose-blockquote:border-l-4 prose-blockquote:border-secondary-300 prose-blockquote:pl-4 prose-blockquote:dark:border-secondary-600;
}