feat(site/blog): adjust and optimize style

qhanw · Oct 10, 2024 · 714dd20 · 714dd20
1 parent e074975
commit 714dd20
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 34 deletions.
diff --git a/site/blog/app/(web)/code-snippets/[slug]/page.tsx b/site/blog/app/(web)/code-snippets/[slug]/page.tsx
@@ -80,7 +80,7 @@ export default async ({ params }: Props) => {
 
   return (
     <>
-      <header className="mb-8 prose prose-gray">
+      <header className="mb-8 prose prose-slate dark:prose-invert">
         <h1 className="slide-enter-50">{post.meta.title}</h1>
 
         <div className="slide-enter-50 opacity-50 -mt-2 flex items-center text-sm">
@@ -93,7 +93,7 @@ export default async ({ params }: Props) => {
             <span className="i-heroicons:calendar mr-1 w-4 h-4 text-brand" />
             <DateFormat value={post.meta?.date} />
           </time>
-          {/* <span className="mx-2 w-0.5 h-0.5 bg-gray-500" /> */}
+          {/* <span className="mx-2 w-0.5 h-0.5 bg-slate-500" /> */}
           <time className="inline-flex items-center ml-2">
             <span className="i-heroicons:clock mr-1 w-4 h-4 text-brand" />
             阅读
@@ -103,11 +103,11 @@ export default async ({ params }: Props) => {
         </div>
       </header>
       {/* <article
-        className="fade-in-up-content prose prose-gray"
+        className="fade-in-up-content prose prose-slate"
         dangerouslySetInnerHTML={{ __html: post.html }}
       /> */}
       <MDXContent source={post.content} />
-      <div className="text-sm text-right text-gray-600">
+      <div className="text-sm text-right text-slate-600">
         最近修改时间：
         <DateFormat value={post.meta.lastModified} />
       </div>
@@ -116,7 +116,7 @@ export default async ({ params }: Props) => {
           {prev && (
             <Link
               href={prev.slug}
-              className="inline-flex items-center min-w-0 no-underline text-gray-600 hover:text-gray-800 ease-out"
+              className="inline-flex items-center min-w-0 no-underline text-slate-600 hover:text-slate-800 dark:hover:text-slate-300 ease-out"
             >
               <span className="i-heroicons:chevron-left mr-1 h-4 w-4" />
               <span className="truncate flex-1">{prev.title}</span>
@@ -127,7 +127,7 @@ export default async ({ params }: Props) => {
           {next && (
             <Link
               href={next.slug}
-              className="inline-flex items-center min-w-0 no-underline text-gray-600 hover:text-gray-800 ease-out"
+              className="inline-flex items-center min-w-0 no-underline text-slate-600 hover:text-slate-800 dark:hover:text-slate-300 ease-out"
             >
               <span className="truncate flex-1">{next.title}</span>
 

diff --git a/site/blog/app/(web)/code-snippets/page.tsx b/site/blog/app/(web)/code-snippets/page.tsx
@@ -16,7 +16,7 @@ export default async function Projects() {
   return (
     <>
       <div className="prose grid gap-2 m-auto">
-        <div className="uppercase py-1 mb-8 -mt-8 text-sm font-medium tracking-widest text-gray-400">
+        <div className="uppercase py-1 mb-8 -mt-8 text-sm font-medium tracking-widest text-slate-400">
           Total {posts?.length} Code Snippets
         </div>
         {posts?.map((post: any) => (
@@ -25,7 +25,7 @@ export default async function Projects() {
             className="group font-normal overflow-hidden cursor-pointer no-underline transition fade-in-up "
             key={post.slug}
           >
-            <div className=" text-gray-600 group-hover:text-brand truncate ease-in duration-300">
+            <div className=" text-slate-600 dark:text-slate-400 group-hover:text-brand truncate ease-in duration-300">
               {post.meta?.title}
             </div>
           </Link>

diff --git a/site/blog/app/(web)/components/Header.tsx b/site/blog/app/(web)/components/Header.tsx
@@ -95,7 +95,7 @@ export default () => (
                 className="flex-shrink-0 h-4 w-4 "
                 aria-hidden="true"
               />
-              <span className="hidden md:flex text-gray-500 hover:text-gray-900">
+              <span className="hidden md:flex text-slate-500 hover:text-slate-900 dark:hover:text-slate-200">
                 {item.name}
               </span>
             </Link>

diff --git a/site/blog/app/(web)/components/ScrollTop.tsx b/site/blog/app/(web)/components/ScrollTop.tsx
@@ -12,8 +12,10 @@ export default function ScrollTop() {
     <span
       onClick={toTop}
       className={clsx(
-        "fixed z-40 right-8 bottom-8 rounded-full w-10 h-10 bg-gray-50 flex items-center justify-center text-gray-400 transition ease-in-out  hover:bg-gray-100 hover:text-gray-500",
-        { "opacity-80 cursor-pointer": y > 300, "opacity-0": y < 300 }
+        `fixed z-40 right-8 bottom-8 rounded-full w-10 h-10 bg-slate-50 flex items-center justify-center text-slate-400 transition ease-in-out 
+         hover:bg-slate-100 hover:text-slate-500
+         dark:bg-slate-700 dark:hover:bg-slate-600`,
+        { "opacity-80 cursor-pointer": y > 300, "opacity-0": y < 300 },
       )}
     >
       <i className="i-heroicons:arrow-small-up" />

diff --git a/site/blog/app/(web)/components/Theme.tsx b/site/blog/app/(web)/components/Theme.tsx
@@ -9,7 +9,7 @@ export default function Theme() {
   return (
     <a
       onClick={() => setTheme(isDark ? "light" : "dark")}
-      className="text-slate-800 dark:text-white cursor-pointer"
+      className="text-slate-600 dark:text-slate-200 cursor-pointer"
     >
       <i className={isDark ? "i-ri:sun-fill" : "i-ri:moon-fill"} />
     </a>

diff --git a/site/blog/app/(web)/page.tsx b/site/blog/app/(web)/page.tsx
@@ -17,10 +17,10 @@ export default function Home() {
       <div className="text-3xl mb-2">
         <span className="i-ri:quill-pen-line text-brand" />
       </div>
-      <div className="text-gray-600 tracking-tight max-w-5xl">
+      <div className="text-slate-600 tracking-tight max-w-5xl dark:text-slate-300">
         专注于前端的全栈工程师，参与工作距今已经有十多年，有着丰富的2B系统开发及架构经验。早年从事UI设计工作，因此对用户体验及交互上具有一定的把控。目前主要以前端开发为主，对服务端技术如：Node.js、Next.js、NestJS也具备一定的掌握。擅长以React为核心的各类技术栈进行软件开发，喜欢工程化方面领域，喜欢交互设计。
       </div>
-      <ul className="mt-4 text-gray-400 font-light">
+      <ul className="mt-4 text-slate-400 font-light">
         <li>
           🎉
           技术栈包括：React、Next.js、Node.js、Wagmi、Viem、Electron、TypeScript、Sass、UnoCSS、Tailwind CSS等。
@@ -41,7 +41,7 @@ export default function Home() {
             width={120}
             height={120}
             alt="qr code"
-            className="opacity-60 grayscale mt-1"
+            className="opacity-60 mt-1 dark:invert"
           />
         </li>
       </ul>

diff --git a/site/blog/app/(web)/posts/[slug]/page.tsx b/site/blog/app/(web)/posts/[slug]/page.tsx
@@ -80,7 +80,7 @@ export default async ({ params }: Props) => {
 
   return (
     <>
-      <header className="mb-8 prose prose-gray">
+      <header className="mb-8 prose prose-slate dark:prose-invert">
         <h1 className="slide-enter-50">{post.meta.title}</h1>
 
         <div className="slide-enter-50 opacity-50 -mt-2 flex items-center text-sm">
@@ -93,7 +93,7 @@ export default async ({ params }: Props) => {
             <span className="i-heroicons:calendar mr-1 w-4 h-4 text-brand" />
             <DateFormat value={post.meta?.date} />
           </time>
-          {/* <span className="mx-2 w-0.5 h-0.5 bg-gray-500" /> */}
+          {/* <span className="mx-2 w-0.5 h-0.5 bg-slate-500" /> */}
           <time className="inline-flex items-center ml-2">
             <span className="i-heroicons:clock mr-1 w-4 h-4 text-brand" />
             阅读
@@ -103,11 +103,11 @@ export default async ({ params }: Props) => {
         </div>
       </header>
       {/* <article
-        className="fade-in-up-content prose prose-gray"
+        className="fade-in-up-content prose prose-slate"
         dangerouslySetInnerHTML={{ __html: post.html }}
       /> */}
       <MDXContent source={post.content} />
-      <div className="text-sm text-right text-gray-600">
+      <div className="text-sm text-right text-slate-600">
         最近修改时间：
         <DateFormat value={post.meta.lastModified} />
       </div>
@@ -116,7 +116,7 @@ export default async ({ params }: Props) => {
           {prev && (
             <Link
               href={prev.slug}
-              className="inline-flex items-center min-w-0 no-underline text-gray-600 hover:text-gray-800 ease-out"
+              className="inline-flex items-center min-w-0 no-underline text-slate-600 hover:text-slate-800 dark:hover:text-slate-300 ease-out"
             >
               <span className="i-heroicons:chevron-left mr-1 h-4 w-4" />
               <span className="truncate flex-1">{prev.title}</span>
@@ -127,7 +127,7 @@ export default async ({ params }: Props) => {
           {next && (
             <Link
               href={next.slug}
-              className="inline-flex items-center min-w-0 no-underline text-gray-600 hover:text-gray-800 ease-out"
+              className="inline-flex items-center min-w-0 no-underline text-slate-600 hover:text-slate-800 dark:hover:text-slate-300 ease-out"
             >
               <span className="truncate flex-1">{next.title}</span>
 

diff --git a/site/blog/app/(web)/posts/page.tsx b/site/blog/app/(web)/posts/page.tsx
@@ -18,7 +18,7 @@ export default async function Posts() {
 
   return (
     <>
-      <div className="uppercase py-1 mb-8 -mt-8 text-sm text-center font-medium tracking-widest text-gray-400">
+      <div className="uppercase py-1 mb-8 -mt-8 text-sm text-center font-medium tracking-widest text-slate-400">
         Total {posts?.length} Posts
       </div>
       <div className="prose grid gap-9 m-auto">
@@ -28,10 +28,10 @@ export default async function Posts() {
             className="group font-normal overflow-hidden cursor-pointer no-underline transition fade-in-up "
             key={post.slug}
           >
-            <div className="text-xl text-gray-600 group-hover:text-brand truncate ease-in duration-300">
+            <div className="text-xl text-slate-600 dark:text-slate-300 group-hover:text-brand truncate ease-in duration-300">
               {post.meta?.title}
             </div>
-            <div className="text-gray-400 text-sm leading-none flex items-center">
+            <div className="text-slate-400 text-sm leading-none flex items-center">
               {post.meta.draft ? (
                 <span className="opacity-50 text-sm border border-orange-300 bg-orange-200 text-orange-600 rounded-sm px-1 mr-2">
                   Draft
@@ -41,14 +41,14 @@ export default async function Posts() {
                 <span className="i-heroicons:calendar mr-1 w-4 h-4 text-brand" />
                 <DateFormat value={post.meta?.date} short />
               </time>
-              <span className="mx-2 w-0.5 h-0.5 bg-gray-400" />
+              <span className="mx-2 w-0.5 h-0.5 bg-slate-400" />
               {/* {post.meta.category} */}
               {post.meta?.tags.slice(0, 3).map((tag: string) => (
                 <PostLabel title={tag} key={tag} />
               ))}
             </div>
 
-            <div className="text-gray-500 line-clamp-3">
+            <div className="text-slate-500 line-clamp-3">
               {post.meta.description || post.excerpt}
             </div>
           </Link>

diff --git a/site/blog/app/(web)/projects/page.tsx b/site/blog/app/(web)/projects/page.tsx
@@ -17,21 +17,21 @@ export default function Projects() {
   return (
     <>
       {/* text-transparent text-stroke-2 text-stroke-hex-aaa */}
-      <div className="text-3xl text-center font-semibold opacity-30 mb-8 mx-auto">
+      <div className="text-3xl text-center font-semibold opacity-30 mb-8 mx-auto text-slate-800 dark:text-slate-100">
         Projects
       </div>
       <div className="grid gap-4 prose mx-auto">
         {projects.map((proj) => (
           <ProjWrapper
             key={proj.key}
-            className="flex relative rounded-xl p-6 text-sm leading-6 transition bg-gray-50 overflow-hidden ease-in duration-300 fade-in-up"
+            className="flex relative rounded-xl p-6 text-sm leading-6 transition bg-slate-50 dark:bg-slate-700 overflow-hidden ease-in duration-300 fade-in-up"
             href={proj.href}
           >
-            <div className="flex flex-col -space-y-1.5 text-gray-400 pr-6 pt-1 group-hover:text-brand group-hover/show:text-brand">
+            <div className="flex flex-col -space-y-1.5 text-slate-400 pr-6 pt-1 group-hover:text-brand group-hover/show:text-brand">
               {proj.icons?.map((c, i) => (
                 <span
                   key={c + i}
-                  className="w-7 h-7 rounded-full bg-gray-100 ring-2 ring-white inline-flex items-center justify-center"
+                  className="w-7 h-7 rounded-full bg-slate-100 ring-2 ring-white inline-flex items-center justify-center dark:bg-slate-800 dark:ring-slate-600"
                 >
                   <span
                     className={`${c} ease-in duration-300`}
@@ -48,10 +48,10 @@ export default function Projects() {
             <div className="flex-1">
               <button className="flex gap-2 transition items-center">
                 <span className="absolute inset-0 rounded-xl"></span>
-                <span className="text-lg text-gray-600 group-hover:text-brand ease-in duration-300">
+                <span className="text-lg text-slate-600 dark:text-slate-400 group-hover:text-brand ease-in duration-300">
                   {proj.name}
                 </span>
-                {/* <span className="text-gray-400 flex gap-1 items-center grayscale group-hover:grayscale-0 group-hover/show:grayscale-0">
+                {/* <span className="text-slate-400 flex gap-1 items-center grayscale group-hover:grayscale-0 group-hover/show:grayscale-0">
                   {proj.icons?.map((c, i) => (
                     <span
                       key={c + i}
@@ -68,7 +68,7 @@ export default function Projects() {
                 </span> */}
               </button>
 
-              <p className="mt-1 text-gray-500">{proj.desc}</p>
+              <p className="mt-1 text-slate-500">{proj.desc}</p>
               <div className="flex items-center mt-2 text-brand font-semibold">
                 {proj.sub_href ? <AdmLink href={proj.sub_href} /> : null}
 

diff --git a/site/blog/app/styles/globals.scss b/site/blog/app/styles/globals.scss
@@ -746,12 +746,12 @@
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
-  background-color: #eee;
 }
 
 /*定义滚动条轨道 */
 ::-webkit-scrollbar-track {
   background-color: #eee;
+  border-radius: 4px;
 }
 
 /*定义滑块 */
@@ -760,6 +760,18 @@
   border-radius: 4px;
 }
 
+.dark {
+  /*定义滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    @apply bg-slate-600;
+  }
+
+  /*定义滑块 */
+  ::-webkit-scrollbar-thumb {
+    @apply bg-slate-700;
+  }
+}
+
 /*  */
 
 .logo-rotate {