Commit f3ea9bb

HPCesia <me@hpcesia.com>
2026-04-05 17:17:18
Make font size larger for a11y
1 parent 674b30f
src/components/Footer.astro
@@ -4,7 +4,7 @@ import { url } from "@/utils/url";
 ---
 
 <footer
-  class="article-anchor border-t-2 pt-2 pb-4 mt-16 text-xl flex justify-between gap-4"
+  class="article-anchor border-t-2 pt-2 pb-4 mt-16 text-xl lg:text-2xl flex justify-between gap-4"
 >
   <div>
     <span>Copyright © {new Date().getFullYear()}</span>
src/components/Header.astro
@@ -7,8 +7,8 @@ import { url } from "@/utils/url";
   <nav
     class="flex justify-between [&_a]:hover:underline [&_a]:decoration-2 [&_a]:decoration-neutral-400"
   >
-    <a href={url("/")} class="text-2xl">{SITE_CONFIG.title}</a>
-    <ul class="flex space-x-4 text-xl leading-[1.75]">
+    <a href={url("/")} class="text-2xl lg:text-3xl">{SITE_CONFIG.title}</a>
+    <ul class="flex space-x-4 text-xl lg:text-2xl leading-[1.75]">
       <li><a href={url("/posts")}>Posts</a></li>
       <li><a href={url("/about")}>About</a></li>
     </ul>
src/components/PostsList.astro
@@ -12,7 +12,7 @@ const { posts } = Astro.props;
 ---
 
 <nav>
-  <ol class="text-lg lg:text-xl no-counter">
+  <ol class="text-xl lg:text-2xl no-counter">
     {
       posts.map((post) => {
         const dt = DateTime.fromJSDate(post.data.date, {
@@ -23,7 +23,7 @@ const { posts } = Astro.props;
             <a href={url(`/posts/${post.id}`)}>{post.data.title}</a>
             <time
               datetime={dt.toISO()}
-              class="text-sm lg:text-base text-neutral-600 dark:text-neutral-400 self-center"
+              class="text-base lg:text-lg text-neutral-600 dark:text-neutral-400 self-center"
             >
               {dt.toISODate()}
             </time>
src/pages/posts/[slug]/index.astro
@@ -30,7 +30,7 @@ const { Content } = await render(entry);
   <article>
     <Content />
   </article>
-  <footer class="mt-8 article-anchor">
+  <footer class="mt-8 article-anchor text-base lg:text-lg">
     <a href={url(`posts/${entry.id}/archive.pdf`)}>
       <span>PDF archive of this post</span>
     </a>
src/styles/article/blockquote.css
@@ -3,7 +3,7 @@ blockquote {
 }
 
 p.blockquote-attribution {
-  @apply mx-4 text-right text-sm lg:text-base text-neutral-700 dark:text-neutral-400;
+  @apply mx-4 text-right text-base lg:text-lg text-neutral-700 dark:text-neutral-400;
 
   &::before {
     content: "—";
src/styles/article/figure.css
@@ -5,7 +5,7 @@ figure {
   @apply justify-items-center;
 
   figcaption {
-    @apply text-sm lg:text-base;
+    @apply text-base lg:text-lg;
     @apply text-neutral-600 dark:text-neutral-400;
   }
 }
src/styles/article/heading.css
@@ -9,25 +9,25 @@ h6 {
 }
 
 h1 {
-  @apply text-3xl lg:text-4xl;
+  @apply text-4xl lg:text-5xl;
   @apply mt-0 mb-[0.8em];
   @variant md {
     @apply w-3/2 clear-both;
   }
 }
 h2 {
-  @apply text-2xl lg:text-3xl;
+  @apply text-3xl lg:text-4xl;
   @apply mt-[1.6em] mb-[0.8em];
 }
 h3 {
-  @apply text-xl lg:text-2xl;
+  @apply text-2xl lg:text-3xl;
   @apply mt-[1.6em] mb-[0.8em];
 }
 h4 {
-  @apply text-lg lg:text-xl;
+  @apply text-xl lg:text-2xl;
   @apply mt-[1.5em] mb-[0.5em];
 }
 h5,
 h6 {
-  @apply text-base lg:text-lg;
+  @apply text-lg lg:text-xl;
 }
src/styles/article/index.css
@@ -48,7 +48,7 @@ article,
 }
 
 article {
-  @apply text-base lg:text-lg;
+  @apply text-lg lg:text-xl;
   @apply max-w-full md:max-w-2/3;
 
   div.tybios-frame-invert > img.typst-frame {
src/styles/article/raw.css
@@ -1,9 +1,9 @@
 code:not(:is(pre > code)) {
-  @apply text-sm lg:text-base;
+  @apply text-base lg:text-lg;
 }
 
 div.hypraw {
-  @apply relative text-sm lg:text-base mt-5 mb-5;
+  @apply relative text-base lg:text-lg mt-5 mb-5;
   @apply border-y;
 
   pre {
@@ -14,7 +14,7 @@ div.hypraw {
 
       &[data-lang]::before {
         @apply absolute top-2 right-2 z-1;
-        @apply px-1 rounded border opacity-100 text-xs lg:text-sm;
+        @apply px-1 rounded border opacity-100 text-sm lg:text-base;
         @apply text-neutral-600 bg-neutral-100;
         @variant dark {
           @apply bg-neutral-900 text-neutral-400;
src/styles/article/table.css
@@ -1,5 +1,5 @@
 table {
-  @apply text-sm lg:text-base;
+  @apply text-base lg:text-lg;
   @apply relative block w-fit max-w-full overflow-x-auto;
   &:not(figure *) {
     @apply mt-4 mb-4;