ntnsndr/protocol-droid
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: logo bigger (32px), site name and path aligned to right of logo

Browse Source 
- Logo 32px to fill more of the header height
- Logo on left, text + crumb path stacked to its right (not below)
- .crumb-text wrapper keeps $ protocol-droid and path together
- Path aligns with the $ sign, not underneath the logo
This commit is contained in:
Protocolbot
2026-07-08 22:47:14 -06:00
parent 762b050132
commit d3d832e740
2 changed files with 10 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+3 -3
View File
@@ -11,11 +11,11 @@
<header> <header>
<div class="breadcrumb" onclick="navigate('library')"> <div class="breadcrumb" onclick="navigate('library')">
<div class="crumb-main"> <img src="frontend/logo.svg" class="header-logo" alt="">
<img src="frontend/logo.svg" class="header-logo" alt=""> <div class="crumb-text">
<span><span class="prompt">$</span> protocol-droid</span> <span><span class="prompt">$</span> protocol-droid</span>
<span class="crumb-path" id="crumbPath"></span>
</div> </div>
<span class="crumb-path" id="crumbPath"></span>
</div> </div>
<nav id="navBar"> <nav id="navBar">
<a href="#library" class="active" data-view="library">PROTOCOLS</a> <a href="#library" class="active" data-view="library">PROTOCOLS</a>
frontend/style.css
+7 -9
View File
@@ -59,8 +59,8 @@ header .breadcrumb {
font-size: 14px; font-size: 14px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
display: flex; display: flex;
flex-direction: column; align-items: center;
gap: 0; gap: 8px;
color: var(--accent-bright); color: var(--accent-bright);
cursor: pointer; cursor: pointer;
flex-shrink: 1; flex-shrink: 1;
@@ -68,15 +68,15 @@ header .breadcrumb {
overflow: hidden; overflow: hidden;
line-height: 1.2; line-height: 1.2;
} }
header .breadcrumb .crumb-main { .header-logo { width: 32px; height: 32px; flex-shrink: 0; display: block; }
header .breadcrumb .crumb-text {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 6px; min-width: 0;
white-space: nowrap; overflow: hidden;
} }
header .breadcrumb .prompt { color: var(--green-bright); font-weight: normal; } header .breadcrumb .prompt { color: var(--green-bright); font-weight: normal; }
header .breadcrumb:hover { text-decoration: none; } header .breadcrumb:hover { text-decoration: none; }
.header-logo { width: 24px; height: 24px; flex-shrink: 0; display: block; }
header .crumb-path { header .crumb-path {
font-size: 11px; font-size: 11px;
color: var(--ink-dim); color: var(--ink-dim);
@@ -84,8 +84,6 @@ header .crumb-path {
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 100%; max-width: 100%;
cursor: pointer; cursor: pointer;
display: block;
width: 100%;
} }
/* Desktop nav — inline */ /* Desktop nav — inline */