fix: markdown style for the About page

src/components/misc/Markdown.astro

@@ -0,0 +1,100 @@
+---
+interface Props {
+    class: string;
+}
+const className = Astro.props.class;
+---
+<div class=`prose dark:prose-invert prose-sm md: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
+    a
+      position: relative
+      background: none
+      margin: -4px
+      padding: 4px
+      border-radius: 6px
+      color: var(--primary)
+      text-decoration-line: none;
+      /*&: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)
+      &:active
+        background: var(--link-active)
+    /*&:after*/
+    /*  background: var(--link-active)*/
+    code
+      font-family: monospace
+      background: var(--inline-code-bg)
+      color: var(--inline-code-color)
+      padding: 2px 4px
+      border-radius: 4px
+      overflow: hidden
+      &:before
+        content: none
+      &:after
+        content: none
+    pre
+      background: var(--codeblock-bg) !important
+      border-radius: 12px
+      padding-left: 20px
+      padding-right: 20px
+      code
+        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
+      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: 12px
+    hr
+      border-color: var(--line-divider)
+      border-style: dashed
+    iframe
+      border-radius: 12px
+      margin-left: auto
+      margin-right: auto
+      max-width: 100%
+</style>