sgoti/hpr_generator
1
0
Fork 0
forked from HPR/hpr_generator
Code Pull Requests Activity

Format main template to new website design

Browse Source 
Create basic structure in html to be displayed using the CSS
Flex box model
This commit is contained in:
Roan Horning
2025-07-14 20:13:06 -04:00
parent e21f434c2a
commit 34d13fa0c6
2 changed files with 104 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

471
public_html/css/hpr.css
View File

@@ -14,21 +14,86 @@ https://creativecommons.org/publicdomain/
* -- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
*/
:root {
--background-primary: #dfdfdf;
--text-primary: #4d4d4d; /* HPR Grey */
--background-secondary: #4d4d4d;
--text-secondary: #dfdfdf;
--link-primary: #247ba0;
--link-secondary: #7fc5e2;
--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
}
html {
margin: 0;
padding: 0;
display: block;
display: flex;
}
body {
display: block;
background: #dfdfdf;
display: flex;
flex-direction: column;
justify-content: flex-start;
background-color: var(--background-primary);
color: var(--text-primary);
font-size: 1rem; /* fallback for browsers that don't support the clamp function) */
font-size: clamp(1rem, 15px + 0.3vw, 1.07rem);
font-family: var(--font-family-hpr);
margin: 0;
padding: 0;
}
body > nav {
background-color: var(--background-secondary);
color: var(--text-secondary);
}
body > nav a {
color: var(--link-secondary);
}
body > nav ul {
background-color: inherit;
color: inherit;
margin: 0;
padding: 0.25rem;
}
body > nav ul li {
display: inline-block;
background-color: inherit;
color: inherit;
line-height: 1.5;
margin: 0;
padding: 0;
padding-right: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
}
body > header {
display: flex;
flex-direction: row;
flex-flow: wrap;
justify-content: space-between;
padding: 0.25rem;
}
body > header > * {
margin: 0;
padding: 0;
flex: 1 1 auto;
}
body > main {
padding: 0.25rem;
}
body > footer {
background-color: var(--background-secondary);
color: var(--text-secondary);
padding: 0.25rem;
}
body > footer hr:first-child {
display: none;
margin: 0;
padding: 0;
}
body > footer a {
color: var(--link-secondary);
}
div,
h1,
h2,
@@ -49,9 +114,9 @@ fieldset,
input,
textarea,
blockquote {
font-family: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */
color: #4D4D4D; /* HPR Grey */
background: white;
font-family: inherit;
color: inherit;
background: inherit;
}
h1 {
@@ -92,6 +157,7 @@ li {
a {
text-decoration: none;
color: var(--link-primary);
}
a:hover {
@@ -124,395 +190,4 @@ p.meta span label {
font-weight: bold;
}
article>p,
#maincontent>p {
line-height: 1.45;
}
article#previous_five_weeks>* {
line-height: 1.35;
margin: 0;
padding: 0;
}
article#previous_five_weeks>h3 {
margin: 1.5rem 0 0.5rem 0;
}
#container {
max-width: 58rem;
margin: 0.25rem;
padding: 0.75rem; /* fallback for browsers that don't support the clamp function) */
padding: clamp(0.75rem, -0.25rem + 3vw, 2.0rem);
overflow: hidden;
background: white;
border: thin solid #4D4D4D;
}
.shadow {
-moz-box-shadow: 2px 3px 6px 3px #675958;
-webkit-box-shadow: 2px 3px 6px 3px #675958;
box-shadow: 2px 3px 6px 3px #675958;
}
.thick_bar {
background-color: #4D4D4D;
color: white;
padding: 0.5rem;
margin: 1rem 0 1rem 0;
}
img#hprlogo {
max-width: 20vw;
padding-right: clamp(0.75rem, -0.25rem + 3vw, 1.5rem);
float: left;
margin-top: 1rem;
margin-bottom: clamp(0.75rem, -0.25rem + 2vw, 1.5rem);
}
#hpr_banner {
/* display: inline-block; */
border: 0;
margin: 0 0 0rem 0;
padding: 0;
}
#hpr_banner p {
margin: 0 0 0.5rem 0;
}
#hpr_banner h1#sitename {
font-size: clamp(1.44rem, -1rem + 3vw, 2rem);
letter-spacing: 0.06rem;
margin: 0;
padding: 0;
}
#hpr_banner h2 {
font-size: clamp(0.74rem, -1rem + 2vw, 1rem);
font-weight: 510;
margin: 0 0 1rem 0;
padding: 0;
}
#hpr_banner h3 {
font-size: 1rem;
font-weight: normal;
margin: 0 0 0.5rem 0;
padding: 0;
}
header>hr {
clear: both;
}
#accessible_menu {
font-size: smaller;
}
/* The main navigation menu */
header>nav.menu {
display: block;
background-color: #4D4D4D; /* HPR Grey */
text-align: Left;
clear: both; /* Forces the menu to appear after the HPR Header block */
padding: 0;
margin: 0;
}
header>nav.menu ul {
margin: 0;
padding: 0.5rem;
background-color: inherit;
color: white;
}
header>nav.menu ul li {
display: inline-block;
background-color: inherit;
color: inherit;
line-height: 1.5;
margin: 0;
padding: 0;
padding-right: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
}
header>nav.menu ul li a {
color: white;
text-decoration: none;
display: block;
padding: 0.25rem 0;
}
header>nav.menu ul li a:hover {
border-bottom: thin solid white;
padding: 0.15rem 0;
-webkit-transition: 0.3s ease-in-out color;
-moz-transition: 0.3s ease-in-out color;
transition: 0.3s ease-in-out color;
}
header>nav.menu ul li a:visited {
color: #EDEDED;
}
a:active,
header>nav.menu ul li a:active {
color: red;
}
pre {
/* Add background, border and scrollbar to <pre> */
background: #eee;
border: 1px solid #ddd;
overflow: auto;
clear: both;
padding: 0.5rem
}
code {
background: #eee;
border-radius: 0.2rem;
font-size: 0.95rem;
}
pre code {
padding-right: 0.5rem;
font-size: 0.85rem;
line-height: 1;
}
pre.comment {
white-space: pre-wrap;
line-height: 1.2rem;
}
table.hosts {
font-size: clamp(0.82rem, -0.25rem + 3vw, 1.0rem);
width: 100%;
background: white;
margin: 0 auto;
border-collapse: collapse;
display: inline-table;
}
table#t01,
table.hosts {
display: block;
overflow-x: auto;
}
table#t01 tbody,
table.hosts tbody {
display: table;
}
table#t01 tr:nth-child(even),
table.hosts tr:nth-child(even) {
background-color: #cccccc;
border-bottom: thick solid white;
}
table#t01 tr:nth-child(odd),
table.hosts tr:nth-child(odd) {
background-color: white;
border-bottom: thick solid white;
}
table.hosts tr td img {
vertical-align: middle;
max-height: 80px;
}
table.hosts th:first-child,
table.hosts td:first-child {
min-width: 60px;
max-width: 80px;
text-align: left;
height: 62px;
}
table.hosts th:nth-child(2),
table.hosts td:nth-child(2) {
text-align: left;
padding-left: clamp(0.15rem, -0.25rem + 3vw, 0.5rem);
}
table.hosts th:nth-child(3),
table.hosts td:nth-child(3),
table.hosts th:nth-child(4),
table.hosts td:nth-child(4) {
width: 10%;
padding-right: clamp(0.10rem, -0.25rem + 3vw, 1rem);
}
body>div>footer {
margin-top: 2rem;
}
footer #more_info nav.column {
clear: both;
font-size: 0.9rem;
margin-left: 0.5rem;
}
footer #more_info nav.column ul li {
float: left;
margin-right: 1.5rem;
margin-bottom: 1rem;
}
footer #more_info nav.column h2 {
font-size: 1.35rem;
margin-top: 0.5rem;
}
footer h1.thick_bar {
clear: left;
font-size: 1.15rem;
}
footer #copyright {
font-size: smaller;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
fieldset>table,
fieldset>table thead,
fieldset>table tbody,
fieldset>table tr,
fieldset>table th,
fieldset>table td,
fieldset>table td input,
fieldset>table td textarea {
display: block;
font-size: 1rem;
}
fieldset>table {
width: calc(100vw + -16vw + -1rem);
max-width: 100%;
}
fieldset>table td input,
fieldset>table td textarea {
width: calc(100vw + -16vw + -1.5rem);
max-width: 100%;
border: thin solid #DFDFDF;
margin-bottom: 0.5rem;
padding: 0.5rem;
}
fieldset>table td select {
margin-bottom: 0.5rem;
padding: 0.25rem;
}
fieldset>table td input[type="radio"] {
display: initial;
width: initial;
margin-bottom: 0.5rem;
}
fieldset>input {
background: #4D4D4D;
color: white;
font-weight: 600;
padding: 0.5rem;
border: thin solid #DFDFDF;
border-radius: 0.2rem;
}
@media only screen and (min-width: 58rem) {
#container {
margin: 0.5rem auto;
}
.shadow {
-moz-box-shadow: 1px 2px 5px 2px #675958;
-webkit-box-shadow: 1px 2px 5px 2px #675958;
box-shadow: 1px 2px 5px 2px #675958;
}
img#hprlogo {
margin-bottom: 1.5rem;
}
#hpr_banner {
float: left;
}
#hpr_banner h1#sitename {
font-size: 2rem;
}
#hpr_banner h2 {
font-size: 1rem;
}
header>hr {
clear: right;
}
table.hosts td:first-child {
height: 80px;
}
footer #more_info nav.column {
clear: none;
float: left;
width: 19.5%;
margin-left: 0;
}
footer #more_info nav.column:first-child {
margin-left: 0.5rem;
}
footer #more_info nav.column ul li {
float: none;
margin-bottom: 0.5rem;
}
fieldset>table,
fieldset>table thead,
fieldset>table tbody,
fieldset>table tr,
fieldset>table th,
fieldset>table td,
fieldset>table td input,
fieldset>table td textarea {
display: revert;
width: revert;
}
fieldset>table tr {
vertical-align: baseline;
}
fieldset>table tr:nth-child(3) {
vertical-align: top;
}
fieldset>table tr:nth-child(3) td:first-child {
padding-top: 0.5rem;
}
fieldset>table tr:nth-last-child(3) td:first-child {
padding-top: 1rem;
}
fieldset>table tr:nth-last-child(2) {
vertical-align: top;
}
fieldset>table tr:nth-last-child(2) td:first-child {
padding-top: 0.75rem;
}
fieldset>table td input[type="radio"] {
margin-top: 1.5rem;
}
}

