feat: tidy fonts, font hierarchy (#49)

src/.vuepress/public/fonts.css

@@ -1,3 +1,93 @@
+@font-face {
+  font-family: 'inter';
+  src: url('/fonts/inter/Inter-Regular.woff2') format('woff2'),
+    url('/fonts/inter/Inter-Regular') format('woff'),
+    url('/fonts/inter/Inter-Regular.otf') format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'inter';
+  src: url('/fonts/inter/Inter-SemiBold.woff2') format('woff2'),
+    url('/fonts/inter/Inter-SemiBold') format('woff'),
+    url('/fonts/inter/Inter-SemiBold.otf') format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'inter';
+  src: url('/fonts/inter/Inter-SemiBoldItalic.woff2') format('woff2'),
+    url('/fonts/inter/Inter-SemiBoldItalic') format('woff'),
+    url('/fonts/inter/Inter-SemiBoldItalic.otf') format('opentype');
+  font-display: auto;
+  font-style: italic;
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'montserrat';
+  src: url('/fonts/montserrat/Montserrat-Light.woff2') format('woff2'),
+    url('/fonts/montserrat/Montserrat-Light') format('woff'),
+    url('/fonts/montserrat/Montserrat-Light.otf') format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'montserrat';
+  src: url('/fonts/montserrat/Montserrat-LightItalic.woff2') format('woff2'),
+    url('/fonts/montserrat/Montserrat-LightItalic') format('woff'),
+    url('/fonts/montserrat/Montserrat-LightItalic.otf') format('opentype');
+  font-display: auto;
+  font-style: italic;
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'montserrat';
+  src: url('/fonts/montserrat/Montserrat-Medium.woff2') format('woff2'),
+    url('/fonts/montserrat/Montserrat-Medium') format('woff'),
+    url('/fonts/montserrat/Montserrat-Medium.otf') format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: 'montserrat';
+  src: url('/fonts/montserrat/Montserrat-MediumItalic.woff2') format('woff2'),
+    url('/fonts/montserrat/Montserrat-MediumItalic') format('woff'),
+    url('/fonts/montserrat/Montserrat-MediumItalic.otf') format('opentype');
+  font-display: auto;
+  font-style: italic;
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: 'montserrat';
+  src: url('/fonts/montserrat/Montserrat-Bold.woff2') format('woff2'),
+    url('/fonts/montserrat/Montserrat-SemiBold') format('woff'),
+    url('/fonts/montserrat/Montserrat-SemiBold.otf') format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: 'montserrat';
+  src: url('/fonts/montserrat/Montserrat-BoldItalic.woff2') format('woff2'),
+    url('/fonts/montserrat/Montserrat-SemiBoldItalic') format('woff'),
+    url('/fonts/montserrat/Montserrat-SemiBoldItalic.otf') format('opentype');
+  font-display: auto;
+  font-style: italic;
+  font-weight: 700;
+}
+
 @font-face {
   font-family: 'source-serif-pro';
   src: url('/fonts/source-serif-pro/source-serif-pro-regular.woff2')
@@ -21,33 +111,3 @@
   font-style: normal;
   font-weight: 600;
 }
-
-@font-face {
-  font-family: 'aileron';
-  src: url('/fonts/aileron/aileron-regular.woff2') format('woff2'),
-    url('/fonts/aileron/aileron-regular.woff') format('woff'),
-    url('/fonts/aileron/aileron-regular.otf') format('opentype');
-  font-display: auto;
-  font-style: normal;
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: 'aileron';
-  src: url('/fonts/aileron/aileron-semibold.woff2') format('woff2'),
-    url('/fonts/aileron/aileron-semibold.woff') format('woff'),
-    url('/fonts/aileron/aileron-semibold.otf') format('opentype');
-  font-display: auto;
-  font-style: normal;
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: 'aileron';
-  src: url('/fonts/aileron/aileron-bold.woff2') format('woff2'),
-    url('/fonts/aileron/aileron-bold.woff') format('woff'),
-    url('/fonts/aileron/aileron-bold.otf') format('opentype');
-  font-display: auto;
-  font-style: normal;
-  font-weight: 700;
-}

src/.vuepress/theme/components/Footer.vue

@@ -16,7 +16,7 @@
               >
                 <NavLink
                   :item="item"
-                  class="type-p3 hover:opacity-75 transition transition-opacity duration-300 ease-in-out font-semibold"
+                  class="type-p3 hover:opacity-75 transition transition-opacity duration-300 ease-in-out"
                 />
                 <ul
                   v-if="item.children && item.children.length"

src/.vuepress/theme/components/FooterLegal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center">
+  <div class="flex items-center text-sm">
     <span>
       <a
         href="https://protocol.ai"

src/.vuepress/theme/components/Nav.vue

@@ -25,14 +25,14 @@
           />
         </a>
         <ul
-          class="nav__link-list hidden md:flex justify-between w-full max-w-xl ml-8"
+          class="nav__link-list hidden md:flex justify-between w-full max-w-lg ml-8"
         >
           <li
             v-for="page in $themeLocaleConfig.headerLinks"
             :key="page.text"
             class="nav__link-item first:m-0 font-semibold"
           >
-            <Link class="nav__link" :item="page" />
+            <Link class="nav__link font-display font-medium" :item="page" />
           </li>
         </ul>
         <button

src/.vuepress/theme/components/blog/LinkCard.vue

@@ -33,7 +33,7 @@
       </UnstyledLink>
       <div class="p-4 flex flex-grow flex-col">
         <UnstyledLink :to="path" :item="{ target: '_blank' }">
-          <h1 class="type-h5 font-bold text-primary hover:underline clamp-3">
+          <h1 class="type-h5 text-xl text-primary hover:underline clamp-3">
             {{ title }}
           </h1>
         </UnstyledLink>
@@ -48,7 +48,7 @@
         <footer class="flex-grow mt-2">
           <p
             v-if="frontmatter.description || frontmatter.description"
-            class="type-p1-serif text-primary clamp-3"
+            class="type-p1 text-sm text-primary clamp-3"
             itemprop="description"
           >
             {{ frontmatter.description || frontmatter.description }}

src/.vuepress/theme/components/blog/LinksAndSocial.vue

@@ -18,7 +18,7 @@
       >
     </h2>
     <div>
-      {{ `Prefer your news a different way? Try our, ` }}
+      {{ `Prefer your news a different way? Try our ` }}
       <a
         class="text-blueGreen hover:underline"
         href="#newsletter-form"

src/.vuepress/theme/components/blog/NewsletterForm.vue

@@ -5,7 +5,7 @@
   >
     <div class="flex-shrink lg:max-w-sm xl:max-w-xl mb-4 lg:mb-0">
       <h2 class="type-h2">Stay informed</h2>
-      <p class="mt-2">
+      <p class="mt-2 mr-2">
         Sign up for the IPFS Weekly newsletter (<router-link
           :to="latestWeeklyPost ? latestWeeklyPost.path : ''"
           class="text-blueGreen hover:underline"
@@ -42,11 +42,11 @@
               type="submit"
               value="Subscribe"
               name="subscribe"
-              class="p-2 text-white bg-blueGreen rounded cursor-pointer w-full"
+              class="p-2 text-white font-semibold bg-blueGreen rounded cursor-pointer w-full"
             />
           </div>
         </div>
-        <label class="pt-2 italic col-start-1 col-span-2" for="gdpr_28879">
+        <label class="pt-2 col-start-1 col-span-2" for="gdpr_28879">
           <input
             id="gdpr_28879"
             type="checkbox"

src/.vuepress/theme/components/blog/PostHero.vue

@@ -13,7 +13,7 @@
               <PostAuthor v-bind="author" />
             </router-link>
             <time
-              class="italic opacity-50"
+              class="text-gray"
               pubdate
               itemprop="datePublished"
               :datetime="date"

src/.vuepress/theme/components/blog/PostMeta.vue

@@ -3,7 +3,7 @@
     <PostAuthor v-if="author && author.name" v-bind="author" />
     <div v-if="date">
       <time
-        class="italic opacity-50"
+        class="text-gray-dark"
         pubdate
         itemprop="datePublished"
         :datetime="date"

src/.vuepress/theme/components/blog/RegularCard.vue

@@ -28,7 +28,7 @@
       </div>
       <div class="p-4 flex flex-grow flex-col">
         <router-link :to="path">
-          <h1 class="type-h5 font-bold text-primary hover:underline clamp-3">
+          <h1 class="type-h5 text-xl text-primary hover:underline clamp-3">
             {{ title }}
           </h1>
         </router-link>
@@ -44,7 +44,7 @@
         <footer class="flex-grow mt-2">
           <p
             v-if="frontmatter.description || frontmatter.description"
-            class="type-p1-serif text-primary clamp-3"
+            class="type-p1 text-sm text-primary clamp-3"
             itemprop="description"
           >
             {{ frontmatter.description || frontmatter.description }}

src/.vuepress/theme/components/blog/SearchCategoriesAndTags.vue

@@ -37,7 +37,7 @@
 
       <button
         ref="select2"
-        class="h-full p-2 text-white bg-blueGreen rounded opacity-75 hover:opacity-100 transition transition-opacity duration-300 ease-in-out"
+        class="h-full p-2 text-white font-semibold bg-blueGreen rounded opacity-75 hover:opacity-100 transition transition-opacity duration-300 ease-in-out"
         @click="handleSearch"
         @focus="setSelected(2)"
       >

src/.vuepress/theme/components/blog/VideoCard.vue

@@ -43,7 +43,7 @@
           class="text-left"
           @click="handleVideoClick"
         >
-          <h1 class="type-h5 font-bold text-primary hover:underline clamp-3">
+          <h1 class="type-h5 text-xl text-primary hover:underline clamp-3">
             {{ title }}
           </h1>
         </a>
@@ -59,7 +59,7 @@
         <footer class="flex-grow">
           <p
             v-if="frontmatter.description || frontmatter.description"
-            class="type-p1-serif text-primary clamp-5"
+            class="type-p1 text-sm text-primary clamp-5"
             itemprop="description"
           >
             {{ frontmatter.description || frontmatter.description }}

src/.vuepress/theme/components/blog/VideoModalContent.vue

@@ -5,7 +5,7 @@
       itemscope
       itemtype="https://schema.org/BlogPosting"
     >
-      <h1 class="type-h5 font-bold text-primary mr-4">
+      <h1 class="type-h5 text-primary mr-4">
         <UnstyledLink
           :to="videoModalCard.path"
           :item="{ target: '_blank' }"
@@ -24,9 +24,9 @@
           frameborder="0"
         ></iframe>
       </div>
-      <div>
+      <div class="text-sm">
         <time
-          class="italic opacity-50"
+          class="text-gray-dark"
           pubdate
           itemprop="datePublished"
           :datetime="videoModalCard.frontmatter.date"
@@ -56,7 +56,7 @@
             videoModalCard.frontmatter.description ||
             videoModalCard.frontmatter.description
           "
-          class="type-p1-serif text-primary clamp-5"
+          class="type-p1 text-primary clamp-5"
           itemprop="description"
         >
           {{
@@ -66,7 +66,7 @@
         </p>
       </footer>
       <div class="flex items-end mt-4">
-        <span class="text-sm opacity-50">Share this item:</span>
+        <span class="text-sm text-gray-dark">Share this item:</span>
         <PostSocials
           class="flex ml-2"
           :url="videoModalCard.path"

src/.vuepress/theme/layouts/Blog.vue

@@ -38,7 +38,7 @@
         class="flex justify-center mt-8 pb-4"
       >
         <button
-          class="px-3 py-2 text-white text-xl bg-blueGreen rounded hover:opacity-75"
+          class="px-3 py-2 text-white text-xl bg-blueGreen font-semibold rounded hover:opacity-75"
           @click="handleLoadMoreClick"
         >
           Load More

src/.vuepress/theme/layouts/BlogPost.vue

@@ -57,7 +57,7 @@ export default {
 <style lang="postcss">
 .blog > h1,
 .blog > h2 {
-  padding-bottom: 1rem;
+  padding-bottom: 0.5rem;
   border-bottom: 2px solid #d1d1d663;
 }
 </style>

src/.vuepress/theme/styles/index.css

@@ -7,4 +7,9 @@ body {
 code {
   white-space: pre-wrap;
   word-break: break-all;
+  color: rgba(51, 51, 51, 0.8);
+  padding: 0.15rem 0.3rem;
+  font-size: 0.9em;
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
 }

src/.vuepress/theme/tailwind.config.js

@@ -96,14 +96,15 @@ const theme = {
     },
   },
   fontFamily: {
-    sans: ['aileron', 'sans-serif'],
+    sans: ['inter', 'sans-serif'],
     serif: ['source-serif-pro', 'serif'],
+    display: ['montserrat', 'sans-serif'],
   },
   textStyles: (theme) => ({
     h1: {
-      fontFamily: theme('fontFamily.sans'),
+      fontFamily: theme('fontFamily.display'),
       lineHeight: theme('lineHeight.120'),
-      fontWeight: theme('fontWeight.semibold'),
+      fontWeight: theme('fontWeight.medium'),
       letterSpacing: theme('letterSpacing.tight'),
       fontSize: theme('fontSize.35'),
       '@screen sm': {
@@ -111,42 +112,42 @@ const theme = {
       },
     },
     h2: {
-      fontSize: theme('fontSize.30'),
+      fontSize: theme('fontSize.28'),
       lineHeight: theme('lineHeight.120'),
-      fontFamily: theme('fontFamily.sans'),
-      fontWeight: theme('fontWeight.bold'),
+      fontFamily: theme('fontFamily.display'),
+      fontWeight: theme('fontWeight.medium'),
       letterSpacing: theme('letterSpacing.tight'),
       '@screen sm': {
-        fontSize: theme('fontSize.36'),
-        lineHeight: theme('lineHeight.125'),
+        fontSize: theme('fontSize.34'),
+        lineHeight: theme('lineHeight.120'),
       },
     },
     h3: {
-      fontFamily: theme('fontFamily.serif'),
-      fontWeight: theme('fontWeight.semibold'),
-      fontSize: theme('fontSize.24'),
+      fontFamily: theme('fontFamily.display'),
+      fontWeight: theme('fontWeight.medium'),
+      fontSize: theme('fontSize.20'),
       letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.130'),
       '@screen sm': {
-        fontSize: theme('fontSize.30'),
+        fontSize: theme('fontSize.27'),
       },
     },
     h4: {
-      fontFamily: theme('fontFamily.serif'),
+      fontFamily: theme('fontFamily.sans'),
       fontWeight: theme('fontWeight.normal'),
       fontSize: theme('fontSize.24'),
       letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.130'),
       '@screen sm': {
-        fontSize: theme('fontSize.28'),
+        fontSize: theme('fontSize.24'),
         lineHeight: theme('lineHeight.140'),
       },
     },
     h5: {
-      fontFamily: theme('fontFamily.sans'),
-      fontWeight: theme('fontWeight.normal'),
+      fontFamily: theme('fontFamily.display'),
+      fontWeight: theme('fontWeight.semibold'),
       fontSize: theme('fontSize.18'),
-      letterSpacing: theme('letterSpacing.normal'),
+      letterSpacing: theme('letterSpacing.tight'),
       lineHeight: theme('lineHeight.130'),
       '@screen sm': {
         fontSize: theme('fontSize.22'),
@@ -155,22 +156,12 @@ const theme = {
     p1: {
       fontFamily: theme('fontFamily.sans'),
       fontWeight: theme('fontWeight.normal'),
-      fontSize: theme('fontSize.16'),
+      fontSize: theme('fontSize.15'),
       letterSpacing: theme('letterSpacing.normal'),
-      lineHeight: theme('lineHeight.130'),
+      lineHeight: theme('lineHeight.140'),
       '@screen sm': {
-        fontSize: theme('fontSize.18'),
-        lineHeight: theme('lineHeight.140'),
-      },
-    },
-    'p1-serif': {
-      fontFamily: theme('fontFamily.serif'),
-      fontWeight: theme('fontWeight.normal'),
-      fontSize: theme('fontSize.16'),
-      lineHeight: theme('lineHeight.150'),
-      letterSpacing: theme('letterSpacing.tight'),
-      '@screen sm': {
-        fontSize: theme('fontSize.18'),
+        fontSize: theme('fontSize.15'),
+        lineHeight: theme('lineHeight.150'),
       },
     },
     p2: {
@@ -181,10 +172,10 @@ const theme = {
       lineHeight: theme('lineHeight.130'),
     },
     p3: {
-      fontFamily: theme('fontFamily.sans'),
-      fontWeight: theme('fontWeight.normal'),
+      fontFamily: theme('fontFamily.display'),
+      fontWeight: theme('fontWeight.medium'),
       fontSize: theme('fontSize.16'),
-      letterSpacing: theme('letterSpacing.normal'),
+      letterSpacing: theme('letterSpacing.tight'),
       lineHeight: theme('lineHeight.140'),
     },
     p4: {
@@ -209,9 +200,9 @@ const theme = {
       },
     },
     rich: {
-      extends: 'p1-serif',
+      extends: 'p1',
       h1: {
-        extends: 'h1',
+        extends: 'h2',
       },
       h2: {
         extends: 'h2',