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-separator"></div>
9    <div class="footer-content">
10        <div class="footer-text">
11            <span class="footer-name">Dumber Browser</span>
12            <span class="footer-dot">•</span>
13            <button class="footer-link" onclick={openGithub}>
14                View on GitHub
15            </button>
16        </div>
17    </div>
18</footer>
19
20<style>
21    .footer {
22        margin-top: 1rem;
23        width: 100%;
24    }
25
26    .footer-separator {
27        height: 2px;
28        background: #404040;
29    }
30
31    .footer-content {
32        display: flex;
33        justify-content: center;
34        align-items: center;
35        padding: 1rem 0;
36    }
37
38    .footer-text {
39        display: flex;
40        align-items: center;
41        gap: 0.75rem;
42        font-size: 0.85rem;
43        color: #888;
44    }
45
46    .footer-name {
47        color: #aaa;
48        font-weight: 500;
49    }
50
51    .footer-dot {
52        color: #666;
53    }
54
55    .footer-link {
56        background: none;
57        border: none;
58        color: #0066cc;
59        text-decoration: none;
60        cursor: pointer;
61        font-size: 0.85rem;
62        padding: 0;
63        transition: color 0.2s ease;
64    }
65
66    .footer-link:hover {
67        color: #4d94ff;
68        text-decoration: underline;
69    }
70
71    .footer-link:focus {
72        outline: 1px solid #0066cc;
73        outline-offset: 2px;
74        border-radius: 2px;
75    }
76</style>