mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig.space.git
synced 2025-12-13 16:26:50 +00:00
204 lines
4.8 KiB
XML
204 lines
4.8 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
|
|
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
|
|
<xsl:template match="/">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>
|
|
<xsl:value-of select="/rss/channel/title"/> RSS Feed
|
|
</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<style type="text/css">
|
|
*, ::before, ::after { box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Inconsolata', monospace;
|
|
font-size: 14px;
|
|
color: #0c1824;
|
|
background: #f1f4f7;
|
|
line-height: 1.666666;
|
|
padding: 15px;
|
|
}
|
|
a, a:link, a:visited {
|
|
color: #f7931a;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: #dd7901;
|
|
text-decoration: underline;
|
|
}
|
|
h1 {
|
|
line-height: 1.25em;
|
|
}
|
|
h1, h2, h3, p {
|
|
margin-top: 0;
|
|
margin-bottom: 15px;
|
|
}
|
|
h2 {
|
|
line-height: 1.25em;
|
|
margin-bottom: 5px;
|
|
}
|
|
h3 {
|
|
font-style: italic;
|
|
}
|
|
.container {
|
|
max-width: 860px;
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
padding: 30px;
|
|
border-radius: 4px;
|
|
}
|
|
.podcast-image {
|
|
flex-shrink: 0;
|
|
width: 160px;
|
|
height: 160px;
|
|
margin-left: 20px;
|
|
}
|
|
.podcast-image img {
|
|
width: 160px;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
}
|
|
.podcast-header {
|
|
display: flex;
|
|
padding-bottom: 20px;
|
|
}
|
|
.item {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
border-top: 1px solid #e0e4e8;
|
|
padding: 20px 0;
|
|
}
|
|
.item h2 {
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
}
|
|
.item p {
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
}
|
|
.item p + br, .item p > br {
|
|
display: none;
|
|
}
|
|
.item ol, .item ul {
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
}
|
|
.item .description {
|
|
overflow: hidden;
|
|
margin-bottom: 1em;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
word-break: break-word;
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
max-height: 150px;
|
|
width:100%;
|
|
}
|
|
.audio-container {
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
}
|
|
audio {
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
audio:focus {
|
|
outline: none;
|
|
}
|
|
.episode-time {
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
font-size: 12px;
|
|
color: #545d67;
|
|
margin-bottom: 1em;
|
|
}
|
|
@media only screen and (max-device-width: 768px) {
|
|
.audio-container {
|
|
min-height: 120px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="podcast-header">
|
|
<hgroup>
|
|
<h1>
|
|
<xsl:value-of select="/rss/channel/title"/>
|
|
</h1>
|
|
<p>
|
|
<xsl:value-of select="/rss/channel/description"/>
|
|
</p>
|
|
<xsl:if test="/rss/channel/link">
|
|
<p>
|
|
<a>
|
|
<xsl:attribute name="href">
|
|
<xsl:value-of select="/rss/channel/link"/>
|
|
</xsl:attribute>
|
|
<xsl:attribute name="target">_blank</xsl:attribute>
|
|
Einundzwanzig Website →
|
|
</a>
|
|
</p>
|
|
</xsl:if>
|
|
</hgroup>
|
|
<xsl:if test="/rss/channel/image">
|
|
<div class="podcast-image">
|
|
<a>
|
|
<xsl:attribute name="href">
|
|
<xsl:value-of select="/rss/channel/image/link"/>
|
|
</xsl:attribute>
|
|
<img>
|
|
<xsl:attribute name="src">
|
|
<xsl:value-of select="/rss/channel/image/url"/>
|
|
</xsl:attribute>
|
|
<xsl:attribute name="title">
|
|
<xsl:value-of select="/rss/channel/image/title"/>
|
|
</xsl:attribute>
|
|
</img>
|
|
</a>
|
|
</div>
|
|
</xsl:if>
|
|
</div>
|
|
<xsl:for-each select="/rss/channel/item">
|
|
<div class="item">
|
|
<h2>
|
|
<a>
|
|
<xsl:attribute name="href">
|
|
<xsl:value-of select="link"/>
|
|
</xsl:attribute>
|
|
<xsl:attribute name="target">_blank</xsl:attribute>
|
|
<xsl:value-of select="title"/>
|
|
</a>
|
|
</h2>
|
|
<div class="episode-time">
|
|
<span>
|
|
<xsl:value-of select="pubDate"/>
|
|
</span> •
|
|
<span>
|
|
<xsl:value-of select="itunes:duration" />
|
|
</span>
|
|
</div>
|
|
<xsl:choose>
|
|
<xsl:when test="description">
|
|
<div class="description">
|
|
<xsl:value-of select="description" disable-output-escaping="yes"/>
|
|
</div>
|
|
</xsl:when>
|
|
<xsl:otherwise>
|
|
</xsl:otherwise>
|
|
</xsl:choose>
|
|
<div class="audio-container">
|
|
<audio controls="true" preload="none">
|
|
<xsl:attribute name="src">
|
|
<xsl:value-of select="enclosure/@url"/>
|
|
</xsl:attribute>
|
|
</audio>
|
|
</div>
|
|
</div>
|
|
</xsl:for-each>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
</xsl:template>
|
|
</xsl:stylesheet>
|