wip: added logo

README.md

@@ -1,7 +1,19 @@
-# Macrolev - custom analog keyboard
+<div align="center" >
+  <img src="assets/logo.svg" alt="Macrolev - Open Source Analog Keyboard" />
+  <br>
+  <br>
+  <br>
+  <div>
+    <img src="assets/keyboard-top.png" alt="keyboard - picture from above" />
+  </div>
+  <span>
+    <a href="assets/keyboard-bot.png">bottom picture</a> - <a href="assets/pcb-bot.png">pcb picture</a> - 
+  </span>
+  <br>
+  <br>
+</div>
 
-![keyboard - picture from above](assets/keyboard-top.png)  
-[bottom picture](assets/keyboard-bot.png) - [pcb picture](assets/pcb-bot.png)
+# Macrolev - Open Source Analog Keyboard
 
 I use the two prototypes shown above as my daily drivers for both coding and gaming. They work well, and the current state of the web configurator is sufficient for seamlessly switching between coding and gaming modes. The current layout of my prototypes is Mac ISO azerty (FR).
 

web-app/app/components/logo.tsx

@@ -73,7 +73,7 @@ export function Logo({ className, ...props }: LogoProps) {
   return (
     <div
       ref={ref}
-      className={`px-4 cursor-pointer transition duration-75 select-none w-fit ${
+      className={`cursor-pointer transition duration-75 select-none w-fit ${
         bump ? 'scale-110' : ''
       } ${className ?? ''}`}
       onClick={() => setBump(true)}

web-app/app/routes/_layout._index.tsx

@@ -6,15 +6,16 @@ import { Icon } from '../ui/icon.tsx'
 export default function Index() {
   return (
     <div className="h-full flex flex-col gap-12 text-center justify-center p-20 w-[80ch] mx-auto">
-      <div className="flex flex-row items-center justify-center">
+      <div className="flex flex-row items-center justify-center gap-16">
         <Logo />
-        <div className="text-center">
+        <div className="text-center flex flex-col gap-4">
           <h1 className="text-3xl font-light text-gray-100">
             <span className="font-bold">Macro</span>lev
           </h1>
 
-          <span className="text-lg font-semibold text-gray-400 transition hover:brightness-125">
-            Open Source Keyboard
+          <span className="text-lg font-light text-gray-400 transition hover:brightness-125 leading-tight">
+            Open Source <br />
+            Analog Keyboard
           </span>
         </div>
       </div>