website/src/lib/Card/Link.svelte

67 lines
1.0 KiB
Svelte

<script lang="ts">
export let url: any;
let classes: string = "";
export {classes as class};
</script>
<a href={url} class={classes}>
<slot />
</a>
<style>
.web,
.email,
.picture,
.pgp {
background-color: var(--alt);
color: var(--alt-text);
font-size: 20px;
transition: all 0.25s;
display: flex;
align-items: center;
}
.web:hover,
.email:hover,
.picture:hover,
.pgp:hover {
background-color: var(--accent);
color: var(--alt);
}
.matrixcolored {
background-color: var(--alt);
color: var(--alt-text);
font-size: 20px;
display: flex;
align-items: center;
}
.discordcolored {
background-color: #5865f2;
color: #fff;
font-size: 20px;
display: flex;
align-items: center;
}
.gitcolored {
background-color: #f05032;
color: #fff;
font-size: 20px;
display: flex;
align-items: center;
}
a {
border: none;
border-radius: 10px;
padding: 0.5rem;
cursor: pointer;
font-family: var(--font-primary);
color: var(--secondary);
text-decoration: none;
width: fit-content;
}
</style>