Periodic Table

I wanted to draw a very "primitive" Win3.1 style icon set based on my favorite Periodic Table app from 1991. (screenshots below)
It looks now more like the inventory of a DOS strategy game but I can live with that. It also evolved into an interactive thingy.

Under construction. Clicking the buttons doesn't do much yet but it's satisfying :)

88x31px element buttons

Hopefully with not too many mistakes.
My pixel editor doesn't support text yet, so I had to hand-draw all the letters which was fun.

Of course I'm more excited for the rare/colorful ones:

But grey metals are rad too:

Created in Imagine(TM) Icon Editor in ClamshellOS.

Illustrations inspired by Periodic (Windows 3) by SMI Corp, 1991

Powered by: hyperfocus

My pixel drawing tool

Meet my home brew 16-color icon editor "Imagine"

It's basically oldschool Paint but with layers and filters.
It's currently buggy AF because I've implemented so many new features in a short time. But it's becoming extremely useful and I'm getting into pixel art like
never before.

The 16-color restriction is actually very useful, I have to think about the role of each color carefully.
The color palette can be changed but then corresponding image pixels change as well.

Making the interactive Periodic Table

The periodic table is an actual table html element. It's very easy to make rows and columns with it, unlike with fancy flex and grid layouts.
The table's cells are made to look like buttons using CSS.

This page uses no JS, it's only HTML and CSS.

Data display on hover

For displaying data on hover, I'm using the attr() CSS feature which can renders a html element's attributes as text on the screen
(optionally on hover): https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/attr
it's really useful for tooltips

The data is stored in each cell with this kind of syntax:

<td data-sign="H" data-name="Hydrogen" data-number="1"></td>

Since in reality it's a lot of data, I've constructed the table's html in a spreadsheet and then copied into my webpage's HTML:

You can also define CSS selectors based on HTML attribute values:

td[data-group="Halogen"]{
    color: lime;
}

Settings using radio button, checkbox (still no script!)

The settings are possible using the :has tag.

When you select choose between radio boxes: radio1 and radio2, the selection state can turn into CSS selectors:

.mycontainer:has(radio1:checked){ 
    (styling mycontainer and its children when radio1 is selected) 
}
.mycontainer:has(radio2:checked){ 
    (styling mycontainer and its children when radio2 is selected) 
}

Credits

Fonts

pixelated MS Sans Serif is taken from 98.css: https://jdan.github.io/98.css/

title font: Nimbus Roman No9 L (GPL license)

The OG Periodic.exe for Windows 3

I love the simple illustrations in this.

Piece of Osmium

I wanted to obtain a piece of Os because it's such a physical barrier of reality:
technology can progress but there will never be a denser stable material created
(only under extreme conditions). It's also just a rare and mysterious element.

Well it's a tiny bead but I can confirm it feels very heavy and dense :)
I can see a little bit of that famous dark bluish tint but it's very faint.

I can also confirm that it's very expensive.

USB for measure.

Btw as far as I know it's not dangerous in a bead form (I'm still ok)...
but stay away from Os in powder form!