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

development #3

Merged
luke-else merged 53 commits from development into main 2025-02-01 13:00:04 +00:00
Conversation 0 Commits 53 Files Changed 69 +148 -47
7 changed files with 148 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6f0f5f1cf7 - Show all commits

45
src/app.html
View File

@@ -10,56 +10,17 @@
%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;
transition: all 0.2s;
}
h1, h2, h3 {
color: var(--header);
border: 0;

102
src/lib/components/ThemeSwitcher.svelte Normal file
View File

@@ -0,0 +1,102 @@
<script lang="ts">
import { browser } from '$app/environment';
export let darkMode: boolean = true;
function onThemeSwitch() {
darkMode = !darkMode;
localStorage.setItem('theme', darkMode ? 'dark' : 'light');
darkMode
? document.documentElement.classList.add('dark')
: document.documentElement.classList.remove('dark');
}
if (browser) {
if (
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
darkMode = true;
} else {
document.documentElement.classList.remove('dark');
darkMode = false;
}
}
</script>
<style>
input {
display: none;
}
.switch {
position: absolute;
top: 0em;
right: 0em;
display: inline-block;
width: 3.75em;
height: 2.125em;
}
.slider {
position: absolute;
cursor: pointer;
background-color: var(--bg-grad-4);
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 80%;
width: 45%;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: var(--bg-grad-1);
}
input:checked + .slider:before {
background: var(--bg);
}
input:checked + .slider:before {
-webkit-transform: translateX(1.625em);
-ms-transform: translateX(1.625em);
transform: translateX(1.625em);
}
.slider.round {
border-radius: 2.125em;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<svelte:head>
<link rel="stylesheet" href={`/themes/${darkMode ? 'dark' : 'light'}.css`} />
</svelte:head>
<div class="toggle-wrapper not-required">
<label class="switch">
<input type="checkbox" checked={darkMode} on:click={onThemeSwitch}>
<span class="slider round"></span>
</label>
</div>

2
src/lib/store.ts
View File

@@ -25,4 +25,4 @@ export const addToast = (toast: Toast) => {
export const dismissToast = (id: number) => {
toasts.update((all) => all.filter((t) => t.id !== id));
};
};

6
src/routes/+layout.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import Toasts from "$lib/components/Toasts/Toasts.svelte";
import ThemeSwitcher from "$lib/components/ThemeSwitcher.svelte";
</script>
<style>
@@ -18,7 +19,7 @@
nav {
position: relative;
overflow:visible;
overflow: visible;
display: flex;
justify-content: center;
gap: 1.5em;
@@ -48,9 +49,10 @@
<a href = "/">//Profile</a>
<a href = "/repos">//Repos</a>
<a href = "/contact">//Contact</a>
<ThemeSwitcher />
</nav>
<div class="main-container fade">
<Toasts></Toasts>
<Toasts />
<slot />
</div>

4
src/timeline.svelte
View File

@@ -26,10 +26,10 @@
<TimelineSeparator>
{#if item.duration.includes('Present') || !item.duration.includes('-')}
<div class="elementToFadeInAndOut">
<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad);`} />
<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
</div>
{:else}
<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad);`} />
<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
{/if}
<TimelineConnector />
</TimelineSeparator>

18
static/themes/dark.css Normal file
View File

@@ -0,0 +1,18 @@
: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;
}

18
static/themes/light.css Normal file
View File

@@ -0,0 +1,18 @@
: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;
}