mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig.space.git
synced 2025-12-13 16:26:50 +00:00
Add feed stylesheet
This commit is contained in:
Dennis Reimann
203
static/xslsheet.xml
Normal file
203
static/xslsheet.xml
Normal file
@@ -0,0 +1,203 @@
|
||||
<?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>
|
||||
Reference in New Issue
Block a user