Planning to enhance the design of the front page for the OpenBSD ports website, which features a variety of 71 port categories.
Idea is to utilize multiple columns (possibly ul {-moz-columns: 9em;}
with a maximum limit of 8 columns at 89em wide and above,
@media (min-width: 89em) {ul {-moz-columns: 8;}}
) with padding/margin added to each list item detailing a port. However, on larger screens, this layout might result in excessive white space due to occupying too little screen space.
Seeking a method to automatically increase the font size of specific elements to effectively utilize all available space without impacting other elements. The goal is to upscale headings and categories while keeping credits at the bottom in their original font size. Preferably looking for a CSS-only solution. (Although considering implementing a few specific @media
rules for incremental changes in font sizes, interested in exploring a more versatile and automated approach.)