en.javascript.info
en.javascript.info copied to clipboard
Page styling
First off: 100 and 1 thanks for the awesome work.
Some thoughts on the page rendering.
- Show visited links in a different color. a. It helps navigation, memory re-calls etc.
- Keep site toolbar visible at all times. a. One have a quick link to the front-page without having to scroll to top. b. The search is readily available.
- Display list items on front page as
block
a. As it is now items overflowing get a quirked rendering by one list item being "appended" to the next column and partially overlay the next item. I.e. like pt 3.2 here:(I have custom color on visited links in image) With custom CSS forcing block view:
I use a custom style-sheet with Stylus to fix this but some of it might be worth a thought for general design / options.
a:visited {
color: #955;
}
.frontpage-content .list-sub__item {
display: block;
}
.sitetoolbar {
position: sticky;
top: 0;
}
Thanks for your ideas, see the comments below:
- We are thinking about better progress tracking, colour for visited links is just a part of it. We use different colour in the site map already and might port this to the homepage as well.
- Currently we save the state of the sidebar, so if you want to have it visible all the time, you can just expand it and leave it as is. At the same time it provides some level of flexibility for people with smaller screens.
- I can't reproduce the issue with 3.2. @GSemikozov what do you think?
Thanks for feedback.
- I meant the top-bar (i.e. the one with link to front-page / index + search). It's surely different how people uses the site. Personally I jump a lot around and sometimes go back and forth. Hence the index / front is good. But only a thought.
- I checked the issue with long topics wrapping to next line on front-page (E.g. 3.2 under Browser: Document, Events, Interfaces) again, and it is till wrapping.
Linux / Firefox v102 (Developer edition) also tested with v99 and same issue there.
Also tested with Vivaldi, and it renders fine, so looks like either a Firefox bug / quirk or that they have some difference of opinion on how the rendering is to be done.
Anyhow: from testing. It is the <li>
elements: <li class="list-sub__item">
which have class:
/* Inactive ones due to compatibility removed */
.frontpage-content .list-sub__item {
counter-increment : b;
break-inside : avoid;
margin : 0;
display : flex;
}
The wrapping disappear if I change display or overflow. For example:
-
display
set toinline-flex
,block
,inline-block
instead offlex
or - Add either of:
overflow
,overflow-x
,overflow-y
with eitherauto
orhidden
Also if I set height to a fixed height that is a few pixels higher then the one "given" by the layout engine.