Skip to content

Commit

Permalink
Merge pull request #1 from icssc/graphic_integration
Browse files Browse the repository at this point in the history 
responsiveness + graphics
  • Loading branch information
@sirAvent
sirAvent authored Jan 25, 2024
2 parents 6d97359 + 6bbc6b6 commit c439317
Show file tree
Hide file tree
Showing 7 changed files with 187 additions and 7 deletions.
40 changes: 40 additions & 0 deletions public/background.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions public/lightning.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/app/favicon.ico
View file
Binary file not shown.
110 changes: 110 additions & 0 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,3 +89,113 @@
@apply flex items-center justify-between;
}
}



/* Lightning SVGs */

.lightning {
position: fixed;
height: 5rem;
width: 5rem;
top: -10%;
z-index: -1;
opacity: 0.4;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
-webkit-animation-name: lightnings-fall, lightnings-shake;
-webkit-animation-duration: 10s, 3s;
-webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-play-state: running, running;
animation-name: lightnings-fall, lightnings-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
}

@-webkit-keyframes lightnings-fall {
0% { top: -10% }
100% { top: 100% }
}

@-webkit-keyframes lightnings-shake {
0% { -webkit-transform: translateX(0px); transform: translateX(0px) }
50% { -webkit-transform: translateX(80px); transform: translateX(80px) }
100% { -webkit-transform: translateX(0px); transform: translateX(0px) }
}

@keyframes lightnings-fall {
0% { top: -10% }
100% { top: 100% }
}

@keyframes lightnings-shake {
0% { transform: translateX(0px) }
50% { transform: translateX(80px) }
100% { transform: translateX(0px) }
}

.lightning:nth-of-type(0) {
left: 1%;
-webkit-animation-delay: 0s, 0s;
animation-delay: 0s, 0s;
}

.lightning:nth-of-type(1) {
left: 10%;
-webkit-animation-delay: 1s, 1s;
animation-delay: 1s, 1s;
}

.lightning:nth-of-type(2) {
left: 20%;
-webkit-animation-delay: 6s, .5s;
animation-delay: 6s, .5s;
}

.lightning:nth-of-type(3) {
left: 30%;
-webkit-animation-delay: 4s, 2s;
animation-delay: 4s, 2s;
}

.lightning:nth-of-type(4) {
left: 40%;
-webkit-animation-delay: 2s, 2s;
animation-delay: 2s, 2s;
}

.lightning:nth-of-type(5) {
left: 50%;
-webkit-animation-delay: 8s, 3s;
animation-delay: 8s, 3s;
}

.lightning:nth-of-type(6) {
left: 60%;
-webkit-animation-delay: 6s, 2s;
animation-delay: 6s, 2s;
}

.lightning:nth-of-type(7) {
left: 70%;
-webkit-animation-delay: 2.5s, 1s;
animation-delay: 2.5s, 1s;
}

.lightning:nth-of-type(8) {
left: 80%;
-webkit-animation-delay: 1s, 0s;
animation-delay: 1s, 0s;
}

.lightning:nth-of-type(9) {
left: 90%;
-webkit-animation-delay: 3s, 1.5s;
animation-delay: 3s, 1.5s;
}
20 changes: 19 additions & 1 deletion src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,25 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className={inter.className}>
<body
className={inter.className}
style={{
backgroundImage: 'url("background.svg")',
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
}}
>
<div className="lightnings">
<img className="lightning" src="lightning.svg" />
<img className="lightning" src="lightning.svg" />
<img className="lightning" src="lightning.svg" />
<img className="lightning" src="lightning.svg" />
<img className="lightning" src="lightning.svg" />
<img className="lightning" src="lightning.svg" />
<img className="lightning" src="lightning.svg" />
<img className="lightning" src="lightning.svg" />
<img className="lightning" src="lightning.svg" />
</div>
<Header />
{children}
<Footer />
Expand Down
2 changes: 1 addition & 1 deletion src/components/Faq.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const Faq = () => {
key={index}
className="text-xl"
>
<AccordionTrigger>{data.title}</AccordionTrigger>
<AccordionTrigger className="text-left">{data.title}</AccordionTrigger>
<AccordionContent className="text-lg">
{data.content}
</AccordionContent>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,25 @@ const Hero = () => {
<div className="flex-center flex-col gap-y-16 min-h-[calc(100vh-6rem)]">
<div className="flex flex-col gap-y-8">
<div className="flex justify-center items-center flex-col gap-y-2">
<h1 className="text-8xl font-bold">Brain Games 2024</h1>
<h4 className="text-2xl font-semibold max-w-[75%] text-center">
<h1 className="text-6xl md:text-8xl font-bold text-center">Brain Games 2024</h1>
<h4 className="text-xl md:text-2xl font-semibold max-w-[75%] text-center">
ICS Student {"Council's"} fun and social competition
consisting of a variety of interesting puzzles and games
— free lunch, prizes, and exciting events included!
</h4>
</div>
<div className="flex-center gap-x-8">
<div className="flex-center flex-row gap-x-2 text-2xl font-bold">
<div className="flex-center flex-row gap-x-2 text-xl md:text-2xl font-bold">
<Calendar />
<p>February 10</p>
</div>
<div className="flex-center flex-row gap-x-2 text-2xl font-bold">
<div className="flex-center flex-row gap-x-2 text-xl md:text-2xl font-bold">
<Navigation />
<p>Student Center</p>
</div>
</div>
</div>

<div>
<Link
href={
Expand Down

0 comments on commit c439317

Please sign in to comment.