From 9ce74a722738ef255e8328d8ca5fc48d26ff38aa Mon Sep 17 00:00:00 2001
From: aronmal <aron@mal-noh.de>
Date: Sun, 12 Feb 2023 02:17:06 +0100
Subject: [PATCH] Fairly responsive start page

---
 leaky-ships/components/BurgerMenu.tsx   |   8 +-
 leaky-ships/components/Logo.tsx         |  38 ++-
 leaky-ships/components/OptionButton.tsx |   9 +-
 leaky-ships/pages/_app.tsx              |   1 -
 leaky-ships/pages/dev/index.tsx         |  19 +-
 leaky-ships/pages/dev/lobby.tsx         |   2 +-
 leaky-ships/styles/globals.css          |  10 +
 leaky-ships/styles/homepage.scss        | 330 ------------------------
 8 files changed, 59 insertions(+), 358 deletions(-)
 delete mode 100644 leaky-ships/styles/homepage.scss

diff --git a/leaky-ships/components/BurgerMenu.tsx b/leaky-ships/components/BurgerMenu.tsx
index 9d30dbe..eebcfa3 100644
--- a/leaky-ships/components/BurgerMenu.tsx
+++ b/leaky-ships/components/BurgerMenu.tsx
@@ -1,13 +1,13 @@
 import React from "react"
 
