Ana Tudor

@anatudor

Same me, another platform. Authentic Transylvanian vampire. I code stuff. Usually involves some Maths. I enjoy music mandatory religion classes warned me about. And other things that may kill me. Interaction usually restricted. anatudor.codeberg.page

71 Siguiendo5665 Seguidores3935 Publicaciones

Ko-fi Reddit Reddit YouTube Bluesky

trans

¿Es tu perfil?Reclámalo y anatudor.dirty.social es tuyo.Reclamar perfil

Ana Tudor@anatudor· 26d

The underwear is showing.

Error 503 when calling ?workflow=&actor=0&status=0&page=1&list_inner=true: <html><body><h1>503 Service Unavailable</h1> No server is available to handle this request. </body></html>

Ana Tudor@anatudor· 26d

"if I eat the weatherman, will it stop raining?" 🤔

Ana Tudor@anatudor· 26d

I also have custom blocking rules to hide stuff. Like recommendations and things like that. This is what YouTube looks like for me.

Ana Tudor@anatudor· 28d

Psst, don't rotate just the last one, it breaks things - see screenshot below.

Screenshot showing weird overlap that puts the bottom part of the second to last one above the last and the first items on the circle.

Ana Tudor@anatudor· Jul 12

❌ function "ass" not defined ... add! I meant add!!! 🤬

error message screenshot: function "ass" not defined

Ana Tudor@anatudor· Jul 9

Also made a couple more tweaks so the popover doesn't open outside the viewport (on the left side of the left edge) in the vertical RtL case. The magic: ``` nav { display: grid; align-content: start; block-size: 100% } ```

Screenshot. In the vertical RtL case, the nav bar is on the left of the viewport, so that the popover opening on its right doesn't go outside the viewport.

Ana Tudor@anatudor· Jul 9

The changes in the CSS & SVG fork codepen.io/thebabydino/... That illustration was from an old, old article css-tricks.com/tight-fittin... The arrow orientation I would solve it with a rotation variable based on lang attribute value.

Changes made to the CSS.

List items:
```
nav > ul > li {
/* REMOVE this */
display: flex;
align-items: flex-start;
align-content: flex-start;
position: relative;
/* ADD this */
display: grid;
grid: auto/ 1fr auto;
}
```

Navigation links:
```
nav > ul > li > a {
/* ADD this */
grid-area: 1/ 1/ -1/ -1;
grid: subgrid/ subgrid;
justify-content: center;
}
```

List item children:

```
nav > ul > li > * {
/* REMOVE this */
flex: 1 1 auto;
box-sizing: border-box;
/* ADD this */
display: grid;
}
```

Link pseudos (remove altogether):
```
/* REMOVE ALL THIS */
nav > ul > li > a[href]::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
```

Popover trigger buttons:
```
nav > ul a + button {
/* REMOVE this */
flex: 0 0 1em;
line-height: 0;
text-align: center;
padding-block-start: 0.7em;
padding-block-end: 0.5em;
padding-inline: 0.6em;
margin-block-start: 0.8em;
margin-inline-end: 1em;
margin-block-end: 0;
z-index: 1;
/* ADD this */
grid-area: 1/ 2;
padding: .6em;
margin: .8em;
}
```

SVG icon changes:

```
/* REPLACE this */
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" focusable="false" width=".75em" height=".75em" aria-hidden="true">
<path d="M70.3 13.8L40 66.3 9.7 13.8z"></path>
</svg>

/* with this */
<svg viewBox="-40 -40 80 80" focusable="false"
width=".75em" height=".75em" aria-hidden="true">
<path d="M0,40L34.64-20-34.64-20"/>
</svg>
```

nav > ul a + button svg {
/* ADD rotation here */
rotate: calc(var(--ini, 0deg) + var(--rot, 0deg));
}

nav > ul a + button:has(+ :popover-open) svg {
/* REMOVE transform */
transform: rotate(180deg);
/* ADD open state rotation */
--rot: .5turn
}

