cupcakearmy/nicco.io
1
0
Fork 0
mirror of https://github.com/cupcakearmy/nicco.io.git synced 2024-12-22 16:16:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

support page

Browse Source
This commit is contained in:
cupcakearmy 2021-03-09 15:37:35 +01:00
parent 6a483384cf
commit bf26904fda
No known key found for this signature in database
GPG Key ID: D28129AE5654D9D9
3 changed files with 70 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/IconList.svelte Normal file
View File

@ -0,0 +1,42 @@
<script>
import Icon from './Icon.svelte'
export let links = []
</script>
<ul>
{#each links as { href, name, icon }}
<li>
<a rel="noopener noreferrer" {href} target="_blank">
<Icon class="icon" {icon} />
{name}
</a>
</li>
{/each}
</ul>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
transition: transform 200ms ease;
padding: 0.75em 0.5em;
cursor: pointer;
border-radius: 0.5em;
}
li:hover {
box-shadow: 0px 6px 6px -3px #00000012;
transform: translateY(0.25em) translateX(0.15em) scale(1.05);
}
li :global(.icon) {
transform: translateY(0.3em);
font-size: 2em;
margin-right: 0.5rem;
}
</style>

39
src/routes/contact.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import Icon from '../components/Icon.svelte' import IconList from '../components/IconList.svelte'
import SimplePage from '../components/SimplePage.svelte' import SimplePage from '../components/SimplePage.svelte'
@ -23,40 +23,5 @@
</svelte:head> </svelte:head>
<SimplePage title="Contact"> <SimplePage title="Contact">
<ul> <IconList {links} />
{#each links as { href, name, icon }}
<li>
<a rel="noopener noreferrer" {href}>
<Icon class="icon" {icon} />
{name}
</a>
</li>
{/each}
</ul>
</SimplePage> </SimplePage>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
transition: transform 200ms ease;
padding: 0.75em 0.5em;
cursor: pointer;
border-radius: 0.5em;
}
li:hover {
box-shadow: 0px 6px 6px -3px #00000012;
transform: translateY(0.25em) translateX(0.15em) scale(1.05);
}
li :global(.icon) {
transform: translateY(0.3em);
font-size: 2em;
margin-right: 0.5rem;
}
</style>

26
src/routes/support.svelte Normal file
View File

@ -0,0 +1,26 @@
<script>
import IconList from '../components/IconList.svelte'
import SimplePage from '../components/SimplePage.svelte'
const links = [
{
href: 'https://www.buymeacoffee.com/cupcakearmy',
name: 'Buy Me A Coffee',
icon: 'cafe-outline',
},
{
href: 'https://github.com/sponsors/cupcakearmy',
name: 'Github Sponsor',
icon: 'logo-github',
},
]
</script>
<svelte:head>
<title>Support</title>
</svelte:head>
<SimplePage title="Support">
<IconList {links} />
</SimplePage>