@cadey you may want to attach hack.css to the Conversation HTMLElement because I don't get the link style :<

@cadey New contrast looks good!

I'm sure you'll figure out a way to get those Xeact convo snippets happening without clientside JS; I could see just rendering the Xeact into HTML on the server but idk how much "pain and suffering" that would indeed introduce into your workflow lol.

Xeact does look interesting, I'd consider it for projects in for future projects if clientside JS seemed to be necessary :)

@nilix I'm trying to avoid adding node.js to my site's dependencies. node is suffering incarnate for building things with Nix.

@cadey Haha I understand that even nixOS aside! Node is just repellant to me in general :p Deno looks like an interesting alternative but I haven't had time to experiment with it.
@nilix @cadey

Actually I'm pretty sure you could do it in pure CSS with rules like

xeact-conv[name="Whoever"][mood="Whatever"]::before { content=url("portrait.png"); float: left; ...padding and whatever... } xeact-conv[name="Whoever"] p:first-child::before { content="<Name>" ..padding and whatever.. }

Just did some playing around in the web inspector and it seems to work more or less :P

@nilix Is there a way to dynamically generate the things on the fly for individual names and moods? I don't want to have to regenerate this every time for every single character and mood I add

@cadey I don't know if it's possible in the browser without javascript. FWIW I would probably just make a script or something to generate rules when you add new portraits to your assets.
@cadey Oh I guess attr() works in CSS, I thought it was only a JS thing. Looks like it's pretty flexible too, so it's a good way to propagate the info from the html attributes into the style. :)

@cadey you might be interested in web.dev/declarative-shadow-dom
tldr it lets you do this

<host-element>
<template shadowroot="open">
<slot></slot>
</template>
<h2>Light content</h2>
</host-element>

and element.getInnerHTML({includeShadowRoots: true})
so you can write out html with the web components baked in and let them render without js

Sign in to participate in the conversation
Manechat on Mastodon

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!