Skip to content

Commit b7e4022

Browse files
hyperz111hyperz111
committed
feat: flat theme & add entrance animation
1 parent 93a9b2d commit b7e4022

4 files changed

Lines changed: 37 additions & 59 deletions

File tree

‎src/components/Navbar.svelte‎

Lines changed: 9 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,7 @@
22
import { fade, slide } from "svelte/transition";
33
import Icon from "$components/Icon.svelte";
44
5-
const menu = [
6-
{
7-
name: "Beranda",
8-
icon: "house",
9-
url: "/",
10-
},
5+
const pages = [
116
{
127
name: "Blog",
138
icon: "book-half",
@@ -23,63 +18,21 @@
2318
},
2419
];
2520
26-
let opened = $state(false);
27-
const toggle = (state) => () => (opened = state);
21+
const menu = [...pages, ...social];
2822
</script>
2923

30-
<nav class="fixed top-0 left-0 w-dvw bg-neutral-900 p-4 text-white">
24+
<nav class="fixed top-0 left-0 w-dvw animate-down bg-neutral-950 p-4 text-white drop-shadow-lg drop-shadow-black">
3125
<div class="mx-auto flex w-full max-w-3xl items-center justify-between">
32-
<a class="font-black hover:text-neutral-300" href="/">Hyper-Z11</a>
33-
<button class="flex md:hidden" onclick={toggle(true)}><Icon icon="three-dots-vertical" class="h-5 w-5" /></button>
34-
<ul class="hidden flex-row gap-4 md:flex">
26+
<a href="/" class="hover:text-neutral-300">Z11</a>
27+
<ul class="flex flex-row gap-4">
3528
{#each menu as { name, icon, url } (url)}
3629
<li>
37-
<a
38-
href={url}
39-
title={name}
40-
class="flex items-center gap-1 hover:text-neutral-300"
41-
onclick={() => setTimeout(toggle(false), 100)}><Icon {icon} />{name}</a>
42-
</li>
43-
{/each}
44-
<li><!-- Dummy, for spacing --></li>
45-
{#each social as { name, icon, url } (url)}
46-
<li>
47-
<a href={url} title={name} class="hover:text-neutral-300" onclick={() => setTimeout(toggle(false), 100)}
48-
><Icon {icon} /></a>
30+
<a href={url} title={name} class="hover:text-neutral-300">
31+
<Icon {icon} />
32+
<span class="hidden md:inline">{name}</span>
33+
</a>
4934
</li>
5035
{/each}
5136
</ul>
52-
53-
<!--- Mobile sidebar -->
54-
{#if opened}
55-
<button
56-
class="fixed top-0 left-0 z-98 h-dvh w-dvw backdrop-brightness-50"
57-
onclick={toggle(false)}
58-
aria-label="layer"
59-
in:fade
60-
out:fade></button>
61-
62-
<ul
63-
class="fixed top-0 right-0 z-100 flex h-dvh w-35 flex-col gap-4 bg-neutral-900 p-5 text-white"
64-
in:slide={{ axis: "x" }}
65-
out:slide={{ axis: "x" }}>
66-
<li class="flex items-center justify-between">
67-
<button onclick={toggle(false)}><Icon icon="x" /></button>
68-
</li>
69-
{#each menu as { name, icon, url } (url)}
70-
<li>
71-
<a
72-
href={url}
73-
class="flex items-center gap-1 hover:text-neutral-300"
74-
onclick={() => setTimeout(toggle(false), 100)}><Icon {icon} />{name}</a>
75-
</li>
76-
{/each}
77-
<li class="flex items-center gap-2">
78-
{#each social as { name, icon, url } (url)}
79-
<a href={url} class="hover:text-neutral-300" onclick={() => setTimeout(toggle(false), 100)}><Icon {icon} /></a>
80-
{/each}
81-
</li>
82-
</ul>
83-
{/if}
8437
</div>
8538
</nav>

‎src/routes/+error.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<Head {config} />
1515
</svelte:head>
1616

17-
<section class="flex h-3/4 items-center justify-center">
17+
<section class="flex items-center justify-center">
1818
<div class="text-center">
1919
<h2 class="my-2 text-6xl font-extrabold">{page.status}</h2>
2020
<p class="text-sm text-gray-500">Jika anda di sini, Mari saya jelaskan ini.</p>

‎src/routes/+layout.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111

1212
<Navbar />
1313

14-
<main class="grow bg-neutral-800 p-4 py-16 text-white">
15-
<div class="mx-auto w-full max-w-3xl">
14+
<main class="grow bg-neutral-950 p-4 py-16 text-white">
15+
<div class="mx-auto w-full max-w-3xl animate-up">
1616
{@render children()}
1717
</div>
1818
</main>

‎src/styles/index.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
11
@import "tailwindcss";
22
@import "highlight.js/styles/tokyo-night-dark.css";
33
@import "bootstrap-icons/font/bootstrap-icons.css";
4+
5+
@keyframes down {
6+
from {
7+
transform: translateY(-50%);
8+
opacity: 0;
9+
}
10+
to {
11+
opacity: 1;
12+
}
13+
}
14+
15+
@keyframes up {
16+
from {
17+
transform: translateY(50%);
18+
opacity: 0;
19+
}
20+
to {
21+
opacity: 1;
22+
}
23+
}
24+
25+
@theme {
26+
--animate-down: down 1s linear;
27+
--animate-up: up 1s linear;
28+
}

0 commit comments

Comments
 (0)