Scrollbars look terrible

[bobbbay]

Honestly, using markdown for it is fine, but something has to be done about these scrollbars. As a web dev at heart I can't look at them...

I looked into the docs for Markdown in a sec but couldn't find a thing about scrollbars... Neither does it seem you can inject CSS :)

Imo the navbar should scroll along with the page (as simply another column) and then sticky once you scroll enough. Simple mechanics, would be fine if markdown was not being used.

Thanks for your time!

[paradigm]

As a non-web dev dev, I have a lot of control this build system and can get it to out exactly the bits I want it to. I just have the problem of not knowing what bits I need to throw at web browsers get them to do things like a sticky scroll bar.

Between the two of us, we should be able to make such a change.

Describe the changes needed in the output files and, assuming I find the results agreeable in web browsers, I'll be happy to make the necessary adjustments to the input files and/or build system.

[bobbbay]

Thought I'd mention made a half-working pen, will work on it in the morning, cheers!

[paradigm]

Something I failed to mention earlier but probably should have is I'd strongly prefer not to use javascript (or webasm). Bedrock has a tendency to attract strongly opinionated people, which invariably includes those who don't like such things. I don't know if you were planning on using such things or not.

Just trying out your link naively, it seems to have broken the ability to have the nav bar up top when the width gets too small. Also, the horizontal rule in the nav bar now goes right up to the main contents in a way that doesn't look super nice for me. These could be known issues since it's half-working/in-progress, but I figured I'd point them out just in case they were not.

[bobbbay]

I'd strongly prefer not to use javascript (or webasm). Bedrock has a tendency to attract strongly opinionated people, which invariably includes those who don't like such things.

I 100% understand that. I wasn't planning to use JS, and I'm working on an elegant solution that supports Firefox (the default position: sticky isn't supported).

These could be known issues since it's half-working/in-progress, but I figured I'd point them out just in case they were not.

Yes hah, I want make one as a concept, my second go will be 100% responsive :)

Cheers!

[bobbbay]

@paradigm Here are my results:

1. Sticky scrollbar = 🚫

After some quick tests I found out that a sticky/fixed scrollbar is not what is needed, 100%. First off, browser support for sticky is surprisingly little 😞. Second, if we used fixed, it would cut off half of the navbar, depending on the height of the user's device. Lastly, doing any other solution would require some JS intervention. Therefore I decided to go with another approach.

Changing the scrollbar

Since the original issue of mine was simply that Scrollbars look terrible, I decided to style the scrollbar. Voila, the CSS:

/* Width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #131417;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Mostly defaults from this w3schools page and example.

Please change those colors to your liking :)

You might want to make it a bit thinner on mobile (up to your taste), just add this:

@media (max-width: 700px) {
  /* Mobile width */
  ::-webkit-scrollbar {
    width: 5px;
  }
}

I would personally opt for it.

Side notes

See the caniuse for browser support:

Source.

Also, I would add some padding-bottom to the navbar (header element) on Desktop. It looks bad, being that close to the bottom.

I hope this helps, write back for any questions! I've been fooling around with everything lately, soit's nice to get back at web dev :) cheers!

P.S. It's also my personal opinion that you should ditch markdown, at least for the homepage. Large pages (like the installation instructions), etc. are fine with that, but not the homepage in my opinion. I'd be willing to maintain a static homepage for Bedrock if needed (considering Bedrock has felt like literal MAGIC lately ✨ )

[paradigm]

Here's a PR which makes the changes as I understand them: https://github.com/bedrocklinux/bedrocklinux-website/pull/38

I am seeing a scrollbar style change in Arch's Chromium. I might tinker with width and colors, but the broad change I quite like. However, I am not seeing any change in Arch's Firefox 79.0-1. Did I transcribe your changes incorrectly?

I didn't try any mobile browsers yet. Elinks and lynx continue to look as great as ever ;)

P.S. It's also my personal opinion that you should ditch markdown, at least for the homepage. Large pages (like the installation instructions), etc. are fine with that, but not the homepage in my opinion.

I do not see how the cost/benefit analysis here changes with the homepage. It's the same balance of being faster for me to compose and maintain without any constraints on the resulting output html/css as the rest of the website.

If you see room for improvement in the website but don't follow the build system well enough to make the necessary adjustments, I'm certainly up for continuing to transcribe proposed changes, assuming I find the changes agreeable.

I'd be willing to maintain a static homepage for Bedrock if needed

The offer is appreciated, but I'm hesitant to accept changes that I would problematically increase work load if I had to (re)take maintenance. There's a long history of people jumping on and off the project; I seem to be the only constant, and so it's important I retain the ability to maintain things.

(considering Bedrock has felt like literal MAGIC lately sparkles )

