luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Created Navbar and added styling to links

Browse Source
This commit is contained in:
Luke Else
2023-08-30 23:37:44 +01:00
parent 065a6a2d17
commit ba437de706
2 changed files with 74 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/app.html
View File

@@ -4,7 +4,72 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="color-scheme" content="dark" />
%sveltekit.head% %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> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>

9
src/routes/+layout.svelte Normal file
View File

@@ -0,0 +1,9 @@
<nav>
<a href = "test">//tab</a>
<a href = "test">//tab</a>
<a href = "test">//tab</a>
</nav>
<slot />