mirror of
https://github.com/artegoser/AnoPaper.git
synced 2024-11-23 12:26:24 +03:00
Compare commits
2 commits
1bfb701872
...
2988809298
Author | SHA1 | Date | |
---|---|---|---|
2988809298 | |||
ab4531064e |
5 changed files with 49 additions and 10 deletions
21
src/app.html
21
src/app.html
|
@ -1,12 +1,15 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
<head>
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
%sveltekit.head%
|
<meta name="viewport" content="width=device-width" />
|
||||||
</head>
|
%sveltekit.head%
|
||||||
<body data-sveltekit-preload-data="hover">
|
</head>
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
|
||||||
</body>
|
<body class="bg-white dark:bg-zinc-900" data-sveltekit-preload-data="hover">
|
||||||
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
0
src/lib/components/Menu.svelte
Normal file
0
src/lib/components/Menu.svelte
Normal file
15
src/lib/components/buttons/Button.svelte
Normal file
15
src/lib/components/buttons/Button.svelte
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let href: string;
|
||||||
|
export let width = 48;
|
||||||
|
export let color = 'bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-800';
|
||||||
|
export let className = '';
|
||||||
|
export let onClick: () => void;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a on:click={onClick} {href}>
|
||||||
|
<div
|
||||||
|
class="transition-transform ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105 p-2 m-2 text-lg rounded-2xl w-{width} {color} {className}"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</a>
|
|
@ -1,5 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
|
import Menu from '$lib/components/Menu.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<slot />
|
<div class="text-black dark:text-white flex flex-col">
|
||||||
|
<Menu />
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
|
@ -1 +1,18 @@
|
||||||
|
<script>
|
||||||
|
import Button from '$lib/components/buttons/Button.svelte';
|
||||||
|
|
||||||
|
let count = 0;
|
||||||
|
let text = `Clicked ${count} ${count === 1 ? 'time' : 'times'}`;
|
||||||
|
function handleClick() {
|
||||||
|
count += 1;
|
||||||
|
text = `Clicked ${count} ${count === 1 ? 'time' : 'times'}`;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>AnoPaper main page</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
<h1 class="text-3xl font-bold underline">AnoPaper!</h1>
|
<h1 class="text-3xl font-bold underline">AnoPaper!</h1>
|
||||||
|
|
||||||
|
<Button onClick={handleClick} href="#">{text}</Button>
|
||||||
|
|
Loading…
Add table
Reference in a new issue