@media (prefers-reduced-motion: no-preference) {
nav > ul a + button svg {
/* REPLACE transform with rotate */
transition: rotate 0.25s ease-in;
}
}

[lang="ja"] {
/* ADD initial rotation value */
--ini: 90deg;
}

[lang="zh"] {
/* ADD initial rotation value */
--ini: 90deg;
}

Ana Tudor@anatudor· Jul 9

Well... this keeps repeating over and over... trying to connect, disconnected... over and over again...

Ana Tudor@anatudor· Jul 9

Also, a different strategy for the button triangle is probably needed - it doesn't point in the right direction in the case of vertical text, which is always going to be a problem with .svg/ images in general (and emojis). If still using a SVG anyway, use one that puts the triangle in the middle.

Equilateral triangle inside its circumcircle.

Ana Tudor@anatudor· Jul 9

Intel Corporation Wireless 7260

*-network
description: Wireless interface
product: Wireless 7260
vendor: Intel Corporation
physical id: 0
bus info: pci@eeee:07:00.0
logical name: wlp7so
version: 73
serial: Oc:8b:fd:7b:6a:7e
width: 64 bits
clock: 33MHz
capabilities: pm msi pciexpress bus master cap list ethernet physical wireless
configuration: broadcast=yes driver=iwlwifi driverversion=6.14.8-37-generic firmware=17.bfb58538.6 7260-17.ucode latency=0 link=no multicast=yes wireless=IEEE 862.11
resources: irq:32 memory:d1008000-d1001fff
*-network
description: Ethernet interface
product: AR8161 Gigabit Ethernet
vendor: Qualcomm Atheros
physical id: 0
bus info: pci@00e0:0d:00.0
logical name: enpl3se
version: 10
serial: 08:9e:01:ee:53:13
capacity: 1Gbit/s
width: 64 bits
clock: 33MHz
capabilities: pm pciexpress msi msix bus master cap list ethernet physical tp 16bt 10bt-fd 100bt 100bt-fd 1000bt-fd autonegotiation
configuration: autonegotiation=on broadcast=yes driver=alx driverversion=6.14.0-37-generic latency=0 link=no multicast=yes port=twisted pair
resources: irq:19 memory:d4500000-d453ffff ioport:3000(size=128)

Ana Tudor@anatudor· Jul 8

I don't have a smartphone. Managed to get a cable connection, doesn't work. 👇

Settings for enp13s0:
Supported ports: [ TP ]
Supported link modes: 10baseT/Half 10baseT/Full
100baseT/Half 100baseT/Full
1000baseT/Full
Supported pause frame use: Symmetric Receive-only
Supports auto-negotiation: Yes
Supported FEC modes: Not reported
Advertised link modes: 10baseT/Half 10baseT/Full
100baseT/Half 100baseT/Full
1000baseT/Full
Advertised pause frame use: Symmetric
Advertised auto-negotiation: Yes
Advertised FEC modes: Not reported
Speed: Unknown!
Duplex: Unknown! (255)
Auto-negotiation: on
Port: Twisted Pair
PHYAD: 0
Transceiver: internal
MDI-X: Unknown
Current message level: 0x000060e4 (24804)
link ifup rx_err tx_err hw wol
Link detected: no

Ana Tudor@anatudor· Jul 6

*I can* read it, but damn, somebody did not think this through... FYI, I have a setting forcing dark mode on all websites in case this looks different for you. A developer worth the pay *should* have tested for that. cc @zen-browser.app

Very poor contrast in the footer of the Zen Browser website.

Ana Tudor@anatudor· Jul 2

Help? How can I create a bootable USB? I downloaded balenaEtcher and tried to do the same as 1.5 years ago, except now nothing happens when I click Run. gist.github.com/thebabydino/... This used to work before.

Ana Tudor@anatudor· Jul 1

Compared to the mountains of crap I've seen, this is not bad, but you can get choppy results if you transition `padding`/ `font-size`. Yes, transitioning those is easier/ more straightforward, but modern CSS lets us to get the desired scale factor out of relative dimensions (not fixed pixel ones).

