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

Update main header and footer formatting

Browse Source 
Move styles closer to new design displayed on hobbypublicradio.org.
This commit is contained in:
Roan Horning
2025-07-16 23:35:12 -04:00
parent fcd73c05d7
commit 51ed253bbd
1 changed files with 40 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public_html/css/hpr.css
View File

@@ -13,14 +13,23 @@ https://creativecommons.org/publicdomain/
* - CSS-Tricks: Linearly Scale font-size with CSS clamp() Based on the Viewport * - CSS-Tricks: Linearly Scale font-size with CSS clamp() Based on the Viewport
* -- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ * -- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
*/ */
@font-face {
font-family: "GNUTypewriter";
src:
local("GNUTypewriter"),
url("/css/gnutypewriter/gtw.woff") format("woff");
}
:root { :root {
--background-primary: #dfdfdf; --background-primary: #dfdfdf;
--text-primary: #4d4d4d; /* HPR Grey */ --text-primary: #4d4d4d; /* HPR Grey */
--banner-text-primary: #000000;
--background-secondary: #4d4d4d; --background-secondary: #4d4d4d;
--text-secondary: #dfdfdf; --text-secondary: #dfdfdf;
--link-primary: #247ba0; --link-primary: #247ba0;
--link-primary-hover: #f8961e;
--link-secondary: #7fc5e2; --link-secondary: #7fc5e2;
--link-secondary-hover: #f9c74f;
--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */; --font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
/* screen breakpoints */ /* screen breakpoints */
@@ -37,6 +46,7 @@ html {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column;
} }
body { body {
display: flex; display: flex;
@@ -58,6 +68,9 @@ body > nav {
body > nav a { body > nav a {
color: var(--link-secondary); color: var(--link-secondary);
} }
body > nav a:hover {
color: var(--link-secondary-hover);
}
body > nav ul { body > nav ul {
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
@@ -80,6 +93,7 @@ body > header {
justify-content: space-between; justify-content: space-between;
padding: 0.25rem; padding: 0.25rem;
background-image: url("/images/main-header-background.png"); background-image: url("/images/main-header-background.png");
color: var(--banner-text-primary);
} }
body > header > * { body > header > * {
margin: 0; margin: 0;
@@ -93,6 +107,7 @@ body > footer {
background-color: var(--background-secondary); background-color: var(--background-secondary);
color: var(--text-secondary); color: var(--text-secondary);
padding: 0.25rem; padding: 0.25rem;
text-align: center
} }
body > footer hr:first-child { body > footer hr:first-child {
display: none; display: none;
@@ -172,6 +187,7 @@ a {
a:hover { a:hover {
cursor: pointer; cursor: pointer;
color: var(--link-primary-hover);
} }
hr { hr {
@@ -203,6 +219,7 @@ p.meta span label {
.lane { .lane {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap;
} }
a.lane-button { a.lane-button {
@@ -218,9 +235,30 @@ a.lane-button {
} }
#tag_line,
#title {
text-transform: uppercase;
}
#tag_line *,
#title * {
margin: 0;
padding: 0;
}
#title h1 {
font-size: 7.5rem;
letter-spacing: -0.65rem;
line-height: 0.75;
}
#tag_line h3 {
text-transform: capitalize;
}
#site_url {
font-family: "GNUTypewriter", monospace;
text-transform: none;
}
@media (min-width: 900px) { @media (min-width: 900px) {
body { #qr_code {
background-color: white; text-align: center;
} }
#qr_code > img { #qr_code > img {
max-height: 195px; max-height: 195px;