ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-09 10:54:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

no more a tags

Browse Source
This commit is contained in:
Ax333l 2023-02-08 17:39:34 +01:00
parent 3c43b494bd
commit 5e3eadf941
No known key found for this signature in database
GPG Key ID: D2B4D85271127D23
2 changed files with 6 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/components/atoms/Button.svelte
View File

@ -1,25 +1,21 @@
<script>
export let kind = 'secondary';
$: type = 'button-' + kind;
export let href = '';
export let maxWidth = false;
export let icon = '';
export let alt = '';
export let target = '';
export let unclickable = false;
</script>
<a {href} {target} on:click class:unclickable>
<div class={type} style="width: {maxWidth ? '100%' : 'max-content'}">
<button class={type} class:unclickable on:click style="width: {maxWidth ? '100%' : 'max-content'}">
{#if icon}
<img src={icon} {alt} />
{/if}
<slot />
</div>
</a>
</button>
<style>
a {
button {
text-decoration: none;
border-radius: 16px;
transition: all 0.2s var(--bezier-one);
@ -29,7 +25,7 @@
cursor: not-allowed;
opacity: 0.4;
}
div,
button,
.button-secondary {
min-width: max-content;
font-size: 1rem;
@ -50,11 +46,11 @@
color: #65002F;
}
div:hover {
button:hover {
filter: brightness(85%);
}
div,
button,
.button-secondary {
display: flex;
justify-content: center;

49
src/lib/components/atoms/NavButton.svelte
View File

@ -1,49 +0,0 @@
<script>
import RouterEvents from '../../../data/RouterEvents';
export let href = '/';
export let is_selected = target_url => href === target_url;
</script>
<a data-sveltekit-prefetch {href}>
<li class:selected={is_selected($RouterEvents.target_url.pathname)}>
<slot />
</li>
</a>
<style>
li {
border: var(--grey-six);
text-align: center;
list-style: none;
position: relative;
font-weight: 500;
font-size: 0.9rem;
align-items: center;
border: var(--grey-six);
transition-timing-function: var(--bezier-one);
transition-duration: 0.25s;
padding: 10px 25px;
border-radius: 200px;
display: flex;
align-items: center;
justify-content: center;
}
a {
color: var(--grey-five);
text-decoration: none;
font-size: 1rem;
user-select: none;
border-radius: 200px;
}
li:hover {
color: var(--white);
background-color: var(--grey-one);
}
li.selected {
background-color: var(--grey-two);
color: var(--accent-color);
}
</style>