From 433618343799b14cf2594ed1fc761875dadbfe80 Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Fri, 8 Aug 2025 21:36:21 -0400 Subject: [PATCH 01/19] Remove CSS included at top of each page --- templates/page.tpl.html | 31 +++++++++++-------------------- 1 file changed, 11 insertions(+), 20 deletions(-) diff --git a/templates/page.tpl.html b/templates/page.tpl.html index fe19ab1..c866a93 100644 --- a/templates/page.tpl.html +++ b/templates/page.tpl.html @@ -12,15 +12,6 @@ - - @@ -44,23 +35,23 @@
-
+

HPR

-

+

Hacker Public Radio -

-

https://HackerPublicRadio.org

-
-
+

+

https://HackerPublicRadio.org

+ +

The Community Podcast

-

Sharing your ideas, projects, opinions since 2005

-

New episodes every weekday

-
-
+

Sharing your ideas, projects, opinions since 2005

+

New episodes every weekday

+ +
HPR logo as a QR code to the HPR URL -
+
From 6b8c97815adf1a1c772cda8cca1ef1b41d9043cb Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Fri, 8 Aug 2025 22:50:52 -0400 Subject: [PATCH 02/19] Reformat top navigation menus Have accessibility menu appear on same line as main menu. --- public_html/css/hpr.css | 27 ++++++++++++++++++++------- templates/page.tpl.html | 18 +++++++++++------- 2 files changed, 31 insertions(+), 14 deletions(-) diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css index 0cec606..afc0eaf 100644 --- a/public_html/css/hpr.css +++ b/public_html/css/hpr.css @@ -74,24 +74,27 @@ body { padding: 0; min-height: 100vh; } - -body > nav { +#top_navigation { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; background-color: var(--background-secondary); color: var(--text-secondary); + padding: 0.5rem; } -body > nav a { +#top_navigation > nav a { color: var(--link-secondary); } -body > nav a:hover { +#top_navigation > nav a:hover { color: var(--link-secondary-hover); } -body > nav ul { +#top_navigation > nav menu { background-color: inherit; color: inherit; margin: 0; padding: 0.25rem; } -body > nav ul li { +#top_navigation > nav menu li { display: inline-block; background-color: inherit; color: inherit; @@ -100,7 +103,7 @@ body > nav ul li { padding: 0; padding-right: var(--link-spacing-horizontal); } -body > nav ul li a { +#top_navigation > nav menu li a { padding: 0.25rem 0; } body > header { @@ -420,6 +423,16 @@ fieldset > input { .no-css { display: none; } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} @media (min-width: 600px) { body > header { background-size: 200pt, cover; diff --git a/templates/page.tpl.html b/templates/page.tpl.html index c866a93..8a6a7b5 100644 --- a/templates/page.tpl.html +++ b/templates/page.tpl.html @@ -27,13 +27,17 @@ - - +
+ + +

HPR

From 0bdc847f0f2320db724218cb59adbb5310ba8caf Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Fri, 22 Aug 2025 23:51:52 -0400 Subject: [PATCH 03/19] use html definition list for latest lists --- public_html/css/hpr.css | 19 ++++++++++++++++--- templates/content-index.tpl.html | 22 +++++++++------------- 2 files changed, 25 insertions(+), 16 deletions(-) diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css index afc0eaf..8f17994 100644 --- a/public_html/css/hpr.css +++ b/public_html/css/hpr.css @@ -199,7 +199,7 @@ img { height: auto; } -ul { +dl, ul { padding-left: 1.15rem; } @@ -210,8 +210,21 @@ li { li:last-child { margin-bottom: 0.25rem; } -a { - text-decoration: none; + +dt, dd { + line-height: 1.25; +} + +dt { + display: list-item; + list-style-type: disc; + margin-bottom: 0.15rem; +} + +dd { + margin-bottom: 0.35rem; + margin-left: 1rem; +} color: var(--link-primary); } a:hover { diff --git a/templates/content-index.tpl.html b/templates/content-index.tpl.html index bf5d331..d903fe3 100644 --- a/templates/content-index.tpl.html +++ b/templates/content-index.tpl.html @@ -95,20 +95,20 @@

Latest Shows

- +

Latest Comments

- +
From 798ccc42bcd0d8d5752ae51505a5f4aad55f63e9 Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Sat, 23 Aug 2025 22:38:53 -0400 Subject: [PATCH 04/19] Remove top menu Remove main navigation and make skip to main accessibility link visible to screen readers only. --- public_html/css/hpr.css | 1 + templates/page.tpl.html | 8 +++----- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css index 8f17994..393563d 100644 --- a/public_html/css/hpr.css +++ b/public_html/css/hpr.css @@ -118,6 +118,7 @@ body > header { background-position: right -15px top -20px, left top; color: var(--banner-text-primary); align-items: center; + border-top: var(--background-secondary) solid 1rem; } body > header > * { margin: 0; diff --git a/templates/page.tpl.html b/templates/page.tpl.html index 8a6a7b5..8f0bf29 100644 --- a/templates/page.tpl.html +++ b/templates/page.tpl.html @@ -27,16 +27,14 @@ -
+
From 8a20ac971ee643e1f9370f88bebba95384926ab5 Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Sat, 23 Aug 2025 22:57:05 -0400 Subject: [PATCH 05/19] Add default CSS header variables --- public_html/css/hpr.css | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css index 393563d..b6028fd 100644 --- a/public_html/css/hpr.css +++ b/public_html/css/hpr.css @@ -53,6 +53,13 @@ https://creativecommons.org/publicdomain/ --for-tablet-landscape-up: 900px; --for-desktop-up: 1200px; --for-big-desktop-up: 1800px; + + --default-header-x-font-weight: bold; + --default-header-x-margin: 1.25rem 0 0.75rem 0; + --default-header-1-font-size: 1.5rem; + --default-header-2-font-size: 1.45rem; + --default-header-3-font-size: 1.25rem; + --default-header-4-font-size: 1.15rem; } html { @@ -172,27 +179,27 @@ blockquote { } h1 { - font-size: 1.5rem; - margin: 1.25rem 0 0.75rem 0; + font-size: var(--default-header-1-font-size); + margin: var(--default-header-x-margin); } h2, article * h1, section > header:first-child { - font-size: 1.45rem; - margin: 1.25rem 0 0.75rem 0; + font-size: var(--default-header-2-font-size); + margin: var(--default-header-x-margin); } h3, article * h2 { - font-size: 1.25rem; - margin: 1.25rem 0 0.75rem 0; + font-size: var(--default-header-3-font-size); + margin: var(--default-header-x-margin); } h4, article * h3 { - font-size: 1.15rem; - margin: 1.25rem 0 0.75rem 0; + font-size: var(--default-header-4-font-size); + margin: var(--default-header-x-margin); } img { From ca90c1f5802488b307c82b225f1ae43fb5bb04fa Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Sat, 23 Aug 2025 23:03:17 -0400 Subject: [PATCH 06/19] Simplify header layout Remove QR code, improve contrast of header links. --- public_html/css/hpr.css | 54 +++++++++++++++++++++++++++++++---------- templates/page.tpl.html | 12 +++------ 2 files changed, 45 insertions(+), 21 deletions(-) diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css index b6028fd..fa00a49 100644 --- a/public_html/css/hpr.css +++ b/public_html/css/hpr.css @@ -35,6 +35,7 @@ https://creativecommons.org/publicdomain/ --link-primary-hover: #b54c08/*#f8961e*/; --link-secondary: #a8f8ff; --link-secondary-hover: #f9e9c2; + --link-title-color: #00003e; --lane-button-border: #80b4c0; --input-border-primary: #4d4d4d; @@ -118,7 +119,7 @@ body > header { flex-direction: row; flex-flow: wrap; justify-content: space-between; - padding: 0.25rem; + padding: clamp(0.5rem, -0.25rem + 3vw, 1rem) 0.25rem; background-image: url("/images/hpr-splatter-logo.svg"), url("/images/main-header-background.png"); background-size: 59%, cover; background-repeat: no-repeat, no-repeat; @@ -233,7 +234,13 @@ dd { margin-bottom: 0.35rem; margin-left: 1rem; } + +a { color: var(--link-primary); + text-decoration-style: dotted; + text-decoration-color: inherit; + text-decoration-thickness: .125rem; + text-underline-offset: 0.2rem; } a:hover { cursor: pointer; @@ -347,30 +354,49 @@ a.lane-button img { text-transform: uppercase; } #tag_line { - line-height: 1; + line-height: 1.1; } #tag_line *, #title * { margin: 0; padding: 0; } -#title h1 { +#title a { + color: var(--link-title-color); +} +#title a:hover { + color: var(--link-primary-hover); +} +#title #site_acronym { font-size: 7.5rem; letter-spacing: -0.65rem; line-height: 0.75; + margin-bottom: 0.25rem; } -#tag_line h2 { +#title #site_acronym a { + text-decoration: none; + text-shadow: 0 1px var(--link-secondary); +} +#title #site_name { + font-size: var(--default-header-2-font-size); + font-weight: bold; +} + +#tag_line #tag1, +#tag_line #tag2 { text-transform: uppercase; font-family: "BebasNeue", sans-serif; - font-size: 1.15rem; + font-size: clamp(1.03rem, -0.25rem + 3vw, var(--default-header-4-font-size)); + font-weight: var(--default-header-x-font-weight); letter-spacing: 0.05rem; } -#tag_line h2:first-child { - font-size: 2rem; +#tag_line #tag1 { + font-size: 2.3rem; } -#tag_line h3 { +#tag_line #tag3 { + text-align: center; text-transform: capitalize; - font-size: 1.15rem; + font-weight: var(--default-header-x-font-weight); } #site_url { font-family: "GNUTypewriter", monospace; @@ -461,22 +487,24 @@ fieldset > input { justify-content: space-between; } #tag_line { + line-height: 1.1; text-align: center; } - #title h1 { + #title #tag1 { font-size: 7.5rem; letter-spacing: -0.65rem; line-height: 0.75; } - #tag_line h2 { + #tag_line #tag2 { font-size: 1.82rem; letter-spacing: 0.05rem; } - #tag_line h2:first-child { + #tag_line #tag1 { font-size: 4rem; } - #tag_line h3 { + #tag_line #tag3 { font-size: 1.85rem; + letter-spacing: 0.05rem; margin-left: 5rem; } #qr_code { diff --git a/templates/page.tpl.html b/templates/page.tpl.html index 8f0bf29..a7b4343 100644 --- a/templates/page.tpl.html +++ b/templates/page.tpl.html @@ -38,21 +38,17 @@
-

HPR

+

HPR

Hacker Public Radio

-

https://HackerPublicRadio.org

-

The Community Podcast

-

Sharing your ideas, projects, opinions since 2005

-

New episodes every weekday

-
-
- HPR logo as a QR code to the HPR URL +

The Community Podcast

+

Sharing your ideas, projects, opinions since 2005

+

New episodes every weekday

From b12a7fb4e747a771a50ce52ce39579223ae3ce12 Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Sat, 23 Aug 2025 23:03:17 -0400 Subject: [PATCH 07/19] Simplify header layout Remove QR code, improve contrast of header links. --- public_html/css/hpr.css | 57 +++++++++++++++++++++++++++++++---------- templates/page.tpl.html | 12 +++------ 2 files changed, 47 insertions(+), 22 deletions(-) diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css index b6028fd..104612d 100644 --- a/public_html/css/hpr.css +++ b/public_html/css/hpr.css @@ -35,6 +35,7 @@ https://creativecommons.org/publicdomain/ --link-primary-hover: #b54c08/*#f8961e*/; --link-secondary: #a8f8ff; --link-secondary-hover: #f9e9c2; + --link-title-color: #00003e; --lane-button-border: #80b4c0; --input-border-primary: #4d4d4d; @@ -118,7 +119,7 @@ body > header { flex-direction: row; flex-flow: wrap; justify-content: space-between; - padding: 0.25rem; + padding: clamp(0.5rem, -0.25rem + 3vw, 1rem) 0.25rem; background-image: url("/images/hpr-splatter-logo.svg"), url("/images/main-header-background.png"); background-size: 59%, cover; background-repeat: no-repeat, no-repeat; @@ -233,7 +234,13 @@ dd { margin-bottom: 0.35rem; margin-left: 1rem; } + +a { color: var(--link-primary); + text-decoration-style: dotted; + text-decoration-color: inherit; + text-decoration-thickness: .125rem; + text-underline-offset: 0.2rem; } a:hover { cursor: pointer; @@ -347,30 +354,51 @@ a.lane-button img { text-transform: uppercase; } #tag_line { - line-height: 1; + line-height: 1.1; } #tag_line *, #title * { margin: 0; padding: 0; } -#title h1 { +#title a { + color: var(--link-title-color); +} +#title a:hover { + color: var(--link-primary-hover); +} +#title #site_acronym { font-size: 7.5rem; letter-spacing: -0.65rem; line-height: 0.75; + margin-bottom: 0.25rem; } -#tag_line h2 { +#title #site_acronym a { + text-decoration: none; + text-shadow: 0 1px var(--link-secondary); +} +#title #site_name { + font-size: var(--default-header-2-font-size); + font-weight: bold; +} +#tag_line { + text-align: center; +} +#tag_line #tag1, +#tag_line #tag2 { text-transform: uppercase; font-family: "BebasNeue", sans-serif; - font-size: 1.15rem; + font-size: clamp(1.03rem, -0.25rem + 3vw, var(--default-header-4-font-size)); + font-weight: var(--default-header-x-font-weight); letter-spacing: 0.05rem; } -#tag_line h2:first-child { - font-size: 2rem; +#tag_line #tag1 { + font-size: clamp(2.1rem, calc(100vw - 360px + 2.1rem), 2.3rem); } -#tag_line h3 { +#tag_line #tag3 { + text-align: center; text-transform: capitalize; - font-size: 1.15rem; + font-weight: var(--default-header-x-font-weight); } #site_url { font-family: "GNUTypewriter", monospace; @@ -461,22 +489,23 @@ fieldset > input { justify-content: space-between; } #tag_line { - text-align: center; + line-height: 1.1; } - #title h1 { + #title #tag1 { font-size: 7.5rem; letter-spacing: -0.65rem; line-height: 0.75; } - #tag_line h2 { + #tag_line #tag2 { font-size: 1.82rem; letter-spacing: 0.05rem; } - #tag_line h2:first-child { + #tag_line #tag1 { font-size: 4rem; } - #tag_line h3 { + #tag_line #tag3 { font-size: 1.85rem; + letter-spacing: 0.05rem; margin-left: 5rem; } #qr_code { diff --git a/templates/page.tpl.html b/templates/page.tpl.html index 8f0bf29..a7b4343 100644 --- a/templates/page.tpl.html +++ b/templates/page.tpl.html @@ -38,21 +38,17 @@
-

HPR

+

HPR

Hacker Public Radio

-

https://HackerPublicRadio.org

-

The Community Podcast

-

Sharing your ideas, projects, opinions since 2005

-

New episodes every weekday

-
-
- HPR logo as a QR code to the HPR URL +

The Community Podcast

+

Sharing your ideas, projects, opinions since 2005

+

New episodes every weekday

From 97116aad4b2f34d71132a33eb533ca62320a50c4 Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Sun, 24 Aug 2025 21:32:20 -0400 Subject: [PATCH 08/19] Add fallback background color to main header --- public_html/css/hpr.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css index 104612d..71ba05f 100644 --- a/public_html/css/hpr.css +++ b/public_html/css/hpr.css @@ -29,7 +29,7 @@ https://creativecommons.org/publicdomain/ --background-primary: #fffff7/*#fafafa#fbfbee #dfdfdf */; --text-primary: #4d4d4d; /* HPR Grey */ --banner-text-primary: #000000; - --background-secondary: #4d4d4d; + --banner-background-color: #40a5b9; --text-secondary: #dfdfdf; --link-primary: #004852 /*#154a60*/; --link-primary-hover: #b54c08/*#f8961e*/; @@ -120,6 +120,7 @@ body > header { flex-flow: wrap; justify-content: space-between; padding: clamp(0.5rem, -0.25rem + 3vw, 1rem) 0.25rem; + background-color: var(--banner-background-color); background-image: url("/images/hpr-splatter-logo.svg"), url("/images/main-header-background.png"); background-size: 59%, cover; background-repeat: no-repeat, no-repeat; From 310f14c4bd628ccfd10b48c0d3bb4351e4990629 Mon Sep 17 00:00:00 2001 From: Roan Horning Date: Sun, 24 Aug 2025 21:47:38 -0400 Subject: [PATCH 09/19] Tweak syndication page layout Vertically flow content and clean up card header white spacing. --- public_html/css/hpr.css | 13 +++++++++++-- templates/content-syndication.tpl.html | 4 ++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css index 71ba05f..a3eae59 100644 --- a/public_html/css/hpr.css +++ b/public_html/css/hpr.css @@ -283,8 +283,9 @@ article > p, flex-wrap: wrap; gap: 1.0rem; justify-content: space-around; - justify-items: space-around; - +} +.lane.syndication { + flex-direction: column; } #podcast_lane > .lane, #project_lane > .lane, @@ -327,6 +328,14 @@ article > p, .lane > article > header a:hover { color: var(--link-secondary-hover); } +.lane.syndication > article > header * { + margin-top: 0; + margin-bottom: 0; +} +.lane.syndication > article > header p { + font-size: var(--default-header-4-font-size); + margin-left: 22px; +} a.lane-button { display: flex; flex-direction: column; diff --git a/templates/content-syndication.tpl.html b/templates/content-syndication.tpl.html index f378905..41d88d8 100644 --- a/templates/content-syndication.tpl.html +++ b/templates/content-syndication.tpl.html @@ -3,7 +3,7 @@

Great that you want to listen. Have a look below at the feeds that best suite your listening habits.

-
+