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

Adapted themings to allow for light and dark

Browse Source
This commit is contained in:
Luke Else 2023-10-26 10:24:30 +01:00
parent e0ea53a9d3
commit 2e07de0e71
7 changed files with 64 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/app.html
View File

@ -7,22 +7,50 @@
<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" />
<meta name="color-scheme" content="dark" />
%sveltekit.head%
<style>
@media (prefers-color-scheme: dark) {
:root {
--bg: #282c34;
--bg-grad: #5a606d9f;
--bg-2: #838488;
--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;
--red: #E06C75;
--green: #98C379;
--yellow: #E5C07B;
--blue: #61AFEF;
--purple: #C678DD;
--cyan: #56B6C2;
--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);
@ -33,12 +61,12 @@
}
h1, h2, h3 {
color: var(--red);
color: var(--header);
border: 0;
}
hr {
border: .2em solid var(--bg-grad);
border: .2em solid var(--bg-grad-3);
border-radius: 5em;
width: 100%;
}
@ -52,7 +80,7 @@
color: var(--fg);
}
*::-webkit-scrollbar-thumb:hover{
color: var(--green);
color: var(--link);
}
*::-webkit-scrollbar-thumb {
@ -68,7 +96,7 @@
a {
text-decoration: none;
position: relative;
color: var(--green);
color: var(--link);
white-space: nowrap;
}
@ -84,26 +112,26 @@
a:hover:after {
width: 100%;
color: var(--purple);
color: var(--glow);
}
a:hover {
color: var(--purple);
color: var(--glow);
}
a:active {
color: var(--red);
color: var(--header);
}
.button {
color: var(--fg);
background-color: var(--bg-2);
box-shadow: .1em .1em .1em var(--green);
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(--red);
box-shadow: .3em .3em .3em var(--header);
}
</style>
</head>

4
src/lib/components/Card.svelte
View File

@ -16,13 +16,13 @@
flex-wrap: wrap;
flex: 2 1 15em;
padding: .5em 2.5em 2em 2.5em;
background: var(--bg-grad);
background: var(--bg-secondary);
border-radius: .5em;
scroll-snap-align: start;
transition: all 0.2s;
}
.card:hover {
box-shadow: .5em .5em .5em var(--cyan);
box-shadow: .5em .5em .5em var(--hover);
}
.card .card-header :global(div) {

2
src/lib/components/Modal.svelte
View File

@ -36,7 +36,7 @@
border-right: 2em;
background: var(--bg);
color: var(--fg);
box-shadow: .5em .5em .5em var(--red);
box-shadow: .5em .5em .5em var(--header);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.7);

6
src/main.svelte
View File

@ -10,10 +10,10 @@
<style>
.main-card {
background-color: var(--bg-grad);
background-color: var(--bg-secondary);
border-radius: 1em;
padding: .2em 2em 2em 2em;
box-shadow: .5em .5em .5em var(--purple);
box-shadow: .5em .5em .5em var(--glow);
}
.flex-container {
@ -26,7 +26,7 @@
height: 8em;
width: 8em;
padding: 1em 1em 1em 1em;
border: .5em solid var(--bg-grad);
border: .5em solid var(--bg-grad-3);
}
.about {

2
src/routes/+layout.svelte
View File

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import Toasts from "$lib/components/Toasts/Toasts.svelte";
</script>

6
src/routes/contact/+page.svelte
View File

@ -9,6 +9,7 @@
if (sent == "true") {
addToast(new Toast("Thank you! Your E-Mail has been sent. I will reply as soon as possible!", ToastType.Success, true, 5000));
}
// Can't use else otherwise the warning will display on load
if (sent == "false") {
addToast(new Toast("Sorry, your E-Mail could not be sent... Please try again later!", ToastType.Error, true, 5000));
}
@ -26,7 +27,8 @@
input, textarea {
padding: 1em 0em 1em 1em;
background-color: var(--bg-grad);
background-color: var(--input);
color: var(--fg);
border: 0;
outline: 0;
border-radius: 8px;
@ -35,7 +37,7 @@
transition: all 0.15s;
&:focus, &:hover{
box-shadow: .2em .2em .2em var(--red);
box-shadow: .2em .2em .2em var(--green);
}
}

6
src/timeline.svelte
View File

@ -24,7 +24,7 @@
</TimelineOppositeContent>
<TimelineSeparator>
<TimelineDot style={`background-color: var(--cyan); border-color: var(--bg-grad);`} />
<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad);`} />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
@ -39,7 +39,7 @@
.oposite-content-title {
margin: 0;
padding: 0;
color: var(--bg-2);
color: var(--bg-grad-2);
}
.content-title {
margin: 0;
@ -50,7 +50,7 @@
margin: 0;
padding: 0;
margin-top: 1rem;
color: var(--foreground);
color: var(--fg);
font-weight: lighter;
padding: 0.5rem 0;
}