Footer.svelte RawHistoryFolder

1<script lang="ts">
2    const openGithub = () => {
3        window.open("https://github.com/bnema/dumber", "_blank");
4    };
5</script>
6
7<footer class="footer">
8    <div class="footer-content">
9        <div class="footer-text">
10            <span class="footer-name">Dumber Browser</span>
11            <span class="footer-dot">•</span>
12            <button class="footer-link" onclick={openGithub}>
13                View on GitHub
14            </button>
15        </div>
16    </div>
17</footer>
18
19<style>
20    .footer {
21        margin-top: 1.5rem;
22        width: 100%;
23        border-top: 1px solid var(--dynamic-border);
24        background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
25    }
26    
27    .footer-content {
28        display: flex;
29        justify-content: center;
30        align-items: center;
31        padding: 0.75rem 0;
32    }
33
34    .footer-text {
35        display: flex;
36        align-items: center;
37        gap: 0.75rem;
38        font-size: 0.75rem;
39        text-transform: uppercase;
40        letter-spacing: 0.12em;
41        color: var(--dynamic-muted);
42    }
43
44    .footer-name {
45        color: var(--dynamic-text);
46        font-weight: 600;
47    }
48
49    .footer-dot {
50        color: var(--dynamic-border);
51    }
52
53    .footer-link {
54        background: none;
55        border: none;
56        color: var(--dynamic-muted);
57        text-decoration: none;
58        cursor: pointer;
59        font-size: 0.85rem;
60        padding: 0;
61        transition: color 0.2s ease, letter-spacing 0.2s ease;
62        font-family:
63            "JetBrains Mono",
64            "Fira Code",
65            "SFMono-Regular",
66            Menlo,
67            monospace;
68    }
69
70    .footer-link:hover {
71        color: var(--dynamic-text);
72        letter-spacing: 0.16em;
73    }
74
75    .footer-link:focus {
76        outline: 1px solid var(--dynamic-border);
77        outline-offset: 2px;
78        border-radius: 0;
79    }
80</style>