public pages links

static/css/styles.css

@@ -7350,27 +7350,41 @@ dialog::backdrop {
   scroll-margin-top: 88px;
 }
 
+/*
+ * The permalink occupies the same gutter slot as the regular source number.
+ * It stays invisible until the row is approached, then behaves like the
+ * clickable editor line number and remains visible briefly after copying.
+ */
 .public-content .public-permalink {
   position: absolute;
-  top: .08em;
-  left: -1.55rem;
+  top: 0;
+  left: var(--preview-line-left, -50px);
   z-index: 3;
-  display: inline-grid;
-  width: 1.25rem;
-  height: 1.25rem;
-  place-items: center;
-  border-radius: 5px;
-  color: var(--muted-2);
-  font: 700 .86rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
+  display: block;
+  width: 32px;
+  height: 1.32em;
+  padding: 0 2px 0 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--gutter-text);
+  font: 400 .72rem/1.32 ui-monospace, SFMono-Regular, Consolas, monospace;
+  text-align: right;
   text-decoration: none;
   user-select: none;
+  cursor: copy;
   opacity: 0;
   transform: translateX(3px);
   transition: opacity .14s ease, transform .14s ease, background-color .14s ease, color .14s ease;
 }
 
-.public-content .list-source-line > .public-permalink {
-  left: -2.35rem;
+.public-content .preview-source-line::before {
+  transition: opacity .1s ease;
+}
+
+.public-content .preview-source-line:hover::before,
+.public-content .preview-source-line:focus-within::before {
+  opacity: 0;
 }
 
 .public-content .preview-source-line:hover > .public-permalink,
@@ -7382,7 +7396,7 @@ dialog::backdrop {
 
 .public-content .public-permalink:hover,
 .public-content .public-permalink:focus-visible {
-  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
   color: var(--text);
   outline: none;
 }
@@ -7391,6 +7405,7 @@ dialog::backdrop {
   background: color-mix(in srgb, var(--success) 18%, transparent);
   color: var(--text);
   opacity: 1;
+  transform: translateX(0);
 }
 
 .public-content .is-public-link-target {
@@ -7404,6 +7419,10 @@ dialog::backdrop {
     opacity: .62;
     transform: none;
   }
+
+  .public-content .preview-source-line::before {
+    opacity: 0;
+  }
 }
 
 /* Per-user, per-note navigation-bar focus mode ---------------------------- */

static/js/public.js

@@ -152,9 +152,9 @@ function installPublicPermalinks() {
     anchor.href = heading ? `#${encodeURIComponent(target.id)}` : `#L${line}`;
     anchor.dataset.line = String(line);
     anchor.dataset.linkKind = heading ? "heading" : "line";
-    anchor.textContent = heading ? "¶" : "#";
+    anchor.textContent = String(line);
     anchor.setAttribute("aria-label", heading ? `Copy link to heading on line ${line}` : `Copy link to line ${line}`);
-    anchor.title = heading ? "Copy link to this heading" : `Copy link to line ${line}`;
+    anchor.title = heading ? `Copy link to this heading (line ${line})` : `Copy link to line ${line}`;
     target.append(anchor);
   });
 }