BLUE
Login
PostsUsersHashtags
ATanatudor.bsky.social

#CSS horror story found on an actual website. Doesn't even work as intended! I only inspected and traced the styles of a single button (well, `a.button`), but don't think the rest is better. Sass isn't dead. Custom properties are great, overusing them to make a big mess of things isn't.

A lot of redundant CSS that doesn't even work as it seems it was intended. There's both a `.btn` and a `.button` class, the same list of selectors includes both `.button` and `a.button`, some CSS variables are set to others that aren't set anywhere, other CSS variables are never used, a bunch of properties are set to their defaults which nothing else overrides, a `border-color` is set to `transparent` and then changed on `:hover` should make the element expand then, but the `background` is behind and nothing happens visually as the `border-color` on `:hover` and nothing changes visually. Some properties don't work, a bunch of properties would have a `transition`, except none of those listed changes on any state change and the only property that does change on `:hover` isn't listed there. Also, some properties are set on `:hover` to the same values they had in the normal state, evn if in one instance using a custom property and in the other the actual custom property value. Oh, and there's no `:focus` state.
My fix for it. ``` /* there, I fixed it! * this produces the EXACT same visual result in the normal state * plus it actually has a transition on :hover * and :focus too, as original had no :focus styles at all*/ $hlc: #E30613; /* highlight */ $bw: 4px; /* border-width */ button.link, .button { --hov: 0; display: block; outline: solid calc(var(--hov)*#{$bw}) rgba($hlc, var(--hov)); /* included the border-width in vertical padding computation */ padding: calc(.602rem + #{$bw}) 2rem; background: $hlc; color: #fff; font: 1.1rem/ 1.27 open sans, helvetica neue, arial, sans-serif; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; -webkit-user-select: none; user-select: none; transition: .25s ease-in-out; /* 1.5s is waaay too slow */ /* the properties that actually change */ transition-property: outline-color, outline-width; } :is(button.link, .button):is(:hover, :focus) { --hov: 1 } ```
1
Ppupperpotamus.bsky.social

it 8nt evn gud txt spk, sk8r dsnt evn need th e + its thx not thnks lol

1
Hhopefullyme.bsky.social

The lady who's training me might end up being a good friend evn though i'm techincally her supervisor XD we did a double hi-5 today and it was so cute of us

1
Lpandainlingerie.bsky.social

Living alone as a 5'2" permanently exhaustd by trauma Autistic orphan woman under White Allistic Supremacist Patriarchy is a minus 2 out of 10 exp. Still, better > living w an NPD/sociopath/psychopath, which is a minus 6,000 out of 10. My 🔥⚠️ beeping low 🔋02:44 BST, n I can't reach it, evn on a 🪑. 🙃

2
NORF-Niederoesterreich.orfodon.org.ap.brid.gy

Die Reblaus hat es vor 150 Jahren zerstört, jetzt wurde es wiederentdeckt: das Weinbaugebiet in Klein-Pöchlarn (Bezirk Melk). Ein pensionierter EVN-Techniker züchtet dort die Uralt-Rebe „Heunisch“, die er durch Zufall fand. Das Projekt wird wissenschaftlich begleitet […]

0
NORF-Niederoesterreich.orfodon.org.ap.brid.gy

Die Reparatur der EVN-Müllverbrennungsanlage in Dürnrohr (Bezirk Tulln) wird noch Wochen dauern. Bis Weihnachten soll die Anlage spätestens wieder funktionstüchtig sein, heißt es. Die Rede ist von einem Schaden im niedrigen zweistelligen Millionenbereich. https://noe.orf.at/stories/3275945/ […]

0
Bbelakashiyama.bsky.social

Chorei lendo as avaliações descritivas no EVN

3
Lpandainlingerie.bsky.social

Ew, that man must be old n delulu. I find older men fkn gross sxlly, on principle o the age gap = dangerous n hvin fk all in common = cringe. I get hrassd lots by men 10+ to 40+ yrs oldr n it makes me wanna ⚰️ em in slf-dfnce n 🤮. I look 7-13 yrs yngr, so, evn 🤮er o em. I like 1987-1997 men (I 1991).

a small pink pig is smiling at the camera while looking out of a window .
a small pink pig is smiling at the camera while looking out of a window .

Alt: Cute live action real baby pig resting head on desk, body under desk, to alleviate ick, as requested.

1
HomePopularExplore