Skip to content

Commit 2c29169

Browse files
InneiInnei
committed
feat: optimize print styles and adjust font sizes
Signed-off-by: Innei <[email protected]>
1 parent 8df6fae commit 2c29169

File tree

18 files changed

+77
-121
lines changed

18 files changed

+77
-121
lines changed

‎src/app/notes/[id]/page.module.css

+5-3
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818

1919
/* @apply border-accent/20 dark:border-accent/20; */
2020
@apply border-accent/10;
21+
22+
@media print {
23+
@apply border-none;
24+
}
2125
}
2226

2327
blockquote {
@@ -87,9 +91,7 @@
8791
.with-serif {
8892
:global {
8993
main {
90-
@apply font-serif;
91-
92-
font-size: 16px;
94+
@apply font-serif text-lg leading-[1.8];
9395
}
9496

9597
strong,

‎src/app/notes/[id]/pageImpl.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const NotePage = function (props: NoteModel) {
4040
<IndentArticleContainer>
4141
<header>
4242
<NoteTitle />
43-
<span className="flex flex-wrap items-center text-[13px] text-neutral-content/60">
43+
<span className="flex flex-wrap items-center text-sm text-neutral-content/60">
4444
<NoteHeaderDate />
4545

4646
<ClientOnly>

‎src/app/notes/layout.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,17 @@ export default async (props: PropsWithChildren) => {
1010
className={clsx(
1111
'relative mx-auto grid min-h-[calc(100vh-6.5rem-10rem)] max-w-[60rem]',
1212
'gap-4 md:grid-cols-1 lg:max-w-[calc(60rem+400px)] lg:grid-cols-[1fr_minmax(auto,60rem)_1fr]',
13-
'mt-12 md:mt-24',
13+
'mt-12',
14+
'print:!block print:!max-w-full md:mt-24',
1415
)}
1516
>
16-
<div className="relative hidden min-w-0 lg:block">
17+
<div className="relative hidden min-w-0 lg:block" data-hide-print>
1718
<NoteLeftSidebar />
1819
</div>
1920

2021
{props.children}
2122

22-
<LayoutRightSideProvider className="relative hidden lg:block" />
23+
<LayoutRightSideProvider className="relative hidden print:!hidden lg:block" />
2324
</div>
2425
)
2526
}

‎src/app/preview/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ const NotePreview = () => {
173173
<IndentArticleContainer>
174174
<header>
175175
<NoteTitle />
176-
<span className="flex flex-wrap items-center text-[13px] text-neutral-content/60">
176+
<span className="flex flex-wrap items-center text-sm text-neutral-content/60">
177177
<NoteHeaderDate />
178178
<NoteMetaBar />
179179
</span>

‎src/components/layout/container/Paper.tsx

+1-67
Original file line numberDiff line numberDiff line change
@@ -11,77 +11,11 @@ export const Paper: Component<{
1111
'rounded-[0_6px_6px_0] border-zinc-200/70 shadow-sm dark:border-neutral-800 dark:shadow-[#333] lg:border',
1212
'note-layout-main',
1313
'min-w-0',
14+
'print:!border-none print:!bg-transparent print:!shadow-none',
1415
className,
1516
)}
1617
>
1718
{children}
18-
19-
{/* <svg
20-
className="paper absolute bottom-0 right-0 rotate-180 text-zinc-200/80 dark:text-neutral-800"
21-
xmlns="http://www.w3.org/2000/svg"
22-
width="70"
23-
height="70"
24-
viewBox="0 0 70 70"
25-
>
26-
<g mask="url(#mask-0.12140810982892192)">
27-
<path
28-
fill="black"
29-
fillOpacity="0.3"
30-
filter="url(#blur-0.12140810982892192)"
31-
d="M0,0L0,70L70,0Z"
32-
className="__web-inspector-hide-shortcut__"
33-
/>
34-
<path
35-
fill="currentColor"
36-
d="M35,30.333333333333332C35,30.333333333333332,9.666666666666666,33,-2,44.666666666666664L46.666666666666664,0C33,9.666666666666666,35,30.333333333333332,35,30.333333333333332Z"
37-
className="__web-inspector-hide-shortcut__"
38-
/>
39-
<path
40-
fill="url(#gradient-0.12140810982892192)"
41-
d="M35,30.333333333333332C35,30.333333333333332,9.666666666666666,33,-2,44.666666666666664L46.666666666666664,0C33,9.666666666666666,35,30.333333333333332,35,30.333333333333332Z"
42-
className="__web-inspector-hide-shortcut__"
43-
/>
44-
</g>
45-
<mask id="mask-0.12140810982892192">
46-
<path
47-
fill="white"
48-
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"
49-
/>
50-
</mask>
51-
<defs>
52-
<linearGradient
53-
id="gradient-0.12140810982892192"
54-
x1="0.48"
55-
x2="0.6"
56-
y1="0.45"
57-
y2="0.6"
58-
>
59-
<stop offset="0%" stopColor="#ffffff60" />
60-
<stop offset="100%" stopColor="currentColor" />
61-
</linearGradient>
62-
<filter
63-
id="blur-0.12140810982892192"
64-
x="-58"
65-
y="-45.9995"
66-
width="140"
67-
height="140"
68-
filterUnits="userSpaceOnUse"
69-
colorInterpolationFilters="sRGB"
70-
>
71-
<feFlood floodOpacity="0" result="BackgroundImageFix" />
72-
<feBlend
73-
mode="normal"
74-
in="SourceGraphic"
75-
in2="BackgroundImageFix"
76-
result="shape"
77-
/>
78-
<feGaussianBlur
79-
stdDeviation="14"
80-
result="effect1_foregroundBlur_221_5067"
81-
/>
82-
</filter>
83-
</defs>
84-
</svg> */}
8519
</As>
8620
)
8721
}

‎src/components/layout/header/internal/HeaderDrawerContent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const HeaderDrawerContent = () => {
2727
key={section.path}
2828
>
2929
<LinkInternal className="block" href={section.path}>
30-
<span className="flex items-center space-x-2 py-2 text-[16px]">
30+
<span className="flex items-center space-x-2 py-2 text-lg">
3131
<i>{section.icon}</i>
3232
<h2>{section.title}</h2>
3333
</span>

‎src/components/ui/image/ZoomedImage.tsx

+7-9
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
107107

108108
return (
109109
<figure>
110-
<span className="relative flex justify-center">
110+
<span className="relative flex justify-center" data-hide-print>
111111
<LazyLoad placeholder={placeholder} offset={30}>
112112
<span>
113113
{imageLoadStatus !== ImageLoadStatus.Loaded && placeholder}
@@ -148,6 +148,12 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
148148
</LazyLoad>
149149
</span>
150150

151+
<img
152+
className="max-w-1/3 hidden print:block"
153+
src={src}
154+
alt={alt || title}
155+
/>
156+
151157
{!!figcaption && (
152158
<figcaption className="mt-1 flex flex-col items-center justify-center">
153159
<Divider className="w-[80px] opacity-80" />
@@ -158,14 +164,6 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
158164
)
159165
}
160166

161-
export const ZoomedImage: Component<TImageProps> = (props) => {
162-
return (
163-
<span className="block text-center">
164-
<ImageLazy {...props} zoom />
165-
</span>
166-
)
167-
}
168-
169167
interface FixedImageProps extends TImageProps {
170168
containerWidth: number
171169

‎src/components/ui/link-card/LinkCard.module.css

+23-23
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
box-sizing: border-box;
55
flex-direction: row;
66
align-items: center;
7-
width: 390px;
8-
min-height: 84px;
9-
border-radius: 8px;
7+
width: 27.857rem;
8+
min-height: 6rem;
9+
border-radius: 0.571rem;
1010
max-width: 100%;
1111
overflow: hidden;
12-
margin: 16px auto;
13-
padding: 12px 18px;
12+
margin: 1.143rem auto;
13+
padding: 0.857rem 1.286rem;
1414
backdrop-filter: blur(20px) saturate(180%);
1515
transition: background-color 0.2s ease-in-out;
1616

@@ -28,62 +28,62 @@
2828
}
2929

3030
.title {
31-
line-height: 20px;
31+
line-height: 1.429rem;
3232
display: -webkit-box;
3333
text-overflow: ellipsis;
3434
overflow: hidden;
3535
-webkit-box-orient: vertical;
3636
-webkit-line-clamp: 2;
37-
font-size: 15px;
37+
font-size: 1.071rem;
3838
font-weight: 500;
39-
margin-bottom: 2px;
39+
margin-bottom: 0.143rem;
4040
}
4141

4242
.desc {
4343
@apply truncate text-neutral-500 dark:text-neutral-400;
4444

4545
display: block;
46-
margin-top: 6px;
46+
margin-top: 0.429rem;
4747
min-width: 0;
48-
font-size: 13px;
49-
height: 18px;
50-
line-height: 18px;
48+
font-size: 1rem;
49+
height: 1.143rem;
50+
line-height: 1.143rem;
5151
}
5252

5353
.image {
5454
@apply aspect-square flex-shrink-0 bg-cover bg-center bg-no-repeat;
5555
@apply bg-gray-50 dark:bg-neutral-700;
5656

57-
height: 60px;
58-
width: 60px;
59-
margin-left: 20px;
60-
border-radius: 8px;
57+
height: 3rem;
58+
width: 3rem;
59+
margin-left: 0.1rem;
60+
border-radius: 0.041rem;
6161
}
6262

6363
.skeleton {
6464
& .title,
6565
& .desc {
66-
border-radius: 99px;
66+
border-radius: 7.071rem;
6767
}
6868

6969
& .title {
70-
width: 50%;
71-
height: 20px;
70+
width: 3.571rem;
71+
height: 1.429rem;
7272

7373
@apply bg-gray-200 dark:bg-neutral-700;
7474
}
7575

7676
& .desc {
7777
width: 100%;
78-
margin-top: 12px;
79-
height: 14px;
78+
margin-top: 0.857rem;
79+
height: 1rem;
8080

8181
@apply bg-gray-200 dark:bg-neutral-700;
8282
}
8383

8484
& .image {
85-
height: 50px;
86-
width: 50px;
85+
height: 3.571rem;
86+
width: 3.571rem;
8787

8888
@apply bg-gray-200 dark:bg-neutral-700;
8989
}

‎src/components/ui/markdown/markdown.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
text-decoration: none;
1313
border-radius: 3px;
1414

15-
@apply bg-current text-stone-700 dark:text-neutral-500;
15+
@apply bg-current text-stone-700 dark:text-neutral-500 print:!bg-transparent print:line-through;
1616

1717
&:hover {
1818
background: transparent;

‎src/components/ui/markdown/renderers/collapse.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React, { useCallback, useState } from 'react'
1+
import React, { useCallback, useLayoutEffect, useState } from 'react'
22
import clsx from 'clsx'
33
import type { FC, ReactNode } from 'react'
44

5+
import { useIsPrintMode } from '~/atoms'
56
import { IcRoundKeyboardDoubleArrowRight } from '~/components/icons/arrow'
67

78
import { Collapse } from '../../collapse'
@@ -11,6 +12,11 @@ export const MDetails: FC<{ children: ReactNode[] }> = (props) => {
1112

1213
const $head = props.children[0]
1314

15+
const isInPrint = useIsPrintMode()
16+
useLayoutEffect(() => {
17+
isInPrint && setOpen(true)
18+
}, [isInPrint])
19+
1420
const handleOpen = useCallback(() => {
1521
setOpen((o) => !o)
1622
}, [])

‎src/components/widgets/comment/Comment.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -111,14 +111,14 @@ export const Comment: Component<{
111111
<span className="flex flex-grow flex-wrap items-center gap-2">
112112
{authorElement}
113113
<span className="flex min-w-0 flex-shrink select-none flex-wrap items-center space-x-2 self-end">
114-
<span className="inline-flex flex-shrink-0 text-[10px] font-medium opacity-40">
114+
<span className="inline-flex flex-shrink-0 text-[0.71rem] font-medium opacity-40">
115115
<RelativeTime date={comment.created} />
116116
</span>
117-
<span className="break-all text-[10px] opacity-30">
117+
<span className="break-all text-[0.71rem] opacity-30">
118118
{key}
119119
</span>
120120
{!!location && (
121-
<span className="min-w-0 max-w-full truncate break-all text-[10px] opacity-[0.35]">
121+
<span className="min-w-0 max-w-full truncate break-all text-[0.71rem] opacity-[0.35]">
122122
来自：{location}
123123
</span>
124124
)}

‎src/components/widgets/comment/CommentReplyButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const CommentReplyButton: FC<{
2222
<button
2323
aria-label="回复"
2424
className={clsx(
25-
'absolute bottom-0 right-0 translate-x-2/3 translate-y-1/4 text-[12px] opacity-90',
25+
'absolute bottom-0 right-0 translate-x-2/3 translate-y-1/4 text-xs opacity-90',
2626
'aspect-square rounded-full',
2727
'box-content flex h-6 w-6 p-[2px] center',
2828
'border border-slate-200 bg-zinc-100 dark:border-neutral-700 dark:bg-gray-800',

‎src/components/widgets/comment/CommentRoot.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const CommentAreaRoot: FC<
2020
// 兜下后端的数据，默认开
2121
if (!allowComment && typeof allowComment !== 'undefined') {
2222
return (
23-
<p className="mt-[100px] text-center text-xl font-medium">评论已关闭</p>
23+
<p className="mt-[7.1rem] text-center text-xl font-medium">评论已关闭</p>
2424
)
2525
}
2626

‎src/components/widgets/comment/CommentSkeleton.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ const CommentSkeletonSingle = () => {
1111
<span className="flex flex-grow items-center gap-2">
1212
<span className="ml-2 h-4 w-20 bg-gray-300 dark:bg-neutral-600" />
1313
<span className="flex select-none items-center space-x-2">
14-
<span className="inline-flex h-4 w-20 bg-gray-300 text-[10px] font-medium opacity-40 dark:bg-neutral-600" />
15-
<span className="h-4 w-20 bg-gray-300 text-[10px] opacity-30 dark:bg-neutral-600" />
14+
<span className="inline-flex h-4 w-20 bg-gray-300 text-[0.71rem] font-medium opacity-40 dark:bg-neutral-600" />
15+
<span className="h-4 w-20 bg-gray-300 text-[0.71rem] opacity-30 dark:bg-neutral-600" />
1616
</span>
1717
</span>
1818
</span>

‎src/components/widgets/peek/NotePreview.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const NotePreview: FC<NotePreviewProps> = (props) => {
4343
<IndentArticleContainer>
4444
<header>
4545
<NoteTitle />
46-
<span className="flex flex-wrap items-center text-[13px] text-neutral-content/60">
46+
<span className="flex flex-wrap items-center text-sm text-neutral-content/60">
4747
<NoteHeaderDate />
4848

4949
<ClientOnly>

‎src/components/widgets/shared/SearchFAB.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ const SearchPanelImpl = () => {
232232
>
233233
<input
234234
autoFocus
235-
className="w-full border-b border-zinc-200 bg-transparent p-4 px-5 text-[16px] leading-4 dark:border-neutral-700"
235+
className="w-full border-b border-zinc-200 bg-transparent p-4 px-5 text-lg leading-4 dark:border-neutral-700"
236236
placeholder="Search..."
237237
value={keyword}
238238
onChange={(e) => setKeyword(e.target.value)}

‎src/providers/root/debug-provider.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ export const DebugProvider = ({
1010
return (
1111
<>
1212
<Suspense>
13-
<ReactQueryDevtools buttonPosition="bottom-left" />
13+
<div data-hide-print>
14+
<ReactQueryDevtools buttonPosition="bottom-left" />
15+
</div>
1416
</Suspense>
1517
{children}
1618
</>

0 commit comments

Comments
 (0)