Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Page styling #3041

Open
Nickwiz opened this issue Jun 7, 2022 · 2 comments
Open

Page styling #3041

Nickwiz opened this issue Jun 7, 2022 · 2 comments

Comments

@Nickwiz
Copy link

Nickwiz commented Jun 7, 2022

First off: 100 and 1 thanks for the awesome work.

Some thoughts on the page rendering.

  1. Show visited links in a different color.
    a. It helps navigation, memory re-calls etc.
  2. 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.
  3. 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:
    image
    (I have custom color on visited links in image)
    With custom CSS forcing block view:
    image

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;
}
@Bezart
Copy link
Collaborator

Bezart commented Jun 23, 2022

Thanks for your ideas, see the comments below:

  1. 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.
  2. 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.
  3. I can't reproduce the issue with 3.2. @GSemikozov what do you think?

@Nickwiz
Copy link
Author

Nickwiz commented Jun 27, 2022

Thanks for feedback.

  1. 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.

  1. 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 to inline-flex, block, inline-block instead of flex
    or
  • Add either of: overflow, overflow-x, overflow-y with either auto or hidden

Also if I set height to a fixed height that is a few pixels higher then the one "given" by the layout engine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants