调整 quote和行内代码块的样式

Author: CatCodeMe

src/assets/styles/app.css

@@ -82,21 +82,34 @@ starlight-tabs {
   margin-top: .5em;
 }
 
-/* inline code css , config font in uno.config.ts*/
+/* Inline code styles */
 .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *)) {
-  border-radius: .25rem;
-  padding: .15rem;
-  --un-bg-opacity: .13;
-  background-color: hsl(var(--foreground) / var(--un-bg-opacity)) !important;
+  font-size: 0.9em !important;
+  font-weight: 500 !important;
+  border-radius: 0.25rem !important;
+  padding: 0.1rem 0.35rem !important;
+  border: 1px solid hsl(var(--border)) !important;
+  background-color: hsl(45 25% 92%) !important;
+  background-image: 
+    repeating-linear-gradient(45deg, transparent, transparent 2px, hsl(45 20% 88%) 2px, hsl(45 20% 88%) 4px),
+    repeating-linear-gradient(-45deg, transparent, transparent 2px, hsl(45 20% 88%) 2px, hsl(45 20% 88%) 4px) !important;
   color: hsl(var(--foreground)) !important;
+  display: inline-block !important;
+  box-decoration-break: clone !important;
+  -webkit-box-decoration-break: clone !important;
+  line-height: 1.6 !important;
   &::before, &::after {
     content: '' !important;
   }
 }
 
 html.dark .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *)) {
-  background-color: rgba(220, 220, 220, 0.13) !important;
-  color: #f8fafc;
+  border-color: hsl(var(--border)) !important;
+  background-color: hsl(30 15% 18%) !important;
+  background-image: 
+    repeating-linear-gradient(45deg, transparent, transparent 2px, hsl(30 12% 22%) 2px, hsl(30 12% 22%) 4px),
+    repeating-linear-gradient(-45deg, transparent, transparent 2px, hsl(30 12% 22%) 2px, hsl(30 12% 22%) 4px) !important;
+  color: hsl(var(--foreground)) !important;
 }
 
 /* Reading progress bar using modern CSS scroll-driven animations */

uno.config.ts

@@ -6,12 +6,18 @@ const bgMuted = 'hsl(var(--muted) / var(--un-bg-opacity, 1))'
 
 const typographyConfig = {
   cssExtend: {
-    // 覆盖 UnoCSS reset 中的默认 monospace 字体
+    // Code styles
     'code, kbd, samp, pre': {
-      'font-family': '"Noto Serif CJK", "Input Mono", "Fira Code", "Consolas", "Monaco", monospace',
+      'font-family': '"Noto Serif CJK", "Input Mono", "Fira Code", "Consolas", "Monaco", monospace'
+    },
+    'pre code': {
       'font-size': '1.015em',
       'font-weight': '600'
     },
+    'code:not(pre code)': {
+      // 解决 inline code 在长单词时换行的问题
+      'word-break': 'break-all!important'
+    },
     details: {
       margin: '0',
       padding: '0'
@@ -40,24 +46,29 @@ const typographyConfig = {
     // Blockquote
     blockquote: {
       position: 'relative',
-      overflow: 'hidden',
+      overflow: 'visible',
       'border-width': '1px',
       'border-left': 'inherit',
       'border-radius': 'var(--radius)',
       'padding-inline': '1.6rem',
-      'box-shadow': '0 5px 0 ' + bgMuted
+      'font-style': 'normal'
     },
-    'blockquote::after': {
+    'blockquote::before': {
       color: fgMuted,
       position: 'absolute',
-      content: '"”"',
-      top: '2.6rem',
-      right: '-1.4rem',
-      'font-size': '10rem',
-      'font-family':
-        '"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif',
-      transform: 'rotate(-15deg)',
-      opacity: '0.1'
+      content: '"\\201C"',
+      top: '0',
+      left: '0.5rem',
+      'font-size': '4rem',
+      'font-family': 'serif',
+      'line-height': '1',
+      opacity: '0.3',
+      'pointer-events': 'none',
+      'z-index': '0'
+    },
+    'blockquote p': {
+      position: 'relative',
+      'z-index': '1'
     },
     // Table
     table: {