Skip to content

Commit d1268b3

Browse files
0x7C2f0x7C2f
authored
Merge pull request #42 from 0x7C2f/copilot/implement-mobile-compatible-webtui-interface
feat: implement mobile-compatible WebTUI interface
2 parents d0d4356 + a84caee commit d1268b3

8 files changed

Lines changed: 118 additions & 50 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
*.gem
2+
*.tgz
23
.bundle
34
.sass-cache
45
_site

‎_includes/footer.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<footer>
2-
{{ site.footer }}
1+
<footer class="tui-footer">
2+
<div class="tui-footer-links">{{ site.footer }}</div>
33
<marquee scrollamount="3" loop="infinite" onmouseover="this.stop();" onmouseout="this.start();" id="webring_marquee">
44
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/decentralize.png" alt="Decentralize webring link"></a>
55
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/digdeeper.png" alt="Dig Deeper webring link"></a>

‎_includes/head.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<meta name="referrer" content="no-referrer" />
1212
<!-- CSP here -->
1313
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14+
<link rel="stylesheet" href="{{ "/assets/webtui.css" | relative_url }}">
1415
<link rel="stylesheet" href="{{ "/assets/main-dark.css" | relative_url }}">
1516
<link rel="preload" href="{{ "/assets/header-search.js" | relative_url }}" as="script">
1617
<title>{{ page.title | default: site.title }}</title>

‎_includes/header.html‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
{%- assign page_paths = site.header_pages | default: default_paths -%}
22
<a href="#main-content" class="skip-link">Skip to main content</a>
3-
<header>
4-
<div class="menu">
5-
<ul>
3+
<header class="tui-header">
4+
<div class="tui-titlebar">
5+
<span class="tui-titlebar-left">[ <a href="/">0x7C2f</a> ]</span>
6+
<nav class="tui-nav" aria-label="Main navigation">
67
{%- for path in page_paths -%}
78
{%- assign my_page = site.pages | where: "path", path | first -%}
89
{%- if my_page.title -%}
9-
<li><a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape}}</a> |</li>
10+
<a href="{{ my_page.url | relative_url }}" class="tui-nav-link">{{ my_page.title | escape }}</a>
1011
{%- endif -%}
1112
{%- endfor -%}
12-
<li><input type="text" id="search-input" placeholder="Search..." aria-label="Search site content" /></li>
13-
</ul>
13+
</nav>
14+
<div class="tui-search">
15+
<input type="text" id="search-input" placeholder="/ search..." aria-label="Search site content" />
16+
</div>
1417
</div>
1518
</header>

‎_layouts/default.html‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,14 @@
1616
<meta http-equiv="X-XSS-Protection" content="1;mode=block" always>
1717
<meta http-equiv="Referrer-Policy" content="no-referrer, no-referrer">
1818
{%- include head.html -%}
19-
<body>
19+
<body data-webtui-theme="dark">
2020
{%- include header.html -%}
2121
<div class="container">
22-
<div class="container-left">
23-
</div>
24-
<div class="container-center">
25-
<main id="main-content">
22+
<main id="main-content" class="tui-main">
2623
{{ content }}
2724
</main>
28-
<div class="container-right">
29-
</div>
30-
</div>
3125
{%- include footer.html -%}
32-
</div>
26+
</div>
3327
<script src="/assets/header-search.js"></script>
3428
</body>
3529
</html>

‎_sass/_dark.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,17 @@
2929
--code-color-16: #1e90ff;
3030
--code-color-17: #800000;
3131
--code-color-18: #bbbbbb;
32+
33+
/* WebTUI variable bridge — keep in sync with $base-font-size in base.scss */
34+
--background0: #000;
35+
--background1: #111;
36+
--background2: #222;
37+
--background3: #444;
38+
--foreground0: #DBDBDB;
39+
--foreground1: #aaaaaa;
40+
--foreground2: #666;
41+
--box-border-color: rgba(219, 219, 219, 0.9);
42+
--separator-color: rgba(219, 219, 219, 0.9);
43+
--font-family: monospace;
44+
--line-height: 1.5;
3245
}

‎_sass/base.scss‎

