Author Topic: Stupid CSS  (Read 307 times)

0 Members and 1 Guest are viewing this topic.

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8209
  • Rating: +758/-15
    • View Profile
    • ClrHome
Stupid CSS
« on: September 28, 2020, 04:58:50 pm »
Just wanted to show off a horrifying project I've been working on for fun:
https://fishbotwilleatyou.com/css/

I'm still working on the last two demos and making it more responsive for tall-screen/mobile users, but you get the idea—it's a collection of really stupid things that are technically possible in nothing but HTML and CSS.
Demos that exist:
  • Double-click handler
  • File browser
  • Modal dialog
  • An arcade reaction game
Demos that I'm working on:
  • A text adventure game
  • A clock of some sort




Offline Xeda112358

  • they/them
  • Moderator
  • LV12 Extreme Poster (Next: 5000)
  • ************
  • Posts: 4657
  • Rating: +718/-6
  • Calc-u-lator, do doo doo do do do.
    • View Profile
Re: Stupid CSS
« Reply #1 on: September 28, 2020, 05:27:49 pm »
That is really freaking cool :0

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6207
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: Stupid CSS
« Reply #2 on: September 28, 2020, 05:31:11 pm »
Small bug with the file browser. You can open and then immediately close it by double-clicking on the button. It looks like input isn't properly being masked when it's open.

I'd be interested to compare power consumption of those demos implemented in JavaScript. Did you write them directly in CSS or are you using something like SASS?
/e

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8209
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Stupid CSS
« Reply #3 on: September 28, 2020, 05:36:29 pm »
Small bug with the file browser. You can open and then immediately close it by double-clicking on the button. It looks like input isn't properly being masked when it's open.

What's being opened and closed? If you're opening a first child directory (in the middle section), you might be hitting the .. that shows up right after.

I'd be interested to compare power consumption of those demos implemented in JavaScript.

Someone else also suggested doing that. It'd definitely be interesting to see but I'm lazy :( I'd bet it's a lot lighter than an equivalent React app.

Did you write them directly in CSS or are you using something like SASS?
Directly in CSS :)




Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6207
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: Stupid CSS
« Reply #4 on: September 28, 2020, 05:48:08 pm »
Small bug with the file browser. You can open and then immediately close it by double-clicking on the button. It looks like input isn't properly being masked when it's open.

What's being opened and closed? If you're opening a first child directory (in the middle section), you might be hitting the .. that shows up right after.

Whoops, meant to say dialog not browser. Upon further review, it looks like the bug actually is that if you click and drag the dialog wont close even though the click starts and ends in an area that should close the dialog.

I'd be interested to compare power consumption of those demos implemented in JavaScript.

Someone else also suggested doing that. It'd definitely be interesting to see but I'm lazy :( I'd bet it's a lot lighter than an equivalent React app.
I would suggest comparing against a native JavaScript and a React app if you do compare.

Did you write them directly in CSS or are you using something like SASS?
Directly in CSS :)
Oof :(
/e

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8209
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Stupid CSS
« Reply #5 on: September 28, 2020, 08:37:38 pm »
Small bug with the file browser. You can open and then immediately close it by double-clicking on the button. It looks like input isn't properly being masked when it's open.
What's being opened and closed? If you're opening a first child directory (in the middle section), you might be hitting the .. that shows up right after.
Whoops, meant to say dialog not browser. Upon further review, it looks like the bug actually is that if you click and drag the dialog wont close even though the click starts and ends in an area that should close the dialog.
Oh gotcha. Yeah, it's intentional that the modal closes when you click in the shade. Maybe there's an issue with dragging tho.
Did you write them directly in CSS or are you using something like SASS?
Directly in CSS :)
Oof :(
A good amount of the CSS for the Whac-A-Mole game (including the randomized position animation) is generated from a Python script.
« Last Edit: September 28, 2020, 08:57:22 pm by Deep Toaster »