Ana Tudor@anatudor· Jul 1

This "tutorial" is 2025-dated... Screaming... you cannot possibly be this intellectually lazy. Most modern feature in that CSS: unprefixed box-sizing. Over a decade of cross-browser support. 2nd most modern: border-radius. Over 15 years of cross-browser support. px everywhere = fuck responsivity

Ana Tudor@anatudor· Jul 1

Asked here because search brought some serious atrocities my way... Whatever you do, don't do this... It can produce choppy animations. Fixed pixel heights = fuck responsivity. If all is !important, nothing is !important. And for the love of satan, stop putting prefixed versions last!

Don't do this:

```
/* shrinking header section */

.shrinker {
background: transparent;
height: (set your header height in pixels);
transition: all .2s linear!important;
-webkit-transition: all .2s linear!important;
-moz-transition: all .2s linear!important;
}

.shrinker.elementor-sticky--effects {
background: #fff;
height: (set your header height after shrinking in pixels)!important;
padding-top: 2px!important;
padding-bottom: 2px!important;
box-shadow: 0px 6px 30px -4px rgba(0,0,0,.05);
transition: all .2s linear!important;
-webkit-transition: all .2s linear!important;
-moz-transition: all .2s linear!important;
}
```

Ana Tudor@anatudor· Jun 30

Thunder & lightning have arrived, though no rain yet. It did feel... stuffy? in the city, especially on the side of the roads in the sun, so you could tell it was bound to happen. The seagulls are so noisy. The cats don't seem to give a crap, just lying on the warm roof... happiness is a warm butt!

Thermal disconfort will be extremely high. Maximum temperatures will be between 35 and 41 degrees and minimum temperatures, between 17 and 24 degrees.

Thunderstorms, severe squalls (70-90 km/h) and medium hail (2-4 cm). Water amounts will reach 25-40 mm and sparsely will exceed 50 mm.

Ana Tudor@anatudor· Jun 28

Is anyone else hitting this @codepen.io bug? There is no collab, it's a private demo I haven't shared with anyone, and I certainly haven't touched it on another device. There is no option other than Refresh, but if I click that, I lose all my unsaved changes.

Screenshot. Newer Version Found
While you were gone, we found a more recent version of this Pen saved to the server, likely from another device or Collaborator. Please refresh to see the latest content and avoid overwriting your changes.

Ana Tudor@anatudor· Jun 27

Stupid #CSS question: I've used: ``` font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; ``` developer.mozilla.org/en-US/docs/W... theosoti.com/short/tabula... Why are my times still not aligned nicely? The font is Orbitron, if it even matters. Thanks!

Screenshot of result (times not aligned properly) and DevTools with the code.

Ana Tudor@anatudor· Jun 27

Strange what the 🧠 chooses to remember. Going down the stairs at Saturn with the album the day it came out. The warning seen later that day at the Nandu enclosure at the zoo. About them being thieves, stealing stuff like phones/ cameras. The 🦁 in Munich when seeing the tour. The choc I got then.

The warning at the Nandu enclosure, showing one of the birds with a phone.

Photo of the stage before the show in Munich.

Statue of a lion draped in the Bavarian flag and wearing Lederhosen at the Munich main train station.

38% cocoa milk chocolate bar by the Bavarian chocolate company Wildbach.

Ana Tudor@anatudor· Jun 26

I would just like to point out that "hotter than Hell" is a pretty normal occurrence for most of the world...

Weather forecast for Hell. Mostly rainy and mostly highs below 20°C.

Ana Tudor@anatudor· Jun 24

Save for the trip to see Kreator in April, this year has been a disaster. And now seeing Immolation in Vienna is the one thing I'm hanging on to keep me afloat this summer.

Poster listing the Immolation shows across Europe - their Summer Descent 2026 run of shows:

24.07 - Freißenbüttel, DE - Burning Q Festival
25.07 - Steenwijk, NL - Stonehenge Festival
27.07 - Tolmin, SI - Tolminator Festival
29.07 - Brasov, RO - Rockstadt Extreme Festival
30.07 - Mátra-Sástó, HU - Fekete Zaj Festival
31.07 - Vienna, AT - Viper Room

