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

90 lines
1.7 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" />
2023-09-25 20:38:42 +00:00
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
2023-08-29 19:48:14 +00:00
<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', Monaco, 'SF Mono', 'DejaVu Sans Mono', 'Roboto Mono';
background: var(--bg);
color: var(--fg);
font-family: var(--font);
font-size: 110%;
margin: 2rem;
}
2023-09-25 20:38:42 +00:00
*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb {
width: 26px;
border-radius: 13px;
background-clip: padding-box;
border: 10px solid transparent;
color: var(--fg);
}
*::-webkit-scrollbar-thumb:hover{
color: var(--green);
}
*::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 10px;
}
@media (max-width: 800px) {
.not-required {
display: none;
}
}
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>