« previous next »
Pages: [1]   Go Down

Author Topic: Stupid CSS  (Read 5223 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: 8217
  • 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
Logged



Offline Xeda112358

  • they/them
  • Moderator
  • LV12 Extreme Poster (Next: 5000)
  • ************
  • Posts: 4704
  • Rating: +719/-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
Logged

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6266
  • 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?
Logged
/e

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Stupid CSS
« Reply #3 on: September 28, 2020, 05:36:29 pm »
Quote from: Eeems 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.

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.

Quote from: Eeems on September 28, 2020, 05:31:11 pm
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.

Quote from: Eeems on September 28, 2020, 05:31:11 pm
Did you write them directly in CSS or are you using something like SASS?
Directly in CSS :)
Logged



Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6266
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: Stupid CSS
« Reply #4 on: September 28, 2020, 05:48:08 pm »
Quote from: Deep Toaster on September 28, 2020, 05:36:29 pm
Quote from: Eeems 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.

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.

Quote from: Deep Toaster on September 28, 2020, 05:36:29 pm
Quote from: Eeems on September 28, 2020, 05:31:11 pm
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.

Quote from: Deep Toaster on September 28, 2020, 05:36:29 pm
Quote from: Eeems on September 28, 2020, 05:31:11 pm
Did you write them directly in CSS or are you using something like SASS?
Directly in CSS :)
Oof :(
Logged
/e

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Stupid CSS
« Reply #5 on: September 28, 2020, 08:37:38 pm »
Quote from: Eeems on September 28, 2020, 05:48:08 pm
Quote from: Deep Toaster on September 28, 2020, 05:36:29 pm
Quote from: Eeems 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.
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.
Quote from: Eeems on September 28, 2020, 05:48:08 pm
Quote from: Deep Toaster on September 28, 2020, 05:36:29 pm
Quote from: Eeems on September 28, 2020, 05:31:11 pm
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 »
Logged



Pages: [1]   Go Up
« previous next »