227 lines
7.6 KiB
Smarty
227 lines
7.6 KiB
Smarty
|
[% 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
|
||
|
|
-->
|