2024-03-12 12:37:49 +08:00

151 lines
3.8 KiB
Plaintext

---
import '@fontsource-variable/jetbrains-mono';
import '@fontsource-variable/jetbrains-mono/wght-italic.css';
interface Props {
class: string;
}
const className = Astro.props.class;
---
<div data-pagefind-body class=`prose dark:prose-invert prose-base max-w-none custom-md ${className}`>
<!--<div class="prose dark:prose-invert max-w-none custom-md">-->
<!--<div class="max-w-none custom-md">-->
<slot />
</div>
<style lang="stylus" is:global>
.custom-md
h1,h2,h3,h4,h5,h6
.anchor
margin: -0.125rem
margin-left: 0.2ch
padding: 0.125rem
user-select: none
opacity: 0
text-decoration: none
transition: opacity 0.15s ease-in-out, background 0.15s ease-in-out
.anchor-icon
margin-left: 0.45ch
margin-right: 0.45ch
&:hover
.anchor
opacity: 1
a
position: relative
background: none
margin: -0.25rem
padding: 0.25rem
border-radius: 0.375rem
font-weight: 500
color: var(--primary)
text-decoration-line: underline
text-decoration-color: var(--link-underline)
text-decoration-thickness: 0.125rem
text-decoration-style: dashed
text-underline-offset: 0.25rem
/*&:after*/
/* content: ''*/
/* position: absolute*/
/* left: 2px*/
/* right: 2px*/
/* bottom: 4px*/
/* height: 6px*/
/* border-radius: 3px*/
/* background: var(--link-hover)*/
/* transition: background 0.15s ease-in-out;*/
/* z-index: -1;*/
&:hover
background: var(--link-hover)
text-decoration-color: var(--link-hover)
&:active
background: var(--link-active)
text-decoration-color: var(--link-active)
/*&:after*/
/* background: var(--link-active)*/
code
font-family: 'JetBrains Mono Variable',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
background: var(--inline-code-bg)
color: var(--inline-code-color)
padding: 0.125rem 0.25rem
border-radius: 0.25rem
overflow: hidden
counter-reset: line
&:before
content: none
&:after
content: none
span.line
&:before
content: counter(line)
counter-increment: line
direction: rtl
display: inline-block
margin-right: 1rem
width: 1rem
color: rgba(255, 255, 255, 0.25)
pre
background: var(--codeblock-bg) !important
border-radius: 0.75rem
padding-left: 1.25rem
padding-right: 1.25rem
code
color: unset
font-size: 0.875rem
padding: 0
background: none
::selection
background: var(--codeblock-selection)
span.br::selection
background: var(--codeblock-selection)
ul
li
&::marker
color: var(--primary)
ol
li
&::marker
color: var(--primary)
blockquote
font-style: normal
font-weight: inherit
border-left-color: rgba(0,0,0,0)
position: relative;
&:before
content: ''
position: absolute
left: -0.25rem
display: block
transition: background 0.15s ease-in-out;
background: var(--btn-regular-bg)
height: 100%
width: 0.25rem
border-radius: 1rem
p
&:before
content: none
&:after
content: none
img
border-radius: 0.75rem
hr
border-color: var(--line-divider)
border-style: dashed
iframe
border-radius: 0.75rem
margin-left: auto
margin-right: auto
max-width: 100%
</style>
<style lang="css" is:global>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.custom-md h1 {
@apply text-3xl
}
}
</style>