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 around the popover of the 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 Hover Popover (2/2)

Hover Information for @archive

Once I created the hover information feature for the Archive Tooling for Visual Studio Code , I thought why not making it for the 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 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 (2/2)

Day's Context
Open Books
Daft Punk - Epilogue (Touch) | Kaleidoscope Orchestra Daft Punk ft. Paul Williams - Touch (Music Video) Counterblast
Written byMaestro McLuhan
&Harley Parker
Creative SchoolsThe Grassroots Revolution That's Transforming Education
Written byKen Robinson
&Lou Aronica
Leonardo Da Vinci
Written byWalter Isaacson
Project Management for DummiesSecond Edition
Written byNick Graham
RachmaninoffComposer, Pianist, Conductor
Written byBarrie Martyn
Year 30, day 259 of Pouya's Life Archive Archive Archive Tooling for Visual Studio Code Archive Archive Archive Albert EinsteinKnown as Maestro Einstein Archive Alan Curtis KayKnown as Maestro Kay Kary MechanicsThe overarching physics of mind, media, and communication. It posits that all ideas are defined by other ideas, forming a vast, high-dimensional graph that shapes human cognition and culture. Stephen WolframKnown as Maestro Wolfram 28⟡297To Kill Math We Must Wire The Brain