[% TAGS html %]
<!--# feedWatcher_2.tpl 2020-01-26 -->
<!--# Web page design courtesy of Roan Horning -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */
html {
height: 100%;
background-color: black;
font-family: "FreeSans", sans-serif;
}
body {
background-color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
padding: 0;
height: 100%;
max-width: 50%;
margin: 0 auto 0 auto;
}
body > * {
padding: 1em 1em;
}
main {
background-color: #efbe0032;
background-color: hsla(47.7,100%,46.9%, 0.2);
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
overflow: auto;
}
main * {
opacity: 100%;
}
header, footer {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
background-color: #efbe00;
background-color: hsla(47.7,100%,46.9%, 1);
}
footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-top: 1em;
padding-bottom: 1em;
}
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-basis: 50%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
header > * {
margin: 0;
padding: 0;
min-height: 0;
}
header img {
max-height: 128px;
min-height: 128px;
}
header h1 {
padding: 0 0.5em 0 0.15em;
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
color: white;
font-size: 3rem;
text-shadow: -1px 1px 0 #000,
1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000;
}
header h1 span {
white-space: nowrap;
}
header aside {
border: solid 0.5em black;
padding: 1em;
background-color: #FCF2CD;
background-color: hsla(47.2, 88.7%, 89.6%, 1);
-ms-flex-negative: 1;
flex-shrink: 1;
}
dt {
font-weight: 600;
margin-top: 0.25em;
}
dd {
margin-top: 0.15em;
font-weight: 400;
}
@media only screen and (max-width: 1270px){
html {
border-left: solid 0.5em black;
border-right: solid 0.5em black;
}
body {
max-width:none;
}
header {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
header h1 {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 67%;
}
header aside {
margin-top: 0.5em;
}
}
@media only screen and (max-width: 600px){
body > * {
padding: 0.5em;
}
header > * {
padding: 0;
}
header h1 {
padding-right: 0;
font-size: 2rem;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 70%;
}
header img {
max-height: 96px;
min-height: 96px;
}
header aside {
font-size: 0.95rem;
padding: 0.5em;
}
footer img {
max-height: 32px;
}
}
@media only screen and (max-height: 780px) and (orientation: landscape) {
html {
height:auto;
display:initial;
}
}
</style>
</head>
<body>
<header>
<img src="./logo.svg" alt="[logo]">
<h1><span>Free Culture</span> Podcasts</h1>
<aside>
The finest selection of Free Culture Podcasts spanning
the genres of Discussion, Drama, Education, Music, and beyond.
</aside>
</header>
<main>
<!-- IF feeds.size > 0 -->
<!-- i = 0 -->
<dl>
<!-- WHILE i < feeds.size -->
<!-- IF feeds.$i.urls_title.length > 0 -->
<dt><a href="<!-- feeds.$i.urls_link -->"><!-- feeds.$i.urls_title FILTER html_entity --></a> (<a href="<!-- feeds.$i.urls_url -->">feed</a>)</dt>
<!-- ELSE -->
<dt><a href="<!-- feeds.$i.urls_link -->"><em>No title</em></a> (<a href="<!-- feeds.$i.urls_url -->">feed</a>)</dt>
<!-- END -->
<!-- IF feeds.$i.urls_description.length > 0 -->
<dd><!-- feeds.$i.urls_description FILTER html_entity --></dd>
<!-- ELSE -->
<dd><em>No description</em></dd>
<!-- END -->
<!-- i = i + 1 -->
<!-- END -->
</dl>
<!-- END -->
<p>and many <a href="https://gpodder.net/directory/">more</a> ...</p>
</main>
<footer>
<img src="./cc.svg" alt="[Creative Commons]">
<img src="./attribution.svg" alt="[Attribution]">
<img src="./share_alike.svg" alt="[Share Alike]">
<img src="./remix.svg" alt="[Remix]">
</footer>
</body>
</html>
<!--#
# vim: syntax=html:ts=8:sw=4:ai:et:tw=78:fo=tcrqn21
-->