luke-else.co.uk/src/app.html

78 lines
1.4 KiB
HTML
Raw Normal View History

2023-08-29 19:48:14 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<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" />
2023-08-29 19:48:14 +00:00
%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>
2023-08-29 19:48:14 +00:00
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>