[% 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
-->
