raaah get basic css done

.gitignore

@@ -8,8 +8,9 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
+
 dist-ssr
+dist
 *.local
 
 # Editor directories and files

src/assets/link.svg

@@ -0,0 +1,16 @@
+<svg
+    style="width: 23px"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-6 h-6"
+>
+<path
+    style="fill: #ffffff00"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
+/>
+</svg>

src/assets/logo.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:bx="https://boxy-svg.com">
+  <defs>
+    <linearGradient id="gradient-2" bx:pinned="true">
+      <stop offset="0" style="stop-color: rgb(189, 177, 251);"/>
+      <stop offset="1" style="stop-color: rgb(56, 40, 137);"/>
+    </linearGradient>
+    <linearGradient id="gradient-2-0" gradientUnits="userSpaceOnUse" x1="249.128" y1="108.223" x2="249.128" y2="387.839" gradientTransform="matrix(1, 0, 0, 1, 0.522352, -0.522402)" xlink:href="#gradient-2"/>
+  </defs>
+  <path d="M 461.989 195.13 C 471.654 233.897 435.897 278.674 375.006 312.516 C 351.223 356.99 303.798 387.317 249.174 387.317 C 220.008 387.317 192.894 378.671 170.336 363.842 C 100.132 362.771 47.029 339.987 37.312 301.014 C 27.762 262.712 62.552 218.542 122.115 184.85 C 145.467 139.098 193.594 107.701 249.174 107.701 C 279.078 107.701 306.825 116.79 329.716 132.314 C 399.547 133.535 452.307 156.296 461.989 195.13 Z M 70.452 301.149 C 76.408 321.921 103.025 334.591 140.998 338.165 C 119.847 313.756 107.08 282.1 107.08 247.509 C 107.08 243.191 107.279 238.92 107.668 234.702 C 79.316 257.185 64.695 281.071 70.452 301.149 Z M 432.485 197.337 C 426.434 176.235 399.064 163.495 360.125 160.157 C 379.612 184.088 391.268 214.459 391.268 247.509 C 391.268 254.474 390.75 261.32 389.751 268.012 C 421.698 244.324 438.604 218.679 432.485 197.337 Z M 277.23 306.128 L 267.075 244.49 C 275.532 239.753 279.17 228.619 279.17 218.221 C 279.17 202.927 263.66 189.485 248.397 189.485 C 233.133 189.485 219.189 203.972 219.189 219.266 C 219.189 229.664 223.35 238.709 231.809 243.445 L 217.992 306.65 Z" style="stroke: rgb(0, 0, 0); fill: url('#gradient-2-0'); stroke-width: 0px; stroke-opacity: 0.59;"/>
+</svg>

src/components/Header.tsx

@@ -1,18 +1,31 @@
-import { useLocation } from 'preact-iso';
+import { useLocation } from "preact-iso";
+import LinkSvg from "../assets/link.svg";
+import LogoSvg from "../assets/logo.svg";
+import { useState, useEffect } from "preact/hooks"
 
 export function Header() {
   const { url } = useLocation();
+  const [currentTime, setCurrentTime] = useState('');
+
 
   return (
-		<header>
+    <div id="navbar" className="h-16 px-4 bg-navbar-color flex flex-row items-center justify-between">
-			<nav>
+			<div className="flex flex-row items-center w-1/3">
-				<a href="/" class={url == '/' && 'active'}>
+				<img src="/logo.png" className="h-16 w-16"></img>
-					Home
+				<h1 className="font-roboto text-text-color text-4xl">nebula.</h1>
-				</a>
+			</div>
-				<a href="/404" class={url == '/404' && 'active'}>
+      
-					404
+			<div className="w-1/3">
-				</a>
+				Clock
-			</nav>
+			</div>
-		</header>
+			<div className="w-1/3">
+				<span className="">Games</span>
+			</div>
+    </div>
   );
 }
+// yes i got itdfsdsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
+// @madjikun do the DAMN CSS
+// clock in middle, logo on left, buttons on side yk
+
+// oh yeah go to the liveshare tab then click on the shared serer

src/index.tsx

@@ -5,17 +5,22 @@ import { Header } from './components/Header.jsx';
 import { Home } from './pages/Home';
 import { NotFound } from './pages/_404.jsx';
 import './style.css';
+import './themes/main.css';
 
 export function App() {
 	return (
 		<LocationProvider>
+			<div class="flex flex-col h-screen">
 			<Header />
+				<div class="flex-1 bg-primary">
 					<main>
 						<Router>
 							<Route path="/" component={Home} />
 							<Route default component={NotFound} />
 						</Router>
 					</main>
+				</div>
+			</div>
 		</LocationProvider>
 	);
 }

src/pages/Home.tsx

@@ -1,7 +1,7 @@
 
 export function Home() {
 	return (
-		<div>
+		<div class="text-8xl">
 			We've enabled nebula servicessssss
 		</div>
 	);

src/pages/_404.tsx

@@ -1,8 +1,8 @@
 export function NotFound() {
 	return (
 		<section>
-			<h1>404: Not Found</h1>
+			<p>this nebula service has been disabled</p>
-			<p>It's gone :(</p>
+			<span>404</span>
 		</section>
 	);
 }

src/style.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/themes/main.css

@@ -0,0 +1,20 @@
+:root {
+    --background-primary: #191724;
+    --navbar-color: #26233a;
+    --navbar-height: 60px;
+    --navbar-text-color: #7967dd;
+    --navbar-link-color: #e0def4;
+    --navbar-font: "Roboto";
+    --input-text-color: #e0def4;
+    --input-placeholder-color: white;
+    --input-background-color: #1f1d2e;
+    --input-border-color: #eb6f92;
+    --input-border-size: 1.3px;
+    --navbar-logo-filter: none;
+  }
+
+.font-roboto {
+    font-family: 'Inter', sans-serif;
+    font-weight: 300;
+}
+  

tailwind.config.js

@@ -5,6 +5,11 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
+    colors: {
+      "primary": "var(--background-primary)",
+      "text-color": "var(--navbar-text-color)",
+      "navbar-color": "var(--navbar-color)"
+    },
     extend: {},
   },
   plugins: [],