From f7e3acf384e3d5e3f2fa723bf01f4e196f1dad58 Mon Sep 17 00:00:00 2001 From: Luke Else Date: Thu, 6 Mar 2025 14:24:24 +0000 Subject: [PATCH 1/6] #4 Changed light colour theme in favour of a cold blue theme --- src/app.html | 4 ++-- src/lib/components/ThemeSwitcher.svelte | 13 +++---------- src/main.svelte | 2 +- src/timeline.svelte | 6 +++--- static/themes/dark.css | 15 +++++++-------- static/themes/light.css | 25 ++++++++++++------------- 6 files changed, 28 insertions(+), 37 deletions(-) diff --git a/src/app.html b/src/app.html index 267085b..a134e52 100644 --- a/src/app.html +++ b/src/app.html @@ -28,7 +28,7 @@ } hr { - border: .2em solid var(--bg-grad-3); + border: .2em solid var(--accent); border-radius: 5em; width: 100%; } @@ -87,7 +87,7 @@ .button { color: var(--fg); - background-color: var(--bg-grad-1); + background-color: var(--accent); transition: all 0.2s; } diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte index 066e783..67c6428 100644 --- a/src/lib/components/ThemeSwitcher.svelte +++ b/src/lib/components/ThemeSwitcher.svelte @@ -45,12 +45,12 @@ .slider { position: absolute; cursor: pointer; - background-color: var(--bg-grad-4); + background-color: var(--accent); top: 0; left: 0; right: 0; bottom: 0; - background-color: #ccc; + background-color: var(--accent); -webkit-transition: .4s; transition: .4s; } @@ -62,17 +62,10 @@ width: 45%; left: 4px; bottom: 4px; - background-color: white; + background-color: var(--bg); -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); diff --git a/src/main.svelte b/src/main.svelte index 8bec351..1452291 100644 --- a/src/main.svelte +++ b/src/main.svelte @@ -28,7 +28,7 @@ height: 8em; width: 8em; padding: 1em 1em 1em 1em; - border: .5em solid var(--bg-grad-3); + border: .5em solid var(--accent); } .about { diff --git a/src/timeline.svelte b/src/timeline.svelte index ca20265..55c0bf8 100644 --- a/src/timeline.svelte +++ b/src/timeline.svelte @@ -26,10 +26,10 @@ {#if item.duration.includes('Present') || !item.duration.includes('-')}
- +
{:else} - + {/if} @@ -45,7 +45,7 @@ .oposite-content-title { margin: 0; padding: 0; - color: var(--bg-grad-2); + color: var(--accent); } .content-title { margin: 0; diff --git a/static/themes/dark.css b/static/themes/dark.css index a07e1eb..5b48314 100644 --- a/static/themes/dark.css +++ b/static/themes/dark.css @@ -1,17 +1,16 @@ :root { --bg: #282c34; --bg-secondary: #3e434b; - --bg-grad-1: #484e58; - --bg-grad-2: #4e5560; - --bg-grad-3: #59616d; - --bg-grad-4: #606a7b; - --bg-grad-5: #606978; - --input: #2b3136; - --fg: #9eaac0; + --accent: #59616d; + --header: #E06C75; + --fg: #9eaac0; + + --input: #2b3136; + --link: #98C379; - --hover: #56B6C2; --glow: #C678DD; + --hover: #56B6C2; --green: #98C379; --red: #E06C75; diff --git a/static/themes/light.css b/static/themes/light.css index 809cce1..cb6ba16 100644 --- a/static/themes/light.css +++ b/static/themes/light.css @@ -1,18 +1,17 @@ :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: #cbc9c9; - --fg: #2f2f2f; - --header: #514a4a; - --link: #df0000; - --hover: #4f4b489b; - --glow: #545454; + --bg: #1e1f2a; + --bg-secondary: #3a3f4b; + --accent: #777f8d; + + --header: #cad1da; + --fg: #e4e1db; + --input: #2e3438; + + --link: #95add8; + --glow: #bcc3ca; + --hover: #cdd8e2; + --green: #98C379; --red: #E06C75; } \ No newline at end of file -- 2.47.2 From f34761d0943e419eceb8f0a00329318e6400a064 Mon Sep 17 00:00:00 2001 From: Luke Else Date: Thu, 6 Mar 2025 14:45:39 +0000 Subject: [PATCH 2/6] Updated pipeline to create a development build --- .gitea/workflows/dev.yaml | 30 +++++++++++++++++++++ .gitea/workflows/{docker.yaml => main.yaml} | 4 +-- 2 files changed, 31 insertions(+), 3 deletions(-) create mode 100644 .gitea/workflows/dev.yaml rename .gitea/workflows/{docker.yaml => main.yaml} (92%) diff --git a/.gitea/workflows/dev.yaml b/.gitea/workflows/dev.yaml new file mode 100644 index 0000000..4b9b6ff --- /dev/null +++ b/.gitea/workflows/dev.yaml @@ -0,0 +1,30 @@ +name: Build and Push Development Docker Image + +on: + push: + branches: [ development ] + +jobs: + build-and-push: + runs-on: ubuntu-latest + steps: + - name: Checkout Repository + uses: actions/checkout@v4 + + - name: Log in to Docker Hub + uses: docker/login-action@v3 + with: + registry: ${{ secrets.CONTAINER_REGISTRY }} + username: ${{ secrets.CONTAINER_REGISTRY_USERNAME }} + password: ${{ secrets.CONTAINER_REGISTRY_PASSKEY }} + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + + - name: Build and Tag Docker Image + run: | + docker build -t ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev . + + - name: Push Docker Image + run: | + docker push ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev diff --git a/.gitea/workflows/docker.yaml b/.gitea/workflows/main.yaml similarity index 92% rename from .gitea/workflows/docker.yaml rename to .gitea/workflows/main.yaml index c8b06f7..dd41a9c 100644 --- a/.gitea/workflows/docker.yaml +++ b/.gitea/workflows/main.yaml @@ -1,10 +1,8 @@ -name: Build and Push Docker Image +name: Build and Push Latest Docker Image on: push: branches: [ main ] - pull_request: - branches: [ main ] jobs: build-and-push: -- 2.47.2 From 3557a6a6ad5cb51ecb5b78f21ae7032d2a01d3a2 Mon Sep 17 00:00:00 2001 From: Luke Else Date: Thu, 6 Mar 2025 15:41:06 +0000 Subject: [PATCH 3/6] Added a nice new light pastel blue theme --- src/lib/components/Toasts/Toast.svelte | 6 +++--- static/themes/dark.css | 1 + static/themes/frosted-blue.css | 17 +++++++++++++++++ static/themes/light.css | 25 +++++++++++++------------ 4 files changed, 34 insertions(+), 15 deletions(-) create mode 100644 static/themes/frosted-blue.css diff --git a/src/lib/components/Toasts/Toast.svelte b/src/lib/components/Toasts/Toast.svelte index 8ed3c6f..553204e 100644 --- a/src/lib/components/Toasts/Toast.svelte +++ b/src/lib/components/Toasts/Toast.svelte @@ -44,13 +44,13 @@ max-width: 80%; } .error { - background: IndianRed; + background: var(--red); } .success { - background: MediumSeaGreen; + background: var(--green); } .info { - background: SkyBlue; + background: var(--blue); } .text { margin-left: 1rem; diff --git a/static/themes/dark.css b/static/themes/dark.css index 5b48314..117569c 100644 --- a/static/themes/dark.css +++ b/static/themes/dark.css @@ -14,4 +14,5 @@ --green: #98C379; --red: #E06C75; + --blue: #79aec3; } \ No newline at end of file diff --git a/static/themes/frosted-blue.css b/static/themes/frosted-blue.css new file mode 100644 index 0000000..cb6ba16 --- /dev/null +++ b/static/themes/frosted-blue.css @@ -0,0 +1,17 @@ +:root { + --bg: #1e1f2a; + --bg-secondary: #3a3f4b; + --accent: #777f8d; + + --header: #cad1da; + --fg: #e4e1db; + + --input: #2e3438; + + --link: #95add8; + --glow: #bcc3ca; + --hover: #cdd8e2; + + --green: #98C379; + --red: #E06C75; +} \ No newline at end of file diff --git a/static/themes/light.css b/static/themes/light.css index cb6ba16..ad988cc 100644 --- a/static/themes/light.css +++ b/static/themes/light.css @@ -1,17 +1,18 @@ :root { - --bg: #1e1f2a; - --bg-secondary: #3a3f4b; - --accent: #777f8d; + --bg: #f5f5f5; /* Slightly deeper light grey for subtle contrast */ + --bg-secondary: #d9dddf; /* More defined soft grey */ + --accent: #8ea29b; /* Stronger muted sage green */ - --header: #cad1da; - --fg: #e4e1db; + --header: #4a5a56; /* Darker desaturated green-grey for better contrast */ + --fg: #2f3739; /* Richer dark grey for improved readability */ - --input: #2e3438; + --input: #e4e7e8; /* Slightly deeper soft grey input background */ - --link: #95add8; - --glow: #bcc3ca; - --hover: #cdd8e2; + --link: #5f8480; /* Darker muted teal for contrast */ + --glow: #b0bdb9; /* More noticeable but soft glow */ + --hover: #85a29c; /* Stronger pastel hover effect */ - --green: #98C379; - --red: #E06C75; -} \ No newline at end of file + --green: #6fa984; /* More vibrant pastel green */ + --red: #e8858f; /* Slightly deeper pastel red for contrast */ + --blue: #6fa9a4; /* Same as accent */ +} -- 2.47.2 From c3055a6882c56d8502e0d7f4b16c1f14353c97d6 Mon Sep 17 00:00:00 2001 From: Luke Else Date: Thu, 6 Mar 2025 15:58:14 +0000 Subject: [PATCH 4/6] Added a series of nicely curated themes --- src/app.html | 2 +- src/main.svelte | 2 +- static/themes/cool-modern.css | 18 ++++++++++++++++++ static/themes/jet-brains-dracula.css | 18 ++++++++++++++++++ static/themes/monokai-dark.css | 18 ++++++++++++++++++ static/themes/stormy-blue.css | 18 ++++++++++++++++++ 6 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 static/themes/cool-modern.css create mode 100644 static/themes/jet-brains-dracula.css create mode 100644 static/themes/monokai-dark.css create mode 100644 static/themes/stormy-blue.css diff --git a/src/app.html b/src/app.html index a134e52..4364313 100644 --- a/src/app.html +++ b/src/app.html @@ -28,7 +28,7 @@ } hr { - border: .2em solid var(--accent); + border: .12em solid var(--accent); border-radius: 5em; width: 100%; } diff --git a/src/main.svelte b/src/main.svelte index 1452291..5dc18f5 100644 --- a/src/main.svelte +++ b/src/main.svelte @@ -28,7 +28,7 @@ height: 8em; width: 8em; padding: 1em 1em 1em 1em; - border: .5em solid var(--accent); + border: .25em solid var(--accent); } .about { diff --git a/static/themes/cool-modern.css b/static/themes/cool-modern.css new file mode 100644 index 0000000..950f365 --- /dev/null +++ b/static/themes/cool-modern.css @@ -0,0 +1,18 @@ +:root { + --bg: #f2f6f7; /* Soft blue-tinted white */ + --bg-secondary: #d7e1e4; /* Cool grey-blue */ + --accent: #92a9b0; /* Subtle blue-green */ + + --header: #5d7075; /* Deep slate blue-green */ + --fg: #3c4649; /* Rich dark grey */ + + --input: #e0e6e8; /* Light desaturated blue-grey */ + + --link: #678d97; /* Muted sea blue */ + --glow: #b2c4c8; /* Gentle cool glow */ + --hover: #8fa7af; /* Soft grey-blue hover */ + + --green: #78a890; /* Balanced green */ + --red: #e08c96; /* Soft dusty red */ + --blue: #729da5; /* Medium desaturated blue */ +} \ No newline at end of file diff --git a/static/themes/jet-brains-dracula.css b/static/themes/jet-brains-dracula.css new file mode 100644 index 0000000..e32d258 --- /dev/null +++ b/static/themes/jet-brains-dracula.css @@ -0,0 +1,18 @@ +:root { + --bg: #2b2b2b; /* Dark but not too harsh */ + --bg-secondary: #3c3f41; /* Deep warm grey */ + --accent: #6897bb; /* Muted but clear blue */ + + --header: #a9b7c6; /* Softer contrast */ + --fg: #bbbbbb; /* Light but not pure white */ + + --input: #414141; /* Dark grey input */ + + --link: #519aba; /* Soft coding blue */ + --glow: #4e5d68; /* Subtle bluish glow */ + --hover: #8c9da8; /* Brighter on hover */ + + --green: #6a8759; /* Classic Darcula green */ + --red: #cc6666; /* Softer, warm red */ + --blue: #6897bb; /* Standard coding blue */ +} \ No newline at end of file diff --git a/static/themes/monokai-dark.css b/static/themes/monokai-dark.css new file mode 100644 index 0000000..c39c63e --- /dev/null +++ b/static/themes/monokai-dark.css @@ -0,0 +1,18 @@ +:root { + --bg: #272822; /* Classic Monokai dark */ + --bg-secondary: #3e3d32; /* Darker olive grey */ + --accent: #f92672; /* Monokai’s signature pink-red */ + + --header: #a6e22e; /* Neon green */ + --fg: #f8f8f2; /* Soft off-white */ + + --input: #373831; /* Slightly lighter grey-green */ + + --link: #66d9ef; /* Monokai cyan */ + --glow: #49483e; /* Muted background glow */ + --hover: #fd7c95; /* Lighter pink hover */ + + --green: #a6e22e; /* Bright Monokai green */ + --red: #f92672; /* Soft pinkish-red */ + --blue: #66d9ef; /* Bright cyan */ +} \ No newline at end of file diff --git a/static/themes/stormy-blue.css b/static/themes/stormy-blue.css new file mode 100644 index 0000000..851c23b --- /dev/null +++ b/static/themes/stormy-blue.css @@ -0,0 +1,18 @@ +:root { + --bg: #1e2426; /* Dark blue-grey */ + --bg-secondary: #283033; /* Deep slate */ + --accent: #7c9197; /* Muted blue-grey */ + + --header: #a4b3b7; /* Softer light blue-grey */ + --fg: #d2d9dc; /* Pale blue-grey for readability */ + + --input: #323a3d; /* Dark neutral input background */ + + --link: #85a1a8; /* Muted cool teal */ + --glow: #627277; /* Soft cool-toned glow */ + --hover: #95b2b8; /* Pastel blue-grey hover */ + + --green: #79a48c; /* Muted forest green */ + --red: #d18088; /* Soft warm red */ + --blue: #789fa7; /* Medium desaturated blue */ +} \ No newline at end of file -- 2.47.2 From da2f2bc3801e73386fb1d883ceba21f0ae2ea067 Mon Sep 17 00:00:00 2001 From: Luke Else Date: Thu, 6 Mar 2025 16:00:35 +0000 Subject: [PATCH 5/6] #4 Added new vscode colour scheme option. --- static/themes/vscode-dark.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 static/themes/vscode-dark.css diff --git a/static/themes/vscode-dark.css b/static/themes/vscode-dark.css new file mode 100644 index 0000000..9223bda --- /dev/null +++ b/static/themes/vscode-dark.css @@ -0,0 +1,18 @@ +:root { + --bg: #1e1e1e; /* Dark neutral background */ + --bg-secondary: #252526; /* Slightly lighter for separation */ + --accent: #569cd6; /* Signature VS Code blue */ + + --header: #9cdcfe; /* Brighter cyan for contrast */ + --fg: #d4d4d4; /* Light grey for readability */ + + --input: #333; /* Dark but still visible */ + + --link: #4fc1ff; /* Brighter blue for hyperlinks */ + --glow: #2a3f5f; /* Soft deep blue glow */ + --hover: #7bb8e8; /* Brighter accent on hover */ + + --green: #4ec9b0; /* Soft green */ + --red: #d16969; /* Coding red */ + --blue: #9cdcfe; /* Soft bright cyan */ +} \ No newline at end of file -- 2.47.2 From 5f1a1d49596f4da81a2a646835760d29d410efb0 Mon Sep 17 00:00:00 2001 From: Luke Else Date: Fri, 7 Mar 2025 21:58:40 +0000 Subject: [PATCH 6/6] #23 Updated the colour of the send button --- src/app.html | 10 ---------- src/lib/components/Cards/Card.svelte | 3 ++- src/routes/contact/+page.svelte | 11 +++++++++++ static/themes/stormy-blue.css | 18 ------------------ 4 files changed, 13 insertions(+), 29 deletions(-) delete mode 100644 static/themes/stormy-blue.css diff --git a/src/app.html b/src/app.html index 4364313..5c281b4 100644 --- a/src/app.html +++ b/src/app.html @@ -85,16 +85,6 @@ color: var(--header); } - .button { - color: var(--fg); - background-color: var(--accent); - transition: all 0.2s; - } - - .button:hover { - box-shadow: .3em .3em .3em var(--header); - } - .container { max-width: 90%; margin: auto; diff --git a/src/lib/components/Cards/Card.svelte b/src/lib/components/Cards/Card.svelte index d13957c..0d5de39 100644 --- a/src/lib/components/Cards/Card.svelte +++ b/src/lib/components/Cards/Card.svelte @@ -23,8 +23,9 @@ box-shadow: .25em .25em .5em var(--hover); } - .card:hover { + .card:hover, .card:focus-within { box-shadow: .5em .5em .5em var(--hover); + transform: scale(1.02); } .card .card-header :global(div) { diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte index a146d8d..36ea25a 100644 --- a/src/routes/contact/+page.svelte +++ b/src/routes/contact/+page.svelte @@ -21,6 +21,7 @@ flex-wrap: wrap; flex: 2 1; align-items: center; + justify-content: center; margin: 1em; gap: 1em 3em; } @@ -38,6 +39,16 @@ font-size: .8em; } + .button { + background-color: var(--fg); + color: var(--bg); + transition: all 0.2s ease-in-out; + } + + .button:hover { + transform: scale(1.01); + } + textarea { min-height: 12em; } diff --git a/static/themes/stormy-blue.css b/static/themes/stormy-blue.css deleted file mode 100644 index 851c23b..0000000 --- a/static/themes/stormy-blue.css +++ /dev/null @@ -1,18 +0,0 @@ -:root { - --bg: #1e2426; /* Dark blue-grey */ - --bg-secondary: #283033; /* Deep slate */ - --accent: #7c9197; /* Muted blue-grey */ - - --header: #a4b3b7; /* Softer light blue-grey */ - --fg: #d2d9dc; /* Pale blue-grey for readability */ - - --input: #323a3d; /* Dark neutral input background */ - - --link: #85a1a8; /* Muted cool teal */ - --glow: #627277; /* Soft cool-toned glow */ - --hover: #95b2b8; /* Pastel blue-grey hover */ - - --green: #79a48c; /* Muted forest green */ - --red: #d18088; /* Soft warm red */ - --blue: #789fa7; /* Medium desaturated blue */ -} \ No newline at end of file -- 2.47.2