Tweak text styles to make them easier to read

yen223 · Nov 2, 2024 · 6585e43 · 6585e43
1 parent abfdecb
commit 6585e43
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -133,7 +133,7 @@ function Profile() {
         <ProfileIcon className="h-6 w-6 flex-none" />
         <span className="ml-3">About me</span>
       </h2>
-      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+      <p className="mt-6 text-sm text-zinc-600 dark:text-zinc-400">
         I&apos;m Wei Yen. Ex-software engineer, currently working full-time on
         building{" "}
         <a
@@ -194,15 +194,15 @@ export default function Home() {
   return (
     <Container className={"mt-16"}>
       <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
+        <div className="flex flex-col gap-10 lg:pr-16 xl:pr-24">
+          <Profile />
+          {/* <Newsletter /> */}
+        </div>
         <div className="flex flex-col gap-16 py-6">
           {articles.map((article) => (
             <Article key={article.slug} article={article} />
           ))}
         </div>
-        <div className="flex flex-col gap-10 lg:pl-16 xl:pl-24">
-          <Profile />
-          {/* <Newsletter /> */}
-        </div>
       </div>
     </Container>
   );

diff --git a/app/routes/articles.$slug.tsx b/app/routes/articles.$slug.tsx
@@ -64,16 +64,16 @@ export default function Article() {
             <ArrowLeftIcon className="h-4 w-4 stroke-zinc-500 transition group-hover:stroke-zinc-700 dark:stroke-zinc-500 dark:group-hover:stroke-zinc-400" />
           </ButtonLink>
           <article>
-            <header className="flex flex-col">
+            <header className="flex flex-col mb-16">
               <h1 className="mt-6 text-4xl font-bold tracking-tight text-zinc-800 sm:text-4xl dark:text-zinc-100">
                 {article.title}
               </h1>
               <time
                 dateTime={article.date}
                 className="order-first flex items-center text-base text-zinc-400 dark:text-zinc-500"
               >
-                <span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
-                <span className="ml-3">{formatDate(article.date)}</span>
+                {/* <span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" /> */}
+                <span>Published <span className="text-zinc-800 dark:text-zinc-200 font-semibold">{formatDate(article.date)}</span></span>
               </time>
             </header>
             <Prose className="mt-8 word-break text-pretty" data-mdx-content>

diff --git a/app/routes/articles._index.tsx b/app/routes/articles._index.tsx
@@ -39,7 +39,7 @@ function Article({ article }: { article: Article }) {
 export const metadata = {
   title: "Articles",
   description:
-    "All of my long-form thoughts on programming, leadership, product design, and more, collected in chronological order.",
+    "Articles that I have written for fun and profit",
 };
 
 const LoaderDataZ = z.object({ articles: ArticleZ.array() });
@@ -56,7 +56,7 @@ export default function ArticlesIndex() {
 
   return (
     <SimpleLayout
-      title="Articles"
+      title="✍️ Articles"
       intro="I write about maths, programming, and other things I find interesting."
     >
       <div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">

diff --git a/typography.ts b/typography.ts
@@ -47,7 +47,7 @@ export default function typographyStyles({ theme }: PluginUtils) {
         '--tw-prose-th-borders': theme('colors.zinc.200'),
         '--tw-prose-td-borders': theme('colors.zinc.100'),
 
-        '--tw-prose-invert-body': theme('colors.zinc.400'),
+        '--tw-prose-invert-body': theme('colors.zinc.200'),
         '--tw-prose-invert-headings': theme('colors.zinc.200'),
         '--tw-prose-invert-links': theme('colors.teal.400'),
         '--tw-prose-invert-links-hover': theme('colors.teal.400'),
@@ -63,7 +63,7 @@ export default function typographyStyles({ theme }: PluginUtils) {
         '--tw-prose-invert-code-bg': theme('colors.zinc.200 / 0.05'),
         '--tw-prose-invert-pre-code': theme('colors.zinc.100'),
         '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 0.4)',
-        '--tw-prose-invert-pre-border': theme('colors.zinc.200 / 0.1'),
+        '--tw-prose-invert-pre-border': theme('colors.zinc.500'),
         '--tw-prose-invert-th-borders': theme('colors.zinc.700'),
         '--tw-prose-invert-td-borders': theme('colors.zinc.800'),
 
@@ -77,8 +77,9 @@ export default function typographyStyles({ theme }: PluginUtils) {
         p: {
           marginTop: theme('spacing.7'),
           marginBottom: theme('spacing.7'),
-          lineHeight: theme('lineHeight.7'),
-          fontSize: theme('fontSize.base')[0],
+          lineHeight: theme('lineHeight.8'),
+          fontSize: theme('fontSize.lg')[0],
+          fontWeight: theme('fontWeight.regular'),
           color: 'var(--tw-prose-body)',
         },
 
@@ -111,7 +112,7 @@ export default function typographyStyles({ theme }: PluginUtils) {
         // Inline elements
         a: {
           color: 'var(--tw-prose-links)',
-          fontWeight: theme('fontWeight.regular'),
+          fontWeight: theme('fontWeight.semibold'),
           textDecoration: 'underline',
           textDecorationColor: 'var(--tw-prose-underline)',
           transitionProperty: 'color, text-decoration-color',
@@ -129,12 +130,15 @@ export default function typographyStyles({ theme }: PluginUtils) {
         code: {
           display: 'inline-block',
           color: 'var(--tw-prose-code)',
+          fontFamily: theme('fontFamily.mono'),
           fontSize: theme('fontSize.sm')[0],
-          fontWeight: theme('fontWeight.semibold'),
+          fontWeight: theme('fontWeight.regular'),
           backgroundColor: 'var(--tw-prose-code-bg)',
+          border: '1px solid',
+          borderColor: 'var(--tw-prose-pre-border)',
           borderRadius: theme('borderRadius.lg'),
-          paddingLeft: theme('spacing.1'),
-          paddingRight: theme('spacing.1'),
+          paddingLeft: theme('spacing.2'),
+          paddingRight: theme('spacing.2'),
         },
         'a code': {
           color: 'inherit',