[I45-website] Refresh HPR layout with a light touch #218

2024-10-12T15:52:59Z

rho_n commented

2024-10-12 15:52:59 +00:00

I know there is a bigger question of a site redesign, but I thought a targeted sprucing up of the current layout might help out with some of the critiques of the current layout. The only changes to the HTML have been the removal of a couple style attributes, the removal of a height attribute in the host table, and the removal of an hr tag that was in the footer of the site (and isn't visible on the current site). I do not think these changes will break any scripts being run against the site to download episodes.

In general the changes are around improving the use of white space and following best practices for the line-height of mult-line text. I also put an emphasis on letting these improvements flow from small to large screen size using fluid responsive design principles (Modern Fluid Typography Using CSS Clamp).

Not sure if these changes will need approval from the community or fall within general maintenance of the website. I am happy to lead the conversation if approval from the community is needed.

I will use this branch on https://hpr.horning.us/ to make review easier.

I know there is a bigger question of a site redesign, but I thought a targeted sprucing up of the current layout might help out with some of the critiques of the current layout. The only changes to the HTML have been the removal of a couple style attributes, the removal of a height attribute in the host table, and the removal of an hr tag that was in the footer of the site (and isn't visible on the current site). I do not think these changes will break any scripts being run against the site to download episodes. In general the changes are around improving the use of white space and following best practices for the line-height of mult-line text. I also put an emphasis on letting these improvements flow from small to large screen size using fluid responsive design principles ([Modern Fluid Typography Using CSS Clamp](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/)). Not sure if these changes will need approval from the community or fall within general maintenance of the website. I am happy to lead the conversation if approval from the community is needed. I will use this branch on https://hpr.horning.us/ to make review easier.

rho_n added the Feature Request label 2024-10-12 15:52:59 +00:00

rho_n added 13 commits 2024-10-12 15:52:59 +00:00

Initial reset of tags to use fluid responsive design 68e51c0a32

Use the clamping function to change the base font size as the size of the screen varies. Modify font-size, padding, and margin sizes to rely on the base font size (use rem units). In addition improve usage of white space by modifying line-height, margins, and padding of various tags.

Use fluid design for main container margins and padding e8f01ba5c5

Modify whitespace and sizing of headers in banner 6b2a324730

Modify white space of main menu ad89f1fb4f

Add some accessiblility touches: change cursor to pointer on hover, change link color on active event.

Add fluid responsive design to comment and code tags d1539a3ca2

Add fluid responsive design to hosts table 7cd0cc3056

Add fluid responsive design to page footer 51adbcd938

Clean up look of comment form 6062cfd6b4

Use fluid responsive design for hr tag 69f19976fd

Create media breakpoint that matches original wide screen setting 87b7f7bde6

For larger screens constrain viewing width and growth of font-size, and margins to approximately corresponding sizes of the original layout. Prevent things from getting too large.

Format CSS for consistency 9655c56ee6

Remove uneeded in-line styling and tag attributes 2b0b02ecb7

Add id attribute to previous five weeks section 8f31864b83

rho_n requested review from jknapp 2024-10-12 15:53:12 +00:00

rho_n requested review from ken_fallon 2024-10-12 15:53:12 +00:00

rho_n requested review from davmo 2024-10-12 15:53:13 +00:00

rho_n requested review from norrist 2024-10-12 15:53:13 +00:00

rho_n changed title from ~~WIP [I45-website] Refresh HPR layout with a light touch~~ to [I45-website] Refresh HPR layout with a light touch

2024-10-15 01:18:54 +00:00

rho_n added 1 commit 2024-10-15 01:19:08 +00:00

Merge branch 'main' into I45-website-refresh-light-touch a58934acbf

rho_n merged commit 61de606208 into main