169 lines
3.8 KiB
HTML
169 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="description" content="Luke Else - Software Developer at Thales UK. I specialise in developing distributed systems in C++ using highly scalable internal frameworks. I also develop backend and system applications in my spare time using both Svelte, Rust and C++. Feel free to check my work out at https://git.luke-else.co.uk." />
|
|
<meta name="author" content="Luke Else (mail@luke-else.co.uk)" />
|
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
|
|
<meta name="viewport" content="width=device-width" />
|
|
%sveltekit.head%
|
|
|
|
<style>
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #282c34;
|
|
--bg-secondary: #474d57;
|
|
--bg-grad-1: #484e58;
|
|
--bg-grad-2: #4e5560;
|
|
--bg-grad-3: #59616d;
|
|
--bg-grad-4: #606a7b;
|
|
--bg-grad-5: #606978;
|
|
--input: #4e5560;
|
|
--fg: #ABB2BF;
|
|
--header: #E06C75;
|
|
--link: #98C379;
|
|
--hover: #56B6C2;
|
|
--glow: #C678DD;
|
|
|
|
--green: #98C379;
|
|
--red: #E06C75;
|
|
}
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg: #fff;
|
|
--bg-secondary: #ebebeb;
|
|
--bg-grad-1: #c1c1c1;
|
|
--bg-grad-2: #a1a1a1;
|
|
--bg-grad-3: #858585;
|
|
--bg-grad-4: #616161;
|
|
--bg-grad-5: #484848;
|
|
--input: #a9a9a9;
|
|
--fg: #2f2f2f;
|
|
--header: #514a4a;
|
|
--link: #df0000;
|
|
--hover: #4f4b489b;
|
|
--glow: #545454;
|
|
|
|
--green: #98C379;
|
|
--red: #E06C75;
|
|
}
|
|
}
|
|
:root {
|
|
--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;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
color: var(--header);
|
|
border: 0;
|
|
}
|
|
|
|
hr {
|
|
border: .2em solid var(--bg-grad-3);
|
|
border-radius: 5em;
|
|
width: 100%;
|
|
}
|
|
|
|
*::-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(--link);
|
|
}
|
|
|
|
*::-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(--link);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
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(--glow);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--glow);
|
|
}
|
|
|
|
a:active {
|
|
color: var(--header);
|
|
}
|
|
|
|
.button {
|
|
color: var(--fg);
|
|
background-color: var(--bg-grad-1);
|
|
box-shadow: .1em .1em .1em var(--link);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.button:hover {
|
|
box-shadow: .3em .3em .3em var(--header);
|
|
}
|
|
|
|
@keyframes animationName {
|
|
0% { opacity:0; }
|
|
50% { opacity:1; }
|
|
100% { opacity:0; }
|
|
}
|
|
@-o-keyframes animationName{
|
|
0% { opacity:0; }
|
|
50% { opacity:1; }
|
|
100% { opacity:0; }
|
|
}
|
|
@-moz-keyframes animationName{
|
|
0% { opacity:0; }
|
|
50% { opacity:1; }
|
|
100% { opacity:0; }
|
|
}
|
|
@-webkit-keyframes animationName{
|
|
0% { opacity:0; }
|
|
50% { opacity:1; }
|
|
100% { opacity:0; }
|
|
}
|
|
.elementToFadeInAndOut {
|
|
-webkit-animation: animationName 1.5s infinite;
|
|
-moz-animation: animationName 1.5s infinite;
|
|
-o-animation: animationName 1.5s infinite;
|
|
animation: animationName 1.5s infinite;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body data-sveltekit-preload-data="hover">
|
|
<div style="display: contents">%sveltekit.body%</div>
|
|
</body>
|
|
</html>
|