Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

fix the css alignment for desktop view

Browse source
This commit is contained in:
chark1es 2025-02-08 06:30:24 -08:00
parent 3c8b5db189
commit 03e1f8ab44
1 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/pages/404.astro
View file

@ -4,19 +4,27 @@ import Link from "next/link";
---
<Layout>
<div class="h-screen w-full flex justify-center relative md:mt-[10%] pt-[50vw]">
<div class="bg-gradient-to-l to-indigo-950 from-ieee-blue-100 w-[100vw] h-[60vw] md:w-[43vw] md:h-[26vw] md:blur-[3vw] blur-[8vw] rounded-full"/>
<div class="flex flex-col items-center absolute md:top-0 top-[50vw]">
<p class="md:text-[15vw] text-[35vw] leading-tight font-bold tracking-wider text-slate-800/90" style={{ textShadow: "0vw 0vw 0.2vw #88BFEC" }}>404</p>
<p class="font-extralight md:text-[1.4vw] text-[3vw]">
Oops! You're Lost in the Circuit!🔌⚡
</p>
<Link
href="/"
className="border-white/80 border-[0.12vw] rounded-[0.7vw] px-[7vw] py-[2%] font-extralight md:text-[1.2vw] text-[2.5vw] mt-[3%] hover:text-ieee-yellow hover:border-ieee-yellow duration-300"
>
Go Back Home
</Link>
</div>
<div class="h-screen w-full flex justify-center items-center relative">
<div
class="bg-gradient-to-l to-indigo-950 from-ieee-blue-100 w-[100vw] h-[60vw] md:w-[43vw] md:h-[26vw] md:blur-[3vw] blur-[8vw] rounded-full absolute"
>
</div>
<div class="flex flex-col items-center z-10">
<p
class="md:text-[15vw] text-[35vw] leading-tight font-bold tracking-wider text-slate-800/90"
style={{ textShadow: "0vw 0vw 0.2vw #88BFEC" }}
>
404
</p>
<p class="font-extralight md:text-[1.4vw] text-[3vw]">
Oops! You're Lost in the Circuit!🔌⚡
</p>
<Link
href="/"
className="border-white/80 border-[0.12vw] rounded-[0.7vw] px-[7vw] py-[2%] font-extralight md:text-[1.2vw] text-[2.5vw] mt-[3%] hover:text-ieee-yellow hover:border-ieee-yellow duration-300"
>
Go Back Home
</Link>
</div>
</div>
</Layout>