feat: add inline verion of logo

frontend/src/components/Logo.tsx

@@ -1,11 +1,21 @@
 import { DotIcon } from "@phosphor-icons/react";
 import "@fontsource/knewave/400.css";
 
-export default function Logo({ scale = 1 }) {
+export default function Logo({ scale = 1, inline = false }) {
+  if (inline) {
+    // for span elements
+    return (
+      <span className={"text-accent font-serif italic"}>
+        Pi<span className="text-primary">.</span>&nbsp;Ku
+        <span className="text-primary">.</span>&nbsp;
+      </span>
+    );
+  }
+
   return (
     <div
       role="img"
-      aria-label="Pi Ku"
+      aria-label="Pi. Ku. logo"
       className="inline-flex items-baseline justify-center leading-none select-none"
       style={{ fontFamily: "'Knewave', serif", scale }}
     >