silentmode/theseus
4
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)); } 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 /* 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. */ 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; } The mark + wordmark share a translucent panel so they read on any
.hero .mark { display: inline-block; width: 64px; height: 64px; line-height: 1; } 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 .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 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 { 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); .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; background: rgba(20,26,36,.72); color: var(--ink); font-size: 15px; outline: none;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero form input:focus { border-color: var(--blue); } .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 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" /* Two distinct sections under the hero: a self-contained "Your links"
panel on the LEFT (quick-launch tiles) and a Silent Mode cards panel 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 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 separate boxes instead of one shared body. The two are side-by-side
on desktop and stack vertically on narrow viewports. */ 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; } 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; } } @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 /* 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 instead of drifting inside stretched 3-equal-column cells. The whole
grid left-aligns to the column edge via justify-content: start. */ 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; } 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; } .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; .slot { position: relative; display: flex; flex-direction: column; align-items: center;
@ -203,16 +213,18 @@
</head> </head>
<body> <body>
<div class="hero"> <div class="hero">
<div class="mark"> <div class="hero-id">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <div class="mark">
<rect width="64" height="64" rx="12" fill="#0b0e14"/> <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/> <rect width="64" height="64" rx="12" fill="#0b0e14"/>
<path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/> <path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/>
<path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity="0.55"/> <path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/>
<circle cx="32" cy="32" r="3" fill="#0b0e14"/> <path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity="0.55"/>
</svg> <circle cx="32" cy="32" r="3" fill="#0b0e14"/>
</svg>
</div>
<h1>Theseus <span class="g">Navigator</span></h1>
</div> </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> <p class="tag">A browser that follows the thread. Names that live on the Bitcoin Cash chain.</p>
<form id="searchForm"> <form id="searchForm">
<input id="q" placeholder="Search the web" autofocus spellcheck="false"> <input id="q" placeholder="Search the web" autofocus spellcheck="false">

2
package.json
View file

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