blob: d080ce5633aa89a92e9df35094a728e4fe19cdf7 (
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
|
---
const { item, rel } = Astro.props;
---
<a class={rel === 'next' ? 'rtl' : 'ltr'} rel="prev" href={new URL(item.link, Astro.site).pathname}>
{rel === 'prev' && (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32" width="32" fill="currentColor">
<path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z" />
</svg>
)}
{rel === 'next' && (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32" width="32" fill="currentColor">
<path d="M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" />
</svg>
)}
<div class="copy">
<div class="heading">{rel === 'next' ? 'Next Page' : 'Back'}</div>
<div class="name">{item.text}</div>
</div>
</a>
<style>
a {
flex-grow: 1;
flex-shrink: 0;
border: 1px solid var(--theme-divider);
padding: 1rem 1.25rem;
display: flex;
box-shadow: 0px 1px 2px var(--theme-text-lighter);
text-decoration: none;
color: var(--theme-text-lighter);
}
a:hover {
color: var(--theme-text-accent);
border: 1px solid var(--theme-accent);
}
.copy {
flex-grow: 1;
}
a.ltr {
text-align: right;
}
a.rtl {
flex-direction: row-reverse;
}
.heading {
color: var(--theme-text-light);
margin-bottom: -0.2rem;
}
.name {
font-size: 1.3rem;
font-weight: bold;
color: var(--theme-text);
}
</style>
|
