Giters

seed-rs / seed-rs.org

Seed's official website

Home Page:https://seed-rs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dark mode showing white bg on scroll

allan2 opened this issue · comments

commented

Originally opened at seed-rs/seed#610

During scrolling in dark mode, the white background is visible at the bottom. Once the scroll stops, it disappears. It's like a flicker during scroll only.

Its only at the top part of the page. Scrolling down more doesn't show any white.

On both Google Chrome and Firefox on Android.

Screenshot captured during scroll with finger on the screen

commented

There were two goals when I was writing seed-rs.org:

  1. The previous website was unusable. I had to resolve it quickly but I didn't have time to design and write something fancy and without any bugs. However it had to be written in Seed to demonstrate that it's possible to write a larger app with good SEO in Seed.
  2. I had to write a larger Seed app to test how new Seed API works and resolve bugs and badly designed API along the way.

So:

  • The website design is basically a rewritten free template for TailwindCSS.
  • The dark mode is just a click-through layer on the top of the page with a filter. That's why you see that white stripe - (mobile) browser doesn't respect height: 100% during the scroll so the filter layer doesn't cover the whole screen.
  • The white flash while the app is loading is caused by a prerendered HTML with a light theme. Then the app is initiated and the page is rerendered with the correct theme according to the user settings.
  • Some browsers accidentally show too big Seed logos because a Webpack plugin or a prerendering JS pipeline changes HTML a bit.

I think the best solution would be to migrate on a platform for writing docs like Docusaurus or even a CMS. It would also make contributing much easier.

What do you think?

commented

That's a good idea. It would be cool to have docs built in Seed but Seed isn't an SSG and I'm not sure how up-to-date Seed webpack is.

No complaints with Docusaurus here.

I think you've got something good going on with Rust-tooled templating and Rust-tooled styling. I'm keen to contribute to the docs to help grow the project.

commented

I'm keen to contribute to the docs to help grow the project.

Awesome!
seed-rs.org guides are written in MD (https://github.com/seed-rs/seed-rs.org/tree/master/crate/guides) so I hope it won't be too hard to migrate from Seed + Webpack to a real SSG. So if you want to help with docs, you can try to migrate it to a SSG like Docusaurus or VuePress or Gatsby or Zola or another one. Don't hesitate to write me on Discord when you need something of course.

P.S.
I'm not using the Webpack template in my client projects now so I don't really know now how up-to-date is it.