blob: 321179905ea7412dc95cdad92478371472d49725 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
<script>
let active = false;
const toggleNav = () => {
active = !active;
};
</script>
<style>
nav {
font-weight: 300;
padding-top: 1.5em;
padding-bottom: 2.2em;
}
ul.nav-list {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: center;
gap: 2.2em;
}
a.nav-link {
font-size: 1.1em;
}
a.nav-link:hover {
color: #9ECD9D;
transition: ease-in-out 0.1s;
}
a.nav-link:active {
color: #609460;
}
.nav-toggle {
background: transparent;
border: none;
cursor: pointer;
display: none;
}
.nav-toggle .hamburger {
width: 30px;
height: 2px;
background: white;
display: block;
position: relative;
}
.nav-toggle .hamburger::before, .nav-toggle .hamburger::after {
content: '';
background: white;
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.nav-toggle .hamburger::before {
top: -10px;
}
.nav-toggle .hamburger::after {
bottom: -10px;
}
@media (max-width: 768px) {
.nav-toggle {
display: block;
padding: 20px;
}
ul.nav-list {
flex-direction: column;
align-items: center;
gap: 1em;
display: none;
}
ul.nav-list.show {
display: flex;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.nav-list.show a.nav-link {
animation: fadeIn 0.5s ease-in-out forwards;
}
}
</style>
<nav>
<button class="nav-toggle" aria-label="toggle navigation" on:click={toggleNav}>
<span class='hamburger'></span>
</button>
<ul class={active ? 'nav-list show' : 'nav-list'}>
<li><a href="/" class="nav-link" on:click={toggleNav}>Home</a></li>
<li><a href="/projects" class="nav-link" on:click={toggleNav}>Projects</a></li>
<li><a href="/blog" class="nav-link" on:click={toggleNav}>Blog</a></li>
<li><a href="/guestbook" class="nav-link" on:click={toggleNav}>Guestbook</a></li>
<li><a href="/videos" class="nav-link" on:click={toggleNav}>Videos</a></li>
<!-- <li><a href="https://archive.alee14.me" class="nav-link" on:click={toggleNav}>Archive</a></li>-->
<li><a href="/contacts" class="nav-link" on:click={toggleNav}>Contacts</a></li>
</ul>
</nav>
|
