aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Better Lobby

Browse source
This commit is contained in:
aronmal 2023-02-12 17:50:19 +01:00
parent d2594f51d5
commit 38f6d5eca9
Signed by: aronmal
GPG key ID: 816B7707426FC612
8 changed files with 123 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

41
leaky-ships/components/Logo.tsx
View file

@ -1,35 +1,52 @@
import classNames from "classnames"
import React from "react"
function Logo() {
function Logo({ small }: { small?: boolean }) {
return (
<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">
<h1
className={classNames(
"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": !small }
)}
>
<span>Leaky</span>
<span>Ships</span>
</h1>
<Screws />
<Screws small={small} />
</div>
)
}
function Screws() {
function Screws({ small }: { small?: boolean }) {
return (
<>
<Screw
orientation="top-1 left-1 sm:top-2 sm:left-2 xl:top-4 xl:left-4"
small={small}
orientation={classNames("top-1 left-1 sm:top-2 sm:left-2", {
"xl:top-4 xl:left-4": !small,
})}
rotation="rotate-[135deg]"
/>
<Screw
orientation="top-1 right-1 sm:top-2 sm:right-2 xl:top-4 xl:right-4"
small={small}
orientation={classNames("top-1 right-1 sm:top-2 sm:right-2", {
"xl:top-4 xl:right-4": !small,
})}
rotation="rotate-[5deg]"
/>
<Screw
orientation="bottom-1 right-1 sm:bottom-2 sm:right-2 xl:bottom-4 xl:right-4"
small={small}
orientation={classNames("bottom-1 right-1 sm:bottom-2 sm:right-2", {
"xl:bottom-4 xl:right-4": !small,
})}
rotation="rotate-[150deg]"
/>
<Screw
orientation="bottom-1 left-1 sm:bottom-2 sm:left-2 xl:bottom-4 xl:left-4"
small={small}
orientation={classNames("bottom-1 left-1 sm:bottom-2 sm:left-2", {
"xl:bottom-4 xl:left-4": !small,
})}
rotation="rotate-[20deg]"
/>
</>
@ -39,20 +56,24 @@ function Screws() {
function Screw({
orientation,
rotation,
small,
}: {
orientation: string
rotation: string
small?: boolean
}) {
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 sm:h-5 sm:w-5 sm:border-2 md:h-6 md:w-6 xl:h-8 xl:w-8",
"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": !small },
orientation
)}
>
<hr
className={classNames(
"color w-full border-neutral-500 sm:border-t-2 xl:border-t-4",
"color w-full border-neutral-500 sm:border-t-2",
{ "xl:border-t-4": !small },
rotation
)}
/>