134
templates/page.tpl.html
View File

@@ -36,113 +36,45 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=yes"/>
</head>
<body id="give">
<div id="container" class="shadow">
<header>
<a href="<!--% absolute_path(baseurl) %-->"><img id="hprlogo" src="<!--% absolute_path(baseurl) %-->images/hpr_logo.png" alt="hprlogo"></a>
<div id="hpr_banner">
<p id="accessible_menu">
<a href="<!--% absolute_path(baseurl) %-->sitemap.html">Site Map</a>
- <a href="#maincontent">skip to main content</a>
</p>
<h1 id="sitename">
<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) %-->syndication.html">R</a>adio
</h1>
<h2>Your ideas, projects, opinions - podcasted.</h2>
<h3>New episodes every weekday Monday through Friday.<br />
<em><small>This page was <a href="https://repo.anhonesthost.net/HPR/hpr_generator">generated</a> by <a href="mailto:<!--% generator_email %-->"><!--% generator_name %--></a> at <time dateTime="<!--% format_iso8601_date(date.now) %-->"><!--% format_feed_date(date.now) %--></time></small></em></h3>
</div>
<hr />
<body>
<nav class="menu" role="navigation">
<!--% INCLUDE $navigation %-->
</nav>
<header>
<div id="title">
<h1>HPR</h1>
<h2 id="sitename">
<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) %-->syndication.html">R</a>adio
</h2>
<h3 id="site_url">https://HackerPublicRadio.org</h3>
</div>
<div id="tag_line">
<h1>The Community Podcast</h1>
<h2>Sharing your ideas, projects, opinions since 2005</h2>
<h3>New episodes every weekday
</div>
</h3>
</div>
<div id="qr_code">
<img src="<!--% absolute_path(baseurl) %-->images/qr_code_logo.png" alt="QR code of HPR URL">
</div>
</header>
<main id="maincontent">
<main>
<!--% INCLUDE $content %-->
</main>
<footer id="footer_page">
<h1 class="thick_bar">More Information...</h1>
<div id="more_info">
<nav class="column">
<h2>Ancestry</h2>
<ul>
<li><a href="http://audio.textfiles.com/shows/radiofreekamerica/">Radio Freek America</a></li>
<li><a href="http://audio.textfiles.com/shows/binrev/">BinRev Radio</a></li>
<li><a href="http://audio.textfiles.com/shows/infonomicon/">Infonomicon</a></li>
<li><a href="http://audio.textfiles.com/shows/twat/">Today With a Techie</a></li>
</ul>
</nav>
<nav class="column">
<h2>Social</h2>
<ul>
<li><a href="https://lists.hackerpublicradio.com/mailman/listinfo/hpr" >Mailing list</a></li>
<li><a rel="me" href="https://infosec.exchange/@hpr" >Mastodon</a></li>
<li><a href="https://matrix.to/#/#hpr:matrix.org" >Matrix</a></li>
<li><a href="mumble://chatter.skyehaven.net:64738/Hacker%20Public%20Radio?version=1.2.0" >Mumble</a></li>
<li><a href="https://web.libera.chat/gamja/?channels=oggcastplanet" target="_blank">#oggcastplanet</a></li>
<li><a href="https://t.me/+6fEhQrf5IEc4ZGU8">Telegram</a></li>
<li><a href="https://twitter.com/HPR">Twitter.com</a></li>
<li><a href="https://www.facebook.com/HenryPartickReilly" target="_blank">Facebook</a></li>
<li><a href="https://www.linkedin.com/company/hackerpublicradio/" target="_blank">Linked-In</a></li>
</ul>
</nav>
<nav class="column">
<h2>Unaffiliates</h2>
<ul>
<li><a href="https://archive.org/details/hackerpublicradio">Archive.org</a></li>
<li><a href="https://music.amazon.fr/podcasts/9d9e6211-ff78-4501-93b6-6a9e560c4dbd/hacker-public-radio">Amazon Music</a></li>
<li><a href="https://podcasts.google.com/feed/aHR0cDovL2hhY2tlcnB1YmxpY3JhZGlvLm9yZy9ocHJfcnNzLnBocA">Google Podcasts</a></li>
<li><a href="https://www.iheart.com/podcast/256-hacker-public-radio-30994513/" target="_blank">iHeart Radio</a></li>
<li><a href="https://podcasts.apple.com/us/podcast/hacker-public-radio/id281699640">iTunes</a></li>
<li><a href="https://www.listennotes.com/de/podcasts/hacker-public-radio-hacker-public-radio-mNH-jsI7LcJ/">Listen Notes</a></li>
<li><a href="https://www.mixcloud.com/hackerpublicradio/">MixCloud</a></li>
<li><a href="https://player.fm/series/hacker-public-radio">PlayerFM</a></li>
<li><a href="https://www.podchaser.com/podcasts/hacker-public-radio-76781">Podchaser</a></li>
<li><a href="https://nl.radio.net/podcast/hacker-public-radio">Radio.net</a></li>
<li><a href="https://open.spotify.com/show/7e2hYcnHj9vKgUzsIOf4r3">Spotify</a></li>
<li><a href="https://toppodcast.com/podcast_feeds/hacker-public-radio/">Top Podcasts</a></li>
</ul>
</nav>
<nav class="column">
<h2>Commons</h2>
<ul>
<li><a href="https://freeculturepodcasts.org/">Free Culture Podcasts</a></li>
<li><a href="https://archive.org/details/hackerpublicradio">archive.org</a></li>
<li><a href="https://repo.anhonesthost.net/HPR/">HPR Source Code</a></li>
<li><a href="https://cchits.net/">cchits.net</a></li>
<li><a href="https://freesound.org/">freesound.org</a></li>
<li><a href="https://librivox.org/">librivox.org</a></li>
<li><a href="https://openclipart.org/">openclipart.org</a></li>
<li><a href="https://openfontlibrary.org/">openfontlibrary.org</a></li>
<li><a href="https://www.openrouteservice.org/">openrouteservice.org/</a></li>
<li><a href="https://pixabay.com/">pixabay.com/</a></li>
</ul>
</nav>
<nav class="column">
<h2>Patrons</h2>
<ul>
<li><a href="https://anhonesthost.com/hosting/shared-hosting">AnHonestHost.com</a></li>
<li><a href="https://archive.org/donate/">Archive.org</a></li>
<li><a href="https://rsync.net/">rsync.net</a></li>
</ul>
</nav>
</div><!-- more_info -->
<h1 class="thick_bar">Copyright Information</h1>
<footer>
<hr>
<div id="copyright">
<p>
Unless otherwise stated, our shows are released under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">
Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)</a> license.</p>
<p>
<span>Unless otherwise stated, our shows are released under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">
Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)</a> license.</span>
<span>
The <span property="dct:title">HPR Website Design</span> is released to the <a rel="license" href="https://creativecommons.org/publicdomain/mark/1.0/">Public Domain</a>.
</p>
</div><!-- copyright -->
<hr />
</footer>
</span>
</div>
<!-- shadow -->
<div id="generated_by">This page was <a href="https://repo.anhonesthost.net/HPR/hpr_generator">generated</a> by <a href="mailto:<!--% generator_email %-->"><!--% generator_name %--></a> at <time dateTime="<!--% format_iso8601_date(date.now) %-->"><!--% format_feed_date(date.now) %--></time></em>
</div>
</footer>
</body>
</html>