diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 71668cd..10f155c 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -4,275 +4,491 @@
https://creativecommons.org/publicdomain/
*/
+/*
+ * See the following for the modern CSS responsive design techniques used in this file:
+ * - MDN web docs: Responsive design
+ * -- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
+ * - Matthew James Tayler: Responsive Font Size (Optimal Text at Every Breakpoint)
+ * -- https://matthewjamestaylor.com/responsive-font-size
+ * - 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/
+*/
-p.meta span label { font-weight: bold; }
-@media only screen and (min-width: 479px) {
-
-body {background: #dfdfdf;}
-div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
- font-family: Verdana, Arial, Helvetica, sans-serif;/* 1em/1.5 OpenDyslexic, */
- color: #4D4D4D; /* HPR Grey */
- background: white;
+html {
+ margin: 0;
+ padding: 0;
+ display: block;
}
+body {
+ display: block;
+ background: #dfdfdf;
+ font-size: 1rem; /* fallback for browsers that don't support the clamp function) */
+ font-size: clamp(1rem, 15px + 0.3vw, 1.07rem);
+ margin: 0;
+ padding: 0;
+}
-#container {
- width: 100%;
- max-width: 58em;
- margin: auto;
- overflow: hidden;
- padding: .5em;
- border: thin solid;
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+li,
+dl,
+dt,
+dd,
+img,
+form,
+fieldset,
+input,
+textarea,
+blockquote {
+ font-family: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */
+ color: #4D4D4D; /* HPR Grey */
background: white;
}
-.shadow {
- -moz-box-shadow: 2px 3px 6px 3px #675958;
- -webkit-box-shadow: 2px 3px 6px 3px #675958;
- box-shadow: 2px 3px 6px 3px #675958;}
-
-#hprlogo {
- display: block;
- position: relative;
- top: 0;
- left: 0;
- border: 0;
- margin: 0.75em;
- float:left;
+h1 {
+ font-size: 1.5rem;
+ margin: 1.25rem 0 0.75rem 0;
}
-#hpr_banner {
- display: block;
- position: relative;
- border: 0;
- margin: 0.75em;
- float: left;
+h2,
+article * h1 {
+ font-size: 1.45rem;
+ margin: 1.25rem 0 0.75rem 0;
}
-#hpr_banner h1 {margin: -.25em 0em -.5em 0em;}
-#hpr_banner h2 {font-size: 100%; font-weight: lighter; }
-#hpr_banner h3 {font-size: 90%; font-weight: lighter; }
-
-#accessible_menu {
- font-size: small;
+h3,
+article * h2 {
+ font-size: 1.25rem;
+ margin: 1.25rem 0 0.75rem 0;
}
-/* The main navigation menu */
-.menu {
- background: #4D4D4D; /* HPR Grey */
- text-align: Left;
- clear:both; /* Forces the menu to appear after the HPR Header block */
- padding: 0em 0em;
- margin: 0em 0em;
+h4,
+article * h3 {
+ font-size: 1.15rem;
+ margin: 1.25rem 0 0.75rem 0;
}
-.menu ul ul { /* Causes the sub menus not to be displayed, until hover shows them */
- display: none;
+img {
+ max-width: 100%;
+ height: auto;
}
-#main_menu li a {display: block;}
-
-.menu ul li { padding: .25em 0em;}
-
+ul {
+ padding-left: 1.15rem;
}
-.menu ul { /* The menu bar background across screen */
- background: #4D4D4D; /* HPR Grey */
- color: white;
- padding: 0 10px; /* Keeps sub menus to the left */
- list-style: none;
- position: relative;
- margin: 0;
- display: inline-table;
+li {
+ line-height: 1.25;
}
-.menu ul:after { /* Forces the dropdown to be a block with non float */
- content: "";
- clear: both;
- display: block;
+a {
+ text-decoration: none;
}
-.menu ul li {
- background: #4D4D4D; /* HPR Grey */
- color: white;
- float: left;
- padding: .5em 1em;
+a:hover {
+ cursor: pointer;
}
-.menu ul li a {
- background: #4D4D4D; /* HPR Grey */
- color: white;
- display: block;
- text-decoration: none;
-}
-
-.menu ul ul {
- background: #4D4D4D; /* HPR Grey */
- color: white;
- padding: 0;
- position: absolute;
- top: 100%;
-}
-
-.menu ul ul li {
- background: #4D4D4D; /* HPR Grey */
- color: white;
- float: none;
- position: relative;
-}
-
-.menu ul ul ul {
- position: absolute;
- left: 100%;
- top:0;
-}
-
-
hr {
- background: #4D4D4D; /* HPR Grey */
- border: 0;
- height: 0.25em;
+ background: #4D4D4D;
+ border: 0;
+ height: 0.25em;
}
-/* The multi colum footer layout */
-
-#footer_page {
- width:100%;
+audio {
+ padding: .7em 0em .5em 0em;
+ clear: both;
+ position: relative;
+ z-index: auto;
}
-.column {
- width:12%;
- background-color: white;
- color: #4D4D4D; /* HPR Grey */
- float:left;
- margin:0 10px;
- display: block;
+.audcredit {
+ font-size: 75%;
+ margin-bottom: 1em;
}
-.column li {
- list-style:none;
- padding: .25em 0em;
- font-size: 85%;
+p.meta {
+ line-height: 1.25;
+}
+
+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 {
- width:100%;
- background-color: #4D4D4D; /* HPR Grey */
- color: white;
- float:left;
- clear: both;
- height:1.5em;
- padding: .5em 0em .5em 0em;
- font-size: 1em;
- margin: 1em 0em 1em 0em;
+ background-color: #4D4D4D;
+ color: white;
+ padding: 0.5rem;
+ margin: 1rem 0 1rem 0;
}
-#more_info {margin: auto;}
-nav.column { display: block; padding: 0em 1em 0em 1em;}
-#copyright {
- font-size: small;
- width:100%;
- float:left;
+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);
}
-article, #copyright p {
- padding: 0 10px;
+#hpr_banner {
+ /* display: inline-block; */
+ border: 0;
+ margin: 0 0 0rem 0;
+ padding: 0;
}
-audio {padding: .7em 0em .5em 0em; clear: both; position: relative; z-index:auto;}
-.audcredit { font-size: 75%;margin-bottom: 1em;}
-h1.showtitle { font-size: 125%;}
-
-/* Full Index Page styling */
-#index_full h2.title {
- font-weight: lighter;
- margin-bottom: -.5em;
- padding: .5em 0em 0em 0em;
- font-size: 110%;}
-
-#index_full p.meta {font-size: 85%;}
-
-#small {
- font-size: small;
+#hpr_banner p {
+ margin: 0 0 0.5rem 0;
}
-p.author { font-size: 85%;}
-p.shownotes { padding: .5em;}
-#maincontent footer p { /* font-size: 75%; */ margin-bottom: 1em;}
-/* link styling */
-a:link {text-decoration: none;}
-
-table {
- width:100%;
-}
-table, th, td {
- border-collapse: collapse;
- padding: 2px;
- text-align: left;
-}
-table#t01, table#t01 th, table#t01 td {
- border: 1px solid black;
-}
-table#t01 th, table#t01 td {
- padding: 5px;
- text-align: left;
-}
-table#t01 tr:nth-child(even) {
- background-color: #eee;
-}
-table#t01 tr:nth-child(odd) {
- background-color:#fff;
-}
-table#t01 th {
- background-color: #4D4D4D;
- color: white;
+#hpr_banner h1#sitename {
+ font-size: clamp(1.44rem, -1rem + 3vw, 2rem);
+ letter-spacing: 0.06rem;
+ margin: 0;
+ padding: 0;
}
-pre { /* Add background, border and scrollbar to */
- background: #eee;
- border: 1px solid #ddd;
- overflow: auto;
- clear: both;
+#hpr_banner h2 {
+ font-size: clamp(0.74rem, -1rem + 2vw, 1rem);
+ font-weight: 510;
+ margin: 0 0 1rem 0;
+ padding: 0;
}
-table.hosts {
- background: white
+#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 */
+ background: #eee;
+ border: 1px solid #ddd;
+ overflow: auto;
+ clear: both;
+ padding: 0.5rem
+}
+
+pre code {
+ padding-right: 0.5rem;
+ font-size: 0.85rem;
+ line-height: 1;
}
-table.hosts tr:nth-child(even) { background-color:#cccccc; }
-table.hosts tr:nth-child(odd) { background-color:white; }
-table.hosts tr td img { vertical-align:middle }
pre.comment {
white-space: pre-wrap;
- padding: 2px;
line-height: 1.2rem;
}
-h3.title { margin: 1.25rem 0 0.75rem 0 }
-p.meta { margin: 0.25rem 0 }
-p.summary { margin: 0.25rem 0 }
-p.listen-in { margin-top: 0 }
+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;
-@media only screen and (max-width: 680px) {
- #container {width: 95%;}
- img#hprlogo {float: left; max-width: 85px; padding: .35em;}
- .column {width: 15%;}
- h1 {font-size: 140%;}
- h2 {font-size: 120%;}
- h3 {font-size: 100%;}
- nav.column { display: block; padding: 0em .25em 0em .25em;}
- #footer_page li {font-size: 85%; padding: .5em .25em .5em .25em;}
- footer p {font-size: 75%;}
- audio {float: none; }
}
-@media only screen and (max-width: 479px) {
- body {background: #ffffff; color: #4D4D4D; font-family: Verdana, Arial, Helvetica, sans-serif;/* 1em/1.5 OpenDyslexic, */}
- li {font-size: 100%; padding: .75em 0em .75em 0em; margin-left: -.25em;}
- img#hprlogo {float: left; max-width: 65px; padding: .35em;}
- .column {width: auto;}
- h1#sitename { clear: both;}
- a:link {text-decoration: none;}
- audio {padding: .7em 0em .5em 0em; width: 95%; max-width: 300px;}
- .audcredit { font-size: 65%; margin-bottom: 1em;}
+table.hosts tr:nth-child(even) {
+ background-color: #cccccc;
+ border-bottom: thick solid white;
}
+
+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;
+}
+
+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;
+ }
+
+ 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;
+ }
+}
\ No newline at end of file
diff --git a/site.cfg b/site.cfg
index 2676970..fdaf12e 100644
--- a/site.cfg
+++ b/site.cfg
@@ -97,6 +97,10 @@ content: content-episode.tpl.html
multipage: true
filename: eps/hpr[id]/index.html
+[download]
+navigation: navigation-get-shows.tpl.html
+content: content-download.tpl.html
+
[syndication]
navigation: navigation-get-shows.tpl.html
content: content-syndication.tpl.html
@@ -124,6 +128,10 @@ media_baseurl: https://www.hackerpublicradio.org/eps/
navigation: navigation-about.tpl.html
content: content-mumble-howto.tpl.html
+[contact]
+navigation: navigation-about.tpl.html
+content: content-contact.tpl.html
+
[promote]
navigation: navigation-about.tpl.html
content: content-promote.tpl.html
diff --git a/templates/content-contact.tpl.html b/templates/content-contact.tpl.html
new file mode 100644
index 0000000..6f90661
--- /dev/null
+++ b/templates/content-contact.tpl.html
@@ -0,0 +1,21 @@
+
+
+ We are always looking for more hosts...
+
+ Mail List
+
+ HPR is governed by the community, so decisions about how Hacker Public Radio should be run are made on the mailing list you can join it by going to :
+ http://www.hackerpublicradio.org/maillist
+
+
diff --git a/templates/content-correspondents.tpl.html b/templates/content-correspondents.tpl.html
index 21badfe..fd68237 100644
--- a/templates/content-correspondents.tpl.html
+++ b/templates/content-correspondents.tpl.html
@@ -18,7 +18,7 @@
on h.hostid = e.hostid
order by h.host'
) %-->
-
+
|
diff --git a/templates/content-download.tpl.html b/templates/content-download.tpl.html
new file mode 100644
index 0000000..88aff59
--- /dev/null
+++ b/templates/content-download.tpl.html
@@ -0,0 +1,56 @@
+
+
+ Download Archive
+ Please be aware that our Archive exceeds 62Gb (Ogg: 21Gb, Spx: 16Gb, mp3: 25Gb). We are happy for you to download them, but please make sure that you are not going to incur additional bandwidth charges on your side.
+ We will be happy to post you DVD's of the episodes anywhere in the world if bandwidth is an issue.
+
+ Full Episode Guide
+
+ The compete episode guide is available to you, and it lists all the shows on one page going right back to the very first episode.
+
+ Command line download
+
+ You can download the audio of the episodes directly from the command line using the following commands:
+
+
+ - ogg:
+ curl 'https://www.hackerpublicradio.org/eps/hpr[0001-3657].ogg' -o "hpr#1.ogg"
+ - spx:
+ curl 'https://www.hackerpublicradio.org/eps/hpr[0001-3657].spx' -o "hpr#1.spx"
+ - mp3:
+ curl 'https://www.hackerpublicradio.org/eps/hpr[0001-3657].mp3' -o "hpr#1.mp3"
+
+
+ Full RSS feed, BitTorrent and Magnet links
+ The full rss feed is updated daily and contains the complete show note with links to supporting articles. The torrent/magnet also contains this information and is a snaphot of the archive taken between 2007 and November 2013.
+
+ Direct download of the remaining shows
+
+ You can download the remaining episodes since the torrent was created directly from the command line using the following commands:
+
+
+ - ogg:
+ curl 'https://www.hackerpublicradio.org/eps/hpr[1391-3657].ogg' -o "hpr#1.ogg"
+
+
+
+
+ - spx:
+ curl 'https://www.hackerpublicradio.org/eps/hpr[1391-3657].spx' -o "hpr#1.spx"
+
+
+
+
+ - mp3:
+ curl 'https://www.hackerpublicradio.org/eps/hpr[1391-3657].mp3' -o "hpr#1.mp3"
+
+
+
+
+
diff --git a/templates/content-index.tpl.html b/templates/content-index.tpl.html
index 1c9b563..b40c545 100644
--- a/templates/content-index.tpl.html
+++ b/templates/content-index.tpl.html
@@ -69,7 +69,7 @@
-
+
Previous five weeks
diff --git a/templates/page.tpl.html b/templates/page.tpl.html
index 47d72c7..8008f89 100644
--- a/templates/page.tpl.html
+++ b/templates/page.tpl.html
@@ -67,7 +67,7 @@
|