[mod] add CSS (LESS) to xsl style to view rss in browser

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This commit is contained in:
Markus Heiser 2024-11-24 18:19:11 +01:00 committed by Markus Heiser
parent 5fbea0b62d
commit cf8c36f351
5 changed files with 61 additions and 1 deletions

View file

@ -136,6 +136,12 @@ module.exports = function (grunt) {
nonull: true,
filter: file_exists,
},
{
src: ['src/less/rss.less'],
dest: 'css/rss.min.css',
nonull: true,
filter: file_exists,
},
],
},
},

View file

@ -0,0 +1,45 @@
@import (inline) "../../node_modules/normalize.css/normalize.css";
@import "definitions.less";
.text-size-adjust (@property: 100%) {
-webkit-text-size-adjust: @property;
-ms-text-size-adjust: @property;
-moz-text-size-adjust: @property;
text-size-adjust: @property;
}
// Reset padding and margin
html,
body,
main {
padding: 0;
margin: 0;
}
html {
font-family: sans-serif;
font-size: 0.9em;
.text-size-adjust;
color: var(--color-base-font);
background-color: var(--color-base-background);
scroll-behavior: smooth;
}
body {
margin-inline: 1rem;
}
a {
text-decoration: none;
color: var(--color-url-font);
&:visited {
color: var(--color-url-visited-font);
.highlight {
color: var(--color-url-visited-font);
}
}
}

View file

@ -1,39 +0,0 @@
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="5" encoding="UTF-8" indent="yes" />
<xsl:template match="rss">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><xsl:value-of select="channel/title" />RSS Feed</title>
<meta charset="UTF-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<header>
<h2>
<xsl:value-of select="channel/description" />
</h2>
</header>
<hr />
<main>
<xsl:for-each select="channel/item">
<article>
<h3>
<a hreflang="en" target="_blank">
<xsl:attribute name="href">
<xsl:value-of select="link" />
</xsl:attribute>
<xsl:value-of select="title" />
</a>
</h3>
<time><xsl:value-of select="pubDate" /></time>
<p><xsl:value-of select="description" /></p>
<hr />
</article>
</xsl:for-each>
</main>
</body>
</html>
</xsl:template>
</xsl:stylesheet>