Design changes

static/css/notes2.css

@@ -10,6 +10,7 @@
 	*/
 	--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
 
+	--line-color: #ccc;
 	--tree-expander: 0px;
 	--functions-width: 150px;
 }
@@ -111,7 +112,7 @@ html {
 	color: #333;
 	background-color: #eee;
 	font-weight: bold;
-	border-right: 2px solid #ddd;
+	border-right: 1px solid var(--line-color);
 
 	display: grid;
 	justify-items: center;
@@ -127,6 +128,7 @@ html {
 	}
 }
 
+
 #tree {
 	grid-area: tree;
 	display: grid;
@@ -134,33 +136,7 @@ html {
 	color: #444;
 	z-index: 100;
 
-	border-right: 2px solid #ddd;
+	border-right: 1px solid var(--line-color);
-
-	#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 {
@@ -168,10 +144,6 @@ 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.4 (dcaf3e7d9e, 2026-05-05)"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
    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="16.477217"
+     inkscape:zoom="8.2386085"
-     inkscape:cx="48.460855"
+     inkscape:cx="48.491198"
-     inkscape:cy="5.2193281"
+     inkscape:cy="5.219328"
-     inkscape:window-width="2190"
+     inkscape:window-width="1916"
-     inkscape:window-height="1401"
+     inkscape:window-height="1161"
-     inkscape:window-x="1463"
+     inkscape:window-x="0"
-     inkscape:window-y="18"
+     inkscape:window-y="0"
      inkscape:window-maximized="1"
      inkscape:current-layer="layer1" />
   <defs
@@ -47,17 +47,23 @@
        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="207.99469"
+       y="213.81186"
-       id="text5"
+       id="text1"
        transform="scale(1.1392149,0.87779751)"><tspan
          sodipodi:role="line"
-         id="tspan5"
+         id="tspan1"
          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="207.99469">N2</tspan></text>
+         y="213.81186">N2</tspan></text>
   </g>
 </svg>

static/js/tree.mjs

@@ -64,15 +64,61 @@ 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>