[2022-08-04 Thu 10:04] : Random Geekery

[2022-08-04 Thu 10:04]

I tried visually replacing a few Logseq tags with icons in CSS. It worked!

Three down, a few thousand to go.

How’d I do it? Here I’ll just paste from my journal note figuring out the first one. I’m sure I’ll revisit this tonight after taking care of the day’s business.

#idea Thinking about custom tag icons for logseq
- #warning under construction #warning
- Inspired by Obsidian Alternate Checkboxes CSS snippet

Here’s what #idea looks like in the dev console:

Code Sample

    <div
    class=""
    style="display: inline;"
    data-tooltipped=""
    aria-describedby="tippy-tooltip-119"
    data-original-title="null"
><a
        data-ref="idea"
        class="tag">#idea</a></div>

#question how do my installed plugins change the structure?: I don’t think I currently have any plugins that alter element attributes

Set up CSS Selector #bookmark to match a.tag[data-ref="idea"]

Hide the displayed tag by making it tiny

Code Sample

    a.tag[data-ref="idea"] {
    border: none;
    font-size: 0;
}

Append an icon with the font size we started at

Code Sample

    a.tag[data-ref="idea"]:after {
    content: "💡";
    font-size: initial;
}

as-is, this has accessibility issues and font-size: initial won’t work with headings. Also, to do it right I should be encoding the icon

Activity Log

hackers.town: 2022-08-08 Mon 09:39

I feel like I’m better at “conversational infodump” than “giving a talk” so I did that instead.

I think it went well, but even if it didn’t, the context shift didn’t require much effort so I still have brain for the day’s tasks.