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

fix: logo to left of site name, visible size, two-line header

Browse Source 
- Logo (24px) sits to the LEFT of $ protocol-droid on the first line
- Crumb path wraps to second line below
- Both in a column layout via .crumb-main wrapper
- Logo is clearly visible at 24x24px
This commit is contained in:
Protocolbot
2026-07-08 22:44:55 -06:00
parent 059ebd68e5
commit 762b050132
2 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+4 -6
View File
@@ -4,19 +4,17 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protocol Droid</title>
<link rel="icon" type="image/svg+xml" href="frontend/logo.svg">
<link rel="icon" type="image/png" sizes="32x32" href="frontend/favicon.ico">
<link rel="apple-touch-icon" href="frontend/icon-192.png">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="frontend/style.css">
<link rel="stylesheet" href="/frontend/style.css">
<meta name="theme-color" content="#0a1929">
</head>
<body>
<header>
<div class="breadcrumb" onclick="navigate('library')">
<img src="frontend/logo.svg" class="header-logo" alt="Protocol Droid">
<div class="crumb-main">
<img src="frontend/logo.svg" class="header-logo" alt="">
<span><span class="prompt">$</span> protocol-droid</span>
</div>
<span class="crumb-path" id="crumbPath"></span>
</div>
<nav id="navBar">
frontend/style.css
+9 -2
View File
@@ -66,12 +66,17 @@ header .breadcrumb {
flex-shrink: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
line-height: 1.2;
}
header .breadcrumb .crumb-main {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
header .breadcrumb .prompt { color: var(--green-bright); font-weight: normal; }
header .breadcrumb:hover { text-decoration: none; }
.header-logo { width: 18px; height: 22px; flex-shrink: 0; margin-right: 4px; display: block; }
.header-logo { width: 24px; height: 24px; flex-shrink: 0; display: block; }
header .crumb-path {
font-size: 11px;
color: var(--ink-dim);
@@ -79,6 +84,8 @@ header .crumb-path {
text-overflow: ellipsis;
max-width: 100%;
cursor: pointer;
display: block;
width: 100%;
}
/* Desktop nav — inline */