Skip to content

Commit 7cbf6f1

Browse files
0x7C2f0x7C2f
authored
Merge pull request #44 from 0x7C2f/copilot/modernize-polish-ui-ux
Modernizing and polishing UI/UX using UUPM
2 parents 929a579 + 411ad34 commit 7cbf6f1

7 files changed

Lines changed: 247 additions & 28 deletions

File tree

‎_includes/footer.html‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
<footer class="tui-footer">
2-
<div class="tui-footer-links">{{ site.footer }}</div>
3-
<marquee scrollamount="3" loop="infinite" onmouseover="this.stop();" onmouseout="this.start();" id="webring_marquee">
4-
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/decentralize.png" alt="Decentralize webring link"></a>
5-
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/digdeeper.png" alt="Dig Deeper webring link"></a>
6-
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/paranoid.gif" alt="Paranoid webring link"></a>
7-
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/protonmail.png" alt="ProtonMail webring link"></a>
8-
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/shadow-wiki.png" alt="Shadow Wiki webring link"></a>
9-
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/sizeofcat.png" alt="Size of Cat webring link"></a>
10-
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/yesterweb.png" alt="Yesterweb webring link"></a>
11-
</marquee>
2+
<div class="tui-footer-meta">
3+
<span class="tui-footer-copy">{{ site.footer }}</span>
4+
<span class="tui-footer-rss"><a href="/feed.xml" title="RSS Feed">[rss]</a></span>
5+
</div>
6+
<div class="tui-footer-webring">
7+
<span class="tui-footer-webring-label">// webring</span>
8+
<marquee scrollamount="3" loop="infinite" onmouseover="this.stop();" onmouseout="this.start();" id="webring_marquee" class="webring_marquee">
9+
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/decentralize.png" alt="Decentralize webring link"></a>
10+
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/digdeeper.png" alt="Dig Deeper webring link"></a>
11+
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/paranoid.gif" alt="Paranoid webring link"></a>
12+
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/protonmail.png" alt="ProtonMail webring link"></a>
13+
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/shadow-wiki.png" alt="Shadow Wiki webring link"></a>
14+
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/sizeofcat.png" alt="Size of Cat webring link"></a>
15+
<a rel="nofollow" href="" target="_blank"><img src="/images/webring/yesterweb.png" alt="Yesterweb webring link"></a>
16+
</marquee>
17+
</div>
1218
</footer>

‎_includes/header.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{%- for path in page_paths -%}
88
{%- assign my_page = site.pages | where: "path", path | first -%}
99
{%- if my_page.title -%}
10-
<a href="{{ my_page.url | relative_url }}" class="tui-nav-link">{{ my_page.title | escape }}</a>
10+
<a href="{{ my_page.url | relative_url }}" class="tui-nav-link"{% if my_page.url == page.url %} aria-current="page"{% endif %}>{{ my_page.title | escape }}</a>
1111
{%- endif -%}
1212
{%- endfor -%}
1313
</nav>

‎_layouts/about.html‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,8 @@
22
layout: default
33
---
44
<link rel="stylesheet" type="text/css" href="{{ "/assets/about.css" | relative_url }}">
5-
{% raw %}
6-
<head>
7-
<h1 align="center">
8-
Knowledge Stack
9-
</h1>
10-
</head>
11-
<td colspan="2"><hr></td> <!-- Divider -->
5+
<h1 class="knowledge-title">Knowledge Stack</h1>
6+
<hr class="knowledge-divider">
127
<table class="badges-table">
138
<tbody>
149
<tr>
@@ -22,7 +17,7 @@ <h1 align="center">
2217
</td>
2318
</tr>
2419
<tr>
25-
<td colspan="2"><hr></td> <!-- Divider -->
20+
<td colspan="2"><hr class="knowledge-divider"></td>
2621
</tr>
2722
<tr>
2823
<td><strong>Version Control</strong></td>
@@ -35,7 +30,7 @@ <h1 align="center">
3530
</td>
3631
</tr>
3732
<tr>
38-
<td colspan="2"><hr></td> <!-- Divider -->
33+
<td colspan="2"><hr class="knowledge-divider"></td>
3934
</tr>
4035
<tr>
4136
<td><strong>Networking</strong></td>
@@ -48,7 +43,7 @@ <h1 align="center">
4843
</td>
4944
</tr>
5045
<tr>
51-
<td colspan="2"><hr></td> <!-- Divider -->
46+
<td colspan="2"><hr class="knowledge-divider"></td>
5247
</tr>
5348
<tr>
5449
<td><strong>Virtualization And Cloud</strong></td>
@@ -65,7 +60,7 @@ <h1 align="center">
6560
</td>
6661
</tr>
6762
<tr>
68-
<td colspan="2"><hr></td> <!-- Divider -->
63+
<td colspan="2"><hr class="knowledge-divider"></td>
6964
</tr>
7065
<tr>
7166
<td><strong>Development</strong></td>
@@ -97,7 +92,7 @@ <h1 align="center">
9792
</td>
9893
</tr>
9994
<tr>
100-
<td colspan="2"><hr></td> <!-- Divider -->
95+
<td colspan="2"><hr class="knowledge-divider"></td>
10196
</tr>
10297
<tr>
10398
<td><strong>Applications And Tools</strong></td>
@@ -116,4 +111,3 @@ <h1 align="center">
116111
</tr>
117112
</tbody>
118113
</table>
119-
{% endraw %}

