z0x/blog.z0x.ca
Code Actions

fix: layer directives

Browse source
This commit is contained in:
enscribe 2024-09-11 12:31:49 -07:00
parent 0cf5cf226c
commit 1012f562ff
No known key found for this signature in database
GPG key ID: 9BBD5C4114E25322
10 changed files with 143 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/styles/codeblocks.css
View file

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

62
src/styles/global.css
View file

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

18
src/styles/typography.css
View file

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