[WIP] new website design #266

Draft
rho_n wants to merge 52 commits from newsite into main
Owner

Update the structure and format of the template pages and CSS files to implement the new website design as discussed in the following issues:

Currently using the CSS flexbox model for the layout to facilitate a responsive design along with our refreshed look.

Update the structure and format of the template pages and CSS files to implement the new website design as discussed in the following issues: - https://repo.anhonesthost.net/HPR/hpr_documentation/wiki/Website-Design - https://repo.anhonesthost.net/HPR/hpr_hub/issues/45#issuecomment-2449 Currently using the [CSS flexbox model for the layout](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) to facilitate a [responsive design ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design) along with our refreshed look.
rho_n added the
Feature Request
label 2025-07-15 00:30:23 +00:00
rho_n added 1 commit 2025-07-15 00:30:24 +00:00
Create basic structure in html to be displayed using the CSS
Flex box model
rho_n added 1 commit 2025-07-15 00:52:13 +00:00
rho_n added 3 commits 2025-07-16 15:18:14 +00:00
rho_n added 2 commits 2025-07-17 03:37:13 +00:00
Move styles closer to new design displayed on hobbypublicradio.org.
rho_n added 2 commits 2025-07-17 12:37:18 +00:00
rho_n added 1 commit 2025-07-17 15:10:47 +00:00
rho_n added 1 commit 2025-07-17 21:02:18 +00:00
Ran the ARC Tookit Firefox extension which pointed out
accessiblity issues with color contrasts, link display, and
skip to main link.  Some of the link colors don't look great
when they reach the recommended contrast level.
rho_n added 1 commit 2025-07-18 15:09:46 +00:00
rho_n added 2 commits 2025-07-18 15:32:43 +00:00
rho_n added 1 commit 2025-07-18 15:34:26 +00:00
rho_n added 1 commit 2025-07-19 03:10:58 +00:00
rho_n added 1 commit 2025-07-19 03:17:06 +00:00
rho_n added 1 commit 2025-07-19 03:33:05 +00:00
rho_n added 1 commit 2025-07-19 03:57:01 +00:00
rho_n added 1 commit 2025-07-19 04:19:06 +00:00
rho_n added 1 commit 2025-07-20 03:04:40 +00:00
rho_n added 1 commit 2025-07-20 15:51:50 +00:00
rho_n added 1 commit 2025-07-22 03:24:58 +00:00
Member

@rho_n Could Tags be included under the Project heading?

@rho_n Could Tags be included under the Project heading?
Author
Owner

@rho_n Could Tags be included under the Project heading?

@archer72 I have been thinking about where the Tags link should go. I can see value in having it there. From the design docs, I get the impression the idea is to keep that menu very minimal. I was also thinking it could go in the Project "swim lane" next to the About button. Opinions @ken_fallon?

> @rho_n Could Tags be included under the Project heading? @archer72 I have been thinking about where the Tags link should go. I can see value in having it there. From the design docs, I get the impression the idea is to keep that menu very minimal. I was also thinking it could go in the Project "swim lane" next to the About button. Opinions @ken_fallon?
Owner

Some changes that I would like to suggest.

Remove the menu list at the top " Site Map - skip to main content" and "Home Upload Download About". They are replaced by items in the swim lane.

Change the Welcome text to

"Hacker Public Radio is a technology focused podcast that releases shows every weekday Monday to Friday. Our shows are produced by listeners like you and can be on any topic that is of interest to hackers, makers, hobbyists, etc. We are a
welcoming community that offers positive feedback and encourages respectful debate.".

Change "Podcast" to "The Podcast"

Change "Project" to "The Project"

Add a Icon to the "Project" Swim lane called "Search" with logo similar to https://svgsilh.com/svg/189254-00bcd4.svg

In the section "Latest Shows" please add a sub item of the summary, to visually match the "Latest Comments" section.

The grey background makes the site look a little sad. Can the background of the top banner slowly fade to white.

We need to have a happier colour scheme.

The icons are MASSIVE when viewed View > Page Style > No style.

In elinks there is a [IMG] link and then the text (eg record) next to it is also a link.

Change your config so your own HOSTNAME/alias is used in the "This page was generated by The HPR Robot at Fri, 01 Aug 2025 00:03:50 +0000"

