Minor tweaks

grvcoelho · Sep 15, 2023 · d0c33aa · d0c33aa
1 parent 028fc11
commit d0c33aa
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -42,14 +42,14 @@ export default function Index() {
         () => {
           deactivateKey(k);
         },
-        70 + i * 250,
+        120 + i * 200,
       );
     });
   };
 
   return (
     <main className="container mx-auto flex min-h-screen flex-col items-center justify-center overflow-x-hidden py-24">
-      <div className="mb-14 max-w-lg space-y-8 px-4 text-center">
+      <div className="mb-6 max-w-lg space-y-6 px-4 text-center">
         <h1 className="scale-x-[1.3] text-5xl font-semibold tracking-[10px]">
           ARTURIA
         </h1>
@@ -86,25 +86,25 @@ export default function Index() {
         <h1 className="mb-2 text-xl font-bold">Learn</h1>
 
         <div className="mb-3 text-sm">
-          <div className="display gap-x- mb-3 flex items-center gap-4 text-sm">
+          <div className="display mb-3 flex flex-col items-start gap-4 text-sm sm:flex-row sm:items-center">
             <label htmlFor="scale">1. Highlight a scale: </label>
 
             <input
               type="text"
               value={scale}
               onChange={(e) => setScale(e.target.value)}
-              className="w-60 border-b border-neutral-200 px-2 py-1 text-center text-sm focus:border-neutral-300 focus:outline-none"
+              className="w-60 border-b border-neutral-200 pb-1 text-left text-sm focus:border-neutral-300 focus:outline-none sm:text-center"
               placeholder="e.g F major, D# minor, Bb blues"
             />
 
-            <ControlButton className="scale-150" onClick={playScale}>
+            <ControlButton className="scale-150 text-[6px]" onClick={playScale}>
               Play
             </ControlButton>
           </div>
         </div>
       </div>
 
-      <div className="-mb-14 origin-top scale-[0.7] sm:mb-14 sm:scale-100 md:mb-24 md:scale-110 lg:mb-36 lg:scale-125">
+      <div className="-mb-14 origin-top scale-[0.65] sm:mb-14 sm:scale-100 md:mb-32 md:scale-125 lg:mb-60 lg:scale-150">
         <Arturia />{" "}
       </div>
 

diff --git a/components/ControlButton.tsx b/components/ControlButton.tsx
@@ -21,7 +21,7 @@ export const ControlButton: React.FC<ControlButtonProps> = ({
       onClick={onClick}
       className={cn(
         "control-button",
-        "flex h-[14px] w-[24px] cursor-pointer flex-col justify-center rounded-[1.5px] transition-all ease-in-out active:translate-y-[1px] active:shadow-none",
+        "flex h-[14px] w-[24px] cursor-pointer flex-col justify-center rounded-[1.5px] text-[4px] transition-all ease-in-out active:translate-y-[1px] active:shadow-none",
         variant === "default" && "default bg-neutral-100",
         variant === "shift" &&
           "shift bg-neutral-800 ring-[1.5px] ring-inset ring-white",
@@ -31,7 +31,7 @@ export const ControlButton: React.FC<ControlButtonProps> = ({
     >
       <span
         className={cn(
-          "text-center font-mono text-[4px]",
+          "text-center font-mono",
           variant === "default" && "text-neutral-800",
           variant === "shift" && "text-white",
         )}