HPR/hpr_generator
8
1
Fork 5
Code Issues 31 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

Simplify header layout

Browse Source 
Remove QR code, improve contrast of header links.
This commit is contained in:
Roan Horning
2025-08-23 23:03:17 -04:00
parent 8a20ac971e
commit b12a7fb4e7
2 changed files with 47 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
public_html/css/hpr.css
View File

@@ -35,6 +35,7 @@ https://creativecommons.org/publicdomain/
--link-primary-hover: #b54c08/*#f8961e*/; --link-primary-hover: #b54c08/*#f8961e*/;
--link-secondary: #a8f8ff; --link-secondary: #a8f8ff;
--link-secondary-hover: #f9e9c2; --link-secondary-hover: #f9e9c2;
--link-title-color: #00003e;
--lane-button-border: #80b4c0; --lane-button-border: #80b4c0;
--input-border-primary: #4d4d4d; --input-border-primary: #4d4d4d;
@@ -118,7 +119,7 @@ body > header {
flex-direction: row; flex-direction: row;
flex-flow: wrap; flex-flow: wrap;
justify-content: space-between; 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-image: url("/images/hpr-splatter-logo.svg"), url("/images/main-header-background.png");
background-size: 59%, cover; background-size: 59%, cover;
background-repeat: no-repeat, no-repeat; background-repeat: no-repeat, no-repeat;
@@ -233,7 +234,13 @@ dd {
margin-bottom: 0.35rem; margin-bottom: 0.35rem;
margin-left: 1rem; margin-left: 1rem;
} }
a {
color: var(--link-primary); color: var(--link-primary);
text-decoration-style: dotted;
text-decoration-color: inherit;
text-decoration-thickness: .125rem;
text-underline-offset: 0.2rem;
} }
a:hover { a:hover {
cursor: pointer; cursor: pointer;
@@ -347,30 +354,51 @@ a.lane-button img {
text-transform: uppercase; text-transform: uppercase;
} }
#tag_line { #tag_line {
line-height: 1; line-height: 1.1;
} }
#tag_line *, #tag_line *,
#title * { #title * {
margin: 0; margin: 0;
padding: 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; font-size: 7.5rem;
letter-spacing: -0.65rem; letter-spacing: -0.65rem;
line-height: 0.75; 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; text-transform: uppercase;
font-family: "BebasNeue", sans-serif; 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; letter-spacing: 0.05rem;
} }
#tag_line h2:first-child { #tag_line #tag1 {
font-size: 2rem; font-size: clamp(2.1rem, calc(100vw - 360px + 2.1rem), 2.3rem);
} }
#tag_line h3 { #tag_line #tag3 {
text-align: center;
text-transform: capitalize; text-transform: capitalize;
font-size: 1.15rem; font-weight: var(--default-header-x-font-weight);
} }
#site_url { #site_url {
font-family: "GNUTypewriter", monospace; font-family: "GNUTypewriter", monospace;
@@ -461,22 +489,23 @@ fieldset > input {
justify-content: space-between; justify-content: space-between;
} }
#tag_line { #tag_line {
text-align: center; line-height: 1.1;
} }
#title h1 { #title #tag1 {
font-size: 7.5rem; font-size: 7.5rem;
letter-spacing: -0.65rem; letter-spacing: -0.65rem;
line-height: 0.75; line-height: 0.75;
} }
#tag_line h2 { #tag_line #tag2 {
font-size: 1.82rem; font-size: 1.82rem;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
} }
#tag_line h2:first-child { #tag_line #tag1 {
font-size: 4rem; font-size: 4rem;
} }
#tag_line h3 { #tag_line #tag3 {
font-size: 1.85rem; font-size: 1.85rem;
letter-spacing: 0.05rem;
margin-left: 5rem; margin-left: 5rem;
} }
#qr_code { #qr_code {

12
templates/page.tpl.html
View File

@@ -38,21 +38,17 @@
</div> </div>
<header role="banner"> <header role="banner">
<hgroup id="title"> <hgroup id="title">
<h1 id="site_acronym">HPR</h1> <h1 id="site_acronym"><a href="<!--% absolute_path(baseurl) %-->index.html">HPR</a></h1>
<p id="site_name"> <p id="site_name">
<a href="<!--% absolute_path(baseurl) %-->correspondents/index.html">H</a>acker <a href="<!--% absolute_path(baseurl) %-->correspondents/index.html">H</a>acker
<a href="<!--% absolute_path(baseurl) %-->comments_viewer.html">P</a>ublic <a href="<!--% absolute_path(baseurl) %-->comments_viewer.html">P</a>ublic
<a href="<!--% absolute_path(baseurl) %-->syndication.html">R</a>adio <a href="<!--% absolute_path(baseurl) %-->syndication.html">R</a>adio
</p> </p>
<p id="site_url">https://HackerPublicRadio.org</p>
</hgroup> </hgroup>
<hgroup id="tag_line"> <hgroup id="tag_line">
<h2>The Community Podcast</h2> <h2 id="tag1">The Community Podcast</h2>
<p>Sharing your ideas, projects, opinions since 2005</p> <p id="tag2">Sharing your ideas, projects, opinions since 2005</p>
<p>New episodes every weekday </p> <p id="tag3">New episodes every weekday </p>
</hgroup>
<hgroup id="qr_code">
<img src="<!--% absolute_path(baseurl) %-->images/qr_code_logo.png" alt="HPR logo as a QR code to the HPR URL">
</hgroup> </hgroup>
</header> </header>
<main id="main_content" role="main"> <main id="main_content" role="main">