I'm not a fan of persistent chrome in apps, especially on mobile. I don't like having screen space taken and chrome distracts me from reading the actual content. While I can and do use extensions on desktop to get rid of the bar, Chrome for Android doesn't support extensions so I'm stuck with the bar.
My proposal is that Dev.to introduce CSS variables to control the position of the interaction bar. CSS variables, or custom properties, are set in a ::root
rule and always begin with --
.
::root {
--interaction-bar-position: fixed;
}
Their value can be any valid CSS value. To use the variable, use the var
function.
.container .article-actions {
position: var(--interaction-bar-position);
}
Then override the variable only in specific rules.
.container .article-actions.relative {
--interaction-bar-position: relative;
}
And that's it. By default, the interaction bar will be fixed at the bottom. A simple checkbox in settings could control the presence of the relative
class on the article-actions
element.
Here's the complete CSS.
::root {
--interaction-bar-position: fixed;
}
.container .article-actions.relative {
--interaction-bar-position: relative;
}
.container .article-actions {
position: var(--interaction-bar-position);
}
Top comments (3)
Have you tried adding it as PR ?
github.com/thepracticaldev/dev.to
Thanks! If I get some free time, I'll submit it
Just fork it, make your changes you posted here . and submit it :)