fix: layer directives
This commit is contained in:
enscribe
parent
0cf5cf226c
commit
1012f562ff
10 changed files with 143 additions and 116 deletions
|
|
@ -1,8 +1,6 @@
|
|||
---
|
||||
import '../styles/global.css'
|
||||
import '../styles/katex.css'
|
||||
import '../styles/typography.css'
|
||||
import '../styles/codeblocks.css'
|
||||
|
||||
import '@fontsource/geist-sans'
|
||||
import '@fontsource/geist-mono'
|
||||
|
|
|
|||
|
|
@ -27,10 +27,23 @@ function buildToc(headings: Heading[]) {
|
|||
}
|
||||
---
|
||||
|
||||
<details open class="mb-8 block rounded-xl border p-3 xl:hidden">
|
||||
<summary class="cursor-pointer text-xl font-semibold"
|
||||
>Table of Contents</summary
|
||||
<details open class="group mb-8 block rounded-xl border p-3 xl:hidden">
|
||||
<summary
|
||||
class="flex cursor-pointer items-center justify-between text-xl font-semibold"
|
||||
>
|
||||
Table of Contents
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 transition-transform group-open:rotate-180"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</summary>
|
||||
<nav>
|
||||
<ul class="py-3">
|
||||
{toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
|
||||
|
|
@ -41,7 +54,7 @@ function buildToc(headings: Heading[]) {
|
|||
class="overflow-wrap-break-word sticky top-16 hidden h-0 w-[calc(50vw-50%-4rem)] translate-x-[calc(-100%-2em)] text-xs leading-4 xl:block"
|
||||
>
|
||||
<div class="mr-6 flex justify-end">
|
||||
<ul class="space-y-2">
|
||||
<ul class="max-h-[calc(100vh-8rem)] space-y-2 overflow-y-auto">
|
||||
<li>
|
||||
<h2 class="mb-2 text-lg font-semibold">Table of Contents</h2>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const { heading } = Astro.props
|
|||
---
|
||||
|
||||
<li
|
||||
class="list-inside list-disc px-6 py-1.5 text-sm text-foreground/60 xl:list-none xl:p-0"
|
||||
class="mr-2 list-inside list-disc px-6 py-1.5 text-sm text-foreground/60 xl:list-none xl:p-0"
|
||||
>
|
||||
<Link href={'#' + heading.slug} class="toc-link" data-heading={heading.slug}>
|
||||
{heading.text}
|
||||
|
|
|
|||
|
|
@ -27,13 +27,9 @@ end
|
|||
|
||||
```tsx showLineNumbers
|
||||
console.log('Introduction.')
|
||||
|
||||
console.log('Subtraction.') // [!code focus] // [!code --]
|
||||
|
||||
console.log('Addition.') // [!code focus] // [!code ++]
|
||||
|
||||
console.log('In focus.') // [!code focus]
|
||||
|
||||
console.log('Subtraction.') // [!code --]
|
||||
console.log('Addition.') // [!code ++]
|
||||
console.log('In focus.')
|
||||
console.log('End.')
|
||||
```
|
||||
|
||||
|
|
@ -139,6 +135,46 @@ we can use 3 backticks ``` in new line and write snippet and close with 3 backti
|
|||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
````
|
||||
|
||||
|
|
@ -226,7 +262,7 @@ H<sub>2</sub>O
|
|||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
|
||||
Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
|
||||
|
||||
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||
```
|
||||
|
|
@ -239,7 +275,7 @@ H<sub>2</sub>O
|
|||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
|
||||
Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
|
||||
|
||||
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ if (
|
|||
post.data.tags.map((tag) => (
|
||||
<a
|
||||
href={`/tags/${tag}`}
|
||||
class={badgeVariants({ variant: 'outline' })}
|
||||
class={badgeVariants({ variant: 'secondary' })}
|
||||
>
|
||||
{tag}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -26,10 +26,13 @@ const blog = (await getCollection('blog'))
|
|||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl">er·u·dite</CardTitle>
|
||||
<CardDescription>/ˈer(y)əˌdīt/</CardDescription>
|
||||
<CardDescription
|
||||
>/ˈer(y)əˌdīt/ • <span
|
||||
class="font-semibold text-muted-foreground">adjective</span
|
||||
></CardDescription
|
||||
>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p class="font-medium">adjective</p>
|
||||
<p>having or showing great knowledge or learning.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
code[data-theme*=' '] span {
|
||||
color: var(--shiki-light);
|
||||
}
|
||||
|
||||
.dark code[data-theme*=' '] span {
|
||||
color: var(--shiki-dark);
|
||||
}
|
||||
|
||||
pre {
|
||||
@apply overflow-x-auto rounded-xl p-4 text-sm leading-loose;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
counter-reset: line;
|
||||
}
|
||||
|
||||
code[data-line-numbers] {
|
||||
counter-reset: line;
|
||||
}
|
||||
|
||||
code[data-line-numbers] > [data-line]::before {
|
||||
counter-increment: line;
|
||||
content: counter(line);
|
||||
@apply mr-4 inline-block w-4 text-right text-muted-foreground;
|
||||
}
|
||||
|
||||
[data-highlighted-line] {
|
||||
@apply !bg-secondary;
|
||||
}
|
||||
|
||||
[data-highlighted-chars] > span {
|
||||
@apply rounded-md border !bg-secondary p-1 font-semibold;
|
||||
}
|
||||
|
||||
[data-rehype-pretty-code-title] {
|
||||
@apply rounded-t-xl border-x border-t p-2 text-sm font-semibold !text-foreground;
|
||||
}
|
||||
|
||||
[data-rehype-pretty-code-title] + pre {
|
||||
@apply mt-0 rounded-t-none;
|
||||
}
|
||||
|
||||
.diff.add {
|
||||
background-color: #0505;
|
||||
}
|
||||
.diff.remove {
|
||||
background-color: #8005;
|
||||
}
|
||||
|
||||
.has-focused .line {
|
||||
filter: blur(0.095rem);
|
||||
}
|
||||
.has-focused .focused {
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -40,12 +40,14 @@
|
|||
--popover-foreground: 0 0% 3.9%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary: 0 0% 80.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted: 0 0% 80.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent: 0 0% 80.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
--additive: 112 50% 36%;
|
||||
--additive-foreground: 0 0% 9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 89.8%;
|
||||
|
|
@ -73,6 +75,8 @@
|
|||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--additive: 112 50% 36%;
|
||||
--additive-foreground: 0 0% 9%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
|
|
@ -100,3 +104,55 @@
|
|||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
code[data-theme*=' '] span {
|
||||
color: var(--shiki-light);
|
||||
}
|
||||
|
||||
.dark code[data-theme*=' '] span {
|
||||
color: var(--shiki-dark);
|
||||
}
|
||||
|
||||
pre {
|
||||
@apply max-h-[600px] overflow-auto rounded-xl border bg-secondary/20 p-4 text-sm leading-loose;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
counter-reset: line;
|
||||
}
|
||||
|
||||
code[data-line-numbers] {
|
||||
counter-reset: line;
|
||||
}
|
||||
|
||||
code[data-line-numbers] > [data-line]::before {
|
||||
counter-increment: line;
|
||||
content: counter(line);
|
||||
@apply mr-4 inline-block w-4 text-right text-muted-foreground;
|
||||
}
|
||||
|
||||
[data-highlighted-line] {
|
||||
@apply !bg-foreground/10;
|
||||
}
|
||||
|
||||
[data-highlighted-chars] > span {
|
||||
@apply rounded-md border !border-muted-foreground/40 !bg-muted p-1 font-semibold;
|
||||
}
|
||||
|
||||
[data-rehype-pretty-code-title] {
|
||||
@apply rounded-t-xl border-x border-t px-4 py-2 text-sm font-medium !text-foreground;
|
||||
}
|
||||
|
||||
[data-rehype-pretty-code-title] + pre {
|
||||
@apply mt-0 rounded-t-none;
|
||||
}
|
||||
|
||||
.diff.add {
|
||||
@apply bg-additive/15;
|
||||
}
|
||||
|
||||
.diff.remove {
|
||||
@apply bg-destructive/15;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
article {
|
||||
@apply prose prose-neutral dark:prose-invert;
|
||||
@apply prose-h1:scroll-m-20 prose-h1:text-4xl prose-h1:font-extrabold prose-h1:tracking-tight prose-h1:lg:text-5xl;
|
||||
@apply prose-h2:mt-10 prose-h2:scroll-m-20 prose-h2:border-b prose-h2:pb-2 prose-h2:text-3xl prose-h2:font-semibold prose-h2:tracking-tight prose-h2:transition-colors prose-h2:first:mt-0;
|
||||
@apply prose-h3:mt-8 prose-h3:scroll-m-20 prose-h3:text-2xl prose-h3:font-semibold prose-h3:tracking-tight;
|
||||
@apply prose-p:leading-7 prose-p:[&:not(:first-child)]:mt-6;
|
||||
@apply prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4;
|
||||
@apply prose-blockquote:mt-6 prose-blockquote:border-l-2 prose-blockquote:pl-6 prose-blockquote:italic;
|
||||
@apply prose-ul:my-6 prose-ul:ml-6 prose-ul:list-disc prose-ul:[&>li]:mt-2;
|
||||
@apply prose-pre:border prose-pre:border-border;
|
||||
@apply prose-img:mx-auto prose-img:my-auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +1,6 @@
|
|||
import type { Config } from 'tailwindcss'
|
||||
import defaultTheme from 'tailwindcss/defaultTheme'
|
||||
|
||||
const disabledCss = {
|
||||
'code::before': false,
|
||||
'code::after': false,
|
||||
'blockquote p:first-of-type::before': false,
|
||||
'blockquote p:last-of-type::after': false,
|
||||
pre: false,
|
||||
code: false,
|
||||
'pre code': false,
|
||||
}
|
||||
|
||||
const config: Config = {
|
||||
darkMode: ['selector'],
|
||||
content: ['./src/**/*.{astro,md,mdx,ts,tsx}'],
|
||||
|
|
@ -52,6 +42,10 @@ const config: Config = {
|
|||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
additive: {
|
||||
DEFAULT: 'hsl(var(--additive))',
|
||||
foreground: 'hsl(var(--additive-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))',
|
||||
|
|
@ -68,11 +62,17 @@ const config: Config = {
|
|||
},
|
||||
},
|
||||
typography: {
|
||||
DEFAULT: { css: disabledCss },
|
||||
sm: { css: disabledCss },
|
||||
lg: { css: disabledCss },
|
||||
xl: { css: disabledCss },
|
||||
'2xl': { css: disabledCss },
|
||||
DEFAULT: {
|
||||
css: {
|
||||
'code::before': 'false',
|
||||
'code::after': 'false',
|
||||
'blockquote p:first-of-type::before': 'false',
|
||||
'blockquote p:last-of-type::after': 'false',
|
||||
pre: 'false',
|
||||
code: 'false',
|
||||
'pre code': 'false',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue