tetrafelino

Óscar

@tetrafelino

20's
🇧🇷 brazilian 🇧🇷
brazumon tipo raro: sulista comunista
🇵🇸 from the river to the sea, palestine will be free 🇵🇸
mostly here just to keep up w tumblr peeps who migrated - more active on tumblr

log inask
prechoster for easy access
cloudwithlightning.net/random/chostin/prechoster
Marxists Internet Archive
www.marxists.org/
Piracy Megathreads
www.reddit.com/r/FREEMEDIAHECKYEAH/wiki/index/
rentry.co/megathread

posts from @tetrafelino tagged #formatting fun

also:
tetrafelino
@tetrafelino
omegastag
@omegastag
pearshapes
@pearshapes
werewolfbarista
@werewolfbarista asked:

how did u get your 88x31s to be side by side in your bio like that..............did you use a table or something :O ??

yes! so i explained this in a comment a while back but i'll post it for posterity (no pun intended)

this is pretty much how it's formatted (pure markdown):

~♥~|~♦~|~♣~|~♠~
--- | --- | --- | ----
![Hover text](Link to image) | [![Image](Link)](Link to site)

the first line is table headings which is automatically centred and bold which looks nice. you don't actually need it as far as i know - only the second line

the second line is a sort of marker that says "hey this is a table with this amount of cells" to the markdown interpreter. the amount of dashes i don't think matters, but the amount of pipes ( | ) does! it tells it how many columns you have. i use four since it fits the 88x31 buttons nicely with minimal squishing

the third is your actual content, which can be pretty dense admittedly. it can support however many cells u put at the second line separated by pipes. the first item is a basic markdown image; the second is an image with a clickable link! a few of my buttons are clickable, too - some unexpectedly so....!

also a little note afterthought: 88x31s work really well in 4-item rows because they don't resize. other images may be resized in ways that don't look right - it's worth experimenting with to see what works

hope this helps, thanx 4 the ask :]

@tetrafelino shared with:
tetrafelino
@tetrafelino
YellowAfterlife
@YellowAfterlife
YellowAfterlife
@YellowAfterlife

CSS crimes for an inline gallery (with a generator!)

First, let's see what you get.

Once upon a time, I stumbled upon ct.js, a game engine with a number of features and also a very pleasant-looking cat mascot. It also came to my attention that the SVG for the mascot is available on GitHub. Me being me, several minutes passed between me downloading the SVG file and getting an idea, and subsequent edits continued both to mine and friends' amusement.

An image of the ct.js mascot, a sort of blue blob-cat. It is smiling.
<
>
With power of Inkscape, the cat now is now holding a knife in its paw.
<
>
The cat now has two knives.
<
>
The cat is now holding a knife with its tail as well.
<
>
There is now a second, smaller cat, with its own knife. The knife is too big. The cat grips onto it with both of its little paws
<
>

And here's the generator: https://yal.cc/tools/cohost/gallery-generator/
You can download the page and mess with it as you may - it's written in plain ES6.
You can also export either plain HTML or HTML with classes for prechoster.

Here's it works:

After experimenting with anchor tricks I decided that I might, in fact, do something with the <details> tag for once. So I did:

The gallery is a <div> (surely enough) that has position: relative and overflow: hidden (just in case). The first image simply sits in the div and sets the overall dimensions+aspect ratio.

Then come the summary+details tricks:

The "next" button is the <summary>.

When you click it, we can display the next page on top of the container, but then we wouldn't be able to go back (which is only possible by clicking the button again), so the button needs to move.

The easiest way is to simply have something in the <details> that pushes the button away once expanded, so I've put it in the right-aligned container and added an invisible element that's button+spacing wide.

The "previous" button is then shown on top of summary-button, but remains click-through thanks to pointer-events: none.

Images with their own controls sections can be nested indefinitely, adding about 0.6KB of markup per layer.

Have fun!

@tetrafelino shared with:
 
Pinned Tags