User talk:Wauteurz/common.css/Comparison

Provided are screenshots on either side of the page. All screenshots on the right and bottom use User:Wauteurz/common.css as it was on December 1st, 15:00 CET. All screenshots on the left and top are unmodified, and are as any non-logged-in user would see them at that same point in time.

Realignment

(1) The top of Belgian coast by tram.

(2) The bottom of Belgian coast by tram.

(3) The Main page.

Relevant screenshots: 1, 2, 3.

This set of modifications has been made to have skin elements take up less valuable on-screen real estate, and less importantly so, to make the menus easier to navigate by improving their legibility. Their effect in Vector 2022's wide mode is not as notable as in its standard mode, but it is still relatively easily spotted.

Relevant differences

• The white spaces on the side of the overall layout have been reduced.
• The white spaces on the top of the layout have been reduced.
• Sticky sidebars have been re-configured to not extend beyond the visible area when the page loads.

  By default, Vector 2022 pushes the bottom two options in long pinned sidebars outside of the user's view until they scroll all the way down in the article. This change foregoes that by making sure the entirety of the bar is within the visible area.

• Sidebar content has been compacted by reducing the line height (vertical distance between items in the sidebar).
• For the sake of legibility and navigations of the sidebars, the subheadings in the sidebars (Get involved, General, Print/export, In other projects) have been made bold.
• The (blanked) page title line has been given a consistent height across the website, and the first line on each of the sidebars (under 'Main menu' and 'Tools') has been aligned with it.
• The footer has been made significantly smaller.
• Relevant articles have been made somewhat smaller, and capitalisation has been forced on the first letter of their title (article name) and description.
• On the main page, the elements of the world map part ("Welcome to Wikivoyage...") have been forced to be a specific size. Vector 2022's changeable font size blew this part of the page out of proportions that it wasn't legible any more.

Pagebanner fixes

(4) An example pagebanner with all common icons.

Relevant screenshots: 1, 4.

Vector 2022 has the tendency to force Pagebanners into proportions they're not supposed to take. Awaiting a definitive fix from the team behind the extension in question, this changeset features a straight-forward stopgap solution courtesy of User:ButteBag. It is assumed that once the Pagebanner extension is fully updated (of which there currently isn't an ETA for as far as I know), this change will not be needed any longer.

Relevant differences

• The pagebanner has been set to a minimum height of 180 pixels.
• The pagebanner has been set to at least render a 5:1 version of the defined pagebanner.
• The separation dots in the pagebanner's TOC do not get underlined the way a link would.

Optional navigation and legibility

(5) The table of contents. Due to #Realignment, the modified version has more of the page's length available to it.

(6) The user menu. The clock is a personal add-on, and not added or removed through this stylesheet.

Relevant screenshot: 5, 6.

This set of changes reconfigures some Discussion Tools elements in the TOC to improve legibility, and to apply a flourish of Wikivoyage branding.

Relevant differences

Note: The padding on the left side in these screenshots is different due to #Realignment.

• The subtext within the table of contents, which shows the amount of comments in a topic/thread, has been made smaller and has been italicised as to make the table of contents more easily navigable.
• Some elements on the website have been made invisible:
  • "Rendered by Parsoid"-label — Ate into article space and occasionally overlapped with content. The thought being that this information doesn't matter to most readers.
  • Special:Upload — Local file uploads are discouraged. The thought here is that only advanced users would upload files locally, and they would know where to find this special page.
  • RealTime Recent Changes (RTRC) — This functionality has been put into Special:Recent changes and the tool is no longer needed.
• The log-out button has been made red and bold, and has been offset downwards slightly, all to set it apart more.

Recolouring and branding

(7) The sticky header bar.

Relevant screenshots: 4, 5, 7.

These changes serve to make Vector 2022 look a bit less bland, adding accent colours to some elements.

Relevant differences

• Made the colouring of the interlanguage selector consistent between the normal header bar, and its sticky variant.
• The watchlist-star has been made gold. The thought here being that adding a page to your watchlist is significant, or at least makes that page somewhat significant. The feature therefore lends itself well to getting a dash of colour.
• The arrow, which can be clicked to show subtopics within a discussion, has been replaced with a singular compass arrow as featured in the Wikivoyage logo.
• The pagebanner icons have been made consistent with Vector 2022's icon set, and have all been made white.

  From left to right in comparison 4, the displayed icons are: UNESCO-listed, star-status article, Off the Beaten Path, Destination of the Month, and Featured Travel Topic.