2025-02-05 14:31:23 +00:00
7 changed files with 38 additions and 18 deletions
--- a/src/Card.svelte
+++ b/src/Card.svelte
@@ -19,7 +19,7 @@
        background: var(--bg-grad);
        border-radius: .5em;
        scroll-snap-align: start;
-        transition: all 0.2s;
+		transition: all 0.2s;
    }
    .card:hover {
        box-shadow: .5em .5em .5em var(--cyan);
--- a/src/Modal.svelte
+++ b/src/Modal.svelte
@@ -4,6 +4,8 @@
 	let dialog: HTMLDialogElement;

 	$: if (dialog && showModal) dialog.showModal();
+
+	import CloseIcon from "./Toasts/CloseIcon.svelte";
 </script>

 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
@@ -18,9 +20,10 @@
 		<hr />
 		<slot />
 		<hr />
-		<!-- svelte-ignore a11y-autofocus -->
-		<button autofocus on:click={() => dialog.close()}>Close</button>
 	</div>
+	<button class="close" on:click={() => dialog.close()}>
+		<CloseIcon width="0.8em" />
+	</button>
 </dialog>

 <style>
@@ -63,7 +66,17 @@
 			opacity: 1;
 		}
 	}
-	button {
-		display: block;
+
+	.close {
+		position: absolute;
+		top: 1em;
+		right: 1.5em;
+		color: var(--fg);
+		background: transparent;
+		border: 0 none;
+		padding: 0;
+		margin: 0 0 0 auto;
+		line-height: 1;
+		font-size: 1.2em;
 	}
 </style>
--- a/src/Toasts/Toast.svelte
+++ b/src/Toasts/Toast.svelte
@@ -55,7 +55,7 @@
  .text {
    margin-left: 1rem;
  }
-  button {
+  .close {
    color: white;
    background: transparent;
    border: 0 none;
--- a/src/app.html
+++ b/src/app.html
@@ -32,6 +32,7 @@

 			h1, h2, h3 {
 				color: var(--red);
+				border: 0;
 			}

 			hr {
@@ -90,6 +91,17 @@
 			a:active {
 				color: var(--red);
 			}
+
+			.button {
+				color: var(--fg);
+				background-color: var(--bg-2);
+				box-shadow: .1em .1em .1em var(--green);
+				transition: all 0.2s;
+			}
+
+			.button:hover {
+				box-shadow: .3em .3em .3em var(--red);    
+			}
 		</style>
 	</head>
 	<body data-sveltekit-preload-data="hover">
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -77,6 +77,7 @@

    /* Skills Cards CSS */
    .skills-container {
+        padding-top: 3em;
        max-width: 90%;
        margin: auto;
    }
@@ -86,7 +87,7 @@
        flex-wrap: wrap;
        flex-direction: row;
        gap: 3em 3em;
-        padding: 3em 1em 2em 0em;
+        padding: 2em 0em 2em 0em;
        transition: all 0.2s;
    }

@@ -112,6 +113,8 @@
    </div>

    <div class="skills-container">
+        <h1>Skills</h1>
+        <hr />
        <div class="cards">
            {#each info.skills as skill}
                <Card on:click={() => {showModal = true; activeModal = skill}}>
@@ -123,7 +126,8 @@
                        <p class="not-required">{skill.about}</p>
                    </div>
                    <div slot="footer">
-                        <a href="/contact">View More</a>
+                        <!-- svelte-ignore a11y-invalid-attribute -->
+                        <a href="#">View More</a>
                        <a href="/repos">Repos</a>
                    </div>
                </Card>
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -50,15 +50,6 @@
        gap: 1em 1em;
        width: 100%;
    }
-
-    .button {
-        color: var(--fg);
-        background-color: var(--bg-2);
-        box-shadow: .1em .1em .1em var(--purple);    
-    }
-    .button:hover {
-        box-shadow: .3em .3em .3em var(--green);    
-    }
 </style>

 <Card>
--- a/src/routes/repos/+page.svelte
+++ b/src/routes/repos/+page.svelte
@@ -1,3 +1,3 @@
 <h1>Repos</h1>
-<p>Stay tunded! This is still in development.</p>
+<p>Stay tuned! This is still in development.</p>
 <p>Come back later to find out what projects I'm currently working on!</p>