versia-pub/docs
2
0
Fork 0
mirror of https://github.com/versia-pub/docs.git synced 2025-12-06 06:18:19 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 💄 Increase text font size

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-07-25 15:23:48 +02:00
parent e03c8d2a6e
commit e5b2da53b4
No known key found for this signature in database
4 changed files with 21 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/Code.tsx
View file

@ -162,7 +162,7 @@ function CodePanel({
<div className="group dark:bg-white/2.5">
<CodePanelHeader tag={tag} label={label} />
<div className="relative">
<pre className="overflow-x-auto p-4 text-xs text-white [&>code>pre]:!bg-transparent">
<pre className="overflow-x-auto p-4 text-sm text-white [&>code>pre]:!bg-transparent">
{children}
</pre>
<CopyButton code={code} />

2
components/MobileNavigation.tsx
View file

@ -130,7 +130,7 @@ function MobileNavigationDialog({
>
<motion.div
layoutScroll={true}
className="fixed bottom-0 left-0 top-14 w-full overflow-y-auto bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 ring-zinc-900/7.5 min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-900 dark:ring-zinc-800"
className="fixed bottom-0 left-0 max-w-[100vw] top-14 w-full overflow-y-auto bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 ring-zinc-900/7.5 min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-900 dark:ring-zinc-800"
>
<Navigation />
</motion.div>

2
components/mdx.tsx
View file

@ -13,7 +13,7 @@ export { CodeGroup, Code as code, Pre as pre } from "./Code";
export function wrapper({ children }: { children: ReactNode }) {
return (
<article className="flex h-full flex-col pb-10 pt-16">
<article className="flex h-full flex-col pb-10 pt-16 overflow-hidden text-wrap">
<Prose className="flex-auto">{children}</Prose>
<footer className="mx-auto mt-16 w-full max-w-2xl lg:max-w-5xl">
<Feedback />

33
typography.ts
View file

@ -44,13 +44,13 @@ export default function typographyStyles({ theme }: PluginUtils) {
// Base
color: "var(--tw-prose-body)",
fontSize: theme("fontSize.sm")[0],
lineHeight: theme("lineHeight.7"),
fontSize: theme("fontSize.base")[0],
lineHeight: theme("lineHeight.8"),
// Text
p: {
marginTop: theme("spacing.6"),
marginBottom: theme("spacing.6"),
marginTop: theme("spacing.8"),
marginBottom: theme("spacing.8"),
},
'[class~="lead"]': {
fontSize: theme("fontSize.base")[0],
@ -174,22 +174,22 @@ export default function typographyStyles({ theme }: PluginUtils) {
h1: {
color: "var(--tw-prose-headings)",
fontWeight: "700",
fontSize: theme("fontSize.2xl")[0],
...theme("fontSize.2xl")[1],
marginBottom: theme("spacing.2"),
fontSize: theme("fontSize.4xl")[0],
...theme("fontSize.4xl")[1],
marginBottom: theme("spacing.6"),
},
h2: {
color: "var(--tw-prose-headings)",
fontWeight: "600",
fontSize: theme("fontSize.lg")[0],
...theme("fontSize.lg")[1],
fontSize: theme("fontSize.2xl")[0],
...theme("fontSize.2xl")[1],
marginTop: theme("spacing.16"),
marginBottom: theme("spacing.2"),
marginBottom: theme("spacing.4"),
},
h3: {
color: "var(--tw-prose-headings)",
fontSize: theme("fontSize.base")[0],
...theme("fontSize.base")[1],
fontSize: theme("fontSize.lg")[0],
...theme("fontSize.lg")[1],
fontWeight: "600",
marginTop: theme("spacing.10"),
marginBottom: theme("spacing.2"),
@ -206,8 +206,8 @@ export default function typographyStyles({ theme }: PluginUtils) {
},
figcaption: {
color: "var(--tw-prose-captions)",
fontSize: theme("fontSize.xs")[0],
...theme("fontSize.xs")[1],
fontSize: theme("fontSize.sm")[0],
...theme("fontSize.sm")[1],
marginTop: theme("spacing.2"),
},
@ -302,7 +302,10 @@ export default function typographyStyles({ theme }: PluginUtils) {
paddingLeft: theme("padding[1.5]"),
boxShadow: "inset 0 0 0 1px var(--tw-prose-code-ring)",
backgroundColor: "var(--tw-prose-code-bg)",
fontSize: theme("fontSize.2xs"),
// If gets too long, split into multiple lines
whiteSpace: "pre-wrap",
wordBreak: "break-all",
fontSize: theme("fontSize.xs"),
},
":is(a, h1, h2, h3, blockquote, thead th) code": {
color: "inherit",