mirror of
https://github.com/cupcakearmy/nicco.io.git
synced 2024-12-22 08:06:29 +00:00
add support page
This commit is contained in:
parent
963eaae953
commit
f2c6561efa
@ -2,16 +2,29 @@
|
|||||||
import Icon from './Icon.svelte'
|
import Icon from './Icon.svelte'
|
||||||
|
|
||||||
export let links = []
|
export let links = []
|
||||||
|
|
||||||
|
function isExternal(link) {
|
||||||
|
return /^https?\:\/\//.test(link)
|
||||||
|
}
|
||||||
|
|
||||||
|
$: list = links.map((link) => ({
|
||||||
|
...link,
|
||||||
|
external: isExternal(link.href),
|
||||||
|
}))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{#each links as { href, name, icon }}
|
{#each list as { href, name, icon, external }}
|
||||||
|
<a
|
||||||
|
rel={external ? 'noopener noreferrer' : ''}
|
||||||
|
{href}
|
||||||
|
target={external ? '_blank' : ''}
|
||||||
|
>
|
||||||
<li>
|
<li>
|
||||||
<a rel="noopener noreferrer" {href} target="_blank">
|
|
||||||
<Icon class="icon" {icon} />
|
<Icon class="icon" {icon} />
|
||||||
{name}
|
{name}
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
|
</a>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
@ -22,19 +35,20 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
a {
|
||||||
transition: transform 200ms ease;
|
transition: transform 200ms ease;
|
||||||
padding: 0.75em 0.5em;
|
padding: 0.75em 0.5em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
li:hover {
|
a:hover {
|
||||||
box-shadow: 0px 6px 6px -3px #00000012;
|
box-shadow: 0px 6px 6px -3px #00000012;
|
||||||
transform: translateY(0.25em) translateX(0.15em) scale(1.05);
|
transform: translateY(0.25em) translateX(0.15em) scale(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
li :global(.icon) {
|
a :global(.icon) {
|
||||||
transform: translateY(0.3em);
|
transform: translateY(0.3em);
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
|
@ -15,6 +15,7 @@
|
|||||||
icon: 'logo-github',
|
icon: 'logo-github',
|
||||||
},
|
},
|
||||||
{ href: '/privacy', name: 'Privacy Policy', icon: 'finger-print-outline' },
|
{ href: '/privacy', name: 'Privacy Policy', icon: 'finger-print-outline' },
|
||||||
|
{ href: '/support', name: 'Support', icon: 'heart-sharp' },
|
||||||
]
|
]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
1
static/icons/heart-sharp.svg
Normal file
1
static/icons/heart-sharp.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Heart</title><path d='M256 448l-9-6c-42.78-28.57-96.91-60.86-137-108.32-42.25-50-62.52-101.35-62-157C48.63 114.54 98.46 64 159.08 64c48.11 0 80.1 28 96.92 48.21C272.82 92 304.81 64 352.92 64c60.62 0 110.45 50.54 111.08 112.65.56 55.68-19.71 107-62 157-40.09 47.49-94.22 79.78-137 108.35z'/></svg>
|
After Width: | Height: | Size: 381 B |
Loading…
Reference in New Issue
Block a user