Some changes that I would like to suggest. Remove the menu list at the top " Site Map - skip to main content" and "Home Upload Download About". They are replaced by items in the swim lane. Change the Welcome text to "Hacker Public Radio is a technology focused podcast that releases shows every weekday Monday to Friday. Our shows are produced by listeners like you and can be on any topic that is of interest to hackers, makers, hobbyists, etc. We are a welcoming community that offers positive feedback and encourages respectful debate.". Change "Podcast" to "The Podcast" Change "Project" to "The Project" Add a Icon to the "Project" Swim lane called "Search" with logo similar to https://svgsilh.com/svg/189254-00bcd4.svg In the section "Latest Shows" please add a sub item of the summary, to visually match the "Latest Comments" section. The grey background makes the site look a little sad. Can the background of the top banner slowly fade to white. We need to have a happier colour scheme. The icons are MASSIVE when viewed View > Page Style > No style. In elinks there is a [IMG] link and then the text (eg record) next to it is also a link. Change your config so your own HOSTNAME/alias is used in the "This page was generated by The HPR Robot at Fri, 01 Aug 2025 00:03:50 +0000"
rho_n added 14 commits 2025-08-07 02:54:17 +00:00
rho_n added 1 commit 2025-08-08 01:54:52 +00:00
rho_n added 1 commit 2025-08-09 01:12:25 +00:00
Needed to up the number of bits used to make the
code more easily decoded.
Owner

I have to say that I don't like having a qrcode on the page at all. It completely is taking over the site (in mobile mode) and is taking away from the HPR splash icon. It makes sense to have a qrcode logo on a presentation to get people to your site, but people are already here.

Screenshot-2025-08-10_12-41-11Z_Sunday.png

In the screenshot above the HPR is also redundant if we have Hacker Public Radio - so that should also go.

The splash logo is getting hidden by this design and perhaps we should just use the regular HPR logo.

There is also no reason for the menu "Home - upload - download - about" in the top section as it's repeated.

14:36
We have precious little space to get our message across in either the desktop or mobile versions so we need to be more punchy.

I have to say that I don't like having a qrcode on the page at all. It completely is taking over the site (in mobile mode) and is taking away from the HPR splash icon. It makes sense to have a qrcode logo on a presentation to get people to your site, but people are already here. <img width="335" alt="Screenshot-2025-08-10_12-41-11Z_Sunday.png" src="attachments/c4029208-2e6f-4e26-9dfb-92c335350839"> In the screenshot above the HPR is also redundant if we have Hacker Public Radio - so that should also go. The splash logo is getting hidden by this design and perhaps we should just use the regular HPR logo. There is also no reason for the menu "Home - upload - download - about" in the top section as it's repeated. 14:36 We have precious little space to get our message across in either the desktop or mobile versions so we need to be more punchy.
Owner

I don't think the card system works well on the https://hpr.horning.us/syndication.html page.

The priority/frequency of subscription is top down in the original

Screenshot-2025-08-10_12-45-16Z_Sunday.png

Where as in the card version the eye goes to the right most area of the page (why adverts in the right side of a magazine cost more than the left) and they hit the subscribe to the entire archive !!

Screenshot-2025-08-10_12-44-10Z_Sunday.png
I don't think the card system works well on the https://hpr.horning.us/syndication.html page. The priority/frequency of subscription is top down in the original <img width="719" alt="Screenshot-2025-08-10_12-45-16Z_Sunday.png" src="attachments/18f7adcd-e992-4414-b9ed-6769968fa3ae"> Where as in the card version the eye goes to the right most area of the page (why adverts in the right side of a magazine cost more than the left) and they hit the subscribe to the entire archive !! <img width="1712" alt="Screenshot-2025-08-10_12-44-10Z_Sunday.png" src="attachments/9891f8af-8c53-45bd-b98f-fad5ce382ebb">
Owner

The cards for the episodes https://hpr.horning.us/eps/index.html also feels cluttered and should be listed top down without having side by side.

The https://hpr.horning.us/correspondents/index.html page could do well with the cards as it's more democratic having it flow on the page. That should have the host profile listed as well.

The cards for the episodes https://hpr.horning.us/eps/index.html also feels cluttered and should be listed top down without having side by side. The https://hpr.horning.us/correspondents/index.html page could do well with the cards as it's more democratic having it flow on the page. That should have the host profile listed as well.
Author
Owner

I don't think the card system works well on the https://hpr.horning.us/syndication.html page.

The priority/frequency of subscription is top down in the original

Where as in the card version the eye goes to the right most area of the page (why adverts in the right side of a magazine cost more than the left) and they hit the subscribe to the entire archive !!

Good points and I agree with your assessment. I have started making changes in my local repository. Will push up for review soon.

> I don't think the card system works well on the https://hpr.horning.us/syndication.html page. > > The priority/frequency of subscription is top down in the original > > Where as in the card version the eye goes to the right most area of the page (why adverts in the right side of a magazine cost more than the left) and they hit the subscribe to the entire archive !! > Good points and I agree with your assessment. I have started making changes in my local repository. Will push up for review soon.
Author
Owner

