fix: using open sans font for landing page

Author: technikhil314

nuxt.config.js

@@ -47,6 +47,9 @@ export default {
       { rel: "apple-touch-icon", sizes: "144x144", href: "/apple-touch-icon-144x144.png" },
       { rel: "apple-touch-icon", sizes: "152x152", href: "/apple-touch-icon-152x152.png" },
       { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon-180x180.png" },
+      { rel: "preconnect", href: "https://fonts.googleapis.com" },
+      { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: true },
+      { href: "https://fonts.googleapis.com/css2?family=Open+Sans&display=swap", rel: "stylesheet" },
       ...canonicalLinks
     ]
   },

pages/diff/_diff.vue

@@ -49,27 +49,21 @@
       </template>
     </Navbar>
     <main>
-      <div class="flex items-start w-full gap-4">
+      <div class="flex items-start w-full gap-4 font-mono">
         <div
           class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-sm  max-h-screen--nav line-number-gutter min-h-80"
         >
           <RTStickyCopyButton :clickHandler="copyTextToClipboard" />
           <div v-for="(lineDiff, index) in lhsDiff" :key="index">
-            <p
-              class="font-mono break-all whitespace-pre-wrap"
-              v-html="lineDiff"
-            ></p>
+            <p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
           </div>
         </div>
         <div
           class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-sm  min-h-80 line-number-gutter max-h-screen--nav"
         >
           <RTStickyCopyButton :clickHandler="copyTextToClipboard" />
           <div v-for="(lineDiff, index) in rhsDiff" :key="index">
-            <p
-              class="font-mono break-all whitespace-pre-wrap"
-              v-html="lineDiff"
-            ></p>
+            <p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
           </div>
         </div>
       </div>
@@ -91,7 +85,7 @@ export default {
         const hunkState = item[0]
         if (hunkState === -1 || hunkState === 0) {
           const className = hunkState === -1 ? 'bg-red-400' : ''
-          return `<span class="font-mono break-all inline p-0 m-0 ${className}">${item[1]}</span>`
+          return `<span class="break-all inline p-0 m-0 ${className}">${item[1]}</span>`
         }
         return false
       })
@@ -103,7 +97,7 @@ export default {
         const hunkState = item[0]
         if (hunkState === 1 || hunkState === 0) {
           const className = hunkState === 1 ? 'bg-green-400' : ''
-          return `<span class="font-mono break-all inline p-0 m-0 ${className}">${item[1]}</span>`
+          return `<span class="break-all inline p-0 m-0 ${className}">${item[1]}</span>`
         }
         return false
       })

static/global.scss

@@ -8,6 +8,10 @@ main {
   @apply h-full;
 }
 
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
 .page-root {
   @apply flow-root w-full;
 }