demo + final touches

added demo

README.md

@@ -1,34 +1,5 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# What the FOUT! 🤌
 
-## Getting Started
+A CSS playground for F-mods (font metric overrides). This tool will help you find the right fallback for your font and tweak it in order to get the best possible results.
 
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+![WTF demo](/public/demo.gif)

src/app/components/Interface.tsx

@@ -433,20 +433,28 @@ export const Interface = (props: InterfaceProps) => {
       </div>
 
       <div className="flex flex-row justify-between gap-4">
-        <div className="bg-slate-50 basis-1/2 p-6 rounded shadow-lg text-left font-mono text-sm">
-          <pre>
+        <div className="bg-slate-50 basis-1/2 p-6 rounded shadow-lg text-left font-mono text-sm relative">
+          <div className="absolute top-4 right-4">
+            <p className="font-sans text-xs text-slate-400">
+              FONT FACE DECLARATION
+            </p>
+          </div>
+          <pre className="mt-6">
             <code
               dangerouslySetInnerHTML={{
-                __html: `@font-face {<br />&nbsp;&nbsp;font-family: &quot;fallback for ${fontName}&quot;;<br />&nbsp;&nbsp;src: local(${fallbackFontName});<br />&nbsp;&nbsp;size-adjust: ${sizeAdjust}%;<br />&nbsp;&nbsp;ascent-override: ${ascentOverride}%;<br />&nbsp;&nbsp;descent-override: ${descentOverride}%;<br />&nbsp;&nbsp;line-gap-override: ${lineGapOverride}%;<br />}`,
+                __html: `@font-face {<br />&nbsp;&nbsp;font-family: "fallback for ${fontName}";<br />&nbsp;&nbsp;src: local(${fallbackFontName});<br />&nbsp;&nbsp;size-adjust: ${sizeAdjust}%;<br />&nbsp;&nbsp;ascent-override: ${ascentOverride}%;<br />&nbsp;&nbsp;descent-override: ${descentOverride}%;<br />&nbsp;&nbsp;line-gap-override: ${lineGapOverride}%;<br />}`,
               }}
             />
           </pre>
         </div>
-        <div className="bg-slate-50 basis-1/2 p-6 rounded shadow-lg text-left font-mono text-sm">
-          <pre>
+        <div className="bg-slate-50 basis-1/2 p-6 rounded shadow-lg text-left font-mono text-sm relative">
+          <div className="absolute top-4 right-4">
+            <p className="font-sans text-xs text-slate-400">CUSTOM CSS</p>
+          </div>
+          <pre className="mt-6">
             <code
               dangerouslySetInnerHTML={{
-                __html: `body {<br />&nbsp;&nbsp;font-family: "fallback for ${fontName}";<br />&nbsp;&nbsp;font-size: ${fontSize}px;<br />&nbsp;&nbsp;line-height: ${lineHeight}em;<br />&nbsp;&nbsp;font-weight: ${fontWeight};<br />&nbsp;&nbsp;letter-spacing: ${
+                __html: `body {<br />&nbsp;&nbsp;font-family: "${fontName}", "fallback for ${fontName}";<br />&nbsp;&nbsp;font-size: ${fontSize}px;<br />&nbsp;&nbsp;line-height: ${lineHeight}em;<br />&nbsp;&nbsp;font-weight: ${fontWeight};<br />&nbsp;&nbsp;letter-spacing: ${
                   letterSpacing === 0 ? "0" : `${letterSpacing}px`
                 };<br />&nbsp;&nbsp;word-spacing: ${
                   wordSpacing === 0 ? "0" : `${wordSpacing}px`

src/app/page.tsx

@@ -41,6 +41,36 @@ export default async function Home() {
           googleFonts={googleFontResponse.items}
           standardFonts={standardFonts}
         />
+        <div className="mt-8 text-sm text-slate-600">
+          Made by&nbsp;
+          <a
+            className="border-b-2 border-slate-600 border-dotted"
+            target="_blank"
+            href="https://antoniocosentino.com"
+          >
+            Antonio Cosentino
+          </a>{" "}
+          &copy; 2023 · Built with Next.js & Tailwind CSS ·&nbsp;
+          <a
+            target="_blank"
+            href="https://github.com/antoniocosentino/what-the-fout"
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              alt="Github"
+              className="w-3 h-3 inline-block bottom-0.5 relative"
+              src="/github.svg"
+            />
+          </a>
+          &nbsp;
+          <a
+            className="border-b-2 border-slate-600 border-dotted"
+            target="_blank"
+            href="https://github.com/antoniocosentino/what-the-fout"
+          >
+            Source Code
+          </a>
+        </div>
       </div>
     </main>
   );