‎_layouts/home.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
{% assign contentwonl = content | strip_newlines %} {% unless contentwonl == "" %} <br /> {% endunless %} <!-- add line break if there is any content -->
77

88
{%- if site.posts.size > 0 -%}
9-
<ul>
9+
<ul class="post-list">
1010
{%- for post in site.posts -%}
11-
<li>
11+
<li class="post-item">
1212
{%- assign date_format = "%Y-%m-%d" -%}
13-
[ {{ post.date | date: date_format }} ] <a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
13+
<time class="post-date" datetime="{{ post.date | date: date_format }}">[{{ post.date | date: date_format }}]</time><a href="{{ post.url | relative_url }}" class="post-title-link">{{ post.title | escape }}</a>
1414
</li>
1515
{%- endfor -%}
1616
</ul>

‎_sass/_dark.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,16 @@
3030
--code-color-17: #800000;
3131
--code-color-18: #bbbbbb;
3232

33+
/* Subtle CRT-style phosphor glow on body text */
34+
--body-text-shadow: 0 0 2px rgba(219, 219, 219, 0.10);
35+
36+
/* Accent glow for highlighted/accent elements */
37+
--accent-color: #b38aff;
38+
--accent-glow: 0 0 6px rgba(179, 138, 255, 0.35);
39+
--green-color: #05ca05;
40+
--green-glow: 0 0 6px rgba(5, 202, 5, 0.35);
41+
--yellow-color: #e4e477;
42+
3343
/* WebTUI variable bridge — keep in sync with $base-font-size in base.scss */
3444
--background0: #000;
3545
--background1: #111;

‎_sass/base.scss‎