Remove the menu list at the top " Site Map - skip to main content" and "Home Upload Download About". They are replaced by items in the swim lane.

My initial interpretation of the swim lanes was that they would only appear on the main landing page, and that has been the reason for my hesitation in removing the top menu. I felt we needed some kind of basic navigation for pages other than the landing page. Is that correct, or should the swim lanes be included on every page as the are the equivalent of our menu system on the current site?

For accessibility issues I will keep the skip to main content link, but will hide it using CSS. It will be visible when viewed without CSS, but feel that is an acceptable trade off.

> Remove the menu list at the top " Site Map - skip to main content" and "Home Upload Download About". They are replaced by items in the swim lane. > My initial interpretation of the swim lanes was that they would only appear on the main landing page, and that has been the reason for my hesitation in removing the top menu. I felt we needed some kind of basic navigation for pages other than the landing page. Is that correct, or should the swim lanes be included on every page as the are the equivalent of our menu system on the current site? For [accessibility issues I will keep the skip to main content link](https://www.freecodecamp.org/news/how-to-add-skip-to-main-content-links-to-a-website/), but will hide it using CSS. It will be visible when viewed **without** CSS, but feel that is an acceptable trade off.
Owner

For accessibility issues I will keep the skip to main content link, but will hide it using CSS. It will be visible when viewed without CSS, but feel that is an acceptable trade off.

Yes keep that, and your approach is good.

My initial interpretation of the swim lanes was that they would only appear on the main landing page, and that has been the reason for my hesitation in removing the top menu. I felt we needed some kind of basic navigation for pages other than the landing page. Is that correct, or should the swim lanes be included on every page as the are the equivalent of our menu system on the current site?

Yes it should only be on the landing page. Then perhaps on all other pages there should be only the option to get back to the main page ?

> For accessibility issues I will keep the skip to main content link, but will hide it using CSS. It will be visible when viewed without CSS, but feel that is an acceptable trade off. Yes keep that, and your approach is good. > My initial interpretation of the swim lanes was that they would only appear on the main landing page, and that has been the reason for my hesitation in removing the top menu. I felt we needed some kind of basic navigation for pages other than the landing page. Is that correct, or should the swim lanes be included on every page as the are the equivalent of our menu system on the current site? Yes it should only be on the landing page. Then perhaps on all other pages there should be only the option to get back to the main page ?
Author
Owner

My initial interpretation of the swim lanes was that they would only appear on the main landing page, and that has been the reason for my hesitation in removing the top menu. I felt we needed some kind of basic navigation for pages other than the landing page. Is that correct, or should the swim lanes be included on every page as the are the equivalent of our menu system on the current site?

Yes it should only be on the landing page. Then perhaps on all other pages there should be only the option to get back to the main page ?

I was thinking of making the main "HPR" in the header a link back to the main page to solve that issue. Clicking on the main logo is fairly standard practice for getting to the landing page

> > My initial interpretation of the swim lanes was that they would only appear on the main landing page, and that has been the reason for my hesitation in removing the top menu. I felt we needed some kind of basic navigation for pages other than the landing page. Is that correct, or should the swim lanes be included on every page as the are the equivalent of our menu system on the current site? > > Yes it should only be on the landing page. Then perhaps on all other pages there should be only the option to get back to the main page ? > I was thinking of making the main "HPR" in the header a link back to the main page to solve that issue. Clicking on the main logo is fairly standard practice for getting to the landing page
Owner

Yes sounds good.

Yes sounds good.
rho_n added 6 commits 2025-08-24 03:07:15 +00:00
Have accessibility menu appear on same line as main menu.
Remove main navigation and make skip to main accessibility link
visible to screen readers only.
Remove QR code, improve contrast of header links.
rho_n added 2 commits 2025-08-24 13:06:26 +00:00
rho_n added 3 commits 2025-08-25 01:50:02 +00:00
rho_n added 1 commit 2025-08-25 02:04:16 +00:00
rho_n added 1 commit 2025-08-25 02:13:23 +00:00
Author
Owner

@archer72 and @ken_fallon I was thinking about the tags page. I think the search page and tags page to be combined under either the existing search page, or under a "find" page. If we go with a find page, I would use the magnifying glass icon in the swim lane and change the text from "search" to "find". Thoughts?

@archer72 and @ken_fallon I was thinking about the tags page. I think the search page and tags page to be combined under either the existing search page, or under a "find" page. If we go with a find page, I would use the magnifying glass icon in the swim lane and change the text from "search" to "find". Thoughts?
Owner

Good idea.

Good idea.
This pull request is marked as a work in progress.
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin newsite:newsite
git checkout newsite
Sign in to join this conversation.
No description provided.