~repos /website
git clone https://pyrossh.dev/repos/website.git
木 Personal website of pyrossh. Built with astrojs, shiki, vite.
5c743ea1
—
pyrossh 1 year ago
improve header
src/lib/components/Header.svelte
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { page } from '$app/stores';
|
|
3
|
+
$: isActive = (href) => $page.url.pathname === href;
|
|
4
|
+
</script>
|
|
5
|
+
|
|
1
6
|
<header>
|
|
2
7
|
<nav class="flex flex-1 flex-row justify-center bg-black font-mono text-lg">
|
|
3
8
|
<div class="flex flex-row flex-1 items-center p-3 max-w-5xl">
|
|
@@ -5,12 +10,16 @@
|
|
|
5
10
|
<span class="mr-1 font-logo font-bold">木</span> pyrossh
|
|
6
11
|
</a>
|
|
7
12
|
<div
|
|
8
|
-
class="flex flex-row flex-1 items-center text-white sm:[&>a]:mx-1 [&>a]:px-2 [&>a:hover]:underline [&>a]:decoration-
|
|
13
|
+
class="flex flex-row flex-1 items-center text-white sm:[&>a]:mx-1 [&>a]:px-2 [&>a:hover]:underline [&>a:hover]:decoration-[#c3c5b4] decoration-2 underline-offset-8 decoration-[#f1fa8c] data-current:child:bg-gray-600"
|
|
9
14
|
>
|
|
15
|
+
<div class="hidden sm:block">|</div>
|
|
16
|
+
<a class="hidden sm:block" href="/" class:underline={isActive('/')} rel="prefetch">
|
|
17
|
+
home
|
|
18
|
+
</a>
|
|
10
19
|
<div>|</div>
|
|
11
|
-
<a href="/cv" rel="prefetch"> cv </a>
|
|
20
|
+
<a href="/cv" class:underline={isActive('/cv')} rel="prefetch"> cv </a>
|
|
12
21
|
<div>|</div>
|
|
13
|
-
<a href="/posts" rel="prefetch"> posts </a>
|
|
22
|
+
<a href="/posts" class:underline={isActive('/posts')} rel="prefetch"> posts </a>
|
|
14
23
|
<div>|</div>
|
|
15
24
|
<a href="https://github.com/pyrossh/pyrossh.dev"> code </a>
|
|
16
25
|
</div>
|
src/routes/+layout.svelte
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<Header />
|
|
22
22
|
<main class="flex flex-1 bg-white">
|
|
23
23
|
<div class="flex flex-1 flex-row justify-center">
|
|
24
|
-
<div class="flex flex-1 flex-row max-w-5xl
|
|
24
|
+
<div class="flex flex-1 flex-row max-w-5xl my-4 p-4">
|
|
25
25
|
<!-- {@render children()} -->
|
|
26
26
|
<slot />
|
|
27
27
|
</div>
|