silentmode/theseus
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Theseus 0.3.110: horizontal cards, semi-transparent backgrounds, refreshed tagline

Browse source 
Silent Mode cards switch from a vertical icon-above-title-above-sub
layout to a horizontal one: a left stack holds the icon and the title,
the description sits on the right with left-aligned text and up to
three lines. Backgrounds move from the solid --card tone to a 55%
rgba with a 10 px backdrop blur so the wallpaper reads through.

Home tagline updated: 'Names that live on the Bitcoin Cash chain'
becomes 'Names that live on decentralized blockchain'. The address-bar
tip now points at hello.bch by name so the first step is obvious.
This commit is contained in:
Local Dev 2026-10-23 23:34:25 +03:00
parent 3ab3f77594
commit 17c434dcee
2 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
home.html
View file

@ -119,25 +119,27 @@
@media (max-width: 980px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards-grid { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
gap: 8px; padding: 18px 14px 16px; min-height: 148px;
background: var(--card); border: 1px solid var(--line); border-radius: 14px;
.card { display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
gap: 14px; padding: 14px 16px; min-height: 92px;
background: rgba(20,26,36,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid var(--line); border-radius: 14px;
text-decoration: none; color: inherit; cursor: pointer; position: relative;
transition: transform .12s, background .12s, border-color .12s; }
.card:hover { background: var(--card-hi); border-color: rgba(75,123,236,.4); transform: translateY(-1px); }
.card .card-ico { flex: none; width: 44px; height: 44px; border-radius: 10px;
.card:hover { background: rgba(20,26,36,.72); border-color: rgba(75,123,236,.4); transform: translateY(-1px); }
.card .card-left { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; }
.card .card-ico { flex: none; width: 40px; height: 40px; border-radius: 10px;
background: var(--iconBg, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--iconFg, #e7eaf1); font-weight: 700; font-size: 20px;
overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.card .card-ico svg, .card .card-ico img { width: 100%; height: 100%; display: block; }
.card .card-title { font-size: 14px; font-weight: 600; color: var(--ink); text-align: center;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.card .card-title { font-size: 13px; font-weight: 600; color: var(--ink); text-align: center;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; line-height: 1.2; }
.card .card-title .tld { color: var(--acid); font-weight: 700; letter-spacing: .3px;
text-shadow: 0 0 8px rgb(from var(--acid) r g b / .35); }
.card .card-sub { font-size: 12px; color: var(--mut); text-align: center; line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; max-width: 100%; }
.card .card-sub { flex: 1; min-width: 0; font-size: 12px; color: var(--mut); text-align: left; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden; }
.card:hover .card-sub { color: var(--ink); }
.card.dragging { opacity: .6; }
.card.drag-before::before, .card.drag-after::after {
@ -225,12 +227,12 @@
</div>
<h1>Theseus <span class="g">Navigator</span></h1>
</div>
<p class="tag">A browser that follows the thread. Names that live on the Bitcoin Cash chain.</p>
<p class="tag">A browser that follows the thread. Names that live on decentralized blockchain.</p>
<form id="searchForm">
<input id="q" placeholder="Search the web" autofocus spellcheck="false">
<button type="submit">Search</button>
</form>
<p class="hint">Tip: type a <b>.bch</b> name in the address bar above to open a decentralized site.</p>
<p class="hint">Tip: type <b>hello.bch</b> in the address bar above to open a decentralized site.</p>
</div>
<div class="homepage">
@ -485,7 +487,7 @@
el.style.setProperty("--iconFg", isLightColor(ic.color || "#d6ff3d") ? "#0b0e14" : "#ffffff");
}
const sub = ic.sub ? `<div class="card-sub">${esc(ic.sub)}</div>` : "";
el.innerHTML = `<div class="card-ico">${iconArt(ic)}</div><div class="card-title">${styledTitle(ic.title)}</div>${sub}`;
el.innerHTML = `<div class="card-left"><div class="card-ico">${iconArt(ic)}</div><div class="card-title">${styledTitle(ic.title)}</div></div>${sub}`;
wireCard(el, i);
grid.appendChild(el);
});

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "theseus-navigator",
"version": "0.3.109",
"version": "0.3.110",
"license": "MPL-2.0",
"description": "Theseus Navigator — a browser that follows the thread. By Silent Mode, a Deviant project.",
"author": "Silent Mode",