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
|
---
interface Link {
href: string;
text: string;
}
const links: Link[] = [
{ href: '/', text: 'HN' },
{ href: '/new', text: 'New' },
{ href: '/show', text: 'Show' },
{ href: '/ask', text: 'Ask' },
{ href: '/job', text: 'Jobs' },
];
---
<header>
<nav aria-label="Main menu">
{
links.map(({ href, text }) => (
<a href={href} aria-current={href === Astro.url.pathname ? 'page' : undefined}>
<strong>{text}</strong>
</a>
))
}
<a class="github" href="http://github.com/withastro/astro" target="_blank" rel="noreferrer">
Built with Astro
</a>
</nav>
</header>
<style>
header {
background-color: rgb(107 33 168);
position: fixed;
z-index: 999;
height: 55px;
top: 0;
left: 0;
right: 0;
}
nav {
max-width: 800px;
box-sizing: border-box;
margin: 0 auto;
padding: 15px 5px;
}
nav a {
color: rgba(248, 250, 252, 0.8);
line-height: 24px;
transition: color 0.15s ease;
display: inline-block;
vertical-align: middle;
font-weight: 300;
letter-spacing: 0.075em;
margin-right: 1.8em;
}
nav a:hover {
color: rgb(248 250 252);
}
nav [aria-current='page'] {
color: rgb(248 250 252);
font-weight: 400;
}
nav a:last-of-type {
margin-right: 0;
}
.github {
color: rgb(248 250 252);
font-size: 0.9em;
margin: 0;
float: right;
}
@media (max-width: 860px) {
nav {
padding: 15px 30px;
}
}
@media (max-width: 600px) {
nav {
padding: 15px;
}
a {
margin-right: 1em;
}
.github {
display: none;
}
}
</style>
|
