implemented navbar

mtzsouza · Sep 12, 2023 · db50c24 · db50c24
1 parent e09550c
commit db50c24
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 8 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer utilities {
+    .navItem {
+        @apply cursor-pointer font-semibold opacity-70 hover:opacity-100
+    }
+}
diff --git a/src/app.html b/src/app.html
@@ -7,6 +7,7 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link href="https://fonts.googleapis.com/css2?family=Ms+Madi&display=swap" rel="stylesheet">
+		<script src="https://kit.fontawesome.com/2f705eb04d.js" crossorigin="anonymous"></script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -1,7 +1,7 @@
 <div class="flex flex-col items-center justify-center">
-    <img src="https://i.imgur.com/eMmdGjr.png" alt="bg" class="animate-bounce h-200">
-    <h1 class="text-gray-50 text-5xl">404</h1>
-    <h1 class="antialiased text-4xl text-gray-200 font-semibold tracking-widest select-none hover:animate-pulse text-center py-2">
+    <h1 class="text-gray-50 text-4xl">404</h1>
+    <h1 class="antialiased text-3xl text-gray-200 font-semibold tracking-widest select-none hover:animate-pulse text-center py-2">
         A mischievous fox stole this page.
     </h1>
+    <img src="https://i.imgur.com/eMmdGjr.png" alt="bg" class="animate-bounce h-200">
 </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -2,7 +2,25 @@
     import "../app.css";
 </script>
 
-<div class="min-h-screen flex items-center justify-center bg-gradient-to-tr overdflow-hidden
-          from-black via-gray-900 to-black">
-  <slot />
+<div class="min-h-screen h-screen flex flex-col items-center bg-gradient-to-br overdflow-hidden
+          from-gray-900 via-gray-950 to-gray-950">
+  <nav class="h-16 w-[85%] bg-gray-800 z-20 my-4 px-8 sm:px-16 rounded-lg sm:h-12 sm:w-[92%]
+          flex justify-between items-center antialiased text-gray-100 ">
+          <div>
+            <h1 class="font-madi text-4xl sm:text-6xl cursor-pointer relative sm:right-6 sm:top-1.5">
+              Matheus Souza
+            </h1>
+          </div>
+          <div class="sm:hidden text-xl opacity-70">
+            <i class="fa-solid fa-bars" style="color: #ffffff;"></i>
+          </div>
+          <div class="hidden sm:flex justify-items-start gap-24">
+            <div class="navItem">Story</div>
+            <div class="navItem">Projects</div>
+            <div class="navItem">Contact</div>
+          </div>
+  </nav>
+  <div class="h-full w-full flex items-center justify-center">
+    <slot />
+  </div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -2,7 +2,7 @@
 
 </script>
 
-<div class="container max-w-[80%] sm:max-w-[30%] flex flex-col justify-center items-center">
+<div class="max-w-[80%] sm:max-w-[30%] flex flex-col justify-center items-center">
     <img src="https://i.imgur.com/QCN8Vgn.png" alt="bg" class="animate-bounce h-200">
     <h1 class="antialiased text-4xl font-madi text-gray-200 font-semibold tracking-widest select-none hover:animate-pulse">
         Coming soon.