style: 内容样式优化

wujieli0207 · May 3, 2024 · fdfc1e8 · fdfc1e8
1 parent 01e1593
commit fdfc1e8
Show file tree

Hide file tree

Showing 9 changed files with 240 additions and 187 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,6 +1,6 @@
 import siteMetadata from '@/data/siteMetadata'
 import headerNavLinks from '@/data/headerNavLinks'
-import Logo from '@/data/logo.svg'
+import Logo from '@/components/Logo'
 import Link from './Link'
 import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
@@ -16,9 +16,7 @@ const Header = () => {
               <Logo />
             </div>
             {typeof siteMetadata.headerTitle === 'string' ? (
-              <div className="hidden text-2xl font-semibold sm:block">
-                {siteMetadata.headerTitle}
-              </div>
+              <div className="text-xl font-semibold sm:text-2xl">{siteMetadata.headerTitle}</div>
             ) : (
               siteMetadata.headerTitle
             )}

diff --git a/components/Logo.tsx b/components/Logo.tsx
@@ -0,0 +1,68 @@
+export default function Logo() {
+  return (
+    <svg
+      className={`h-6 w-6 sm:h-8 sm:w-8`}
+      viewBox="0 0 512 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        id="r4"
+        width="512"
+        height="512"
+        x="0"
+        y="0"
+        rx="128"
+        fill="url(#r5)"
+        stroke="#FFFFFF"
+        strokeWidth="0"
+        strokeOpacity="100%"
+        paintOrder="stroke"
+      ></rect>
+      <clipPath id="clip">
+        <use></use>
+      </clipPath>
+      <defs>
+        <linearGradient
+          id="r5"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="rotate(45)"
+          style={{ transformOrigin: 'center center' }}
+        >
+          <stop stop-color="#A8C0FF"></stop>
+          <stop offset="1" stop-color="#3F2B96"></stop>
+        </linearGradient>
+        <radialGradient
+          id="r6"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(256) rotate(90) scale(512)"
+        >
+          <stop stop-color="white"></stop>
+          <stop offset="1" stop-color="white" stop-opacity="0"></stop>
+        </radialGradient>
+      </defs>
+      <svg
+        className="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="23908"
+        width="352"
+        height="352"
+        x="80"
+        y="80"
+        alignment-baseline="middle"
+        style={{ color: '#ffffff' }}
+      >
+        <path
+          d="M301.99296 928.77824c4.66944-56.03328 14.47424-121.87648 29.41952-197.52448a14750.68928 14750.68928 0 0 0 43.42784-196.1216l5.60128 8.40704c3.7376-19.6096 8.40704-34.56 14.00832-44.83072 0 14.00832-3.7376 31.2832-11.20768 51.83488-10.27072 26.14784-15.872 43.42784-16.80896 51.82976-31.75424 159.70304-47.63136 253.09184-47.63136 280.17664 0 21.4784-5.60128 36.8896-16.80896 46.22848z m-47.63136-273.17248a410.86976 410.86976 0 0 1 15.4112-112.06656l2.80064 1.39776c0 37.36064-6.0672 74.25024-18.21184 110.6688z m7.00416 9.80992l8.40704-72.84736h2.80064l-11.20768 72.84736z m-19.95264 90.89024l-1.23392-0.59392-1.1776-5.9392 0.03072-0.74752c0.3584-7.86944 1.9968-17.85856 4.90496-29.96224l1.32096-5.31968c4.1984-16.34304 6.30272-28.25216 6.30272-35.72224l1.40288 1.40288-11.55072 76.88192z m-2.08896-1.03424l-1.31584-0.65536-4.6592-3.74784-1.39776-4.20352 1.39776-2.80064 5.6064 5.60128 0.0512 0.3072-0.0512 2.49344 0.36864 3.00544z m-29.78816 193.11616h-7.00416c3.7376-15.872 8.40704-46.6944 14.00832-92.45696 4.66944-38.28736 10.27072-68.63872 16.80896-91.05408-12.13952 81.2544-20.07552 142.42304-23.81312 183.51104z m79.85152-46.22848l8.40192-30.81728 1.40288 5.60128-9.8048 25.216z m31.80032 105.40544l0.27136-0.93184c1.65376-4.89472 4.03968-8.89856 7.15264-12.01152 4.66944-4.66944 31.2832-10.74176 79.8464-18.21184 43.89376-6.53824 73.3184-9.80992 88.25856-9.80992l2.80064-2.80064c1.8688 0.93696 4.1984 2.80064 7.00416 5.6064l4.1984 1.39776c49.50016-4.66944 86.85568-7.936 112.0768-9.8048 1.86368 0 20.54144-3.7376 56.03328-11.20768 23.3472-5.60128 42.02496-8.40704 56.03328-8.40704 14.00832 0 23.81312 2.33472 29.41952 7.00416a516.1984 516.1984 0 0 0 40.62208-12.60544c16.81408-5.60128 28.9536-12.13952 36.42368-19.6096-34.55488-34.56-64.44032-51.83488-89.6512-51.83488-32.6912 0-63.04256 7.00416-91.0592 21.01248-8.40704 0-18.67776 1.8688-30.8224 5.6064-15.872 3.7376-25.68192 6.0672-29.4144 7.00416-108.3392 17.7408-189.58848 26.61376-243.75296 26.61376h-2.80064c5.60128-128.88064 34.08384-277.8368 85.4528-446.8736 13.07136-42.03008 19.6096-63.9744 19.6096-65.8432l-5.60128-2.80576c6.53824-20.54144 11.6736-36.8896 15.4112-49.02912l-2.80576-11.20768c12.13952-34.55488 19.6096-61.16864 22.41536-79.8464 14.00832-38.29248 25.216-67.24096 33.61792-86.85568 0.93696 3.7376 1.40288 7.4752 1.40288 11.20768 14.94528-36.42368 23.3472-56.03328 25.216-58.83904C537.33888 65.37216 517.26336 20.54656 488.30976 0h-2.80064c-7.4752 0-12.61056 0.46592-15.4112 1.40288l-1.40288 4.1984L458.89024 0 451.8912 2.80064l-2.80064 7.00416c-4.66944-0.93184-7.936-2.33472-9.8048-4.1984v2.80064c-5.6064-0.93696-9.5744-1.40288-11.90912-1.40288-2.33472 0-3.50208-1.40288-3.50208-4.1984-26.14784 0-46.2336 8.3968-60.2368 25.21088-22.41536 27.0848-42.496 83.11808-60.2368 168.10496a12303.872 12303.872 0 0 1-29.41952 182.1184c-4.66944 27.07968-15.4112 75.17696-32.22016 144.2816-14.94528 59.776-24.28416 107.40224-28.01664 142.89408-6.53824 58.83392-11.2128 105.99936-14.00832 141.48608-7.4752 28.9536-11.2128 67.70688-11.2128 116.2752l2.80576 2.80064 1.40288 5.60128-2.80576 8.40704c0 10.27072 1.40288 17.27488 4.20352 21.01248l-0.03072-0.01536L184.32 953.99424v4.1984c0 0.93696 0.70144 3.2768 2.0992 7.00928 1.40288 3.7376 2.57024 6.0672 3.50208 7.00416l2.80576 7.00416c9.33888 5.60128 22.17984 8.17152 38.52288 7.7056 16.34304-0.47104 27.78112 1.16736 34.31936 4.89984l-1.39776 14.00832 7.00416-7.00416h1.39776l2.80576-1.39776h4.1984c1.8688 1.8688 3.7376 4.1984 5.6064 7.00416l-5.6064 8.40192a1937.6896 1937.6896 0 0 1 15.4112-19.6096c2.80064 0 5.60128 0.46592 8.40704 1.40288L295.00928 1024l3.0976-4.62336c5.04832-7.5264 9.38496-13.86496 13.0048-19.01056l2.08896-2.944 2.80064-1.40288 5.6064 5.6064-0.41984 5.9392z m-43.01312-236.672l0.256-2.36032c0.89088-7.77216 2.10432-16.64 3.64032-26.58816l0.72704-4.64384 6.58944-10.25024-6.4512 9.2928 0.09216-0.50176c0.3328-2.07872 0.68096-4.1984 1.03936-6.36416l1.11616-6.62528c8.40192-48.5632 13.07136-76.11392 14.00832-82.65216l-9.8048 35.0208c8.40192-45.76256 14.94016-85.91872 19.6096-120.4736 3.7376-6.53824 8.87296-11.2128 15.4112-14.00832l11.20768-37.82656c0 13.07648-4.66944 38.29248-14.00832 75.648-9.33888 42.02496-14.94528 69.5808-16.81408 82.65216-13.07136 126.08-28.48256 219.4688-46.22848 280.17152l-7.00416 1.40288c-0.93184-7.4752-1.39776-14.00832-1.39776-19.6096 0-61.6448 8.86784-119.07584 26.61376-172.30848l1.40288 8.40192-0.00512 11.6224z"
+          fill="#ffffff"
+          p-id="23909"
+        ></path>
+      </svg>
+    </svg>
+  )
+}
diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
@@ -26,7 +26,7 @@ const MobileNav = () => {
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
           fill="currentColor"
-          className="h-8 w-8 text-gray-900 dark:text-gray-100"
+          className="h-5 w-5 text-gray-900 dark:text-gray-100"
         >
           <path
             fillRule="evenodd"

diff --git a/components/SearchButton.tsx b/components/SearchButton.tsx
@@ -18,7 +18,7 @@ const SearchButton = () => {
           viewBox="0 0 24 24"
           strokeWidth={1.5}
           stroke="currentColor"
-          className="h-6 w-6 text-gray-900 dark:text-gray-100"
+          className="h-5 w-5 text-gray-900 dark:text-gray-100 sm:h-6 sm:w-6"
         >
           <path
             strokeLinecap="round"

diff --git a/components/SectionContainer.tsx b/components/SectionContainer.tsx
@@ -6,6 +6,6 @@ interface Props {
 
 export default function SectionContainer({ children }: Props) {
   return (
-    <section className="mx-auto max-w-4xl px-4 sm:px-6 xl:max-w-5xl xl:px-0">{children}</section>
+    <section className="mx-auto max-w-2xl px-4 sm:px-6 xl:max-w-3xl xl:px-0">{children}</section>
   )
 }
diff --git a/components/Tag.tsx b/components/Tag.tsx
@@ -1,14 +1,16 @@
 import Link from 'next/link'
 import { slug } from 'github-slugger'
+
 interface Props {
   text: string
+  className?: string
 }
 
-const Tag = ({ text }: Props) => {
+const Tag = ({ text, className }: Props) => {
   return (
     <Link
       href={`/tags/${slug(text)}`}
-      className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+      className={`mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 ${className}`}
     >
       {text.split(' ').join('-')}
     </Link>

diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
@@ -24,7 +24,7 @@ const Moon = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     fill="currentColor"
-    className="h-6 w-6 text-gray-900 dark:text-gray-100"
+    className="h-5 w-5 text-gray-900 dark:text-gray-100 sm:h-6 sm:w-6"
   >
     <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
   </svg>
@@ -38,7 +38,7 @@ const Monitor = () => (
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-    className="h-6 w-6 text-gray-900 dark:text-gray-100"
+    className="h-5 w-5 text-gray-900 dark:text-gray-100 sm:h-6 sm:w-6"
   >
     <rect x="3" y="3" width="14" height="10" rx="2" ry="2"></rect>
     <line x1="7" y1="17" x2="13" y2="17"></line>
@@ -70,59 +70,57 @@ const ThemeSwitch = () => {
   }
 
   return (
-    <div className="mr-5">
-      <Menu as="div" className="relative inline-block text-left">
-        <div>
-          <Menu.Button>{resolvedTheme === 'dark' ? <Moon /> : <Sun />}</Menu.Button>
-        </div>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <Menu.Items className="absolute right-0 z-10 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800">
-            <RadioGroup value={theme} onChange={handleSetTheme}>
-              <div className="p-1">
-                <RadioGroup.Option value="light">
-                  <Menu.Item>
-                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
-                      <div className="mr-2">
-                        <Sun />
-                      </div>
-                      Light
-                    </button>
-                  </Menu.Item>
-                </RadioGroup.Option>
-                <RadioGroup.Option value="dark">
-                  <Menu.Item>
-                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
-                      <div className="mr-2">
-                        <Moon />
-                      </div>
-                      Dark
-                    </button>
-                  </Menu.Item>
-                </RadioGroup.Option>
-                <RadioGroup.Option value="system">
-                  <Menu.Item>
-                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
-                      <div className="mr-2">
-                        <Monitor />
-                      </div>
-                      System
-                    </button>
-                  </Menu.Item>
-                </RadioGroup.Option>
-              </div>
-            </RadioGroup>
-          </Menu.Items>
-        </Transition>
-      </Menu>
-    </div>
+    <Menu as="div" className="relative mr-5 inline-block text-left">
+      <div className="flex h-full items-center">
+        <Menu.Button>{resolvedTheme === 'dark' ? <Moon /> : <Sun />}</Menu.Button>
+      </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800">
+          <RadioGroup value={theme} onChange={handleSetTheme}>
+            <div className="p-1">
+              <RadioGroup.Option value="light">
+                <Menu.Item>
+                  <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
+                    <div className="mr-2">
+                      <Sun />
+                    </div>
+                    Light
+                  </button>
+                </Menu.Item>
+              </RadioGroup.Option>
+              <RadioGroup.Option value="dark">
+                <Menu.Item>
+                  <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
+                    <div className="mr-2">
+                      <Moon />
+                    </div>
+                    Dark
+                  </button>
+                </Menu.Item>
+              </RadioGroup.Option>
+              <RadioGroup.Option value="system">
+                <Menu.Item>
+                  <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
+                    <div className="mr-2">
+                      <Monitor />
+                    </div>
+                    System
+                  </button>
+                </Menu.Item>
+              </RadioGroup.Option>
+            </div>
+          </RadioGroup>
+        </Menu.Items>
+      </Transition>
+    </Menu>
   )
 }
 

diff --git a/layouts/ListLayoutWithTags.tsx b/layouts/ListLayoutWithTags.tsx
@@ -30,7 +30,7 @@ function Pagination({ totalPages, currentPage }: PaginationProps) {
   const nextPage = currentPage + 1 <= totalPages
 
   return (
-    <div className="space-y-2 pb-8 pt-6 md:space-y-5">
+    <div className="space-y-2 pb-2 pt-6 md:space-y-5">
       <nav className="flex justify-between">
         {!prevPage && (
           <button className="cursor-auto disabled:opacity-50" disabled={!prevPage}>
@@ -83,9 +83,9 @@ export default function ListLayoutWithTags({
             {title}
           </h1>
         </div>
-        <div className="flex sm:space-x-12">
-          <div className="hidden h-full max-h-[calc(100vh-200px)] min-w-[280px] max-w-[280px] flex-wrap overflow-auto rounded-lg bg-gray-50 pt-5 dark:bg-gray-900/70 dark:shadow-gray-800/40 lg:flex">
-            <div className="w-full px-6 py-4">
+        <div className="flex sm:space-x-8">
+          <div className="hidden h-full max-h-[calc(100vh-200px)] w-[250px] max-w-[250px] flex-wrap overflow-auto rounded-lg bg-gray-50 pt-5 dark:bg-gray-900/70 dark:shadow-gray-800/40 lg:flex">
+            <div className="w-full px-6">
               {pathname.startsWith('/blog') ? (
                 <h3 className="font-bold uppercase text-primary-500">All Posts</h3>
               ) : (
@@ -117,7 +117,7 @@ export default function ListLayoutWithTags({
                 const { path, date, title, summary, tags } = post
                 return (
                   <li key={path} className="rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-900">
-                    <article className="space-2 flex flex-col p-2 xl:space-y-0">
+                    <article className="space-2 flex flex-col p-1 xl:space-y-0">
                       <div className="space-y-3">
                         <div>
                           <h2 className="text-2xl font-bold leading-8 tracking-tight">
@@ -126,10 +126,14 @@ export default function ListLayoutWithTags({
                             </Link>
                           </h2>
                           <div className="mt-4 flex justify-between">
-                            <span>{tags?.map((tag) => <Tag key={tag} text={tag} />)}</span>
+                            <span>
+                              {tags?.map((tag) => (
+                                <Tag key={tag} text={tag} className="mr-2 text-xs" />
+                              ))}
+                            </span>
                             <dl>
                               <dt className="sr-only">Published on</dt>
-                              <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
+                              <dd className="text-xs font-medium leading-6 text-gray-500 dark:text-gray-400">
                                 <time dateTime={date}>{formatDate(date, siteMetadata.locale)}</time>
                               </dd>
                             </dl>