More compelling font size in cards

Author: wiseodd

.astro/content-modules.mjs

@@ -44,9 +44,9 @@ if (imagePath) {
       />
     )
   }
-  <div class='flex flex-col gap-y-1.5'>
+  <div class='flex flex-col gap-y-1.5 text-sm'>
     <div class='flex flex-col gap-y-0.5'>
-      <h1 class='text-base font-semibold'>{heading}</h1>
+      <h1 class='font-semibold'>{heading}</h1>
       <h2 class='text-muted-foreground'>{subheading}{date && ", " + date}</h2>
     </div>
     <slot />

src/components/Card.astro

@@ -4,9 +4,7 @@ import FormattedDate from "./FormattedDate.astro";
 const { news } = Astro.props;
 ---
 
-<li
-  class='news flex flex-col sm:flex-row sm:gap-x-4 [&_a]:text-blue-600 dark:[&_a]:text-blue-300 [&_q]:basis-full'
->
+<li class='news flex flex-col sm:flex-row sm:gap-x-4 [&_q]:basis-full'>
   <FormattedDate class='min-w-[120px] font-bold' date={new Date(news.date)} />
   <div set:html={news.post} />
 </li>

src/components/News.astro

@@ -4,12 +4,12 @@ import PublicationLabel from "./PublicationLabel.astro";
 const { pub } = Astro.props;
 ---
 
-<div class='relative border border-border bg-primary-foreground px-5 py-3'>
+<div class='relative border border-border bg-primary-foreground px-5 py-3 text-sm'>
   <div class='flex flex-col gap-y-1.5'>
     <div class='flex flex-col gap-y-0.5'>
-      <div class='text-base font-semibold'>{pub.title}</div>
+      <div class='font-semibold'>{pub.title}</div>
       <div
-        class='text-muted-foreground'
+        class='text-xs text-muted-foreground'
         set:html={pub.author
           .map((name: string) =>
             name.includes("Kristiadi")
@@ -25,7 +25,7 @@ const { pub } = Astro.props;
             pub.note && (
               <PublicationLabel
                 title={pub.note}
-                class='bg-red-400 text-slate-50 hover:bg-red-400 hover:text-slate-50'
+                class='!hover:text-slate-50 bg-red-400 !text-slate-50 hover:bg-red-400'
               />
             )
           }

src/components/PublicationCard.astro

@@ -4,11 +4,16 @@ import { cn } from "@/utils";
 const { class: className, title } = Astro.props;
 ---
 
-<section class={cn(className, "flex flex-col gap-y-5 md:flex-row md:gap-y-0")}>
+<section
+  class={cn(
+    className,
+    "flex flex-col gap-y-5 md:flex-row md:gap-y-0 [&_a]:text-blue-600 dark:[&_a]:text-blue-300",
+  )}
+>
   <div class='text-xl font-bold md:w-1/4'>
     <h2>{title}</h2>
   </div>
-  <div class='flex flex-col text-base gap-y-3 md:w-3/4'>
+  <div class='flex flex-col gap-y-3 text-base md:w-3/4'>
     <slot />
   </div>
 </section>

src/components/Section.astro

@@ -157,16 +157,16 @@ const sortedNews = news
 
     <Section title='About'>
       <p>
-        Agustinus Kristiadi is an Assistant Professor in the Department of Computer
-        Science at Western University in Canada. Previously, he was a Distinguished
-        Postdoctoral Fellow at the Vector Institute and obtained his PhD from the
-        University of Tuebingen in Germany. His research interests are in uncertainty
+        Agustinus Kristiadi is an Assistant Professor in the <a
+          href='https://csd.uwo.ca/'>Department of Computer Science</a
+        > at <a href='https://uwo.ca'>Western University</a> in Canada. Previously, he was
+        a Distinguished Postdoctoral Fellow at the Vector Institute and obtained his PhD
+        from the University of Tuebingen in Germany. His research interests are in uncertainty
         quantification in machine learning, decision-making under uncertainty, and their
-        applications in broader scientific fields such as chemistry. His work has been
-        recognized in the form of a best PhD thesis award and multiple spotlight papers
-        from flagship machine learning conferences. His service to the scientific
-        society include mentoring underrepresented students and actively contributing to
-        the open-source community.
+        applications in broader scientific fields such as chemistry. His work has been recognized
+        in the form of a best PhD thesis award and multiple spotlight papers from flagship
+        machine learning conferences. His services to the scientific society include mentoring
+        underrepresented students and actively contributing to the open-source community.
       </p>
     </Section>
 

src/pages/index.astro

@@ -19,10 +19,13 @@ const sortedPublications = publications.sort(sortPublicationFn);
 
     <h1 class='mb-6 mt-5 text-2xl font-bold'>Publication List</h1>
 
-    <p>
+    <p class='[&_a]:text-blue-600 dark:[&_a]:text-blue-300'>
       In the field of machine learning, publishing in conferences is the norm. Top
-      conferences includes NeurIPS (prev. NIPS), ICML, ICLR, AISTATS, UAI, and others.
-      They are peer-reviewed and highly competitive.
+      conferences includes <a href='https://neurips.cc'>NeurIPS</a> (prev. NIPS), <a
+        href='https://icml.cc'>ICML</a
+      >, <a href='https://iclr.cc'>ICLR</a>, <a href='https://aistats.org'>AISTATS</a>, <a
+        href='https://auai.org'>UAI</a
+      >, and others. They are peer-reviewed and highly competitive.
     </p>
 
     <br />
@@ -34,16 +37,6 @@ const sortedPublications = publications.sort(sortPublicationFn);
       of the paper.
     </p>
 
-    <Section title='Thesis' class='sm:pt-8'>
-      <div class='flex flex-col gap-y-2 md:flex-row md:gap-x-5 md:gap-y-0'>
-        <div class='w-full flex-wrap gap-x-4 gap-y-2'>
-          <PublicationList
-            publications={sortedPublications.filter((pub) => pub.type == "thesis")}
-          />
-        </div>
-      </div>
-    </Section>
-
     <Section title='Conference' class='pt-12'>
       <div class='flex flex-col gap-y-2 md:flex-row md:gap-x-5 md:gap-y-0'>
         <div class='w-full flex-wrap gap-x-4 gap-y-2'>
@@ -83,5 +76,15 @@ const sortedPublications = publications.sort(sortPublicationFn);
         </div>
       </div>
     </Section>
+
+    <Section title='Thesis' class='sm:pt-8'>
+      <div class='flex flex-col gap-y-2 md:flex-row md:gap-x-5 md:gap-y-0'>
+        <div class='w-full flex-wrap gap-x-4 gap-y-2'>
+          <PublicationList
+            publications={sortedPublications.filter((pub) => pub.type == "thesis")}
+          />
+        </div>
+      </div>
+    </Section>
   </div>
 </PageLayout>