-function BurgerMenu({ onClick }: { onClick: () => void }) {
+function BurgerMenu({ onClick }: { onClick?: () => void }) {
   return (
     <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)}
+      className="absolute top-4 left-4 flex h-16 w-16 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 md:top-6 md:left-6 md:h-20  md:w-20 md:rounded-xl md:border-b-4 md:active:border-t-4 lg:top-8 lg:left-8 xl:top-12 xl:left-12 xl:h-24 xl:w-24"
+      onClick={() => onClick && setTimeout(onClick, 200)}
     >
       <img
-        className="pixelart h-8 w-8"
+        className="pixelart h-12 w-12 md:h-16 md:w-16 xl:h-20 xl:w-20"
         src="/assets/burger-menu.png"
         alt="Burger Menu"
       />
diff --git a/leaky-ships/components/Logo.tsx b/leaky-ships/components/Logo.tsx
index 5eba329..abc9a1f 100644
--- a/leaky-ships/components/Logo.tsx
+++ b/leaky-ships/components/Logo.tsx
@@ -3,11 +3,10 @@ import React from "react"
 
 function Logo() {
   return (
-    <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
+    <div className="relative flex flex-col items-center rounded-sm border-x-4 border-y-2 border-shield-gray bg-shield-lightgray md:border-x-8 md:border-y-4">
+      <h1 className="font-checkpoint mx-16 my-2 flex flex-col gap-2 border-y-2 border-slate-700 text-center text-2xl leading-tight tracking-widest sm:mx-24 sm:my-3 sm:gap-3 sm:border-y-[3px] sm:text-4xl md:mx-36 md:my-4 md:gap-4 md:border-y-4 md:text-5xl xl:gap-6 xl:py-2 xl:text-6xl">
+        <span>Leaky</span>
+        <span>Ships</span>
       </h1>
       <Screws />
     </div>
@@ -17,10 +16,22 @@ function Logo() {
 function Screws() {
   return (
     <>
-      <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]" />
+      <Screw
+        orientation="top-1 left-1 sm:top-2 sm:left-2 xl:top-4 xl:left-4"
+        rotation="rotate-[135deg]"
+      />
+      <Screw
+        orientation="top-1 right-1 sm:top-2 sm:right-2 xl:top-4 xl:right-4"
+        rotation="rotate-[5deg]"
+      />
+      <Screw
+        orientation="bottom-1 right-1 sm:bottom-2 sm:right-2 xl:bottom-4 xl:right-4"
+        rotation="rotate-[150deg]"
+      />
+      <Screw
+        orientation="bottom-1 left-1 sm:bottom-2 sm:left-2 xl:bottom-4 xl:left-4"
+        rotation="rotate-[20deg]"
+      />
     </>
   )
 }
@@ -35,11 +46,16 @@ function Screw({
   return (
     <div
       className={classNames(
-        "absolute flex h-3 w-3 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 sm:h-5 sm:w-5 sm:border-2 md:h-6 md:w-6 xl:h-8 xl:w-8",
         orientation
       )}
     >
-      <hr className={classNames("color w-full border-neutral-500", rotation)} />
+      <hr
+        className={classNames(
+          "color w-full border-neutral-500 sm:border-t-2 xl:border-t-4",
+          rotation
+        )}
+      />
     </div>
   )
 }
diff --git a/leaky-ships/components/OptionButton.tsx b/leaky-ships/components/OptionButton.tsx
index cc9335c..d1ea5dd 100644
--- a/leaky-ships/components/OptionButton.tsx
+++ b/leaky-ships/components/OptionButton.tsx
@@ -15,11 +15,14 @@ function OptionButton({
 }) {
   return (
     <button
-      className="flex w-full flex-row items-center justify-between rounded-lg border-2 border-black bg-voidDark py-4 pr-8 pl-16 text-4xl text-grayish first:mt-8 last:mt-8"
-      onClick={action}
+      className="flex w-full flex-row items-center justify-between rounded-xl border-b-4 border-shield-gray bg-voidDark py-2 pr-4 pl-8 text-lg text-grayish duration-100 first:mt-4 last:mt-4 active:border-t-4 active:border-b-0 sm:py-4 sm:pr-8 sm:pl-16 sm:text-4xl sm:first:mt-8 sm:last:mt-8"
+      onClick={() => action && setTimeout(action, 200)}
     >
       <span className="mx-auto">{children}</span>
-      <FontAwesomeIcon className="ml-12 w-10 text-4xl" icon={icon} />
+      <FontAwesomeIcon
+        className="ml-2 w-10 text-xl sm:ml-12 sm:text-4xl"
+        icon={icon}
+      />
     </button>
   )
 }
diff --git a/leaky-ships/pages/_app.tsx b/leaky-ships/pages/_app.tsx
index b439e1a..d829621 100644
--- a/leaky-ships/pages/_app.tsx
+++ b/leaky-ships/pages/_app.tsx
@@ -1,7 +1,6 @@
 import "../styles/App.scss"
 import "../styles/grid.scss"
 import "../styles/grid2.scss"
-import "../styles/homepage.scss"
 import "../styles/globals.css"
 import type { AppProps } from "next/app"
 
diff --git a/leaky-ships/pages/dev/index.tsx b/leaky-ships/pages/dev/index.tsx
index 9ce2c9f..84d5bfc 100644
--- a/leaky-ships/pages/dev/index.tsx
+++ b/leaky-ships/pages/dev/index.tsx
@@ -11,30 +11,33 @@ export default function Home() {
   const [heWantsToPlay, setHeWantsToPlay] = useState<boolean | null>(false)
   return (
     <div className="h-full bg-theme">
-      <BurgerMenu />
       <div className="mx-auto flex h-full max-w-screen-md flex-col items-center justify-evenly">
         <Logo />
+        <BurgerMenu />
         {!heWantsToPlay ? (
           <>
-            <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 className="flex h-36 w-64 items-center justify-center rounded-xl border-4 border-black bg-[#2227] lg:h-[18rem] lg:w-[32rem] lg:border-[6px] xl:h-[26rem] xl:w-[48rem]">
+              <FontAwesomeIcon
+                className="text-6xl lg:text-8xl"
+                icon={faCirclePlay}
+              />
             </div>
             <button
-              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"
+              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 xl:rounded-2xl xl:border-b-8 xl:px-24 xl:pt-10 xl:pb-8 xl:text-5xl xl:active:border-t-8"
               onClick={() => setTimeout(() => setHeWantsToPlay(true), 200)}
             >
               START
             </button>
           </>
         ) : (
-          <div className="gap flex w-full flex-col items-center rounded-xl border-4 border-black bg-grayish p-12 shadow-lg">
+          <div className="flex flex-col items-center rounded-xl border-4 border-black bg-grayish px-4 py-6 shadow-lg sm:mx-8 sm:p-12 md:w-full">
             <button
-              className="mt-[-1.5rem] w-40 self-start rounded-lg border-2 border-black bg-voidDark px-2 text-5xl text-grayish"
-              onClick={() => setHeWantsToPlay(false)}
+              className="-mt-2 w-20 self-start rounded-xl border-b-4 border-shield-gray bg-voidDark text-2xl text-grayish duration-100 active:border-t-4 active:border-b-0 sm:-mt-6 sm:w-40 sm:px-2 sm:text-5xl"
+              onClick={() => setTimeout(() => setHeWantsToPlay(false), 200)}
             >
               <FontAwesomeIcon icon={faLeftLong} />
             </button>
-            <div className="flex flex-col items-center gap-12">
+            <div className="flex flex-col items-center gap-6 sm:gap-12">
               <OptionButton icon={faPlus}>Raum erstellen</OptionButton>
               <OptionButton icon={faUserPlus}>Raum beitreten</OptionButton>
               <OptionButton icon={faEye}>Zuschauen</OptionButton>
diff --git a/leaky-ships/pages/dev/lobby.tsx b/leaky-ships/pages/dev/lobby.tsx
index b0b493d..d072b6c 100644
--- a/leaky-ships/pages/dev/lobby.tsx
+++ b/leaky-ships/pages/dev/lobby.tsx
@@ -12,8 +12,8 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <BurgerMenu />
       <Logo />
+      <BurgerMenu />
       <LobbyFrame />
     </div>
   )
diff --git a/leaky-ships/styles/globals.css b/leaky-ships/styles/globals.css
index cd7766b..d4323cc 100644
--- a/leaky-ships/styles/globals.css
+++ b/leaky-ships/styles/globals.css
@@ -21,3 +21,13 @@
 .font-checkpoint {
   font-family: "CP_Font", sans-serif;
 }
+
+button {
+  cursor: none;
+}
+
+@media (pointer: fine) {
+  button {
+    cursor: pointer;
+  }
+}
diff --git a/leaky-ships/styles/homepage.scss b/leaky-ships/styles/homepage.scss
deleted file mode 100644
index d54cc1d..0000000
--- a/leaky-ships/styles/homepage.scss
+++ /dev/null
@@ -1,330 +0,0 @@
-@use "./mixins/display" as *;
-@use "./mixins/effects" as *;
-@use "./mixins/CP_Font" as *;
-@import "./mixins/variables";
-
-@import url("https://fonts.googleapis.com/css2?family=Farro:wght@300;400;500;700&display=swap");
-
-#box {
-  min-height: 100%;
-  background-color: #282c34;
-  @include flex-col;
-  align-items: center;
-  justify-content: space-around;
-
-  #navExpand {
-    @include flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 64px;
-    left: 64px;
-    width: 96px;
-    height: 96px;
-    background-color: $grayish;
-    border-radius: 8px;
-    box-shadow: 0 0 2px 2px #0008 inset;
-
-    #burgerMenu {
-      @include pixelart;
-      height: 84px;
-      width: 84px;
-    }
-  }
-
-  #shield {
-    @include flex-row;
-    justify-content: center;
-    height: 250px;
-    width: 700px;
-    background-image: url("/assets/shield.png");
-    background-repeat: no-repeat;
-    background-size: contain;
-
-    #width {
-      @include flex-col;
-      justify-content: space-between;
-
-      h1 {
-        @include CP_Font;
-        margin: 3%;
-        width: 100%;
-        text-align: center;
-        font-size: 5.8em;
-        letter-spacing: 6px;
-
-        &:first-child {
-          border-top: 5px solid black;
-        }
-
-        &:last-child {
-          border-bottom: 5px solid black;
-        }
-      }
-    }
-  }
-
-  #videoWrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 350px;
-    width: 700px;
-    background-color: #2227;
-    border: 4px solid black;
-    border-radius: 8px;
-
-    svg {
-      font-size: 6em;
-      color: #231f20;
-
-      path {
-        stroke: black;
-        stroke-width: 2px;
-        stroke-linejoin: round;
-      }
-    }
-  }
-
-  #startButton {
-    font-family: "Farro", sans-serif;
-    font-weight: bold;
-    font-size: 3em;
-    color: black;
-    background-color: $warn;
-    border: none;
-    border-radius: 8px;
-    padding: calc(2rem + 8px) 6rem 2rem 6rem;
-  }
-
-  #startBox {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: $grayish;
-    box-shadow: 0 0 2px 2px #fffb inset, 0 0 2px 2px #fff2;
-    border: 4px solid black;
-    padding: 3rem;
-    border-radius: 8px;
-    min-width: 60vw;
-    gap: 2rem;
-
-    #back {
-      font-size: 3em;
-      color: $grayish;
-      align-self: flex-start;
-      background-color: #000c;
-      border: none;
-      border-radius: 8px;
-      padding: 0 0.5rem;
-      margin-top: -1.5rem;
-      width: 10rem;
-      box-shadow: 0 0 2px 2px #fff6 inset;
-      border: 2px solid #000c;
-    }
-
-    #sameWidth {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 3rem;
-
-      .optionButton {
-        @include flex-row;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 2.5em;
-        color: $grayish;
-        background-color: #000c;
-        border: none;
-        border-radius: 8px;
-        padding: 1rem 2rem 1rem 4rem;
-        width: 100%;
-        box-shadow: 0 0 2px 2px #fff6 inset;
-        border: 2px solid #000c;
-
-        &:last-child {
-          margin-top: 2rem;
-        }
-
-        span {
-          margin: 0 auto;
-        }
-
-        svg {
-          margin-left: 3rem;
-          font-size: 2em;
-          width: 2.5rem;
-          height: inherit;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 2000px) {
-  #box {
-    #shield {
-      height: 200px;
-      width: 560px;
-
-      #width {
-        h1 {
-          font-size: 4.5em;
-          letter-spacing: 4px;
-
-          &:first-child {
-            border-top: 4px solid black;
-          }
-
-          &:last-child {
-            border-bottom: 4px solid black;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 1000px) {
-  #box {
-    #navExpand {
-      top: 32px;
-      left: 32px;
-      width: 80px;
-      height: 80px;
-
-      #burgerMenu {
-        height: 64px;
-        width: 64px;
-      }
-    }
-
-    #shield {
-      height: 160px;
-      width: 450px;
-
-      #width {
-        h1 {
-          font-size: 3.6em;
-          letter-spacing: 3px;
-
-          &:first-child {
-            border-top: 3px solid black;
-          }
-
-          &:last-child {
-            border-bottom: 3px solid black;
-          }
-        }
-      }
-    }
-
-    #videoWrapper {
-      height: 300px;
-      width: 600px;
-    }
-  }
-}
-
-@media (max-width: 700px) {
-  #box {
-    justify-content: space-evenly;
-
-    #navExpand {
-      top: 16px;
-      left: 16px;
-      width: 64px;
-      height: 64px;
-
-      #burgerMenu {
-        height: 44px;
-        width: 44px;
-      }
-    }
-
-    #shield {
-      height: 100px;
-      width: 280px;
-
-      #width {
-        h1 {
-          font-size: 2.2em;
-          letter-spacing: 2px;
-
-          &:first-child {
-            border-top: 2px solid black;
-          }
-
-          &:last-child {
-            border-bottom: 2px solid black;
-          }
-        }
-      }
-    }
-
-    #videoWrapper {
-      height: 250px;
-      width: 450px;
-
-      svg {
-        font-size: 4em;
-      }
-    }
-
-    #startButton {
-      font-size: 2em;
-      padding: calc(1rem + 8px) 3rem 1rem 3rem;
-    }
-
-    #startBox {
-      max-width: 90vw;
-      padding: 2rem;
-
-      #back {
-        margin-top: -1rem;
-        font-size: 2em;
-        width: 7rem;
-        padding: 0.125rem;
-      }
-
-      #sameWidth {
-        max-width: 100%;
-
-        .optionButton {
-          font-size: 2em;
-          padding: 1rem 2rem;
-
-          svg {
-            margin-left: 2rem;
-            font-size: 1.5em;
-            width: 2rem;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 500px) {
-  #box {
-    #videoWrapper {
-      height: 150px;
-      width: 300px;
-    }
-
-    #startBox {
-      #sameWidth {
-        .optionButton {
-          font-size: 1.5em;
-
-          svg {
-            margin-left: 1rem;
-            font-size: 1em;
-          }
-        }
-      }
-    }
-  }
-}