Increase base font size to 16px and scale component sizes

Author: MoistCode

src/components/ExperienceCard.astro

@@ -37,19 +37,19 @@ const { logo, logoAlt, companyUrl, role, dates } = Astro.props;
     width: auto;
   }
   .exp-role {
-    font-size: 13px;
+    font-size: 15px;
     font-weight: 600;
     color: var(--text-primary);
   }
   .exp-dates {
-    font-size: 12px;
+    font-size: 14px;
     color: var(--text-muted);
   }
 
   @media (max-width: 640px) {
     .exp-card { padding: 10px 14px; gap: 2px; }
     .exp-logo { height: 20px; }
-    .exp-role { font-size: 12px; }
-    .exp-dates { font-size: 11px; }
+    .exp-role { font-size: 14px; }
+    .exp-dates { font-size: 13px; }
   }
 </style>

src/components/Hero.astro

@@ -42,13 +42,13 @@
   }
   .subtitle {
     color: var(--accent);
-    font-size: 13px;
+    font-size: 15px;
     margin-top: 2px;
     font-family: var(--font-mono);
   }
   .bio {
     color: var(--text-muted);
-    font-size: 13px;
+    font-size: 15px;
     line-height: 1.6;
     max-width: 560px;
     font-family: var(--font-mono);
@@ -58,7 +58,7 @@
     .hero { padding: 28px 16px 20px; }
     .hero-avatar { display: none; }
     h1 { font-size: 22px; }
-    .subtitle { font-size: 12px; }
-    .bio { font-size: 12px; margin-top: 12px; }
+    .subtitle { font-size: 14px; }
+    .bio { font-size: 14px; margin-top: 12px; }
   }
 </style>

src/components/PostCard.astro

@@ -56,25 +56,25 @@ const formattedDate = date.toLocaleDateString('en-US', { month: 'short', year: '
     align-items: start;
   }
   .post-title {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 600;
     margin-bottom: 4px;
     color: var(--text-primary);
   }
   .post-excerpt {
-    font-size: 12px;
+    font-size: 14px;
     color: var(--text-muted);
     line-height: 1.5;
   }
   .post-date-side {
-    font-size: 11px;
+    font-size: 13px;
     color: var(--text-subtle);
     white-space: nowrap;
     margin-left: 16px;
   }
   .post-date-top {
     display: none;
-    font-size: 11px;
+    font-size: 13px;
     color: var(--text-subtle);
     margin-bottom: 6px;
   }
@@ -84,7 +84,7 @@ const formattedDate = date.toLocaleDateString('en-US', { month: 'short', year: '
     margin-top: 10px;
   }
   .tag {
-    font-size: 10px;
+    font-size: 12px;
     border-radius: 3px;
     padding: 2px 8px;
   }
@@ -101,8 +101,8 @@ const formattedDate = date.toLocaleDateString('en-US', { month: 'short', year: '
     .post-row { flex-direction: column; }
     .post-date-side { display: none; }
     .post-date-top { display: block; }
-    .post-title { font-size: 13px; }
-    .post-excerpt { font-size: 11px; }
-    .tag { font-size: 9px; padding: 2px 6px; }
+    .post-title { font-size: 15px; }
+    .post-excerpt { font-size: 13px; }
+    .tag { font-size: 11px; padding: 2px 6px; }
   }
 </style>

src/styles/global.css

@@ -26,6 +26,7 @@ body {
   background: var(--bg-primary);
   color: var(--text-primary);
   font-family: var(--font-mono);
+  font-size: 16px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
 }