swadhinbiswas 🎨 docs: full WebTUI redesign — 8-bit terminal palette, custom navbar, nerd font icons, catppuccin/everforest/nord themes, terminal landing · 8/8/2026
ac54424
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
---
import config from 'virtual:starlight/user-config';
import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
import Search from 'virtual:starlight/components/Search';
import SiteTitle from 'virtual:starlight/components/SiteTitle';
import SocialIcons from 'virtual:starlight/components/SocialIcons';
import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
const shouldRenderSearch =
config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
---
<div class="ja-navbar">
<div class="ja-navbar-bar">
<span class="ja-terminal-dot"></span>
<span class="ja-terminal-dot"></span>
<span class="ja-terminal-dot"></span>
<span class="ja-navbar-title">justapi</span>
</div>
<div class="ja-navbar-body">
<div class="title-wrapper sl-flex">
<SiteTitle />
</div>
<div class="sl-flex print:hidden ja-navbar-search">
{shouldRenderSearch && <Search />}
</div>
<div class="sl-hidden md:sl-flex print:hidden right-group">
<div class="sl-flex social-icons">
<SocialIcons />
</div>
<ThemeSelect />
<LanguageSelect />
</div>
</div>
</div>
<script>
import '../scripts/landing.ts';
initLanding();
</script>
<style is:global>
@layer components {
.ja-navbar {
border-bottom: var(--box-border-width, 2px) solid var(--foreground0);
background-color: var(--background1);
font-family: var(--font-family);
}
.ja-navbar-bar {
display: flex;
align-items: center;
gap: 1ch;
padding: 0.3rem 1ch;
border-bottom: 1px solid var(--background2);
background-color: var(--background2);
font-size: 0.75rem;
}
.ja-navbar-title {
color: var(--foreground0);
font-weight: var(--font-weight-bold);
}
.ja-navbar-body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 1.5rem;
min-height: 3.5rem;
}
.ja-navbar-body .site-title a {
font-family: var(--font-family);
font-weight: var(--font-weight-bold);
color: var(--foreground0);
}
.ja-navbar-body .site-title a::before {
content: '\f120';
font-family: 'Symbols Nerd Font';
margin-right: 0.75ch;
color: var(--green, var(--foreground0));
}
.ja-navbar-body a {
font-family: var(--font-family);
color: var(--foreground1);
text-decoration: none;
}
.ja-navbar-body a:hover {
color: var(--green, var(--foreground0));
text-decoration: underline;
}
.ja-navbar-search .search-input {
border: 1px solid var(--foreground0) !important;
border-radius: 0 !important;
background-color: var(--background0) !important;
color: var(--foreground0) !important;
font-family: var(--font-family) !important;
font-size: 0.85rem !important;
padding: 0.35rem 1ch !important;
height: auto !important;
}
@media (max-width: 768px) {
.ja-navbar-body { flex-wrap: wrap; padding: 0.5rem 1rem; }
.ja-navbar-search { order: 3; width: 100%; }
}
}
</style>