From b486ab99c2b028b263e5391eb4805b4509cd8bb4 Mon Sep 17 00:00:00 2001
From: aronmal <aron@mal-noh.de>
Date: Sat, 11 Feb 2023 20:30:55 +0100
Subject: [PATCH] Mobile sizeed start screen

---
 leaky-ships/components/BurgerMenu.tsx |  9 ++++++---
 leaky-ships/components/Logo.tsx       | 14 +++++++-------
 leaky-ships/pages/dev/index.tsx       |  8 ++++----
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/leaky-ships/components/BurgerMenu.tsx b/leaky-ships/components/BurgerMenu.tsx
index 485535e..9d30dbe 100644
--- a/leaky-ships/components/BurgerMenu.tsx
+++ b/leaky-ships/components/BurgerMenu.tsx
@@ -1,10 +1,13 @@
 import React from "react"
 
-function BurgerMenu() {
+function BurgerMenu({ onClick }: { onClick: () => void }) {
   return (
-    <button className="absolute top-16 left-16 flex h-24 w-24 items-center justify-center rounded-lg bg-grayish">
+    <button
+      className="absolute top-4 left-4 flex h-10 w-10 items-center justify-center rounded-lg border-b-2 border-shield-gray bg-grayish shadow-lg duration-100 active:border-t-2 active:border-b-0"
+      onClick={() => setTimeout(onClick, 200)}
+    >
       <img
-        className="pixelart h-20 w-20"
+        className="pixelart h-8 w-8"
         src="/assets/burger-menu.png"
         alt="Burger Menu"
       />
diff --git a/leaky-ships/components/Logo.tsx b/leaky-ships/components/Logo.tsx
index 93a2047..5eba329 100644
--- a/leaky-ships/components/Logo.tsx
+++ b/leaky-ships/components/Logo.tsx
@@ -3,8 +3,8 @@ import React from "react"
 
 function Logo() {
   return (
-    <div className="relative flex items-center rounded-sm border-x-8 border-y-4 border-shield-gray bg-shield-lightgray">
-      <h1 className="font-checkpoint my-4 mx-36 border-y-4 border-slate-700 text-center text-6xl leading-tight tracking-widest">
+    <div className="relative flex items-center rounded-sm border-x-4 border-y-2 border-shield-gray bg-shield-lightgray">
+      <h1 className="font-checkpoint mx-16 my-2 border-y-2 border-slate-700 text-center text-2xl leading-tight tracking-widest">
         Leaky
         <br />
         Ships
@@ -17,10 +17,10 @@ function Logo() {
 function Screws() {
   return (
     <>
-      <Screw orientation="top-3 left-3" rotation="rotate-[135deg]" />
-      <Screw orientation="top-3 right-3" rotation="rotate-[5deg]" />
-      <Screw orientation="bottom-3 right-3" rotation="rotate-[150deg]" />
-      <Screw orientation="bottom-3 left-3" rotation="rotate-[20deg]" />
+      <Screw orientation="top-1 left-1" rotation="rotate-[135deg]" />
+      <Screw orientation="top-1 right-1" rotation="rotate-[5deg]" />
+      <Screw orientation="bottom-1 right-1" rotation="rotate-[150deg]" />
+      <Screw orientation="bottom-1 left-1" rotation="rotate-[20deg]" />
     </>
   )
 }
@@ -35,7 +35,7 @@ function Screw({
   return (
     <div
       className={classNames(
-        "absolute flex h-6 w-6 flex-col items-center justify-center rounded-full border-[1px] border-neutral-700 bg-neutral-400",
+        "absolute flex h-3 w-3 flex-col items-center justify-center rounded-full border-[1px] border-neutral-700 bg-neutral-400",
         orientation
       )}
     >
diff --git a/leaky-ships/pages/dev/index.tsx b/leaky-ships/pages/dev/index.tsx
index a9e7cbf..9ce2c9f 100644
--- a/leaky-ships/pages/dev/index.tsx
+++ b/leaky-ships/pages/dev/index.tsx
@@ -12,15 +12,15 @@ export default function Home() {
   return (
     <div className="h-full bg-theme">
       <BurgerMenu />
-      <div className="mx-auto flex h-full max-w-screen-md flex-col items-center justify-around">
+      <div className="mx-auto flex h-full max-w-screen-md flex-col items-center justify-evenly">
         <Logo />
         {!heWantsToPlay ? (
           <>
-            <div className="transition-color flex h-full max-h-80 w-full max-w-screen-sm items-center justify-center rounded-xl border-4 border-black bg-[#2227] duration-200">
-              <FontAwesomeIcon className="text-8xl" icon={faCirclePlay} />
+            <div className="transition-color flex h-32 w-64 max-w-screen-sm items-center justify-center rounded-xl border-4 border-black bg-[#2227] duration-200">
+              <FontAwesomeIcon className="text-6xl" icon={faCirclePlay} />
             </div>
             <button
-              className="font-farro transition-color rounded-2xl border-b-8 border-orange-400 bg-warn px-24 pt-10 pb-8 text-5xl font-bold duration-100 active:border-t-8 active:border-b-0"
+              className="font-farro rounded-lg border-b-4 border-orange-400 bg-warn px-12 pt-5 pb-4 text-2xl font-bold duration-100 active:border-t-4 active:border-b-0"
               onClick={() => setTimeout(() => setHeWantsToPlay(true), 200)}
             >
               START