static/css/notes2.css

@@ -10,7 +10,6 @@
 	*/
 	--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
 
-	--line-color: #ccc;
 	--tree-expander: 0px;
 	--functions-width: 150px;
 }
@@ -112,7 +111,7 @@ html {
 	color: #333;
 	background-color: #eee;
 	font-weight: bold;
-	border-right: 1px solid var(--line-color);
+	border-right: 2px solid #ddd;
 
 	display: grid;
 	justify-items: center;
@@ -128,7 +127,6 @@ html {
 	}
 }
 
-
 #tree {
 	grid-area: tree;
 	display: grid;
@@ -136,7 +134,33 @@ html {
 	color: #444;
 	z-index: 100;
 
-	border-right: 1px solid var(--line-color);
+	border-right: 2px solid #ddd;
+
+	#logo {
+		display: grid;
+		grid-template-columns: min-content 1fr min-content;
+		align-items: center;
+		justify-items: start;
+		cursor: pointer;
+		padding: 16px;
+		border-bottom: 1px solid #ccc;
+
+		.el-search {
+			justify-self: end;
+		}
+
+		img:first-child {
+			height: 24px;
+			margin-right: 8px;
+		}
+	}
+
+	.icons {
+		display: flex;
+		justify-content: center;
+		margin: 16px 0px 32px 0px;
+		gap: 8px;
+	}
 
 	n2-tree {
 		.el-treenodes {
@@ -144,6 +168,10 @@ html {
 		}
 	}
 
+	&:focus-within {
+		n2-tree {}
+	}
+
 	.node {
 		display: grid;
 		grid-template-columns: 40px min-content;

static/images/logo_small.svg

@@ -7,7 +7,7 @@
    viewBox="0 0 7.5652731 5.2916666"
    version="1.1"
    id="svg1"
-   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
    sodipodi:docname="logo_small.svg"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@@ -23,13 +23,13 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="px"
-     inkscape:zoom="8.2386085"
-     inkscape:cx="48.491198"
-     inkscape:cy="5.219328"
-     inkscape:window-width="1916"
-     inkscape:window-height="1161"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
+     inkscape:zoom="16.477217"
+     inkscape:cx="48.460855"
+     inkscape:cy="5.2193281"
+     inkscape:window-width="2190"
+     inkscape:window-height="1401"
+     inkscape:window-x="1463"
+     inkscape:window-y="18"
      inkscape:window-maximized="1"
      inkscape:current-layer="layer1" />
   <defs
@@ -47,23 +47,17 @@
        x="126.73541"
        y="178.59375"
        ry="1.0060203" />
-    <path
-       d="m 114.29355,207.99469 h -0.57869 l -0.72335,-1.79391 v 1.79391 h -0.49188 v -3.03326 h 0.50153 l 0.79568,1.99645 v -1.99645 h 0.49671 z m 2.34365,-0.50635 v 0.50635 h -1.85178 v -0.99823 q 0,-0.78122 0.72817,-0.78122 h 0.48224 q 0.16396,-0.005 0.16396,-0.18325 v -0.40507 q 0,-0.17361 -0.13985,-0.17361 h -0.64137 q -0.0964,0 -0.0964,0.10609 v 0.21701 h -0.4967 v -0.14949 q 0,-0.67996 0.59797,-0.67996 h 0.59797 q 0.65584,0 0.65584,0.63655 v 0.43402 q 0,0.33756 -0.15431,0.52081 h 0.005 q -0.15432,0.18325 -0.6028,0.18325 h -0.40507 q -0.19772,0 -0.19772,0.25076 v 0.51599 z"
-       id="text5"
-       style="font-weight:bold;font-size:4.82235px;font-family:'Forgotten Futurist';-inkscape-font-specification:'Forgotten Futurist, Bold';fill:#ffffff;stroke-width:0.40186"
-       transform="scale(1.1392149,0.87779751)"
-       aria-label="N2" />
     <text
        xml:space="preserve"
        style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.82235px;font-family:'Forgotten Futurist';-inkscape-font-specification:'Forgotten Futurist, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;writing-mode:lr-tb;direction:ltr;fill:#ffffff;stroke:none;stroke-width:0.40186"
        x="112.25369"
-       y="213.81186"
-       id="text1"
+       y="207.99469"
+       id="text5"
        transform="scale(1.1392149,0.87779751)"><tspan
          sodipodi:role="line"
-         id="tspan1"
+         id="tspan5"
          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.82235px;font-family:'Forgotten Futurist';-inkscape-font-specification:'Forgotten Futurist, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffffff;stroke:none;stroke-width:0.40186"
          x="112.25369"
-         y="213.81186">N2</tspan></text>
+         y="207.99469">N2</tspan></text>
   </g>
 </svg>

static/js/tree.mjs

@@ -64,61 +64,15 @@ export class N2Tree extends CustomHTMLElement {
 		this.tmpl.innerHTML = `
 			<style>
 				n2-tree {
-					anchor-name: --tree;
-
-					#logo {
-						display: grid;
-						grid-template-columns: 1fr min-content;
-						align-items: center;
-						justify-items: start;
-						cursor: pointer;
-						padding: 16px;
-						border-bottom: 1px solid var(--line-color);
-
-						img:first-child {
-							height: 24px;
-							margin-right: 8px;
-						}
-					}
-
-					.icons {
-						display: flex;
-						justify-content: center;
-						margin: 16px 0px 32px 0px;
-						gap: 8px;
-						padding-bottom: 16px;
-						border-bottom: 1px solid var(--line-color);
-					}
-
-
 					.el-hide-tree {
 						font-size: 1.25em;
 						font-weight: bold;
 						cursor: pointer;
-						margin-left: 16px;
-					}
-
-					.focusline {
-						position: fixed;
-						background-color: #a00;
-						top: 0px;
-						left: anchor(--tree left);
-						right: anchor(--tree right);
-						height: 2px;
-						opacity: 0;
-					}
-
-					&:focus-within {
-						.focusline {
-							opacity: 1;
-							background-color: #fff;
-							transition: background-color 150ms;
-						}
 					}
 				}
 			</style>
-			<div class="focusline"></div>
 			<div id="logo">
+				<img src="/images/${_VERSION}/logo_small.svg" />
 				<img data-el="logo" src="/images/${_VERSION}/logo.svg" />
 				<div data-el="hide-tree">&lt;</div>
 			</div>