Lines changed: 132 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,16 @@ h3,
3737
h4,
3838
h5,
3939
h6 {
40-
font-size: $base-font-size;
4140
margin: 0px;
4241
margin-top: 22px;
4342
font-weight: bold;
4443
color: var(--text-color);
4544
}
45+
/* Visual hierarchy — scale headings for scannable content */
46+
h1 { font-size: 1.45em; }
47+
h2 { font-size: 1.25em; }
48+
h3 { font-size: 1.10em; }
49+
h4, h5, h6 { font-size: $base-font-size; }
4650
p,
4751
ul,
4852
ol {
@@ -52,6 +56,7 @@ ol {
5256
a {
5357
text-decoration: underline;
5458
color: var(--link-color);
59+
transition: color 0.1s ease, background-color 0.1s ease;
5560
}
5661
a:hover {
5762
color: var(--background-color);
@@ -221,6 +226,7 @@ footer {
221226
.tui-titlebar-left a {
222227
text-decoration: none;
223228
color: var(--text-color);
229+
transition: color 0.1s ease, background-color 0.1s ease;
224230
}
225231
.tui-titlebar-left a:hover {
226232
color: var(--background-color);
@@ -241,12 +247,20 @@ footer {
241247
display: inline-block;
242248
min-height: 32px;
243249
line-height: 24px;
250+
transition: color 0.1s ease, background-color 0.1s ease;
244251
}
245252
.tui-nav-link:hover {
246253
text-decoration: none;
247254
color: var(--background-color);
248255
background-color: var(--base-color);
249256
}
257+
/* Active page indicator — requires aria-current="page" on the link */
258+
.tui-nav-link[aria-current="page"] {
259+
color: var(--background-color);
260+
background-color: var(--base-color);
261+
font-weight: bold;
262+
text-shadow: var(--accent-glow, none);
263+
}
250264
.tui-search {
251265
padding: 0 8px;
252266
border-left: var(--border);
@@ -335,6 +349,7 @@ input[type="submit"] {
335349
background-color: var(--background-color);
336350
padding: 8px 16px;
337351
min-height: 44px;
352+
transition: color 0.1s ease, background-color 0.1s ease;
338353
}
339354
input[type="submit"]:hover {
340355
color: var(--background-color);
@@ -554,3 +569,119 @@ pre {
554569
.highlight .il {
555570
color: var(--code-color-14);
556571
} /* Literal.Number.Integer.Long */
572+
573+
/**
574+
* Inline code — distinct from block pre/code
575+
*/
576+
code {
577+
background-color: rgba(219, 219, 219, 0.07);
578+
border: 1px solid rgba(219, 219, 219, 0.18);
579+
padding: 1px 5px;
580+
font-family: $base-font-family;
581+
font-size: 0.92em;
582+
}
583+
/* Reset inside pre blocks so only inline code gets the treatment */
584+
pre code {
585+
background: none;
586+
border: none;
587+
padding: 0;
588+
font-size: inherit;
589+
}
590+
591+
/**
592+
* Scrollbar — webkit terminal aesthetic
593+
*/
594+
::-webkit-scrollbar {
595+
width: 5px;
596+
height: 5px;
597+
}
598+
::-webkit-scrollbar-track {
599+
background: #000;
600+
}
601+
::-webkit-scrollbar-thumb {
602+
background: rgba(219, 219, 219, 0.22);
603+
}
604+
::-webkit-scrollbar-thumb:hover {
605+
background: rgba(219, 219, 219, 0.45);
606+
}
607+
608+
/**
609+
* Blog post listing
610+
*/
611+
.post-list {
612+
list-style: none;
613+
padding-left: 0;
614+
margin-top: 6px;
615+
}
616+
.post-list > li:before {
617+
content: none; /* override generic li bullet */
618+
}
619+
.post-item {
620+
display: flex;
621+
align-items: baseline;
622+
gap: 10px;
623+
padding: 3px 0;
624+
border-bottom: 1px dashed rgba(219, 219, 219, 0.12);
625+
}
626+
.post-item:last-child {
627+
border-bottom: none;
628+
}
629+
.post-date {
630+
color: var(--code-color-1);
631+
white-space: nowrap;
632+
font-size: 0.88em;
633+
flex-shrink: 0;
634+
}
635+
.post-title-link {
636+
color: var(--link-color);
637+
text-decoration: none;
638+
transition: color 0.1s ease, background-color 0.1s ease;
639+
}
640+
.post-title-link:hover {
641+
color: var(--background-color);
642+
background-color: var(--base-color);
643+
}
644+
645+
/**
646+
* Footer — improved visual structure
647+
*/
648+
.tui-footer {
649+
margin-top: 32px;
650+
}
651+
.tui-footer-meta {
652+
display: flex;
653+
align-items: center;
654+
justify-content: space-between;
655+
flex-wrap: wrap;
656+
gap: 8px;
657+
padding: 6px 0;
658+
font-size: 0.85em;
659+
border-top: dashed 1px rgba(219, 219, 219, 0.35);
660+
}
661+
.tui-footer-copy {
662+
color: rgba(219, 219, 219, 0.55);
663+
}
664+
.tui-footer-rss a {
665+
color: var(--yellow-color, #e4e477);
666+
text-decoration: none;
667+
font-size: 0.85em;
668+
transition: color 0.1s ease, background-color 0.1s ease;
669+
}
670+
.tui-footer-rss a:hover {
671+
color: var(--background-color);
672+
background-color: var(--yellow-color, #e4e477);
673+
}
674+
.tui-footer-webring {
675+
border-top: dashed 1px rgba(219, 219, 219, 0.18);
676+
padding: 4px 0 2px;
677+
}
678+
.tui-footer-webring-label {
679+
font-size: 0.78em;
680+
color: rgba(219, 219, 219, 0.4);
681+
display: block;
682+
margin-bottom: 2px;
683+
}
684+
685+
/**
686+
* Accent glow on active nav page indicator — merged into rule at line 258
687+
*/

0 commit comments

Comments
 (0)