From d187ec70c3bcc57eb6ed198e1e53d53972651846 Mon Sep 17 00:00:00 2001 From: Luke Else Date: Wed, 4 Oct 2023 22:07:53 +0100 Subject: [PATCH] #1 Added 'X' to popup cards, adjusted skills container and added heading --- src/Card.svelte | 2 +- src/Modal.svelte | 21 +++++++++++++++++---- src/Toasts/Toast.svelte | 2 +- src/app.html | 12 ++++++++++++ src/main.svelte | 8 ++++++-- src/routes/contact/+page.svelte | 9 --------- src/routes/repos/+page.svelte | 2 +- 7 files changed, 38 insertions(+), 18 deletions(-) diff --git a/src/Card.svelte b/src/Card.svelte index 109bd7e..dd3b702 100644 --- 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); diff --git a/src/Modal.svelte b/src/Modal.svelte index 9fd5fb6..00f7070 100644 --- 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"; @@ -18,9 +20,10 @@
- - + diff --git a/src/Toasts/Toast.svelte b/src/Toasts/Toast.svelte index 0f6588f..8ed3c6f 100644 --- 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; diff --git a/src/app.html b/src/app.html index 17cbff4..13f8329 100644 --- 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); + } diff --git a/src/main.svelte b/src/main.svelte index 9ea76cb..8ab748f 100644 --- 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 @@
+

Skills

+
{#each info.skills as skill} {showModal = true; activeModal = skill}}> @@ -123,7 +126,8 @@

{skill.about}

- View More + + View More Repos
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte index cd29431..2d9e65f 100644 --- 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); - } diff --git a/src/routes/repos/+page.svelte b/src/routes/repos/+page.svelte index 4877c96..157c0b3 100644 --- a/src/routes/repos/+page.svelte +++ b/src/routes/repos/+page.svelte @@ -1,3 +1,3 @@

Repos

-

Stay tunded! This is still in development.

+

Stay tuned! This is still in development.

Come back later to find out what projects I'm currently working on!

\ No newline at end of file