feat: mobile style improvements

src/components/misc/Markdown.astro

@@ -5,7 +5,7 @@ interface Props {
 }
 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 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 />
@@ -15,9 +15,9 @@ const className = Astro.props.class;
   .custom-md
     h1,h2,h3,h4,h5,h6
       .anchor
-        margin: -2px
+        margin: -0.125rem
         margin-left: 0.2ch
-        padding: 2px
+        padding: 0.125rem
         user-select: none
         opacity: 0
         transition: opacity 0.15s ease-in-out, background 0.15s ease-in-out
@@ -30,9 +30,9 @@ const className = Astro.props.class;
     a
       position: relative
       background: none
-      margin: -4px
-      padding: 4px
-      border-radius: 6px
+      margin: -0.25rem
+      padding: 0.25rem
+      border-radius: 0.375rem
       color: var(--primary)
       text-decoration-line: none;
       /*&:after*/
@@ -56,8 +56,8 @@ const className = Astro.props.class;
       font-family: JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
       background: var(--inline-code-bg)
       color: var(--inline-code-color)
-      padding: 2px 4px
-      border-radius: 4px
+      padding: 0.125rem 0.25rem
+      border-radius: 0.25rem
       overflow: hidden
       &:before
         content: none
@@ -65,9 +65,9 @@ const className = Astro.props.class;
         content: none
     pre
       background: var(--codeblock-bg) !important
-      border-radius: 12px
-      padding-left: 20px
-      padding-right: 20px
+      border-radius: 0.75rem
+      padding-left: 1.25rem
+      padding-right: 1.25rem
       code
         color: unset
         font-size: 0.875rem
@@ -106,13 +106,27 @@ const className = Astro.props.class;
         &:after
           content: none
     img
-      border-radius: 12px
+      border-radius: 0.75rem
     hr
       border-color: var(--line-divider)
       border-style: dashed
     iframe
-      border-radius: 12px
+      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>