Merge pull request 'development' (#24) from development into main

Reviewed-on: #24

.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

.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:

src/app.html

@@ -28,7 +28,7 @@
 			}
 
 			hr {
-				border: .2em solid var(--bg-grad-3);
+				border: .12em solid var(--accent);
   				border-radius: 5em;
 				width: 100%;
 			}
@@ -85,16 +85,6 @@
 				color: var(--header);
 			}
 
-			.button {
-				color: var(--fg);
-				background-color: var(--bg-grad-1);
-				transition: all 0.2s;
-			}
-
-			.button:hover {
-				box-shadow: .3em .3em .3em var(--header);    
-			}
-
 			.container {
 				max-width: 90%;
 				margin: auto;

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) {

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);

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;

src/main.svelte

@@ -28,7 +28,7 @@
         height: 8em;
         width: 8em;
         padding: 1em 1em 1em 1em;
-        border: .5em solid var(--bg-grad-3);
+        border: .25em solid var(--accent);
     }
     
     .about {

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;
     }

src/timeline.svelte

@@ -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-2);`} />
+						<TimelineDot style={`background-color: var(--link); border-color: var(--accent);`} />
 					</div>
 				{:else}
-					<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
+					<TimelineDot style={`background-color: var(--link); border-color: var(--accent);`} />
 				{/if}
 				<TimelineConnector />
 			</TimelineSeparator>
@@ -45,7 +45,7 @@
 	.oposite-content-title {
 		margin: 0;
 		padding: 0;
-		color: var(--bg-grad-2);
+		color: var(--accent);
 	}
 	.content-title {
 		margin: 0;

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 */
+}

static/themes/dark.css

@@ -1,18 +1,18 @@
 :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;
+    --blue: #79aec3;
 }

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;
+}

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 */
+}

static/themes/light.css

@@ -1,18 +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: #cbc9c9;
-    --fg: #2f2f2f;
-    --header: #514a4a;
-    --link: #df0000;
-    --hover: #4f4b489b;
-    --glow: #545454;
+    --bg: #f5f5f5; /* Slightly deeper light grey for subtle contrast */
+    --bg-secondary: #d9dddf; /* More defined soft grey */
+    --accent: #8ea29b; /* Stronger muted sage green */
+
+    --header: #4a5a56; /* Darker desaturated green-grey for better contrast */
+    --fg: #2f3739; /* Richer dark grey for improved readability */
     
-    --green: #98C379;
-    --red: #E06C75;
-}
+    --input: #e4e7e8; /* Slightly deeper soft grey input background */
+    
+    --link: #5f8480; /* Darker muted teal for contrast */
+    --glow: #b0bdb9; /* More noticeable but soft glow */
+    --hover: #85a29c; /* Stronger pastel hover effect */
+
+    --green: #6fa984; /* More vibrant pastel green */
+    --red: #e8858f; /* Slightly deeper pastel red for contrast */
+    --blue: #6fa9a4; /* Same as accent */
+}

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 */
+}

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 */
+}