ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-09 19:04:28 +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> <script>
export let kind = 'secondary'; export let kind = 'secondary';
$: type = 'button-' + kind; $: type = 'button-' + kind;
export let href = '';
export let maxWidth = false; export let maxWidth = false;
export let icon = ''; export let icon = '';
export let alt = ''; export let alt = '';
export let target = '';
export let unclickable = false; export let unclickable = false;
</script> </script>
<a {href} {target} on:click class:unclickable> <button class={type} class:unclickable on:click style="width: {maxWidth ? '100%' : 'max-content'}">
<div class={type} style="width: {maxWidth ? '100%' : 'max-content'}">
{#if icon} {#if icon}
<img src={icon} {alt} /> <img src={icon} {alt} />
{/if} {/if}
<slot /> <slot />
</div> </button>
</a>
<style> <style>
a { button {
text-decoration: none; text-decoration: none;
border-radius: 16px; border-radius: 16px;
transition: all 0.2s var(--bezier-one); transition: all 0.2s var(--bezier-one);
@ -29,7 +25,7 @@
cursor: not-allowed; cursor: not-allowed;
opacity: 0.4; opacity: 0.4;
} }
div, button,
.button-secondary { .button-secondary {
min-width: max-content; min-width: max-content;
font-size: 1rem; font-size: 1rem;
@ -50,11 +46,11 @@
color: #65002F; color: #65002F;
} }
div:hover { button:hover {
filter: brightness(85%); filter: brightness(85%);
} }
div, button,
.button-secondary { .button-secondary {
display: flex; display: flex;
justify-content: center; 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>