Merge pull request #5 from ittipatken/lower-font-size

feat: lower font size by one step and decrease page width

src/lib/components/common/AdvantageCard.svelte

@@ -15,7 +15,7 @@
 >
   <div class="flex items-center gap-4 xl:items-start xl:flex-col xl:gap-3">
     <img src="{base}{icon}" alt="icon" class="size-8 xl:size-12" />
-    <h1 class="text-2xl font-medium uppercase xl:text-3xl">{title}</h1>
+    <h1 class="text-xl font-medium uppercase xl:text-2xl">{title}</h1>
   </div>
-  <p class="text-neutral xl:text-xl xl:leading-9 xl:tracking-[0.24px]">{description}</p>
+  <p class="text-neutral xl:text-lg xl:leading-9 xl:tracking-[0.24px]">{description}</p>
 </div>

src/lib/components/common/DownloadLink.svelte

@@ -13,7 +13,7 @@
 <div>
   <a
     {href}
-    class="flex items-center gap-1 text-lg font-medium text-right md:gap-2 md:text-2xl text-primary hover:opacity-60"
+    class="flex items-center gap-1 text-base font-medium text-right md:gap-2 md:text-xl text-primary hover:opacity-60"
   >
     <img src="{base}{icon}" alt="download" class="size-6 md:size-8" />
     <span class="capitalize">{text}</span>

src/lib/components/common/DualHeader.svelte

@@ -10,10 +10,10 @@
 </script>
 
 <hgroup class="flex flex-col gap-3">
-  <h2 {id} class="text-3xl xl:text-5xl tracking-[1.65px] uppercase font-medium scroll-mt-32">
+  <h2 {id} class="text-2xl xl:text-4xl tracking-[1.65px] uppercase font-medium scroll-mt-32">
     {title}
   </h2>
-  <div class="text-xl xl:text-4xl xl:tracking-[1.02px] xl:leading-[45px] text-neutral">
+  <div class="text-lg xl:text-3xl xl:tracking-[1.02px] xl:leading-[45px] text-neutral">
     {@render subtitle()}
   </div>
 </hgroup>

