Created Navbar and added styling to links

2023-08-30 23:37:44 +01:00 · 2023-08-30 23:37:44 +01:00 · ba437de706
commit ba437de706
parent 065a6a2d17
2 changed files with 74 additions and 0 deletions
--- a/src/app.html
+++ b/src/app.html
@ -4,7 +4,72 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width" />
+		<meta name="color-scheme" content="dark" />
 		%sveltekit.head%
+
+		<style>
+			:root {
+				--bg: #282c34;
+				--bg-grad: #5a606d9f;
+				--bg-2: #4f5157;
+				--fg: #ABB2BF;
+				--red: #E06C75;
+				--green: #98C379;
+				--yellow: #E5C07B;
+				--blue: #61AFEF;
+				--purple: #C678DD; 
+				--cyan: #56B6C2;
+
+				--font: Consolas, 'Cascadia Code';
+
+				background: var(--bg);
+				font-family: var(--font);
+				font-size: 110%;
+				color: var(--fg);
+				margin: 2rem;
+			}
+
+			nav {
+				position: relative;
+				overflow:visible;
+				display: flex;
+				justify-content: center;
+				gap: 1.5em;
+				padding: 0em 0em 1.5em 0em;
+				z-index: 2;
+				height: 1.5em;
+				border-radius: 4px;
+			}
+
+			a {
+				text-decoration: none;				
+				position: relative;
+				color: var(--green);
+			}
+
+			a:after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 0%;
+				border-bottom: 2px solid var(--fg);
+				transition: 0.4s;
+			}
+			
+			a:hover:after {
+				width: 100%;
+				color: var(--purple);
+			}
+
+			a:hover {
+				color: var(--purple);
+			}
+
+			a:active {
+				color: var(--red);
+			}
+		</style>
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,9 @@
+
+
+<nav>
+    <a href = "test">//tab</a>
+    <a href = "test">//tab</a>
+    <a href = "test">//tab</a>
+</nav>
+
+<slot />