[+] working on new UI

Dan13615 · Jun 28, 2024 · f2eea91 · f2eea91
1 parent ee24f77
commit f2eea91
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 38 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,42 +1,13 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router';
+import TheHeader from './components/TheHeader.vue';
 </script>
 
 <template>
-    <div class="text-sm lg:text-xl">
-        <header class="p-2 w-full flex flex-row justify-between fixed">
-            <div>
-                <RouterLink to="/" class="font-bold">HOME</RouterLink>
-            </div>
-            <div>
-                <nav class="font-bold w-full flex gap-5">
-                    <RouterLink to="/projects">PROJECTS</RouterLink>
-                    <RouterLink to="/contact">CONTACT</RouterLink>
-                </nav>
-            </div>
-        </header>
-    </div>
-    <div class="min-h-screen flex justify-center transition-all padd">
+    <TheHeader />
+    <div class="min-h-screen flex justify-center transition-all">
         <RouterView />
     </div>
 </template>
 
-<style scoped>
-header {
-    background-color: rgba(57, 62, 70, 0.8);
-}
-
-nav {
-    color: #eeeeee;
-}
-
-.padd {
-    padding-top: 8rem;
-}
-
-@media (min-width: 1024px) {
-    .padd {
-        padding-top: 16rem;
-    }
-}
-</style>
+<style></style>
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -3,26 +3,26 @@
 @tailwind utilities;
 
 #app {
-    background-color: #2b2a2a;
+    background-color: #101010;
     background-size: cover;
 }
 
 a {
-    color: #eeeeee;
+    color: #ffffff;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 a:hover {
-    color: #929aab;
+    color: #adb5bd;
     font-weight: bold;
 }
 
 p {
-    color: #eeeeee;
+    color: #ffffff;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 li {
-    color: #eeeeee;
+    color: #ffffff;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -0,0 +1,21 @@
+<template>
+    <HeaderItem>
+        <div class="text-sm lg:text-xl">
+            <div class="p-2 w-full flex flex-row justify-between fixed">
+                <div>
+                    <RouterLink to="/" class="font-bold">HOME</RouterLink>
+                </div>
+                <div>
+                    <nav class="font-bold w-full flex gap-5">
+                        <RouterLink to="/projects">PROJECTS</RouterLink>
+                        <RouterLink to="/contact">CONTACT</RouterLink>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </HeaderItem>
+</template>
+
+<script setup></script>
+
+<style scoped></style>