li (implied)

@thricedotted

what now???

(th)ey
entangled.one/

"i have done a couple bad things"

number of years i have lived on this earth

over 30

li (implied)@thricedotted11/19/2022, 5:47 AM

fellas is it a CSS crime to user style da Heck outta your dashboard

(on one hand, yes it's extremely tame i didn't even do anything Fun. on the other, you would know the answer is "yes" if you could see my selectors and prolific use of !important)

You must log in to comment.

in reply to @thricedotted's post:

li (implied)@thricedotted11/19/2022, 5:48 AM

i said "yes" twice that doesn't even make sense.

oh great now i also need to style pages? man. dinky hambone

Natalie @nex311/19/2022, 5:48 AM

oh ho ho this is so fancy

li (implied)@thricedotted11/19/2022, 6:02 AM

getting to this comment has made me cognizant of the fact that the sidebar-as-toolbar disappears on... pages that don't have the sidebar. when i whip out the JS it's going to get REAL fancy

The Web's Dear Freja @VampireExpert11/19/2022, 5:50 AM

I did the same thing but worse! Nice. https://i.imgur.com/NJ9m8Q1.png

li (implied)@thricedotted11/19/2022, 6:01 AM

if you happen to be interested in less icons...

.container > .bg-sidebarBg:first-child a:where(
  :first-child,   /* home */
  :nth-child(7),  /* following */
  :nth-child(8),  /* followers */
  :nth-child(11)  /* help */
) {
  display: none;
}

so many things are broken now. can't see my bookmarked tags oops 🙃 it's great!!!

The Web's Dear Freja @VampireExpert11/19/2022, 2:36 PM

I learned about pseudo-classes today, thanks! nth-last-child instead makes it not get messed up when clicking the bookmarked tags button adds that list item, and I got a functioning tags list like this:

.bg-sidebarBg > ul {
    position: absolute;
    top: 50px;
    left: 60px;

    box-shadow: 0 4px 5px rgba(0,0,0,.14),0 1px 10px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.2);
    background-color: rgb(var(--color-sidebar-bg)/var(--tw-bg-opacity));
    padding: 0px 5px;
}

(box-shadow and background-color values being from the sidebar.)

Edit: Sick, I broke the comment page.

li (implied)@thricedotted11/19/2022, 5:46 PM

😈

i had another big brain moment where i realized attribute selectors would be an even better candidate for the sidebar icons! so i changed the a:where() part like so:

  a:where(
    [href$="/cohost.org/"],   /* home */
    [href$="/following"],     /* following */
    [href$="/followers"],     /* followers */
    [href="#"]:last-of-type             /* help */
  )

which will maybe be more resilient in case the menu items ever change order or new ones are added! (except that last one with the help button, that's still janky)

Pinned Tags