feat: update theme for new fonts

EstebanBorai · Aug 7, 2024 · c5123be · c5123be
1 parent 6e5b9c4
commit c5123be
Show file tree

Hide file tree

Showing 31 changed files with 71 additions and 73 deletions.
diff --git a/src/app.css b/src/app.css
@@ -2,111 +2,111 @@
 @tailwind components;
 @tailwind utilities;
 
-/* fira-code-regular - latin_latin-ext */
+/* abril-fatface-regular - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Fira Code';
+  font-family: 'Abril Fatface';
   font-style: normal;
   font-weight: 400;
-  src: url('/fonts/fira-code-v21-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/fonts/abril-fatface-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
-/* playfair-regular - latin */
+/* dm-sans-200 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Playfair';
+  font-family: 'DM Sans';
+  font-style: normal;
+  font-weight: 200;
+  src: url('/fonts/dm-sans-v15-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* dm-sans-200italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'DM Sans';
+  font-style: italic;
+  font-weight: 200;
+  src: url('/fonts/dm-sans-v15-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* dm-sans-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'DM Sans';
   font-style: normal;
   font-weight: 400;
-  src: url('/fonts/playfair-v2-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/fonts/dm-sans-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-/* playfair-italic - latin */
+/* dm-sans-italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Playfair';
+  font-family: 'DM Sans';
   font-style: italic;
   font-weight: 400;
-  src: url('/fonts/playfair-v2-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/fonts/dm-sans-v15-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-/* playfair-600 - latin */
+/* dm-sans-600 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Playfair';
+  font-family: 'DM Sans';
   font-style: normal;
   font-weight: 600;
-  src: url('/fonts/playfair-v2-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/fonts/dm-sans-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-/* playfair-600italic - latin */
+/* dm-sans-600italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Playfair';
+  font-family: 'DM Sans';
   font-style: italic;
   font-weight: 600;
-  src: url('/fonts/playfair-v2-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/fonts/dm-sans-v15-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-/* playfair-800 - latin */
+/* dm-sans-800 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Playfair';
+  font-family: 'DM Sans';
   font-style: normal;
   font-weight: 800;
-  src: url('/fonts/playfair-v2-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/fonts/dm-sans-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-/* playfair-800italic - latin */
+
+/* dm-sans-800italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Playfair';
+  font-family: 'DM Sans';
   font-style: italic;
   font-weight: 800;
-  src: url('/fonts/playfair-v2-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/fonts/dm-sans-v15-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-
-/* nunito-sans-regular - latin */
+/* ibm-plex-mono-regular - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Nunito Sans';
+  font-family: 'IBM Plex Mono';
   font-style: normal;
   font-weight: 400;
-  src: url('/fonts/nunito-sans-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/fonts/ibm-plex-mono-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-/* nunito-sans-italic - latin */
+/* ibm-plex-mono-italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Nunito Sans';
+  font-family: 'IBM Plex Mono';
   font-style: italic;
   font-weight: 400;
-  src: url('/fonts/nunito-sans-v15-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/fonts/ibm-plex-mono-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-/* nunito-sans-600 - latin */
+/* ibm-plex-mono-600 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Nunito Sans';
+  font-family: 'IBM Plex Mono';
   font-style: normal;
   font-weight: 600;
-  src: url('/fonts/nunito-sans-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/fonts/ibm-plex-mono-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
-/* nunito-sans-600italic - latin */
+/* ibm-plex-mono-600italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Nunito Sans';
+  font-family: 'IBM Plex Mono';
   font-style: italic;
   font-weight: 600;
-  src: url('/fonts/nunito-sans-v15-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-/* nunito-sans-800 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 800;
-  src: url('/fonts/nunito-sans-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-/* nunito-sans-800italic - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 800;
-  src: url('/fonts/nunito-sans-v15-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/fonts/ibm-plex-mono-v19-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
 body {

diff --git a/src/lib/components/Tag.svelte b/src/lib/components/Tag.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <span
-  class="inline-block border border-2 rounded-full text-xs py-1 px-4 text-center dark:text-white"
+  class="font-mono inline-block dark:bg-zinc-800 bg-zinc-100 rounded-md px-2 py-0.25 text-center dark:text-white"
 >
-  <span class="lowercase">{title}</span>
+  <span class="lowercase text-xs">{title}</span>
 </span>
diff --git a/src/routes/[lang=lang]/notes/+page.svelte b/src/routes/[lang=lang]/notes/+page.svelte
@@ -83,13 +83,11 @@
   <meta name="twitter:image:src" content={avatarUrl} />
 </svelte:head>
 
-<section class="mx-auto p-4 md:p-2 md:w-11/12">
+<section>
   <ul>
     {#each notesIndex as page}
-      <ul
-        class="flex flex-col md:grid md:grid-cols-3 md:gap-6 px-4 md:px-0 max-w-[1080px] mx-auto"
-      >
-        {#each page as { meta, slug }}
+      <ul class="flex flex-col gap-4 p-4">
+        {#each page as { meta, slug }, idx}
           <Entry
             title={meta.title}
             description={meta.description}

diff --git a/src/routes/[lang=lang]/notes/components/Entry.svelte b/src/routes/[lang=lang]/notes/components/Entry.svelte
@@ -20,33 +20,33 @@
 </script>
 
 <li
-  class="mb-4 md:mb-0 last-of-type:mb-0 border-b border-gray-600 md:border-0 last-of-type:border-0 mb-8 h-[400px]"
+  class="grid gap-4 grid-cols-[100px,auto] md:grid-cols-[200px,auto] md:w-[720px] w-full"
 >
   <figure
-    class="rounded pb-4 flex justify-center items-start overflow-hidden h-[150px]"
+    class="rounded flex justify-center items-center overflow-hidden w-[100px] h-[100px] md:h-[200px] md:w-[200px]"
   >
-    <img loading="lazy" decoding="async" alt={title} src={previewImageUrl} />
+    <img
+      class="w-full h-full object-cover"
+      loading="lazy"
+      decoding="async"
+      alt={title}
+      src={previewImageUrl}
+    />
   </figure>
-  <header>
-    <h3
-      class="text-xl py-4 text-gray-200 font-extrabold cursor-pointer hover:text-link hover:underline"
-    >
+  <article>
+    <h3 class="text-lg md:text-xl hover:underline">
       <a href="/{$page.params.lang}/notes/{slug}">
         {title}
       </a>
     </h3>
-  </header>
-  <main>
-    <p aria-label={description} class="line-clamp-3 text-gray-400">
+    <p aria-label={description} class="py-2 text-sm line-clamp-3 text-gray-400">
       {description}
     </p>
     <ul class="flex justify-start items-start flex-wrap gap-2 py-2">
       {#each displayTags as category}
         <Tag title={category} />
       {/each}
     </ul>
-  </main>
-  <footer class="flex flex-col">
     <div class="flex">
       <span class="flex items-center">
         <time
@@ -57,5 +57,5 @@
         </time>
       </span>
     </div>
-  </footer>
+  </article>
 </li>
diff --git a/static/fonts/abril-fatface-v23-latin-regular.woff2 b/static/fonts/abril-fatface-v23-latin-regular.woff2
diff --git a/static/fonts/dm-sans-v15-latin-200.woff2 b/static/fonts/dm-sans-v15-latin-200.woff2
diff --git a/static/fonts/dm-sans-v15-latin-200italic.woff2 b/static/fonts/dm-sans-v15-latin-200italic.woff2
diff --git a/static/fonts/dm-sans-v15-latin-600.woff2 b/static/fonts/dm-sans-v15-latin-600.woff2
diff --git a/static/fonts/dm-sans-v15-latin-600italic.woff2 b/static/fonts/dm-sans-v15-latin-600italic.woff2
diff --git a/static/fonts/dm-sans-v15-latin-800.woff2 b/static/fonts/dm-sans-v15-latin-800.woff2
diff --git a/static/fonts/dm-sans-v15-latin-800italic.woff2 b/static/fonts/dm-sans-v15-latin-800italic.woff2
diff --git a/static/fonts/dm-sans-v15-latin-italic.woff2 b/static/fonts/dm-sans-v15-latin-italic.woff2
diff --git a/static/fonts/dm-sans-v15-latin-regular.woff2 b/static/fonts/dm-sans-v15-latin-regular.woff2
diff --git a/static/fonts/fira-code-v21-latin_latin-ext-regular.woff2 b/static/fonts/fira-code-v21-latin_latin-ext-regular.woff2
diff --git a/static/fonts/ibm-plex-mono-v19-latin-600.woff2 b/static/fonts/ibm-plex-mono-v19-latin-600.woff2
diff --git a/static/fonts/ibm-plex-mono-v19-latin-600italic.woff2 b/static/fonts/ibm-plex-mono-v19-latin-600italic.woff2
diff --git a/static/fonts/ibm-plex-mono-v19-latin-italic.woff2 b/static/fonts/ibm-plex-mono-v19-latin-italic.woff2
diff --git a/static/fonts/ibm-plex-mono-v19-latin-regular.woff2 b/static/fonts/ibm-plex-mono-v19-latin-regular.woff2
diff --git a/static/fonts/nunito-sans-v15-latin-600.woff2 b/static/fonts/nunito-sans-v15-latin-600.woff2
diff --git a/static/fonts/nunito-sans-v15-latin-600italic.woff2 b/static/fonts/nunito-sans-v15-latin-600italic.woff2
diff --git a/static/fonts/nunito-sans-v15-latin-800.woff2 b/static/fonts/nunito-sans-v15-latin-800.woff2
diff --git a/static/fonts/nunito-sans-v15-latin-800italic.woff2 b/static/fonts/nunito-sans-v15-latin-800italic.woff2
diff --git a/static/fonts/nunito-sans-v15-latin-italic.woff2 b/static/fonts/nunito-sans-v15-latin-italic.woff2
diff --git a/static/fonts/nunito-sans-v15-latin-regular.woff2 b/static/fonts/nunito-sans-v15-latin-regular.woff2
diff --git a/static/fonts/playfair-v2-latin-600.woff2 b/static/fonts/playfair-v2-latin-600.woff2
diff --git a/static/fonts/playfair-v2-latin-600italic.woff2 b/static/fonts/playfair-v2-latin-600italic.woff2
diff --git a/static/fonts/playfair-v2-latin-800.woff2 b/static/fonts/playfair-v2-latin-800.woff2
diff --git a/static/fonts/playfair-v2-latin-800italic.woff2 b/static/fonts/playfair-v2-latin-800italic.woff2
diff --git a/static/fonts/playfair-v2-latin-italic.woff2 b/static/fonts/playfair-v2-latin-italic.woff2
diff --git a/static/fonts/playfair-v2-latin-regular.woff2 b/static/fonts/playfair-v2-latin-regular.woff2
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -19,9 +19,9 @@ module.exports = {
         },
       },
       fontFamily: {
-        body: ['Nunito Sans', 'sans'],
-        display: ['Playfair', 'serif'],
-        mono: ['Fira Code', 'monospace'],
+        body: ['DM Sans', 'sans'],
+        display: ['Abril Fatface', 'serif'],
+        mono: ['IBM Plex Mono', 'monospace'],
       },
     },
   },