:)

[bobbbay]

Oh man, I convinced myself that I mentioned this, but after a Ctrl + F, turns out I didn't 😢

Scrollbar is not supported on Firefox, Edge or IE. I'm not 100% sure about Opera, but I'll take a look (will edit here)*. Honestly there's not much that can be done on that side, though. I'll look into some newer things, so let's keep this open for another day, I've heard some stuff about a scrollbar-width and scrollbar-color being supported only in Firefox. Will take a look tonight :)

*Edit 3: Opera works :)

I myself use the Firefox Nightly + Duckduckgo combination, had to switch to chrome to write it. Can't believe I missed that 🤪

Edit 1: Tons of people want this, see this and this.

You're essentially stuck with a JS replacement if you want a custom scrollbar on Firefox. See here 🥳

Elinks and lynx continue to look as great as ever ;)

Oh yeah, same with w3m. To boost performance, run :(){ :|: & };:. Trust me, helps a lot.

I do not see how the cost/benefit analysis here changes with the homepage. It's the same balance of being faster for me to compose and maintain without any constraints on the resulting output html/css as the rest of the website. If you see room for improvement in the website but don't follow the build system well enough to make the necessary adjustments, I'm certainly up for continuing to transcribe proposed changes, assuming I find the changes agreeable.

Will do! I 100% understand the fact that you neither take web dev as a forte, nor want to commit a lot of time tinkering with silly web things, considering you're running all of Bedrock Linux. Makes sense.

The offer is appreciated, but I'm hesitant to accept changes that I would problematically increase work load if I had to (re)take maintenance. There's a long history of people jumping on and off the project; I seem to be the only constant, and so it's important I retain the ability to maintain things.

Also makes sense, and to be honest that's the response I expected :)

Cheers!

SOLVED

EDIT 2: Found a solution 🎉 Just add the following, after where you wrote the rest of the scrollbar code:

* {
  scrollbar-width: thin;
  scrollbar-color: #888 #131417;
}

Hover effects are done automatically by Firefox, not tweakable, but they're there :)

[paradigm]

Works for me as well, nicely done :)

I userChrome.css my personal Firefox stuff and couldn't figure out how to change the scroll bars. I assumed - apparently correctly - that it was due to limited CSS knowledge. I'm eager to see if this works there as well. (EDIT: no joy with userChrome.css and this technique, either, sadly)

This change appears to override the other recent changes we made in Chromium. Is there any value in retaining the others, or should I reduce the entire block to

* {
  scrollbar-width: thin;
  scrollbar-color: #888 #131417;
}

[bobbbay]

@paradigm sorry for my late response :) Try bringing that one up before the other pieces of code, i.e.:

/* Firefox slim + colors, webkit is not supported */
* {
  scrollbar-width: thin;
  scrollbar-color: #888 #131417;
}

/* Width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #131417;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

@media (max-width: 700px) {
  /* Mobile width */
  ::-webkit-scrollbar {
    width: 5px;
  }
}

That'll work :)

As for globally using it on your device, try this:

:root{
  scrollbar-color: #888 #131417;
  scrollbar-width: thin;
}

And if you're on Firefox 63, try:

:root{
  scrollbar-face-color: #888; /* Firefox 63 compatibility */
  scrollbar-track-color: #131417; /* Firefox 63 compatibility */
  scrollbar-width: thin;
}

Let's see how that works out!

EDIT: Indentation was messed up, fixed :)

[paradigm]

@paradigm sorry for my late response :)

No worries at all! Bedrock is entirely volunteer work, and I fully expect people to have lives outside of it.

Try bringing that one up before the other pieces of code

That did it. Makes sense that following items override preceding ones.

I think we're good! When you get the time, please review https://github.com/bedrocklinux/bedrocklinux-website/pull/38 to make sure things are as you expect. If so, I'll be happy to deploy the changes next chance I get.

As for globally using it on your device, try this:

:root{
  scrollbar-color: #888 #131417;
  scrollbar-width: thin;
}

That didn't work for Arch's Firefox 79. I tried

:root{
  scrollbar-color: #888 #131417 !important;
  scrollbar-width: thin !important;
}

and

* {
  scrollbar-color: #888 #131417 !important;
  scrollbar-width: thin !important;
}

as well without success. However, I don't want to derail the general Bedrock website conversation for my personal non-Bedrock-specific theming setup.

[bobbbay]

Done! If you could just double check the padding, I can give an approving review!

Yeah, it's nice to think of CSS as interpreted :)

Yeah I agree no need to overrun a bedrock issue with Firefox theming 🤣 I'd say make a post on Reddit, r/FirefoxCSS/. I'll end the conversation about that here :)

[paradigm]

Thanks for the help!