fix: doc css issue on blank lines

ginifizz · ginifizz · commit 0463ca7769e4 · 2023-07-20T00:50:27.000+02:00
diff --git a/pwa/app/(common)/layout.tsx b/pwa/app/(common)/layout.tsx
@@ -1,6 +1,6 @@
 import "styles/common.css";
 import "@docsearch/css";
-import { Poppins } from "next/font/google";
+import { Poppins, Fira_Mono } from "next/font/google";
 import Layout from "components/layout/Layout";
 import { Metadata } from "next";
 import { getRootUrl } from "utils";
@@ -12,6 +12,13 @@ const poppins = Poppins({
   subsets: ["latin", "latin-ext"],
 });
 
+const fira = Fira_Mono({
+  variable: "--font-fira",
+  display: "swap",
+  weight: ["400", "500", "700"],
+  subsets: ["latin", "latin-ext"],
+});
+
 export async function generateMetadata(): Promise<Metadata> {
   const dictionary = await import(`data/meta.json`);
 
@@ -56,7 +63,10 @@ function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={`${poppins.variable} w-full light`}>
+    <html
+      lang="en"
+      className={`${poppins.variable} ${fira.variable} w-full light`}
+    >
       <body className="bg-white dark:bg-blue-black">
         <Layout>{children}</Layout>
       </body>
diff --git a/pwa/common.tailwind.config.js b/pwa/common.tailwind.config.js
@@ -66,6 +66,7 @@ module.exports = {
       },
       fontFamily: {
         title: ["var(--font-poppins)"],
+        mono: ["var(--font-fira)"],
       },
       maxWidth: {
         "8xl": "90rem",
diff --git a/pwa/styles/common.css b/pwa/styles/common.css
@@ -40,7 +40,7 @@
         @apply hidden;
     }
     .doc pre {
-        @apply text-sm whitespace-pre-wrap leading-relaxed !bg-gray-100 dark:!bg-blue-darkest rounded-2xl mt-2 mb-4 overflow-x-auto;
+        @apply font-mono text-sm whitespace-pre-wrap leading-relaxed !bg-gray-100 dark:!bg-blue-darkest rounded-2xl mt-2 mb-4 overflow-x-auto;
     }
     .doc pre > code > pre {
         @apply p-0 m-0 rounded-none !bg-transparent;
@@ -54,6 +54,9 @@
     .doc a {
         @apply text-blue;
     }
+    .doc span.line:after {
+        content: "\200B"; /* useful to set correct height on empty lines */
+    }
 }
 
 @layer utilities {

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@`
`40`	`40`	`@apply hidden;`
`41`	`41`	`}`
`42`	`42`	`.doc pre {`
`43`		`- @apply text-sm whitespace-pre-wrap leading-relaxed !bg-gray-100 dark:!bg-blue-darkest rounded-2xl mt-2 mb-4 overflow-x-auto;`
	`43`	`+ @apply font-mono text-sm whitespace-pre-wrap leading-relaxed !bg-gray-100 dark:!bg-blue-darkest rounded-2xl mt-2 mb-4 overflow-x-auto;`
`44`	`44`	`}`
`45`	`45`	`.doc pre > code > pre {`
`46`	`46`	`@apply p-0 m-0 rounded-none !bg-transparent;`
`@@ -54,6 +54,9 @@`
`54`	`54`	`.doc a {`
`55`	`55`	`@apply text-blue;`
`56`	`56`	`}`
	`57`	`+ .doc span.line:after {`
	`58`	`+ content: "\200B"; /* useful to set correct height on empty lines */`
	`59`	`+ }`
`57`	`60`	`}`
`58`	`61`
`59`	`62`	`@layer utilities {`