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

Fairly responsive start page

Browse source
This commit is contained in:
aronmal 2023-02-12 02:17:06 +01:00
parent b486ab99c2
commit 9ce74a7227
Signed by: aronmal
GPG key ID: 816B7707426FC612
8 changed files with 59 additions and 358 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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>
)
}