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

#1 Added 'X' to popup cards, adjusted skills container and added heading

Browse Source
This commit is contained in:
Luke Else 2023-10-04 22:07:53 +01:00
parent 4a734b66f9
commit d187ec70c3
7 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Card.svelte
View File

@ -19,7 +19,7 @@
background: var(--bg-grad); background: var(--bg-grad);
border-radius: .5em; border-radius: .5em;
scroll-snap-align: start; scroll-snap-align: start;
transition: all 0.2s; transition: all 0.2s;
} }
.card:hover { .card:hover {
box-shadow: .5em .5em .5em var(--cyan); box-shadow: .5em .5em .5em var(--cyan);

21
src/Modal.svelte
View File

@ -4,6 +4,8 @@
let dialog: HTMLDialogElement; let dialog: HTMLDialogElement;
$: if (dialog && showModal) dialog.showModal(); $: if (dialog && showModal) dialog.showModal();
import CloseIcon from "./Toasts/CloseIcon.svelte";
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions --> <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
@ -18,9 +20,10 @@
<hr /> <hr />
<slot /> <slot />
<hr /> <hr />
<!-- svelte-ignore a11y-autofocus -->
<button autofocus on:click={() => dialog.close()}>Close</button>
</div> </div>
<button class="close" on:click={() => dialog.close()}>
<CloseIcon width="0.8em" />
</button>
</dialog> </dialog>
<style> <style>
@ -63,7 +66,17 @@
opacity: 1; 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> </style>

2
src/Toasts/Toast.svelte
View File

@ -55,7 +55,7 @@
.text { .text {
margin-left: 1rem; margin-left: 1rem;
} }
button { .close {
color: white; color: white;
background: transparent; background: transparent;
border: 0 none; border: 0 none;

12
src/app.html
View File

@ -32,6 +32,7 @@
h1, h2, h3 { h1, h2, h3 {
color: var(--red); color: var(--red);
border: 0;
} }
hr { hr {
@ -90,6 +91,17 @@
a:active { a:active {
color: var(--red); 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> </style>
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

8
src/main.svelte
View File

@ -77,6 +77,7 @@
/* Skills Cards CSS */ /* Skills Cards CSS */
.skills-container { .skills-container {
padding-top: 3em;
max-width: 90%; max-width: 90%;
margin: auto; margin: auto;
} }
@ -86,7 +87,7 @@
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
gap: 3em 3em; gap: 3em 3em;
padding: 3em 1em 2em 0em; padding: 2em 0em 2em 0em;
transition: all 0.2s; transition: all 0.2s;
} }
@ -112,6 +113,8 @@
</div> </div>
<div class="skills-container"> <div class="skills-container">
<h1>Skills</h1>
<hr />
<div class="cards"> <div class="cards">
{#each info.skills as skill} {#each info.skills as skill}
<Card on:click={() => {showModal = true; activeModal = skill}}> <Card on:click={() => {showModal = true; activeModal = skill}}>
@ -123,7 +126,8 @@
<p class="not-required">{skill.about}</p> <p class="not-required">{skill.about}</p>
</div> </div>
<div slot="footer"> <div slot="footer">
<a href="/contact">View More</a> <!-- svelte-ignore a11y-invalid-attribute -->
<a href="#">View More</a>
<a href="/repos">Repos</a> <a href="/repos">Repos</a>
</div> </div>
</Card> </Card>

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

@ -50,15 +50,6 @@
gap: 1em 1em; gap: 1em 1em;
width: 100%; 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> </style>
<Card> <Card>

2
src/routes/repos/+page.svelte
View File

@ -1,3 +1,3 @@
<h1>Repos</h1> <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> <p>Come back later to find out what projects I'm currently working on!</p>