vela veci

This commit is contained in:
OLIMINATOR 2022-12-08 19:21:25 +01:00
parent 8e1f0c1c62
commit 08f46dfd44
4 changed files with 33 additions and 22 deletions

View file

@ -1,6 +1,7 @@
--- ---
const { class: className } = Astro.props;
--- ---
<div class="container mx-auto"> <div class={"max-w-[90rem] mx-auto " + className}>
<slot /> <slot />
</div> </div>

View file

@ -1,5 +1,11 @@
--- ---
import Container from "../atoms/Container.astro";
const navItems = [ const navItems = [
{
name: "Home",
link: "/",
},
{ {
name: "Projects", name: "Projects",
link: "/projects", link: "/projects",
@ -11,23 +17,24 @@ const navItems = [
]; ];
--- ---
<header> <header class="text-white text-xl h-16 border-b-[1px] border-neutral-800">
<nav <Container class="flex justify-between items-center h-full">
class="text-white font-light text-2xl flex items-center justify-center" <a class="font-extrabold text-2xl" href="/">xHyroM</a>
> <nav>
<ul class="flex w-96 justify-evenly py-3"> <ul class="flex gap-10">
{ {
navItems.map((item) => ( navItems.map((item) => (
<li> <li class=" hover:-translate-y-[2px] transition-all">
<a <a
href={item.link} href={item.link}
class="hover:text-[#fbc119] hover:underline hover:drop-shadow-yellowalt" class="hover:text-[#fbc119] text-neutral-300"
> >
{item.name} {item.name}
</a> </a>
</li> </li>
)) ))
} }
</ul> </ul>
</nav> </nav>
</Container>
</header> </header>

View file

@ -13,9 +13,11 @@ import Container from "../components/atoms/Container.astro";
</h1> </h1>
<main class="flex gap-14 justify-center flex-wrap"> <main class="flex gap-14 justify-center flex-wrap">
<section class="w-96 bg-neutral-900 p-6 rounded-md"> <section
class="w-96 border-[1px] border-neutral-800 bg-gray p-6 rounded-md"
>
<h2 class="text-3xl font-bold text-white mb-4">Projects</h2> <h2 class="text-3xl font-bold text-white mb-4">Projects</h2>
<p class="text-white"> <p class="text-neutral-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
tincidunt, nisl eget aliquam tincidunt, nisl elit aliquam tincidunt, nisl eget aliquam tincidunt, nisl elit aliquam
tortor, eget aliquam nisl elit non nisl. Sed tincidunt, nisl tortor, eget aliquam nisl elit non nisl. Sed tincidunt, nisl

View file

@ -5,6 +5,7 @@ module.exports = {
extend: { extend: {
colors: { colors: {
dark: "#0D0D0D", dark: "#0D0D0D",
gray: "#131313",
}, },
dropShadow: { dropShadow: {
yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"], yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"],