Skip to content

Commit

Permalink
chore: migrate to inter
Browse files Browse the repository at this point in the history
  • Loading branch information
@fivenp
fivenp committed Jan 11, 2024
1 parent 408ed58 commit b420d1e
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 10 deletions.
2 changes: 1 addition & 1 deletion src/app/not-found.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function NotFound() {
<p className="font-display text-sm font-medium text-slate-900 dark:text-white">
404
</p>
<h1 className="mt-3 font-display text-3xl tracking-tight text-slate-900 dark:text-white">
<h1 className="mt-3 font-semibold text-3xl tracking-tight text-slate-900 dark:text-white">
Page not found
</h1>
<p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
Expand Down
2 changes: 1 addition & 1 deletion src/components/DocsHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function DocsHeader({ title }: { title?: string }) {
</p>
)}
{title && (
<h1 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
<h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
{title}
</h1>
)}
Expand Down
6 changes: 3 additions & 3 deletions src/components/Navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ function SubNavSection({
role="list"
className={`${
hidden ? "hidden" : ""
} ml-2 mt-2 space-y-2 border-l border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200`}
} ml-2 pl-2 mt-2 space-y-2 border-l border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200`}
>
{link.items.map((link, i) => (
<NavSection
Expand Down Expand Up @@ -80,7 +80,7 @@ function NavSection({
className={clsx(
"block w-full pl-1 ",
link.href === pathname
? "font-medium "
? "font-medium text-pink "
: "text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300",
)}
>
Expand All @@ -97,7 +97,7 @@ function NavSection({
className={clsx(
"block w-full pl-3.5 ",
link.href === pathname
? "border-l border-pink font-medium"
? "border-l text-pink font-medium"
: "text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300",
)}
>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Prose.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ export function Prose<T extends React.ElementType = 'div'>({
className,
'prose prose-slate max-w-none dark:prose-invert dark:text-slate-400',
// headings
'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]',
'prose-headings:scroll-mt-28 prose-headings:font-display lg:prose-headings:scroll-mt-[8.5rem]',
// lead
'prose-lead:text-slate-500 dark:prose-lead:text-slate-400',
// links
'prose-a:font-semibold dark:prose-a:text-sky-400',

// link underline
'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px]',

// pre
'prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10',
// hr
Expand Down
2 changes: 1 addition & 1 deletion src/components/TableOfContents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export function TableOfContents({
href={`#${section.id}`}
className={clsx(
isActive(section)
? 'text-sky-500'
? 'text-pink'
: 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300',
)}
>
Expand Down
83 changes: 82 additions & 1 deletion tailwind.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import typographyPlugin from '@tailwindcss/typography'
import { type Config } from 'tailwindcss'

const typographyHeading = (overrides) => ({
fontFamily: ["var(--font-inter)", "sans-serif"],
fontStyle: "normal",
fontWeight: "600",
lineHeight: "120%",
...overrides,
});

export default {
content: ['./src/**/*.{js,jsx,ts,tsx,md}'],
darkMode: 'class',
Expand All @@ -23,11 +31,84 @@ export default {
extend: {
fontFamily: {
sans: 'var(--font-inter)',
display: ['var(--font-lexend)', { fontFeatureSettings: '"ss01"' }],
display: ['var(--font-inter)', { fontFeatureSettings: '"ss01"' }],
},
maxWidth: {
'8xl': '88rem',
},
borderRadius: {
sm: "8px",
lg: "10px",
xl: "14px",
},
colors: {
pink: {
DEFAULT: "#FF00BD",
hover: "#CC0797",
},
},
typography: ({ theme }: { theme: any }) => ({
DEFAULT: {
css: {
a: {
color: theme("colors.pink.DEFAULT"),
"&:hover": {
color: theme("colors.pink.hover"),
fontWeight: "inherit",
},
fontWeight: "inherit",
},
h1: typographyHeading({ fontSize: "30px" }),
h2: typographyHeading({ fontSize: "26px" }),
h3: typographyHeading({ fontSize: "20px" }),
h4: typographyHeading({ fontSize: "18px" }),
h5: typographyHeading({ fontSize: "16px" }),
li: {
"&::marker": {
color: "black",
},
},
"code::before": {
content: null,
},
"code::after": {
content: null,
},
"blockquote p:first-of-type::before": { content: "none" },
"blockquote p:first-of-type::after": { content: "none" },
// '.prose :where(code):not(:where([class ~ ="not-prose"], [class ~ ="not-prose"] *))': {
// fontWeight: 500,
// borderWidth: 1,
// borderColor: theme("colors.gray.300"),
// backgroundColor: theme("colors.gray.50"),
// borderRadius: 4,
// padding: 4,
// },
},
},
lg: {
css: {
h1: typographyHeading({ fontSize: "46px" }),
h2: typographyHeading({ fontSize: "30px" }),
h3: typographyHeading({ fontSize: "22px" }),
h4: typographyHeading({ fontSize: "18px" }),
h5: typographyHeading({ fontSize: "16px" }),
},
},
invert: {
css: {
// "--tw-prose-headings": theme("colors.white"),
// "--tw-prose-invert-headings": theme("colors.white"),
"--tw-prose-body": theme("colors.white"),
p: {
color: "white",
},
ul: {
color: "white",
},
},
},
}),
},
},
plugins: [typographyPlugin],
Expand Down

0 comments on commit b420d1e

Please sign in to comment.