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

Theseus 0.3.108: hero wordmark in a readable pill, left slots widened

Browse source 
Hero mark now sits in front of the "Theseus Navigator" wordmark inside a
translucent rounded panel, so the identity reads on any wallpaper. The
tag line and the hint got their own matching pill backings for the same
reason.

Left-column slots grew from a fixed 3-column grid in a 240–280 px panel
to an auto-fill grid in a 360–440 px panel — about 5 columns of 72 px
tiles instead of 3, so more quick-launch icons fit without the panel
feeling cramped. No change to the icons themselves.
This commit is contained in:
Local Dev 2026-10-23 21:09:48 +03:00
parent 7f70779f1c
commit a639f7a80d
2 changed files with 31 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
home.html
View file

@ -13,27 +13,38 @@
body { background: radial-gradient(1200px 600px at 50% -10%, var(--bg1), var(--bg2)); }
/* Hero (identity + search). Centered at the top of the page — the user's
most-used thing on this screen. The slot/card desktop lives beneath. */
.hero { text-align: center; padding: 5vh 1rem 0; max-width: 760px; margin: 0 auto; }
.hero .mark { display: inline-block; width: 64px; height: 64px; line-height: 1; }
most-used thing on this screen. The slot/card desktop lives beneath.
The mark + wordmark share a translucent panel so they read on any
wallpaper; the tag, search box and hint sit outside it, centered. */
.hero { text-align: center; padding: 5vh 1rem 0; max-width: 820px; margin: 0 auto; }
.hero .hero-id { display: inline-flex; align-items: center; gap: 14px;
padding: 12px 24px 12px 14px; border-radius: 22px;
background: rgba(11,14,20,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.06);
margin-bottom: .8rem; }
.hero .mark { flex: none; width: 56px; height: 56px; line-height: 1; }
.hero .mark svg { width: 100%; height: 100%; display: block; }
.hero h1 { font-size: 2.4rem; margin: .3rem 0 .2rem; letter-spacing: .5px; font-weight: 600; }
.hero h1 { font-size: 2.2rem; margin: 0; letter-spacing: .5px; font-weight: 600; line-height: 1.05; }
.hero h1 .g { color: var(--acid); }
.hero .tag { color: var(--mut); margin: 0 0 1.4rem; }
.hero .tag { color: var(--ink); margin: 0 0 1.4rem;
display: inline-block; padding: 6px 14px; border-radius: 999px;
background: rgba(11,14,20,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero form { display: flex; gap: 8px; justify-content: center; max-width: 620px; margin: 0 auto; padding: 0 1rem; }
.hero form input { flex: 1; padding: 13px 18px; border-radius: 999px; border: 1px solid var(--line2);
background: rgba(20,26,36,.72); color: var(--ink); font-size: 15px; outline: none;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero form input:focus { border-color: var(--blue); }
.hero form button { padding: 13px 20px; border-radius: 999px; border: none; background: var(--blue); color: #fff; font-size: 15px; cursor: pointer; }
.hero .hint { color: var(--dim); font-size: 12.5px; margin-top: .8rem; }
.hero .hint { color: var(--mut); font-size: 12.5px; margin-top: .8rem;
display: inline-block; padding: 4px 12px; border-radius: 999px;
background: rgba(11,14,20,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* Two distinct sections under the hero: a self-contained "Your links"
panel on the LEFT (quick-launch tiles) and a Silent Mode cards panel
on the RIGHT. Each gets its own panel background so they read as two
separate boxes instead of one shared body. The two are side-by-side
on desktop and stack vertically on narrow viewports. */
.homepage { display: grid; grid-template-columns: minmax(240px, 280px) minmax(380px, 1fr);
.homepage { display: grid; grid-template-columns: minmax(360px, 440px) minmax(380px, 1fr);
gap: 24px; max-width: 1680px; margin: 2.4rem auto 0; padding: 0 32px 48px; align-items: start; }
@media (max-width: 900px) { .homepage { grid-template-columns: 1fr; gap: 20px; padding: 0 14px 32px; } }
@ -55,9 +66,8 @@
/* Fixed-width cells (not 1fr) so icons sit in a tight desktop-style grid
instead of drifting inside stretched 3-equal-column cells. The whole
grid left-aligns to the column edge via justify-content: start. */
.slots-list { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px 8px;
.slots-list { display: grid; grid-template-columns: repeat(auto-fill, 72px); gap: 10px 8px;
width: 100%; align-items: start; justify-content: start; }
@media (max-width: 900px) { .slots-list { grid-template-columns: repeat(auto-fill, 72px); justify-content: start; } }
.cards-grid.drop-target { outline: 2px dashed var(--acid); outline-offset: 4px; border-radius: 14px; }
.slot { position: relative; display: flex; flex-direction: column; align-items: center;
@ -203,16 +213,18 @@
</head>
<body>
<div class="hero">
<div class="mark">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="12" fill="#0b0e14"/>
<path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/>
<path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/>
<path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity="0.55"/>
<circle cx="32" cy="32" r="3" fill="#0b0e14"/>
</svg>
<div class="hero-id">
<div class="mark">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="12" fill="#0b0e14"/>
<path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/>
<path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/>
<path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity="0.55"/>
<circle cx="32" cy="32" r="3" fill="#0b0e14"/>
</svg>
</div>
<h1>Theseus <span class="g">Navigator</span></h1>
</div>
<h1>Theseus <span class="g">Navigator</span></h1>
<p class="tag">A browser that follows the thread. Names that live on the Bitcoin Cash chain.</p>
<form id="searchForm">
<input id="q" placeholder="Search the web" autofocus spellcheck="false">

2
package.json
View file

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