01.08 - Dortmund, DE - Dortmund Deathfest
02.08 - Malmö, SE - Malmö Massacre
04.08 - Hamburg, DE - Bambi Galore
05.08 - Dresden, DE - Chemiefabrik
06.08 - Jaromer, CZ - Brutal Assault Festival
08.08 - Kortrijk, BE - Alcatraz Festival

Ana Tudor@anatudor· Jun 23

nitter.net/anatudor/sta...

Screenshot of the linked tweets.

Surprisingly difficult things in life: opening a window with a panicky sparrow flying into everything and everyone in the room and then convincing said sparrow to exit through the open window.

Nobody knows when and how it got in.

So... based on the trail of shit, it appears it came through the kitchen (not my room!), hallway, living room. So not my fault, but roomie says it is because... the sparrow must be my friend, there's shit all over her trousers, but none on my Kreator shirt hanging next to them...

Ana Tudor@anatudor· Jun 21

Stupid Hugo question: is there an equivalent of the JS indexOf? Got a structure like 👇 and given a bucket/ item link, I want to get that bucket/ item, as well as the index so I can link to prev/ next bucket/ item. Can do {{ $bmatch := where $buckets "link" "bucket-2-link" }} but the index? Thx!

[
{
"link": "bucket-1-link",
"list": [
{
"link": "item-a-link",
"data": {},
"sort": 7
},
{
"link": "item-a-link",
"data": {},
"sort": 13
}
],
"sort": 7
},
{
"link": "bucket-2-link",
"list": [
{
"link": "item-c-link",
"data": {},
"sort": 19
},
{
"link": "item-c-link",
"data": {},
"sort": 23
}
],
"sort": 19
}
]

Ana Tudor@anatudor· Jun 21

I had just done that and was coming back to post it worked!

Ana Tudor@anatudor· Jun 20

On #CSS #grid #layout and how to simplify it: www.reddit.com/r/css/commen...

A simple grid layout with the DevTools grid overlay on top.

There is a header at the top, a banner underneath it and a footer at the bottom - all of these span both grid columns.

In the middle, there are two nav elements in the left sidebar, each occupying a single row on the first column and a main on the right, occupying two rows on the second (and final) column.

Ana Tudor@anatudor· Jun 18

Came across another one. It's maddening when they ask for comments or to click some links, all these engagement tricks just so they make the code available... My demo is publicly available on CodePen.

Screenshot of yet another channel passing off my work as theirs.

Ana Tudor@anatudor· Jun 18

Individual transform functions are well supported now, `transform: rotate(180deg)` can be just `rotate: .5turn` for example. You can have real punch through transparency with a simple SVG filter - that is, you don't depend on blending, can use any colours you wish. stackoverflow.com/a/78548682/1...

Screenshot of CanIUse page for individual transform properties (like rotate). It says:

"Since August 2022, this feature works across the latest devices and major browser versions"

Screenshot of the code and result in my linked SO solution to the question of punch through transparency.

Ana Tudor@anatudor· Jun 18

I have a few more tricks to share 🤭 `inset: 0` instead of setting top, left, width, height bsky.app/profile/anat... transform-origin: center or transform-origin: 50% is unnecessary, both produce the default result (you also have transform-origin: 50 in one place which is just broken and ignored)

The part in the code I was referring to:

#paper-filter {
position: absolute;
width: 100vw;
height: 100%;
left: 0px;
top: 0px;
}

The code I meant:

.hero-ctas a {
transform: rotate(2deg);
transform-origin: center;
}

The code I meant, where transform-origin has an invalid value of 50.

Ana Tudor@anatudor· Jun 18

I use `clamp()` to make fonts scale with the viewport all the time and I've needed sideways text quite a few times - see bsky.app/profile/anat... You can see an example of it in this tabs demo codepen.io/thebabydino/... - the text scales with the viewport and the tabs are sideways.