feat: optimize print styles and adjust font sizes

Signed-off-by: Innei <[email protected]>
Innei · Nov 11, 2023 · 2c29169 · 2c29169 · vercel · Nov 11, 2023
1 parent 8df6fae
commit 2c29169
Show file tree

Hide file tree

Showing 18 changed files with 77 additions and 121 deletions.
diff --git a/src/app/notes/[id]/page.module.css b/src/app/notes/[id]/page.module.css
@@ -18,6 +18,10 @@
 
       /* @apply border-accent/20 dark:border-accent/20; */
       @apply border-accent/10;
+
+      @media print {
+        @apply border-none;
+      }
     }
 
     blockquote {
@@ -87,9 +91,7 @@
 .with-serif {
   :global {
     main {
-      @apply font-serif;
-
-      font-size: 16px;
+      @apply font-serif text-lg leading-[1.8];
     }
 
     strong,

diff --git a/src/app/notes/[id]/pageImpl.tsx b/src/app/notes/[id]/pageImpl.tsx
@@ -40,7 +40,7 @@ const NotePage = function (props: NoteModel) {
       <IndentArticleContainer>
         <header>
           <NoteTitle />
-          <span className="flex flex-wrap items-center text-[13px] text-neutral-content/60">
+          <span className="flex flex-wrap items-center text-sm text-neutral-content/60">
             <NoteHeaderDate />
 
             <ClientOnly>

diff --git a/src/app/notes/layout.tsx b/src/app/notes/layout.tsx
@@ -10,16 +10,17 @@ export default async (props: PropsWithChildren) => {
       className={clsx(
         'relative mx-auto grid min-h-[calc(100vh-6.5rem-10rem)] max-w-[60rem]',
         'gap-4 md:grid-cols-1 lg:max-w-[calc(60rem+400px)] lg:grid-cols-[1fr_minmax(auto,60rem)_1fr]',
-        'mt-12 md:mt-24',
+        'mt-12',
+        'print:!block print:!max-w-full md:mt-24',
       )}
     >
-      <div className="relative hidden min-w-0 lg:block">
+      <div className="relative hidden min-w-0 lg:block" data-hide-print>
         <NoteLeftSidebar />
       </div>
 
       {props.children}
 
-      <LayoutRightSideProvider className="relative hidden lg:block" />
+      <LayoutRightSideProvider className="relative hidden print:!hidden lg:block" />
     </div>
   )
 }
diff --git a/src/app/preview/page.tsx b/src/app/preview/page.tsx
@@ -173,7 +173,7 @@ const NotePreview = () => {
           <IndentArticleContainer>
             <header>
               <NoteTitle />
-              <span className="flex flex-wrap items-center text-[13px] text-neutral-content/60">
+              <span className="flex flex-wrap items-center text-sm text-neutral-content/60">
                 <NoteHeaderDate />
                 <NoteMetaBar />
               </span>

diff --git a/src/components/layout/container/Paper.tsx b/src/components/layout/container/Paper.tsx
@@ -11,77 +11,11 @@ export const Paper: Component<{
         'rounded-[0_6px_6px_0] border-zinc-200/70 shadow-sm dark:border-neutral-800 dark:shadow-[#333] lg:border',
         'note-layout-main',
         'min-w-0',
+        'print:!border-none print:!bg-transparent print:!shadow-none',
         className,
       )}
     >
       {children}
-
-      {/* <svg
-        className="paper absolute bottom-0 right-0 rotate-180 text-zinc-200/80 dark:text-neutral-800"
-        xmlns="http://www.w3.org/2000/svg"
-        width="70"
-        height="70"
-        viewBox="0 0 70 70"
-      >
-        <g mask="url(#mask-0.12140810982892192)">
-          <path
-            fill="black"
-            fillOpacity="0.3"
-            filter="url(#blur-0.12140810982892192)"
-            d="M0,0L0,70L70,0Z"
-            className="__web-inspector-hide-shortcut__"
-          />
-          <path
-            fill="currentColor"
-            d="M35,30.333333333333332C35,30.333333333333332,9.666666666666666,33,-2,44.666666666666664L46.666666666666664,0C33,9.666666666666666,35,30.333333333333332,35,30.333333333333332Z"
-            className="__web-inspector-hide-shortcut__"
-          />
-          <path
-            fill="url(#gradient-0.12140810982892192)"
-            d="M35,30.333333333333332C35,30.333333333333332,9.666666666666666,33,-2,44.666666666666664L46.666666666666664,0C33,9.666666666666666,35,30.333333333333332,35,30.333333333333332Z"
-            className="__web-inspector-hide-shortcut__"
-          />
-        </g>
-        <mask id="mask-0.12140810982892192">
-          <path
-            fill="white"
-            d="M0,60.666666666666664C0,46.666666666666664,0,46.666666666666664,23.333333333333332,23.333333333333332C46.666666666666664,0,46.666666666666664,0,60.666666666666664,0L140,0L140,140L0,140L0,60.666666666666664"
-          />
-        </mask>
-        <defs>
-          <linearGradient
-            id="gradient-0.12140810982892192"
-            x1="0.48"
-            x2="0.6"
-            y1="0.45"
-            y2="0.6"
-          >
-            <stop offset="0%" stopColor="#ffffff60" />
-            <stop offset="100%" stopColor="currentColor" />
-          </linearGradient>
-          <filter
-            id="blur-0.12140810982892192"
-            x="-58"
-            y="-45.9995"
-            width="140"
-            height="140"
-            filterUnits="userSpaceOnUse"
-            colorInterpolationFilters="sRGB"
-          >
-            <feFlood floodOpacity="0" result="BackgroundImageFix" />
-            <feBlend
-              mode="normal"
-              in="SourceGraphic"
-              in2="BackgroundImageFix"
-              result="shape"
-            />
-            <feGaussianBlur
-              stdDeviation="14"
-              result="effect1_foregroundBlur_221_5067"
-            />
-          </filter>
-        </defs>
-      </svg> */}
     </As>
   )
 }
diff --git a/src/components/layout/header/internal/HeaderDrawerContent.tsx b/src/components/layout/header/internal/HeaderDrawerContent.tsx
@@ -27,7 +27,7 @@ export const HeaderDrawerContent = () => {
             key={section.path}
           >
             <LinkInternal className="block" href={section.path}>
-              <span className="flex items-center space-x-2 py-2 text-[16px]">
+              <span className="flex items-center space-x-2 py-2 text-lg">
                 <i>{section.icon}</i>
                 <h2>{section.title}</h2>
               </span>

diff --git a/src/components/ui/image/ZoomedImage.tsx b/src/components/ui/image/ZoomedImage.tsx
@@ -107,7 +107,7 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
 
   return (
     <figure>
-      <span className="relative flex justify-center">
+      <span className="relative flex justify-center" data-hide-print>
         <LazyLoad placeholder={placeholder} offset={30}>
           <span>
             {imageLoadStatus !== ImageLoadStatus.Loaded && placeholder}
@@ -148,6 +148,12 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
         </LazyLoad>
       </span>
 
+      <img
+        className="max-w-1/3 hidden print:block"
+        src={src}
+        alt={alt || title}
+      />
+
       {!!figcaption && (
         <figcaption className="mt-1 flex flex-col items-center justify-center">
           <Divider className="w-[80px] opacity-80" />
@@ -158,14 +164,6 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
   )
 }
 
-export const ZoomedImage: Component<TImageProps> = (props) => {
-  return (
-    <span className="block text-center">
-      <ImageLazy {...props} zoom />
-    </span>
-  )
-}
-
 interface FixedImageProps extends TImageProps {
   containerWidth: number
 

diff --git a/src/components/ui/link-card/LinkCard.module.css b/src/components/ui/link-card/LinkCard.module.css
@@ -4,13 +4,13 @@
   box-sizing: border-box;
   flex-direction: row;
   align-items: center;
-  width: 390px;
-  min-height: 84px;
-  border-radius: 8px;
+  width: 27.857rem;
+  min-height: 6rem;
+  border-radius: 0.571rem;
   max-width: 100%;
   overflow: hidden;
-  margin: 16px auto;
-  padding: 12px 18px;
+  margin: 1.143rem auto;
+  padding: 0.857rem 1.286rem;
   backdrop-filter: blur(20px) saturate(180%);
   transition: background-color 0.2s ease-in-out;
 
@@ -28,62 +28,62 @@
 }
 
 .title {
-  line-height: 20px;
+  line-height: 1.429rem;
   display: -webkit-box;
   text-overflow: ellipsis;
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  font-size: 15px;
+  font-size: 1.071rem;
   font-weight: 500;
-  margin-bottom: 2px;
+  margin-bottom: 0.143rem;
 }
 
 .desc {
   @apply truncate text-neutral-500 dark:text-neutral-400;
 
   display: block;
-  margin-top: 6px;
+  margin-top: 0.429rem;
   min-width: 0;
-  font-size: 13px;
-  height: 18px;
-  line-height: 18px;
+  font-size: 1rem;
+  height: 1.143rem;
+  line-height: 1.143rem;
 }
 
 .image {
   @apply aspect-square flex-shrink-0 bg-cover bg-center bg-no-repeat;
   @apply bg-gray-50 dark:bg-neutral-700;
 
-  height: 60px;
-  width: 60px;
-  margin-left: 20px;
-  border-radius: 8px;
+  height: 3rem;
+  width: 3rem;
+  margin-left: 0.1rem;
+  border-radius: 0.041rem;
 }
 
 .skeleton {
   & .title,
   & .desc {
-    border-radius: 99px;
+    border-radius: 7.071rem;
   }
 
   & .title {
-    width: 50%;
-    height: 20px;
+    width: 3.571rem;
+    height: 1.429rem;
 
     @apply bg-gray-200 dark:bg-neutral-700;
   }
 
   & .desc {
     width: 100%;
-    margin-top: 12px;
-    height: 14px;
+    margin-top: 0.857rem;
+    height: 1rem;
 
     @apply bg-gray-200 dark:bg-neutral-700;
   }
 
   & .image {
-    height: 50px;
-    width: 50px;
+    height: 3.571rem;
+    width: 3.571rem;
 
     @apply bg-gray-200 dark:bg-neutral-700;
   }

diff --git a/src/components/ui/markdown/markdown.module.css b/src/components/ui/markdown/markdown.module.css
@@ -12,7 +12,7 @@
       text-decoration: none;
       border-radius: 3px;
 
-      @apply bg-current text-stone-700 dark:text-neutral-500;
+      @apply bg-current text-stone-700 dark:text-neutral-500 print:!bg-transparent print:line-through;
 
       &:hover {
         background: transparent;

diff --git a/src/components/ui/markdown/renderers/collapse.tsx b/src/components/ui/markdown/renderers/collapse.tsx
@@ -1,7 +1,8 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useLayoutEffect, useState } from 'react'
 import clsx from 'clsx'
 import type { FC, ReactNode } from 'react'
 
+import { useIsPrintMode } from '~/atoms'
 import { IcRoundKeyboardDoubleArrowRight } from '~/components/icons/arrow'
 
 import { Collapse } from '../../collapse'
@@ -11,6 +12,11 @@ export const MDetails: FC<{ children: ReactNode[] }> = (props) => {
 
   const $head = props.children[0]
 
+  const isInPrint = useIsPrintMode()
+  useLayoutEffect(() => {
+    isInPrint && setOpen(true)
+  }, [isInPrint])
+
   const handleOpen = useCallback(() => {
     setOpen((o) => !o)
   }, [])

diff --git a/src/components/widgets/comment/Comment.tsx b/src/components/widgets/comment/Comment.tsx
@@ -111,14 +111,14 @@ export const Comment: Component<{
                 <span className="flex flex-grow flex-wrap items-center gap-2">
                   {authorElement}
                   <span className="flex min-w-0 flex-shrink select-none flex-wrap items-center space-x-2 self-end">
-                    <span className="inline-flex flex-shrink-0 text-[10px] font-medium opacity-40">
+                    <span className="inline-flex flex-shrink-0 text-[0.71rem] font-medium opacity-40">
                       <RelativeTime date={comment.created} />
                     </span>
-                    <span className="break-all text-[10px] opacity-30">
+                    <span className="break-all text-[0.71rem] opacity-30">
                       {key}
                     </span>
                     {!!location && (
-                      <span className="min-w-0 max-w-full truncate break-all text-[10px] opacity-[0.35]">
+                      <span className="min-w-0 max-w-full truncate break-all text-[0.71rem] opacity-[0.35]">
                         来自：{location}
                       </span>
                     )}

diff --git a/src/components/widgets/comment/CommentReplyButton.tsx b/src/components/widgets/comment/CommentReplyButton.tsx
@@ -22,7 +22,7 @@ export const CommentReplyButton: FC<{
       <button
         aria-label="回复"
         className={clsx(
-          'absolute bottom-0 right-0 translate-x-2/3 translate-y-1/4 text-[12px] opacity-90',
+          'absolute bottom-0 right-0 translate-x-2/3 translate-y-1/4 text-xs opacity-90',
           'aspect-square rounded-full',
           'box-content flex h-6 w-6 p-[2px] center',
           'border border-slate-200 bg-zinc-100 dark:border-neutral-700 dark:bg-gray-800',

diff --git a/src/components/widgets/comment/CommentRoot.tsx b/src/components/widgets/comment/CommentRoot.tsx
@@ -20,7 +20,7 @@ export const CommentAreaRoot: FC<
   // 兜下后端的数据，默认开
   if (!allowComment && typeof allowComment !== 'undefined') {
     return (
-      <p className="mt-[100px] text-center text-xl font-medium">评论已关闭</p>
+      <p className="mt-[7.1rem] text-center text-xl font-medium">评论已关闭</p>
     )
   }
 

diff --git a/src/components/widgets/comment/CommentSkeleton.tsx b/src/components/widgets/comment/CommentSkeleton.tsx
@@ -11,8 +11,8 @@ const CommentSkeletonSingle = () => {
             <span className="flex flex-grow items-center gap-2">
               <span className="ml-2 h-4 w-20 bg-gray-300 dark:bg-neutral-600" />
               <span className="flex select-none items-center space-x-2">
-                <span className="inline-flex h-4 w-20 bg-gray-300 text-[10px] font-medium opacity-40 dark:bg-neutral-600" />
-                <span className="h-4 w-20 bg-gray-300 text-[10px] opacity-30 dark:bg-neutral-600" />
+                <span className="inline-flex h-4 w-20 bg-gray-300 text-[0.71rem] font-medium opacity-40 dark:bg-neutral-600" />
+                <span className="h-4 w-20 bg-gray-300 text-[0.71rem] opacity-30 dark:bg-neutral-600" />
               </span>
             </span>
           </span>

diff --git a/src/components/widgets/peek/NotePreview.tsx b/src/components/widgets/peek/NotePreview.tsx
@@ -43,7 +43,7 @@ export const NotePreview: FC<NotePreviewProps> = (props) => {
         <IndentArticleContainer>
           <header>
             <NoteTitle />
-            <span className="flex flex-wrap items-center text-[13px] text-neutral-content/60">
+            <span className="flex flex-wrap items-center text-sm text-neutral-content/60">
               <NoteHeaderDate />
 
               <ClientOnly>

diff --git a/src/components/widgets/shared/SearchFAB.tsx b/src/components/widgets/shared/SearchFAB.tsx
@@ -232,7 +232,7 @@ const SearchPanelImpl = () => {
     >
       <input
         autoFocus
-        className="w-full border-b border-zinc-200 bg-transparent p-4 px-5 text-[16px] leading-4 dark:border-neutral-700"
+        className="w-full border-b border-zinc-200 bg-transparent p-4 px-5 text-lg leading-4 dark:border-neutral-700"
         placeholder="Search..."
         value={keyword}
         onChange={(e) => setKeyword(e.target.value)}

diff --git a/src/providers/root/debug-provider.tsx b/src/providers/root/debug-provider.tsx
@@ -10,7 +10,9 @@ export const DebugProvider = ({
   return (
     <>
       <Suspense>
-        <ReactQueryDevtools buttonPosition="bottom-left" />
+        <div data-hide-print>
+          <ReactQueryDevtools buttonPosition="bottom-left" />
+        </div>
       </Suspense>
       {children}
     </>