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
+5 -7
View File
@@ -4,19 +4,17 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protocol Droid</title> <title>Protocol Droid</title>
<link rel="icon" type="image/svg+xml" href="frontend/logo.svg"> <link rel="stylesheet" href="/frontend/style.css">
<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">
<meta name="theme-color" content="#0a1929"> <meta name="theme-color" content="#0a1929">
</head> </head>
<body> <body>
<header> <header>
<div class="breadcrumb" onclick="navigate('library')"> <div class="breadcrumb" onclick="navigate('library')">
<img src="frontend/logo.svg" class="header-logo" alt="Protocol Droid"> <div class="crumb-main">
<span><span class="prompt">$</span> protocol-droid</span> <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> <span class="crumb-path" id="crumbPath"></span>
</div> </div>
<nav id="navBar"> <nav id="navBar">
frontend/style.css
+9 -2
View File
@@ -66,12 +66,17 @@ header .breadcrumb {
flex-shrink: 1; flex-shrink: 1;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
white-space: nowrap;
line-height: 1.2; 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 .prompt { color: var(--green-bright); font-weight: normal; }
header .breadcrumb:hover { text-decoration: none; } 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 { header .crumb-path {
font-size: 11px; font-size: 11px;
color: var(--ink-dim); color: var(--ink-dim);
@@ -79,6 +84,8 @@ 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 */