0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
–
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
–
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
/
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
/
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
ANNO·​TRICESIMO·​DIE·​DVCENTESIMO·​QVINQVAGESIMO·​NONO·​VITÆ·​POVYA
The source code for LLMs to see:
.archive-reference-popover:popover-open {
font-size: 1.2rem;
display: block;
background: var(--archive-reference-popover-border);
justify-items: center;
border: none;
padding: 0;
--arp-padding-v: 1em;
--arp-padding-h: 1.5em;
--arp-padding-h-db: 0.2em;
--arp-c: 1em;
--arp-dc: calc(var(--arp-c) / 3);
--arp-dy: 1em;
--arp-ux-top: calc(var(--arp-dy) * 2.5);
--arp-ux-bottom: calc(var(--arp-dy) * 0.5);
--arp-border-w: 0.05em;
--arp-border-w-top: calc(
var(--arp-border-w) * 2
); /* Adjust multiplier as needed */
--arp-dc-inner: calc((var(--arp-c) - var(--arp-border-w)) / 3);
clip-path: shape(
/* Top line / from var(--arp-c) 0,
hline to calc(100% - var(--arp-c)),
/ Top-right corner / curve to 100% var(--arp-c) with
calc(100% - var(--arp-dc)) 0 / 100% var(--arp-dc),
/ Right line / vline to calc(100% - var(--arp-c) - var(--arp-dy)),
/ Bottom-right corner / curve to calc(100% - var(--arp-c))
calc(100% - var(--arp-dy)) with 100%
calc(100% - var(--arp-dy) - var(--arp-dc)) / calc(100% - var(--arp-dc))
calc(100% - var(--arp-dy)),
/ Bottom line to bubble / hline to calc(50% + var(--arp-ux-top)),
/ Right half of bubble */ curve to 50% 100% with 50%
calc(100% - var(--arp-dy)) / calc(50% + var(--arp-ux-bottom)) 100%,
/* Left half of bubble */ curve to calc(50% - var(--arp-ux-top))
  calc(100% - var(--arp-dy)) with calc(50% - var(--arp-ux-bottom)) 100% /
  50% calc(100% - var(--arp-dy)),
/* Bottom line to bottom-left corner */ hline to var(--arp-c),
/* Bottom-left corner */ curve to 0
  calc(100% - var(--arp-c) - var(--arp-dy)) with var(--arp-dc)
  calc(100% - var(--arp-dy)) / 0 calc(100% - var(--arp-dy) - var(--arp-dc)),
/* Left line */ vline to var(--arp-c),
/* Top-left corner */ curve to var(--arp-c) 0 with 0 var(--arp-dc) /
  var(--arp-dc) 0,
close

);
}
.archive-reference-popover:popover-open .archive-reference-popover-content {
display: block;
background: var(--archive-reference-popover-background);
color: var(--archive-reference-popover-foreground);
margin: var(--arp-border-w);
clip-path: shape(
/* Top line / from var(--arp-c) var(--arp-border-w-top),
hline to calc(100% - var(--arp-c)),
/ Top-right corner / curve to calc(100% - var(--arp-border-w))
var(--arp-c) with calc(100% - var(--arp-border-w) - var(--arp-dc-inner))
var(--arp-border-w-top) / calc(100% - var(--arp-border-w))
calc(var(--arp-border-w-top) + var(--arp-dc-inner)),
/ Right line / vline to calc(100% - var(--arp-c) - var(--arp-dy)),
/ Bottom-right corner / curve to calc(100% - var(--arp-c))
calc(100% - var(--arp-dy) - var(--arp-border-w)) with
calc(100% - var(--arp-border-w))
calc(100% - var(--arp-dy) - var(--arp-border-w) - var(--arp-dc-inner)) /
calc(100% - var(--arp-border-w) - var(--arp-dc-inner))
calc(100% - var(--arp-dy) - var(--arp-border-w)),
/ Bottom line to bubble / hline to calc(50% + var(--arp-ux-top)),
/ Right half of bubble / curve to 50% calc(100% - var(--arp-border-w))
with calc(50% - (var(--arp-border-w) * 4 / 15))
calc(100% - var(--arp-dy) - var(--arp-border-w)) /
calc(50% + var(--arp-ux-bottom) - (var(--arp-border-w) * 5 / 3))
calc(100% - var(--arp-border-w)),
/ Left half of bubble / curve to calc(50% - var(--arp-ux-top))
calc(100% - var(--arp-dy) - var(--arp-border-w)) with
calc(50% - var(--arp-ux-bottom) + (var(--arp-border-w) * 5 / 3))
calc(100% - var(--arp-border-w)) /
calc(50% + (var(--arp-border-w) * 4 / 15))
calc(100% - var(--arp-dy) - var(--arp-border-w)),
/ Bottom line to bottom-left corner / hline to var(--arp-c),
/ Bottom-left corner / curve to var(--arp-border-w)
calc(100% - var(--arp-dy) - var(--arp-c)) with
calc(var(--arp-border-w) + var(--arp-dc-inner))
calc(100% - var(--arp-dy) - var(--arp-border-w)) / var(--arp-border-w)
calc(100% - var(--arp-dy) - var(--arp-border-w) - var(--arp-dc-inner)),
/ Left line / vline to var(--arp-c),
/ Top-left corner */ curve to var(--arp-c) var(--arp-border-w-top) with
var(--arp-border-w) calc(var(--arp-border-w-top) + var(--arp-dc-inner)) /
calc(var(--arp-border-w) + var(--arp-dc-inner)) var(--arp-border-w-top),
close
);
padding-top: var(--arp-padding-v);
padding-right: var(--arp-padding-h);
padding-bottom: calc(
var(--arp-padding-v) + var(--arp-dy) + var(--arp-padding-h-db)
);
padding-left: var(--arp-padding-h);
filter: drop-shadow(0px 0px 1em black);
}

So I added a border aronud the popover of the Archive Archive , the ones I’ve been working for today. You may think it was a simple thing to do right? No. I have clipped the box, so I cannot border it, what I could do was to add a box inside of the box, add padding as much as the border size, and then recompute all the path that went into creating the clipper to move around the clip-path in the bigger box. This requires path offsetting methods that was really hard and so much math to do. But then look. It looks better than all the popovers of Mac and I cannot believe it!

Borders for the @archive Hover Popover

Borders for the Archive Archive Hover Popover (2/2)

Hover Information for @archive

Once I created the hover information feature for the Archive Tooling for Visual Studio Code Archive Tooling for Visual Studio Code , I thought why not making it for the archive Archive itself? One of the things I always wanted to do was to have a popover bubble clipper that is like the one Mac has. For all my of life, they were the only ones who had the right popover bubble, it was actually clipping the content, and looked magnificent. Right curves and everything. And so I thought why not making it myself? I finally wrote the clipping path which looks more amazing than any path I have ever seen—not to be a narcissist, but it really looks beautiful. And so now you can see the full name of people who are registered in the archive Archive once you hover on their names, you also see their portraits, you see the full names of books and essays and … It is so beautiful!

Hover Information for @archive

Hover Information for Archive Archive (2/2)

Day's Context
Open Books