src/lib/components/common/LinkCard.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { base } from "$app/paths";
+
   type LinkCard = {
     title: string;
     description: string;
@@ -10,11 +12,11 @@
 
 <a {href} target="_blank" rel="noopener noreferrer" class="card group">
   <div class="flex items-start justify-between">
-    <h2 class="text-2xl sm:text-3xl uppercase font-medium group-hover:text-background">
-      {title}&nbsp;&nbsp;&nbsp;<span class="font-bold text-3xl">↗</span>
+    <h2 class="flex flex-row items-center text-xl sm:text-2xl uppercase font-medium group-hover:text-background">
+      {title}&nbsp;&nbsp;&nbsp;<img src="{base}/icons/link-arrow.svg" alt="outlink" class="size-6" />
     </h2>
   </div>
-  <p class="text-neutral text-md group-hover:text-background group-hover:font-medium">
+  <p class="text-neutral text-base group-hover:text-background group-hover:font-medium">
     {description}
   </p>
 </a>

src/lib/components/core/Logo.svelte

@@ -5,6 +5,6 @@
 <a href="{base}/">
   <div class="flex items-center gap-4">
     <img src="{base}/logo.svg" alt="Logo" class="size-10" />
-    <span class="font-semibold uppercase text-2xl tracking-[2.72px] select-none">ANKI</span>
+    <span class="font-semibold uppercase text-xl tracking-[2.72px] select-none">ANKI</span>
   </div>
 </a>

src/lib/components/core/Navigation.svelte

@@ -55,7 +55,7 @@
 <header
   class="sticky top-0 z-50 w-full border-white/[13%] bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/60 py-4 border-b-2"
 >
-  <div class="flex items-center justify-between h-full max-w-[1624px] mx-auto px-8">
+  <div class="flex items-center justify-between h-full max-w-[1440px] mx-auto px-8">
     <Logo />
     <button
       onclick={() => toggleMenu()}

src/lib/components/sections/BasicConcepts.svelte

@@ -16,8 +16,8 @@
       class="aspect-[16/10] grow max-w-[90%] md:max-w-[40%]"
     />
     <div class="flex flex-col gap-2 md:gap-6 md:w-[60%]">
-      <h2 class="text-2xl lg:text-4xl font-medium uppercase tracking-[1.08px]">Decks</h2>
-      <p class="lg:text-2xl text-neutral">
+      <h2 class="text-xl lg:text-3xl font-medium uppercase tracking-[1.08px]">Decks</h2>
+      <p class="lg:text-xl text-neutral">
         Decks are groups of flashcards that allow you to study specific parts of your collection
         instead of everything all at once. Create a new deck and add some flashcards to get started.
       </p>
@@ -30,8 +30,8 @@
       class="aspect-[16/10] grow max-w-[90%] md:max-w-[40%]"
     />
     <div class="flex flex-col gap-2 md:gap-6 md:w-[60%]">
-      <h2 class="text-2xl lg:text-4xl font-medium uppercase tracking-[1.08px]">Reviews</h2>
-      <p class="lg:text-2xl text-neutral">
+      <h2 class="text-xl lg:text-3xl font-medium uppercase tracking-[1.08px]">Reviews</h2>
+      <p class="lg:text-xl text-neutral">
         When you're ready, start reviewing your flashcards. Rate your recall with the most suitable
         option and Anki will schedule the next review for when you're most likely to forget the
         information.

src/lib/components/sections/Downloads.svelte

@@ -81,9 +81,9 @@
       <div class="flex items-center justify-between gap-12">
         <div class="flex flex-col gap-4 w-full">
           <div class="flex justify-between items-center">
-            <h2 class="text-2xl font-medium uppercase md:text-4xl">Desktop</h2>
+            <h2 class="text-xl font-medium uppercase md:text-3xl">Desktop</h2>
           </div>
-          <p class="text-lg md:text-2xl text-neutral">
+          <p class="text-base md:text-xl text-neutral">
             If you have a recent Mac, pick the Apple Silicon version for better performance/battery
             life. Older Macs will need to use the Intel version instead.
           </p>
@@ -92,7 +92,7 @@
       <div class="flex flex-col md:divide-y-2 divide-y divide-white/[13%]">
         {#each Object.entries(download_options.desktop) as [key, value]}
           <div class="flex justify-between py-5 md:px-5">
-            <h2 class="text-xl font-medium md:text-3xl">{key}</h2>
+            <h2 class="text-lg font-medium md:text-2xl">{key}</h2>
             <div class="flex flex-col items-end gap-3">
               {#each value as { href, text, icon }}
                 <DownloadLink {href} {text} {icon} />
@@ -106,15 +106,15 @@
       class="xl:col-span-2 border-white/[13%] md:border-2 flex flex-col md:px-14 md:py-9 gap-8 md:gap-20"
     >
       <div class="flex flex-col gap-4 w-full">
-        <h2 class="text-2xl font-medium uppercase md:text-4xl">Mobile</h2>
-        <p class="text-lg md:text-2xl text-neutral">
+        <h2 class="text-xl font-medium uppercase md:text-3xl">Mobile</h2>
+        <p class="text-base md:text-xl text-neutral">
           AnkiMobile is the official iOS app and all purchases help to fund Anki's development.
         </p>
       </div>
       <div class="flex flex-col md:divide-y-2 divide-y divide-white/[13%]">
         {#each Object.entries(download_options.mobile) as [key, value]}
           <div class="flex justify-between py-5 md:px-5">
-            <h2 class="text-xl font-medium md:text-3xl">{key}</h2>
+            <h2 class="text-lg font-medium md:text-2xl">{key}</h2>
             <div class="flex flex-col items-end gap-3">
               {#each value as { href, text, icon }}
                 <DownloadLink {href} {text} {icon} />

src/lib/components/sections/Hero.svelte

@@ -2,11 +2,11 @@
   <div class="flex flex-col max-w-[768px] sm:pr-12 gap-14 xl:gap-20">
     <div class="flex flex-col gap-9">
       <h1
-        class="font-semibold text-5xl md:text-7xl 2xl:text-8xl 2xl:tracking-[1.78px] 2xl:leading-[89px]"
+        class="font-semibold text-4xl md:text-6xl 2xl:text-7xl 2xl:tracking-[1.78px] 2xl:leading-[89px]"
       >
         Make learning easier with <span class="text-primary">Anki</span>
       </h1>
-      <p class="text-2xl md:text-4xl text-neutral tracking-[1.02px]">
+      <p class="text-xl md:text-3xl text-neutral tracking-[1.02px]">
         The flashcard application that makes sure you only practice the things you're about to
         forget.
       </p>
@@ -19,7 +19,7 @@
             event.preventDefault();
             document.querySelector('#downloads')?.scrollIntoView({ behavior: 'smooth' });
           }}
-          class="bg-primary aspect-[16/5] w-40 md:w-56 px-3 lg:px-8 border-2 border-primary text-background flex justify-center items-center text-xl md:text-2xl font-bold hover:opacity-80 transition-all duration-200"
+          class="bg-primary aspect-[16/5] w-40 md:w-56 px-3 lg:px-8 border-2 border-primary text-background flex justify-center items-center text-lg md:text-xl font-bold hover:opacity-80 transition-all duration-200"
         >
           Download
         </a>
@@ -29,7 +29,7 @@
         aria-label="Anki Manual: Background"
         target="_blank"
         rel="noopener noreferrer"
-        class="aspect-[16/5] w-40 md:w-56 px-3 lg:px-8 text-white border-2 border-white/[13%] flex justify-center items-center text-xl md:text-2xl font-bold hover:opacity-60 transition-all duration-200"
+        class="aspect-[16/5] w-40 md:w-56 px-3 lg:px-8 text-white border-2 border-white/[13%] flex justify-center items-center text-lg md:text-xl font-bold hover:opacity-60 transition-all duration-200"
       >
         + Learn more
       </a>

src/lib/components/sections/Testimonials.svelte

@@ -57,11 +57,11 @@
   <div
     class="md:py-24 md:px-14 gap-6 lg:gap-20 flex flex-col justify-between md:border-y-2 border-white/[13%]"
   >
-    <p class="text-xl lg:text-4xl font-light tracking-[1.02px]" style="height: {maxHeight}px;">
+    <p class="text-lg lg:text-3xl font-light tracking-[1.02px]" style="height: {maxHeight}px;">
       "{testimonials[index].quote}"
     </p>
     <div class="flex items-center justify-between h-9">
-      <span class="pr-8 sm:text-xl text-neutral">— {testimonials[index].author}</span>
+      <span class="pr-8 sm:text-lg text-neutral">— {testimonials[index].author}</span>
       <div class="flex gap-6 lg:gap-14 min-w-fit">
         <button onclick={() => changeQuote(-1)} class="hover:opacity-60">
           <img src="{base}/icons/left-arrow.svg" alt="left-arrow" class="size-6 lg:size-9" />

src/routes/+layout.svelte

@@ -21,6 +21,6 @@
 </svelte:head>
 
 <Navigation />
-<main class="mx-auto max-w-[1624px] px-14">
+<main class="mx-auto max-w-[1440px] px-14">
   {@render children?.()}
 </main>