Lines changed: 88 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ $container-max-width: 1100px !default;
1313
/**
1414
* Global
1515
*/
16+
17+
/* Set WebTUI --font-size variable using the SCSS variable */
18+
:root {
19+
--font-size: #{$base-font-size};
20+
}
21+
1622
body {
1723
background-color: var(--background-color);
1824
margin: 0 auto;
@@ -56,14 +62,14 @@ a:hover {
5662
font-size: $mobile-font-size !important;
5763
}
5864
.container {
59-
padding: 0 10px;
65+
padding: 0 8px;
6066
}
61-
.menu ul li {
62-
display: block;
63-
margin-left: 0;
67+
.tui-titlebar {
68+
flex-wrap: wrap;
69+
gap: 4px;
6470
}
65-
.menu ul li a {
66-
padding: 12px;
71+
.tui-nav {
72+
flex-wrap: wrap;
6773
}
6874
}
6975

@@ -85,21 +91,14 @@ p {
8591
footer {
8692
color: var(--text-color);
8793
border-top: var(--border);
88-
margin: 20px auto 15px;
94+
margin: 20px auto 15px 0;
8995
padding-top: 10px;
9096
text-align: right;
91-
}
92-
header {
93-
margin-top: 25px;
94-
margin-bottom: 10px;
95-
}
96-
header p {
97-
text-align: left;
98-
margin: 0;
99-
}
100-
footer {
10197
margin-bottom: 20px;
10298
}
99+
.tui-footer-links {
100+
margin-bottom: 8px;
101+
}
103102

104103
/**
105104
* Accessibility
@@ -198,36 +197,92 @@ footer {
198197
}
199198

200199
/**
201-
* Header/Navigation
200+
* Header/Navigation — WebTUI style
202201
*/
203-
.menu {
202+
.tui-header {
203+
margin-top: 25px;
204+
margin-bottom: 20px;
205+
}
206+
.tui-titlebar {
207+
display: flex;
208+
align-items: center;
209+
gap: 0;
204210
border-top: var(--border);
205211
border-bottom: var(--border);
206-
margin-bottom: 25px;
212+
padding: 6px 0;
213+
flex-wrap: wrap;
207214
}
208-
.menu ul {
209-
margin-top: 12px;
210-
margin-bottom: 12px;
211-
padding-left: 0px;
212-
list-style-type: none;
213-
text-align: center;
215+
.tui-titlebar-left {
216+
padding: 4px 12px;
217+
border-right: var(--border);
218+
white-space: nowrap;
219+
font-weight: bold;
220+
}
221+
.tui-titlebar-left a {
222+
text-decoration: none;
223+
color: var(--text-color);
224+
}
225+
.tui-titlebar-left a:hover {
226+
color: var(--background-color);
227+
background-color: var(--base-color);
214228
}
215-
.menu ul li {
216-
display: inline;
217-
margin-left: 10px;
229+
.tui-nav {
230+
display: flex;
231+
align-items: center;
232+
flex: 1;
233+
flex-wrap: wrap;
234+
padding: 0 8px;
235+
gap: 2px;
218236
}
219-
.menu ul li a {
237+
.tui-nav-link {
220238
text-decoration: none;
221239
color: var(--text-color);
222-
padding: 8px;
223-
min-height: 44px;
240+
padding: 4px 8px;
224241
display: inline-block;
242+
min-height: 32px;
243+
line-height: 24px;
225244
}
226-
.menu ul li a:hover {
245+
.tui-nav-link:hover {
227246
text-decoration: none;
228247
color: var(--background-color);
229248
background-color: var(--base-color);
230249
}
250+
.tui-search {
251+
padding: 0 8px;
252+
border-left: var(--border);
253+
}
254+
.tui-search input[type="text"] {
255+
background-color: var(--background-color);
256+
color: var(--text-color);
257+
border: 1px solid var(--base-color);
258+
padding: 4px 8px;
259+
font-family: $base-font-family;
260+
font-size: $base-font-size;
261+
min-width: 160px;
262+
width: auto;
263+
min-height: unset;
264+
caret-color: var(--text-color);
265+
}
266+
.tui-search input[type="text"]::placeholder {
267+
color: var(--placeholder-color);
268+
}
269+
.tui-search input[type="text"]:focus {
270+
outline: 2px solid var(--base-color);
271+
outline-offset: 1px;
272+
}
273+
274+
@media only screen and (max-width: 768px) {
275+
.tui-search input[type="text"] {
276+
min-width: 100px;
277+
}
278+
}
279+
280+
/**
281+
* Main content — TUI panel
282+
*/
283+
.tui-main {
284+
padding: 0;
285+
}
231286

232287
/**
233288
* Form

‎assets/webtui.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)