Update fonts

core/src/components/Footer.astro

@@ -26,7 +26,7 @@ import logoWHite from '@nixos/branding/artifacts/internal/nixos-logomark-white-f
               <h3 class="font-heading text-secondary-afghani-blue-85 mb-2 text-xl font-bold">
                 {menu.name}
               </h3>
-              <ul class="font-extralight">
+              <ul class="font-light">
                 {menu.items.map((item) => (
                   <li class="border-secondary-afghani-blue-55 border-b-1 last:border-b-0">
                     <Link
@@ -46,7 +46,7 @@ import logoWHite from '@nixos/branding/artifacts/internal/nixos-logomark-white-f
       <hr class="border-secondary-afghani-blue-55" />
 
       <div
-        class="flex flex-col flex-wrap gap-4 py-4 font-extralight lg:flex-row lg:gap-0"
+        class="flex flex-col flex-wrap gap-4 py-4 font-light lg:flex-row lg:gap-0"
       >
         <div class="flex basis-1/2 gap-2">
           <Image src={logoWHite} alt="NixOS" class="inline-block h-14 w-14" />
@@ -85,7 +85,7 @@ import logoWHite from '@nixos/branding/artifacts/internal/nixos-logomark-white-f
         <hr class="border-secondary-afghani-blue-75 lg:hidden" />
 
         <div
-          class="flex basis-1/2 justify-between gap-4 font-extralight lg:justify-end"
+          class="flex basis-1/2 justify-between gap-4 font-light lg:justify-end"
         >
           <h4 class="my-auto">Connect with us:</h4>
           <div class="my-auto flex gap-4">

core/src/components/Header.astro

@@ -15,12 +15,12 @@ const currentTopRoute = `/${Astro.url.pathname.split('/')[1]}`;
 
 const navbarItemStyle = `text-center text-secondary-afghani-blue-45 md:text-primary-black md:hover:border-b-secondary-afghani-blue-65 border-b-4`;
 const navbarItemInactiveStyle = `border-b-secondary-afghani-blue-95 md:border-b-transparent bg-secondary-afghani-blue-95 md:bg-transparent`;
-const navbarItemActiveStyle = `border-b-secondary-afghani-blue-85 bg-secondary-afghani-blue-85 text-primary-white md:text-primary-black md:bg-transparent font-bold`;
+const navbarItemActiveStyle = `border-b-secondary-afghani-blue-85 bg-secondary-afghani-blue-85 text-primary-white md:text-primary-black md:bg-transparent font-semibold`;
 ---
 
 <header
   role="banner"
-  class="text-primary-black bg-primary-white sticky top-0 z-50 font-extralight drop-shadow-md"
+  class="text-primary-black bg-primary-white sticky top-0 z-50 font-light drop-shadow-md"
 >
   {
     currentBanner && (
@@ -29,7 +29,7 @@ const navbarItemActiveStyle = `border-b-secondary-afghani-blue-85 bg-secondary-a
         target="_blank"
         rel="noopener noreferrer"
         class:list={[
-          'block py-2 font-bold',
+          'block py-2 font-semibold',
           currentBanner.data.sitewide.wrapperClasses,
         ]}
       >

core/src/components/pages/blog/BlogListEntry.astro

@@ -23,5 +23,5 @@ const { post } = Astro.props;
   <p class="text-primary-black-35 mb-2 text-xs">
     {createBlogSubheader(post)}
   </p>
-  <p class="font-extralight">{createExcerpt(post.body)}...</p>
+  <p>{createExcerpt(post.body)}...</p>
 </article>

core/src/components/pages/community/NixConEntry.astro

@@ -16,7 +16,7 @@ const { title, date, description, href, imagePath = null } = Astro.props;
   href={href}
   target="_blank"
   rel="noopener noreferrer"
-  class="text-primary-white! flex flex-col gap-1 font-extralight no-underline!"
+  class="text-primary-white! flex flex-col gap-1 font-normal! no-underline!"
 >
   {
     imagePath && (

core/src/components/pages/community/OfficialCommunityLink.astro

@@ -41,7 +41,7 @@ const {
         type !== 'icon' && (
           <span
             class:list={[
-              'ml-2 leading-8',
+              'mt-4.25 ml-2 leading-0',
               type === 'mobile_icon_desktop_name' && 'hidden md:block',
             ]}
           >
@@ -52,7 +52,7 @@ const {
     </div>
     {
       description !== '' && type === 'full' && (
-        <div class="mt-2">{description}</div>
+        <div class="mt-3 -mb-1">{description}</div>
       )
     }
   </a>

core/src/components/pages/explore/Timeline.astro

@@ -21,7 +21,7 @@ const {
 import TimelineCenter from './TimelineCenter.astro';
 import TimelineText from './TimelineText.astro';
 
-const textCommonClasses = 'flex flex-col justify-start font-extralight gap-4';
+const textCommonClasses = 'flex flex-col justify-start gap-4';
 const imageCommonClasses = 'px-12 mx-auto my-12 w-10/12 md:w-full';
 ---
 

core/src/components/pages/explore/TimelineCenter.astro

@@ -11,7 +11,7 @@ const { number = 0 } = Astro.props;
 >
 </div>
 <div
-  class="bg-secondary-afghani-blue-45 text-primary-white absolute top-0 left-[-5rem] hidden h-[4rem] w-[4rem] rounded-[2rem] text-center text-[3rem] leading-[4rem] font-bold md:block"
+  class="bg-secondary-afghani-blue-45 text-primary-white absolute -top-3 left-[-5rem] hidden h-[4rem] w-[4rem] rounded-[2rem] pt-1 text-center text-[3rem] leading-[4rem] font-bold md:block"
 >
   {number}
 </div>

core/src/layouts/Layout.astro

@@ -6,6 +6,7 @@ import Footer from '@/components/Footer.astro';
 import Header from '@/components/Header.astro';
 
 import '@/styles/base.css';
+import '@/styles/route159-fonts.css';
 
 const {
   title = 'Nix & NixOS | Declarative builds and deployments',
@@ -69,11 +70,11 @@ const headFeedLinks = blogMenu.data.map((e) => {
     />
   </head>
   <body
-    class="text-primary-black-15 bg-primary-white flex min-h-screen flex-col"
+    class="text-primary-black bg-primary-white flex min-h-screen flex-col antialiased"
   >
     <Header />
 
-    <main class="flex-1">
+    <main class="flex-1 font-light">
       <slot />
     </main>
 
@@ -85,13 +86,13 @@ const headFeedLinks = blogMenu.data.map((e) => {
       // Fonts
       import '@fontsource-variable/overpass';
       import '@fontsource-variable/fira-code';
-      import '@fontsource-variable/roboto-flex/wdth.css';
+      import '@fontsource-variable/epilogue';
       import '@/lib/client/scrollToTopHandler.js';
     </script>
 
     <style>
       @font-face {
-        font-family: 'Roboto Flex Variable';
+        font-family: 'Epilogue Variable';
       }
     </style>
   </body>

core/src/pages/404.astro

@@ -10,7 +10,7 @@ import Layout from '../layouts/Layout.astro';
     >
       Not found
     </h1>
-    <p class="font-light">
+    <p>
       The requested content<span id="signpost"></span> could not be found.
     </p>
     <script is:inline>

core/src/pages/blog.astro

@@ -54,7 +54,7 @@ const blogMenu = await getEntry('menus', 'blog');
 <Layout title="Blog">
   <PageHeader text="Blog" />
   <Container class="py-8">
-    <p class="text-secondary-afghani-blue mb-2 text-center text-2xl font-light">
+    <p class="text-secondary-afghani-blue mb-2 text-center text-2xl">
       Click boxes to filter content
     </p>
     <div
@@ -79,7 +79,7 @@ const blogMenu = await getEntry('menus', 'blog');
                 class="border-secondary-afghani-blue-35 fill-secondary-afghani-blue-35 text-secondary-afghani-blue-45 before:icon-[mdi--checkbox-blank-outline] peer-checked:before:icon-[mdi--checkbox-marked-outline] hover:bg-secondary-afghani-blue-35 peer-checked:bg-secondary-afghani-blue-45 peer-checked:hover:border-secondary-afghani-blue-15 peer-checked:hover:bg-secondary-afghani-blue-15 peer-focus:ring-primary-black peer-checked:fill-primary-white peer-checked:text-primary-white hover:fill-primary-white hover:text-primary-white relative flex w-full cursor-pointer items-center gap-2 rounded-2xl border-1 p-4 peer-focus:ring-2 peer-focus:ring-offset-2 before:absolute before:right-4 before:block before:h-8 before:w-8 peer-checked:before:absolute peer-checked:before:block peer-checked:before:h-8 peer-checked:before:w-8 md:w-auto md:flex-col md:p-8 md:before:top-2 md:before:right-2"
               >
                 <InlineSVG src={e.icon} class="w-12 md:w-24" />
-                <span class="font-light">{e.title}</span>
+                <span>{e.title}</span>
               </label>
             </div>
             <div class="pt-6 md:hidden">

core/src/pages/branding.astro

@@ -21,7 +21,7 @@ import { Image } from 'astro:assets';
         alt="Branding Guide Title Page"
       />
       <div
-        class="flex flex-2 flex-col items-start space-y-3 self-center leading-relaxed font-extralight"
+        class="flex flex-2 flex-col items-start space-y-3 self-center leading-relaxed"
       >
         <h2
           class="font-heading text-secondary-afghani-blue text-4xl leading-none font-bold"
@@ -48,7 +48,7 @@ import { Image } from 'astro:assets';
       </div>
     </div>
   </Container>
-  <Container class="mt-16 space-y-4 leading-relaxed font-extralight">
+  <Container class="mt-16 space-y-4 leading-relaxed">
     <h2
       class="font-heading text-secondary-afghani-blue mt-8 text-4xl leading-none font-bold"
     >

core/src/pages/community.astro

@@ -197,8 +197,8 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
 
 <Layout title="Community">
   <PageHeader text="Community" />
-  <Container class="mt-16 space-y-4 leading-relaxed font-extralight">
-    <p class="text-primary-black-35 text-lg font-bold">
+  <Container class="mt-16 space-y-4 leading-relaxed">
+    <p class="font-bold">
       Nix and NixOS are developed and used by a diverse and welcoming community
       from all around the world.
     </p>
@@ -228,7 +228,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
     >
       Where to talk?
     </h2>
-    <p class="mt-2 leading-relaxed font-extralight">
+    <p class="mt-2 leading-relaxed">
       The Nix community is spread across various platforms. Here are the
       official and unofficial spaces where you can find help, discuss
       development, and chat with other users.
@@ -239,7 +239,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
           >
             Official spaces
           </h3>
-          <p class="text-primary-black-35">
+          <p>
             These spaces are monitored and moderated by the NixOS Moderation
             Team. This means they are moderated in such a way that they follow
             the standards and moral values of our community. You can find out
@@ -268,7 +268,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
           >
             Official social-media
           </h3>
-          <p class="text-primary-black-35">
+          <p>
             These spaces are maintained by our NixOS Marketing Team though not
             monitored and not moderated by the NixOS Moderation Team.
 
@@ -291,7 +291,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
           >
             Our calendars
           </h3>
-          <p class="text-primary-black-35">
+          <p>
             We use these calendars to schedule events, meetings, and other.
             <ul class="mt-4 grid flex-wrap gap-4 md:grid-cols-3">
               {
@@ -312,7 +312,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
       >
         Unofficial spaces
       </h3>
-      <p class="text-primary-black-35">
+      <p>
         These spaces are not monitored and not moderated by the NixOS Moderation
         Team. Please be aware that different moral values and rules may apply in
         these spaces. The NixOS moderation team may advise moderators in these
@@ -338,7 +338,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
       >
         The wider ecosystem
       </h3>
-      <p class="text-primary-black-35">
+      <p>
         There are a few alternative implementations of the idea of purely
         functional package managers (sorted chronologically by appearance):
 
@@ -421,7 +421,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
       </a>
     </p>
     <div
-      class="mt-4 grid auto-cols-fr bg-[url(/images/world-map.svg)] bg-contain bg-no-repeat text-center text-lg font-extralight md:grid-flow-col"
+      class="mt-4 grid auto-cols-fr bg-[url(/images/world-map.svg)] bg-contain bg-no-repeat text-center text-lg md:grid-flow-col"
     >
       <div>
         <h3
@@ -472,9 +472,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
         </ul>
       </div>
     </div>
-    <div
-      class="mt-16 flex flex-wrap-reverse gap-8 leading-loose font-extralight"
-    >
+    <div class="mt-16 flex flex-wrap-reverse gap-8 leading-loose">
       <div class="flex flex-1 flex-col items-start justify-center gap-8">
         <h2 class="text-secondary-afghani-blue text-4xl leading-none font-bold">
           RFC Process
@@ -517,9 +515,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
                 class="h-24"
               />
               <h3 class="font-heading text-2xl font-bold">{team.data.name}</h3>
-              <p class="mb-2 grow leading-relaxed font-extralight">
-                {team.data.description}
-              </p>
+              <p class="mb-2 grow leading-relaxed">{team.data.description}</p>
               <Button
                 color="white-borders"
                 size="sm-mobfull"
@@ -567,7 +563,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
         </ul>
       </div>
     </div>
-    <div class="space-y-4 leading-relaxed font-extralight">
+    <div class="space-y-4 leading-relaxed">
       <h2 class="font-heading text-secondary-afghani-blue text-3xl font-bold">
         The mission!
       </h2>

core/src/pages/community/commercial-support.astro

@@ -41,7 +41,7 @@ function shuffleArray(array) {
     <ul id="company-list" class="invisible m-4 flex flex-row flex-wrap gap-4">
       {
         shuffleArray(companies.data).map((company) => (
-          <li class="bg-secondary-afghani-blue-95 grow basis-72 rounded-2xl p-4 font-light xl:basis-80">
+          <li class="bg-secondary-afghani-blue-95 grow basis-72 rounded-2xl p-4 xl:basis-80">
             <a
               href={company.href}
               class="text-primary-black! space-y-4 no-underline!"

core/src/pages/devices.astro

@@ -10,7 +10,7 @@ const devices = await getCollection('devices');
 
 <Layout title="Devices">
   <PageHeader text="Devices" />
-  <Container class="mt-16 space-y-4 leading-relaxed font-extralight">
+  <Container class="mt-16 space-y-4 leading-relaxed">
     <p>
       Like any distro, NixOS can run on a wide variety of devices. Due to the
       unique nature of many devices (e.g. Arm & RISC-V), the NixOS Hardware team