Sveskejuice
/
deprived-main-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix button collider

This commit is contained in:
Sveske_Juice 2024-02-24 00:17:11 +01:00
parent 5be1a80ff4
commit 7734fb45f5
2 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/lib/IO/Button.svelte
View File

@ -2,6 +2,7 @@
import { ButtonType } from "$lib/IO/ButtonType.ts"; import { ButtonType } from "$lib/IO/ButtonType.ts";
import { onMount } from "svelte"; import { onMount } from "svelte";
export let href : string = "#";
export let type : ButtonType = ButtonType.Primary; export let type : ButtonType = ButtonType.Primary;
let cssName : string; let cssName : string;
@ -16,17 +17,17 @@
}); });
</script> </script>
<button class="button" style="--button-color: var({cssName});"> <a href={href} class="button" style="--button-color: var({cssName});">
<div class="content"> <div class="content">
<slot name="content"> <slot name="content">
Click Me! Click Me!
</slot> </slot>
</div> </div>
</button> </a>
<style> <style>
.button { .button {
width: 100%; white-space: nowrap;
border-radius: 6px; border-radius: 6px;
border: none; border: none;
background-color: var(--button-color); background-color: var(--button-color);
@ -39,6 +40,7 @@
font-size: 1.5em; font-size: 1.5em;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
padding: 0.8em 4em;
} }
.button:hover { .button:hover {
@ -47,14 +49,17 @@
cursor: pointer; cursor: pointer;
box-shadow: box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.25);
inset 0 0 0 100px rgba(255, 255, 255, 0.25);
} }
.content { .content {
width: 100%; width: 100%;
height: 100%;
color: var(--text1); color: var(--text1);
padding: 0.8em 4em; display: flex;
justify-content: center;
align-content: center;
} }
</style> </style>

10
src/routes/+page.svelte
View File

@ -39,10 +39,8 @@
<footer id="news-footer"> <footer id="news-footer">
<div class="dummy"/> <div class="dummy"/>
<div id="more-posts"> <div id="more-posts">
<Button type={ButtonType.Primary}> <Button href="/post" type={ButtonType.Primary}>
<a slot="content" href="/post"> <span slot="content">More News</span>
<span>More News</span>
</a>
</Button> </Button>
</div> </div>
</footer> </footer>
@ -98,10 +96,6 @@
min-width: 10em; min-width: 10em;
} }
a {
white-space: nowrap;
}
.main-title { .main-title {
color: var(--text1); color: var(--text1);
margin: 0 auto; margin: 0 auto;