cygwin-htdocs: website fresh coat of paint

johnhaugabook@gmail.com johnhaugabook@gmail.com
Fri Apr 17 05:57:06 GMT 2026


Attached are several patches that update the site's UI/UX. As a whole, this is a fresh coat of paint for the website. For a full demonstration of all the patches applied to the site, see this support repo:

https://github.com/jhauga/cygwin-htdocs

For the debatably controversial patches, I added nested links to UX/UI research in support of the "whys".
This mostly consists of links to UX/UI studies, and the research takeaways.

Apart from that the nestetd list items are the corresponding patch name, or additional info.

Changes include:

- Clean style.css, making consitent formatting
  - clean-style.css.patch
- Fixed menu position
  - fixed-menu-position.patch
- Logo added to top.html
  - add-logo-to-top.html.patch
  - Gets better user recall - https://www.nngroup.com/articles/logo-placement-brand-recall/
  - NOTE - logo downloaded from `https://commons.wikimedia.org/wiki/File:Cygwin_logo.svg`
- Menu font weight applied hierarchically per menu section
  - font-weight-applied-hierarchically-per-menu-section.patch
  - Differentiate text levels - https://medium.com/@oluwanifemiajayi61/typography-hierarchy-3ed06c206ea7#:~:text=Using%20weight%20strategically%20prevents%20visual%20clutter
- Prepend a HTML star entity the "Gold Stars" menu item
  - add-html-star-entity-for-the-Gold-Stars-menu-item.patch
  - Draw attention to item and clearly labels it as not the current page - https://www.netwaveinteractive.com/blog/visual-hierarchy-in-ui-ux-design-principles-strategies-and-best-practices/#:~:text=enhance%20hierarchy%20by%20breaking%20up%20text
- Change HTML `h1` header's font family to system-ui
  - h1-header-s-font-family-to-sans-serif.patch
  - Keeping other text as serif makes for good visual contrast
  - Sans serif is best for digital:
    - https://ixdf.org/literature/topics/typography#:~:text=preferable%20for%20digital%20interfaces
    - https://medium.com/the-interaction-design-foundation/the-ux-designers-guide-to-typography-7ddf87288123#:~:text=preferred%20for%20digital%20interfaces
- Style `code` HTML elements
  - style-code-HTML-elements.patch
  - I mean - I'd ballpark it at 90% of website that have software documentation apply background color to code blocks
- Style `pre` code-blocks
  - style-pre-code-blocks.patch
  - Same for `pre` tags that hold code examples; at least 90% of software docs, blogs, articles, etc. use a differentiating background color for code-blocks
- Link hover UX effect
  - link-hover-UX-effect.patch
  - Users expect hover effects, and essentailly a web standard - https://www.nngroup.com/articles/guidelines-for-visualizing-links/#:~:text=hover%20states%20have%20become%20a%20standard%20and%20expected%20interaction%20pattern
- Responsive styling
  - responsive-styling.patch
- Use CSS variables for colors to keep DRY (Do not Repeat Yourself)
  - css-variables-for-colors-to-keep-DRY.patch
-------------- next part --------------
A non-text attachment was scrubbed...
Name: add-html-star-entity-for-the-Gold-Stars-menu-item.patch
Type: text/x-patch
Size: 588 bytes
Desc: not available
URL: <https://cygwin.com/pipermail/cygwin-patches/attachments/20260416/916faa6d/attachment-0011.bin>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: add-logo-to-top.html.patch
Type: text/x-patch
Size: 1908 bytes
Desc: not available
URL: <https://cygwin.com/pipermail/cygwin-patches/attachments/20260416/916faa6d/attachment-0012.bin>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: clean-style.css.patch
Type: text/x-patch
Size: 11870 bytes
Desc: not available
URL: <https://cygwin.com/pipermail/cygwin-patches/attachments/20260416/916faa6d/attachment-0013.bin>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: css-variables-for-colors-to-keep-DRY.patch
Type: text/x-patch
Size: 5563 bytes
Desc: not available
URL: <https://cygwin.com/pipermail/cygwin-patches/attachments/20260416/916faa6d/attachment-0014.bin>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: fixed-menu-position.patch
Type: text/x-patch
Size: 720 bytes
Desc: not available
URL: <https://cygwin.com/pipermail/cygwin-patches/attachments/20260416/916faa6d/attachment-0015.bin>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: font-weight-applied-hierarchically-per-menu-section.patch
Type: text/x-patch
Size: 1158 bytes
Desc: not available
URL: <https://cygwin.com/pipermail/cygwin-patches/attachments/20260416/916faa6d/attachment-0016.bin>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: h1-header-s-font-family-to-sans-serif.patch
Type: text/x-patch
Size: 622 bytes
Desc: not available
URL: <https://cygwin.com/pipermail/cygwin-patches/attachments/20260416/916faa6d/attachment-0017.bin>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: link-hover-UX-effect.patch
Type: text/x-patch
Size: 618 bytes
Desc: not available
URL: <https://cygwin.com/pipermail/cygwin-patches/attachments/20260416/916faa6d/attachment-0018.bin>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: responsive-styling.patch
Type: text/x-patch
Size: 15472 bytes
Desc: not available
URL: <https://cygwin.com/pipermail/cygwin-patches/attachments/20260416/916faa6d/attachment-0019.bin>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: style-code-HTML-elements.patch
Type: text/x-patch
Size: 1103 bytes
Desc: not available
URL: <https://cygwin.com/pipermail/cygwin-patches/attachments/20260416/916faa6d/attachment-0020.bin>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: style-pre-code-blocks.patch
Type: text/x-patch
Size: 716 bytes
Desc: not available
URL: <https://cygwin.com/pipermail/cygwin-patches/attachments/20260416/916faa6d/attachment-0021.bin>


More information about the Cygwin-patches mailing list