From 8a67a179cb76a198316c402ab0def25eb9393920 Mon Sep 17 00:00:00 2001
From: ChenKS12138 <chenks12138@gmail.com>
Date: Sun, 24 Dec 2023 19:06:02 +0800
Subject: [PATCH] feat: beautify css

---
 src/components/ArticleWrapper.vue |   6 +-
 src/pages/index.vue               |   6 +-
 src/styles/github-markdown.css    | 101 +++++++++++++++---------------
 unocss.config.ts                  |   5 +-
 4 files changed, 61 insertions(+), 57 deletions(-)

diff --git a/src/components/ArticleWrapper.vue b/src/components/ArticleWrapper.vue
index 6bd1fe23..a26a4508 100644
--- a/src/components/ArticleWrapper.vue
+++ b/src/components/ArticleWrapper.vue
@@ -16,13 +16,13 @@ useHead({
 </script>
 
 <template>
-    <div class="h-70 -mt-70 flex flex-col items-center text-white">
+    <div class="h-55 -mt-55 flex flex-col items-center text-white">
         <div class="font-bold text-3xl">{{ frontmatter.title }}</div>
         <div class="text-lg mt-2">{{ dayjs(frontmatter.date).format('YYYY-MM-DD') }}</div>
         <div class="mt-2 italic">{{ (frontmatter.tags || []).map(x => `#${x}`).join(' ') }}</div>
     </div>
     <slot></slot>
-    <div class="rounded bg-gray mt-10 p-1 text-white italic indent-md text-lg">
+    <!-- <div class="rounded bg-gray mt-10 p-1 text-white italic indent-md text-lg">
         CC BY-SA 3.0协议 。转载请注明出处!
-    </div>
+    </div> -->
 </template>
\ No newline at end of file
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 856ad2e5..85498409 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -61,17 +61,17 @@ html.dark .article-item:not(:last-child) {
 
 
 .article-item-title {
-    @apply color-black text-2xl mb-2;
+    @apply color-black text-2xl mb-2 dark:color-white;
 }
 
 .article-item-brief {
-    @apply leading-6;
+    @apply leading-6 dark:color-text-gray;
     word-wrap: break-word;
     word-break: break-all;
 }
 
 .article-item-meta {
-    @apply: mt-2;
+    @apply: mt-2 dark:color-text-gray;
 }
 
 .text--link {
diff --git a/src/styles/github-markdown.css b/src/styles/github-markdown.css
index be54ed2b..cce4c083 100644
--- a/src/styles/github-markdown.css
+++ b/src/styles/github-markdown.css
@@ -33,63 +33,64 @@ html.dark .markdown-body {
   --color-fg-default: #c9d1d9;
   --color-fg-muted: #8b949e;
   --color-fg-subtle: #484f58;
-  --color-canvas-default: #0d1117;
+  --color-canvas-default: rgb(44, 47, 50);
   --color-canvas-subtle: #161b22;
   --color-border-default: #30363d;
-  --color-border-muted: #21262d;
+  --color-border-muted: #adadad;
   --color-neutral-muted: rgba(110, 118, 129, 0.4);
   --color-accent-fg: #58a6ff;
   --color-accent-emphasis: #1f6feb;
   --color-attention-subtle: rgba(187, 128, 9, 0.15);
   --color-danger-fg: #f85149;
 }
+html.dark .markdown-body pre {
+  filter: invert(1);
+}
 
-@media (prefers-color-scheme: light) {
-  .markdown-body {
-    color-scheme: light;
-    --color-prettylights-syntax-comment: #6e7781;
-    --color-prettylights-syntax-constant: #0550ae;
-    --color-prettylights-syntax-entity: #8250df;
-    --color-prettylights-syntax-storage-modifier-import: #24292f;
-    --color-prettylights-syntax-entity-tag: #116329;
-    --color-prettylights-syntax-keyword: #cf222e;
-    --color-prettylights-syntax-string: #0a3069;
-    --color-prettylights-syntax-variable: #953800;
-    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
-    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
-    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
-    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
-    --color-prettylights-syntax-carriage-return-bg: #cf222e;
-    --color-prettylights-syntax-string-regexp: #116329;
-    --color-prettylights-syntax-markup-list: #3b2300;
-    --color-prettylights-syntax-markup-heading: #0550ae;
-    --color-prettylights-syntax-markup-italic: #24292f;
-    --color-prettylights-syntax-markup-bold: #24292f;
-    --color-prettylights-syntax-markup-deleted-text: #82071e;
-    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
-    --color-prettylights-syntax-markup-inserted-text: #116329;
-    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
-    --color-prettylights-syntax-markup-changed-text: #953800;
-    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
-    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
-    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
-    --color-prettylights-syntax-meta-diff-range: #8250df;
-    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
-    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
-    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
-    --color-fg-default: #24292f;
-    --color-fg-muted: #57606a;
-    --color-fg-subtle: #6e7781;
-    --color-canvas-default: #ffffff;
-    --color-canvas-subtle: #f6f8fa;
-    --color-border-default: #d0d7de;
-    --color-border-muted: hsla(210, 18%, 87%, 1);
-    --color-neutral-muted: rgba(175, 184, 193, 0.2);
-    --color-accent-fg: #0969da;
-    --color-accent-emphasis: #0969da;
-    --color-attention-subtle: #fff8c5;
-    --color-danger-fg: #cf222e;
-  }
+.markdown-body {
+  color-scheme: light;
+  --color-prettylights-syntax-comment: #6e7781;
+  --color-prettylights-syntax-constant: #0550ae;
+  --color-prettylights-syntax-entity: #8250df;
+  --color-prettylights-syntax-storage-modifier-import: #24292f;
+  --color-prettylights-syntax-entity-tag: #116329;
+  --color-prettylights-syntax-keyword: #cf222e;
+  --color-prettylights-syntax-string: #0a3069;
+  --color-prettylights-syntax-variable: #953800;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+  --color-prettylights-syntax-carriage-return-bg: #cf222e;
+  --color-prettylights-syntax-string-regexp: #116329;
+  --color-prettylights-syntax-markup-list: #3b2300;
+  --color-prettylights-syntax-markup-heading: #0550ae;
+  --color-prettylights-syntax-markup-italic: #24292f;
+  --color-prettylights-syntax-markup-bold: #24292f;
+  --color-prettylights-syntax-markup-deleted-text: #82071e;
+  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+  --color-prettylights-syntax-markup-inserted-text: #116329;
+  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+  --color-prettylights-syntax-markup-changed-text: #953800;
+  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
+  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+  --color-prettylights-syntax-meta-diff-range: #8250df;
+  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+  --color-fg-default: #24292f;
+  --color-fg-muted: #57606a;
+  --color-fg-subtle: #6e7781;
+  --color-canvas-default: #ffffff;
+  --color-canvas-subtle: #f6f8fa;
+  --color-border-default: #d0d7de;
+  --color-border-muted: #21262d;
+  --color-neutral-muted: rgba(175, 184, 193, 0.2);
+  --color-accent-fg: #0969da;
+  --color-accent-emphasis: #0969da;
+  --color-attention-subtle: #fff8c5;
+  --color-danger-fg: #cf222e;
 }
 
 .markdown-body {
@@ -169,7 +170,7 @@ html.dark .markdown-body {
   margin: 0.67em 0;
   font-weight: 600;
   padding-bottom: 0.3em;
-  font-size: 2em;
+  font-size: 1.8em;
   border-bottom: 1px solid var(--color-border-muted);
 }
 
@@ -882,7 +883,7 @@ html.dark .markdown-body {
 
 .markdown-body code,
 .markdown-body tt {
-  padding: 0.2em 0.4em;
+  /* padding: 0.2em 0.4em; */
   margin: 0;
   font-size: 85%;
   background-color: var(--color-neutral-muted);
diff --git a/unocss.config.ts b/unocss.config.ts
index 3afb0cb3..a036017d 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -25,7 +25,10 @@ export default defineConfig({
       'color-text-comm', { color: 'rgb(60, 72, 88)' },
     ],
     [
-      'color-bg-dark', { 'background-color': 'rgb(13,17,23)' },
+      'color-text-gray', { color: '#adadad' },
+    ],
+    [
+      'color-bg-dark', { 'background-color': 'rgb(44,47,50)' },
     ],
     [
       'color-border-gray', { 'border-color': 'rgba(0,0,0,0.5)' },