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"> <div className="group dark:bg-white/2.5">
<CodePanelHeader tag={tag} label={label} /> <CodePanelHeader tag={tag} label={label} />
<div className="relative"> <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} {children}
</pre> </pre>
<CopyButton code={code} /> <CopyButton code={code} />

2
components/MobileNavigation.tsx
View file

@ -130,7 +130,7 @@ function MobileNavigationDialog({
> >
<motion.div <motion.div
layoutScroll={true} 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 /> <Navigation />
</motion.div> </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 }) { export function wrapper({ children }: { children: ReactNode }) {
return ( 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> <Prose className="flex-auto">{children}</Prose>
<footer className="mx-auto mt-16 w-full max-w-2xl lg:max-w-5xl"> <footer className="mx-auto mt-16 w-full max-w-2xl lg:max-w-5xl">
<Feedback /> <Feedback />

33
typography.ts
View file

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