Hackathon du Libre (Suite)

https://mobilizon.fr/events/3e7deaa1-09e9-42dc-b84a-b7ed575cd6e7

Hackathon du Libre : Static And Responsive Site Generator (Suite)

https://mobilizon.fr/events/b985a672-7515-41f9-857a-1cf3405c7a36

Is the ordering of attribute values ever semantically or logically important.

For example, is there ever a practical difference between:

`<p class="a b">`
and
`<p class="b a">`

My dream list styles aren&#39;t allowed (https://ellyloel.com/my-dream-list-styles-arent-allowed/)

Why I the web.

WebTUI is a modular #CSS library that brings the beauty of Terminal UIs to the browser.

https://webtui.ironclad.sh/

WebTUI – A CSS Library That Brings the Beauty of Terminal UIs to the Browser

Link: https://webtui.ironclad.sh
Discussion: https://news.ycombinator.com/item?id=43668250

https://StreamGrid.link

#UI
#UX
#CSS
#Web
#Dark
#Code
#Form
#HTML
#Color
#Reset
#Design
#Theming
#Frontend
#WebDev
#Customization

Some nice #SVG tricks. Animated "Knight Rider" bars, table of contents tweaks, and more.

https://fuma-nama.vercel.app/blog/svg-art

I've had a statuslog section on my now page (https://reillyspitzfaden.com/now/) for a while, and I added it to my homepage as well (https://reillyspitzfaden.com/#homepageStatus).

The especially nice part is that I now have a script (https://github.com/reillypascal/personalsite-ssg/blob/main/status) so I can simply type `./status` in the terminal, write the status text in the resulting .md file that pops open, and then commit/push!

I've seen some IndieWeb people (e.g., @binarydigit) do something similar via one of omg.lol's tools (https://home.omg.lol/info/statuslog) and liked it, but I wanted to see if I could DIY it just for the heck of it. Very happy with how easy the result is!

Holographic Masks via @kerrick https://lobste.rs/s/xgbs35 #css
https://codepen.io/HejChristian/full/YPzLbYX

Charts.css

Link: https://chartscss.org/
Discussion: https://news.ycombinator.com/item?id=43663880

Default styles for h1 elements are changing

https://developer.mozilla.org/en-US/blog/h1-element-styles/

Discussions: https://discu.eu/q/https://developer.mozilla.org/en-US/blog/h1-element-styles/

#Development #Introductions
Custom CSS functions in the browser · Start to experiment with author-defined functions https://ilo.im/163a5h

_____
#ModernCSS #Prototype #CssFunctions #CustomProperties #Chromium #Browser #WebDev #Frontend #CSS

CSS Powered Componentry: "New #CSS features help us in all sorts of different ways, but here we’re going to look at them when they power a specific type of component, or make a type of component newly possible with less or no JavaScript." https://blog.codepen.io/2025/03/31/chris-corner-css-powered-componentry/

a:focus-visible {
outline-offset: 0.25em;
outline-width: 0.25em;
outline-color: currentColor;
}
…makes any website better. #CSS https://adactio.com/notes/21812

Two years later and I’m still nodding my head to “I no longer understand prefers-contrast”:
https://kilianvalkhof.com/2023/css-html/i-no-longer-understand-prefers-contrast/

Not getting much help looking at CSSWG issues:
https://github.com/w3c/csswg-drafts/issues/?q=is%3Aissue%20state%3Aopen%20prefers-contrast%20label%3Amediaqueries-5

So, dear lazyweb and owing to deadlines, anyone got a good example / resource?

New Kitten feature: Icons!

You can now make use of a subset of the icons in the Phosphor icons set by @minoraxis and @rektdeckard.

https://kitten.small-web.org/reference/#icons

Search through them in your editor by referencing `kitten.icons.categories` and `kitten.icons.tags`.

Add this to a file called index.page.js and run `kitten` to see a large duotone pink cat (because why not?):

export default function () {
return kitten.html`
<${kitten.icons.c.Cat}
size=40%
weight=duotone
colour=deeppink
/>
`
}

(And yes, the set includes icons for the fediverse. This one of the reasons I chose it.) ;)

Enjoy!

There is a flag for container style queries in Firefox!

I repeat, there is a flag in Firefox!

You just need to switch it to true!

Thanks, @nicolaschevobbe!