Skip to content

Commit

Permalink
overflow works now
Browse files Browse the repository at this point in the history
  • Loading branch information
bentsen committed Nov 24, 2022
1 parent 217d60a commit 1458742
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 13 deletions.
11 changes: 9 additions & 2 deletions src/app/footer.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
import Link from "next/link";

const Footer = () => {

return (
<>
<div className={"w-full bg-navbar h-48"}>

<div className={"w-full bg-navbar h-auto pt-5 pb-5"}>
<div className={"pl-[10%] h-full flex items-center text-white"}>
Created by
<Link className={"text-blue-400 pl-2 hover:underline"} href={"https://github.com/Freddiiy"}>Frederik Gallar,</Link>
<Link className={"text-blue-400 pl-2 hover:underline"} href={"https://github.com/Weinell"}>Nikolaj Weinell,</Link>
<Link className={"text-blue-400 pl-2 hover:underline"} href={"https://github.com/bentsen"}>Mikkel Bentsen.</Link>
</div>
</div>
</>
)
Expand Down
28 changes: 22 additions & 6 deletions src/app/navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,38 @@ const Navbar = () => {
return(
<>
<nav className={"w-full h-16 bg-navbar"}>
<div className={"flex items-center justify-between h-full px-32"}>
<div className={"flex items-center justify-between h-full px-5 md:px-32"}>
<div className={"text-white md:hidden"}>
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16">

</path>
</svg>
</div>
<div className={"cursor-pointer"}>
<Link href={"/"}>
<Image src={"/img.png"} alt={"logo"} width={150} height={100}/>
</Link>
</div>
<div className={"h-full"}>
<ul className={"flex flex-row items-center text-lg font-medium text-betterWhite h-full"}>
<ul className={"hidden md:flex flex-row items-center text-lg font-medium text-betterWhite h-full"}>
<Link href={"/"}>
<li className={"cursor-pointer hover:bg-red-700 p-4"}>Home</li>
<li className={"cursor-pointer hover:underline hover:bg-red-700 p-4"}>Home</li>
</Link>
<Link href={"/about"}>
<li className={"cursor-pointer hover:bg-red-700 p-4"}>About</li>
<li className={"cursor-pointer hover:underline hover:bg-red-700 p-4"}>About</li>
</Link>
<li className={"cursor-pointer hover:bg-red-700 p-4"}>something</li>
<li className={"cursor-pointer hover:bg-red-700 p-4"}>something</li>
<li className={"cursor-pointer hover:underline hover:bg-red-700 p-4"}>something</li>
<li className={"cursor-pointer hover:underline hover:bg-red-700 p-4"}>something</li>
</ul>
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Page = async () => {
return(
<>
<div className={"w-full"}>
<div className={"relative flex items-center flex-col"}>
<div className={"relative flex items-center flex-col overflow-hidden"}>
<ImageCarousel pokemons={pokemons}/>
</div>
<div className={"w-full mt-10"}>
Expand All @@ -52,7 +52,7 @@ const Page = async () => {
const ImageCarousel = ({pokemons}: {pokemons: IPokemon[]}) => {
return(
<>
<div id={"slider"} className={"w-full h-30 whitespace-nowrap pokemon-scroll"}>
<div id={"slider"} className={"w-screen h-30 whitespace-nowrap pokemon-scroll"}>
{pokemons.map((pokemon) =>
<div key={pokemon.id} className={"inline-block p-2 pointer-events-none border-b border-black"}>
<div className={"text-center"}>
Expand Down Expand Up @@ -96,6 +96,7 @@ const PokemonSelector = ({pokemons} : {pokemons: IPokemon[]}) => {
</div>
<div className={"h-40 relative"}>
<Image
className={"pixel"}
src={"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"}
alt={"pokemon2"}
fill
Expand Down
4 changes: 2 additions & 2 deletions src/app/searchbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,8 @@ const SearchOptions = (props: SearchOptions) => {
priority
src={image}
alt={"poke"}
width={20}
height={20}/>
width={30}
height={30}/>
<div className={"flex justify-between items-center w-full"}>
<div>
<span className={"ml-1 text-black"}>{name}</span>
Expand Down
4 changes: 3 additions & 1 deletion src/styles/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,13 @@ img {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}

.pixel{
image-rendering: pixelated;
}

.pokemon-scroll {

animation: 190s linear slideInFromLeft infinite;
}

Expand Down

1 comment on commit 1458742

@vercel
Copy link

@vercel vercel bot commented on 1458742 Nov 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

poke-battle – ./

poke-battle-git-main-bentsen.vercel.app
poke-battle-psi.vercel.app
poke-battle-bentsen.vercel.app

Please sign in to comment.