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);
border-radius: .5em;
scroll-snap-align: start;
transition: all 0.2s;
transition: all 0.2s;
}
.card:hover {
box-shadow: .5em .5em .5em var(--cyan);

21
src/Modal.svelte
View File

@ -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>

2
src/Toasts/Toast.svelte
View File

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

12
src/app.html
View File

@ -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">

8
src/main.svelte
View File

@ -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>

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

@ -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>

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

@ -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>