refactor(rss): Beautify
This commit is contained in:
parent
cb3cf7e8c3
commit
f9aa0690d9
@ -22,6 +22,12 @@ body {
|
||||
flex-direction: column;
|
||||
background-color: var(--background-one);
|
||||
color: var(--text-one);
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -71,3 +77,14 @@ a {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.navigation-sticky {
|
||||
background-color: var(--secondary-light-one);
|
||||
color: var(--primary-light-one);
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
border-bottom-right-radius: 8px;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
@ -16,205 +16,207 @@
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<alert-box type="info">
|
||||
<strong>This is an RSS feed</strong>. Subscribe by copying
|
||||
the URL from the address bar into your newsreader. Visit <a
|
||||
href="https://aboutfeeds.com">About Feeds
|
||||
</a> to learn more and get started. It’s free.
|
||||
</alert-box>
|
||||
<div class="rss-summary">
|
||||
<h1 class="flex items-start">
|
||||
RSS Feed Preview
|
||||
<svg
|
||||
class="inline-icon"
|
||||
version="1.1"
|
||||
width="128px"
|
||||
height="128px"
|
||||
id="RSSicon"
|
||||
viewBox="0 0 256 256"
|
||||
sodipodi:docname="Feed-icon.svg"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview32"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="2.9085291"
|
||||
inkscape:cx="161.07798"
|
||||
inkscape:cy="133.22886"
|
||||
inkscape:window-width="2048"
|
||||
inkscape:window-height="1252"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="RSSicon"/>
|
||||
<defs
|
||||
id="defs17">
|
||||
<linearGradient
|
||||
x1="0.085"
|
||||
y1="0.085"
|
||||
x2="0.915"
|
||||
y2="0.915"
|
||||
id="RSSg">
|
||||
<stop
|
||||
offset="0.0"
|
||||
stop-color="#E3702D"
|
||||
id="stop2"/>
|
||||
<stop
|
||||
offset="0.1071"
|
||||
stop-color="#EA7D31"
|
||||
id="stop4"/>
|
||||
<stop
|
||||
offset="0.3503"
|
||||
stop-color="#F69537"
|
||||
id="stop6"/>
|
||||
<stop
|
||||
offset="0.5"
|
||||
stop-color="#FB9E3A"
|
||||
id="stop8"/>
|
||||
<stop
|
||||
offset="0.7016"
|
||||
stop-color="#EA7C31"
|
||||
id="stop10"/>
|
||||
<stop
|
||||
offset="0.8866"
|
||||
stop-color="#DE642B"
|
||||
id="stop12"/>
|
||||
<stop
|
||||
offset="1.0"
|
||||
stop-color="#D95B29"
|
||||
id="stop14"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect
|
||||
width="256"
|
||||
height="256"
|
||||
rx="55"
|
||||
ry="55"
|
||||
x="0"
|
||||
y="0"
|
||||
fill="#CC5D15"
|
||||
id="rect19"
|
||||
style="fill:#414141;fill-opacity:1"/>
|
||||
<rect
|
||||
width="246"
|
||||
height="246"
|
||||
rx="50"
|
||||
ry="50"
|
||||
x="5"
|
||||
y="5"
|
||||
fill="#F49C52"
|
||||
id="rect21"
|
||||
style="fill:#414141;fill-opacity:1"/>
|
||||
<rect
|
||||
width="236"
|
||||
height="236"
|
||||
rx="47"
|
||||
ry="47"
|
||||
x="10"
|
||||
y="10"
|
||||
fill="url(#RSSg)"
|
||||
id="rect23"
|
||||
style="fill:#414141;fill-opacity:1"/>
|
||||
<circle
|
||||
cx="68"
|
||||
cy="189"
|
||||
r="24"
|
||||
fill="#FFF"
|
||||
id="circle25"/>
|
||||
<path
|
||||
d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z"
|
||||
fill="#FFF"
|
||||
id="path27"/>
|
||||
<path
|
||||
d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z"
|
||||
fill="#FFF"
|
||||
id="path29"/>
|
||||
<rect
|
||||
width="256"
|
||||
height="256"
|
||||
rx="55"
|
||||
ry="55"
|
||||
x="299.70761"
|
||||
y="188.99872"
|
||||
fill="#CC5D15"
|
||||
id="rect19-3"
|
||||
style="fill:#414141;fill-opacity:1"/>
|
||||
<rect
|
||||
width="246"
|
||||
height="246"
|
||||
rx="50"
|
||||
ry="50"
|
||||
x="304.70761"
|
||||
y="193.99872"
|
||||
fill="#F49C52"
|
||||
id="rect21-6"
|
||||
style="fill:#414141;fill-opacity:1"/>
|
||||
<rect
|
||||
width="236"
|
||||
height="236"
|
||||
rx="47"
|
||||
ry="47"
|
||||
x="309.70761"
|
||||
y="198.99872"
|
||||
fill="url(#RSSg)"
|
||||
id="rect23-7"
|
||||
style="fill:#414141;fill-opacity:1"/>
|
||||
<circle
|
||||
cx="367.70761"
|
||||
cy="377.99872"
|
||||
r="24"
|
||||
fill="#ffffff"
|
||||
id="circle25-5"/>
|
||||
<path
|
||||
d="m 459.7076,401.99872 h -34 a 82,82 0 0 0 -82,-82 v -34 a 116,116 0 0 1 116,116 z"
|
||||
fill="#ffffff"
|
||||
id="path27-3"/>
|
||||
<path
|
||||
d="m 483.7076,401.99872 a 140,140 0 0 0 -140,-140 v -35 a 175,175 0 0 1 175,175 z"
|
||||
fill="#ffffff"
|
||||
id="path29-5"/>
|
||||
</svg>
|
||||
</h1>
|
||||
<h2>
|
||||
<xsl:value-of select="/rss/channel/title"/>
|
||||
</h2>
|
||||
<p>
|
||||
<xsl:value-of select="/atom:feed/atom:subtitle"/>
|
||||
</p>
|
||||
<div class="navigation-sticky">
|
||||
<a>
|
||||
<xsl:attribute name="href">
|
||||
/
|
||||
</xsl:attribute>
|
||||
Visit Website →
|
||||
<b>Back to main site</b>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content">
|
||||
<alert-box type="info">
|
||||
<strong>This is an RSS feed</strong>. Subscribe by copying
|
||||
the URL from the address bar into your newsreader. Visit <a
|
||||
href="https://aboutfeeds.com">About Feeds
|
||||
</a> to learn more and get started. It’s free.
|
||||
</alert-box>
|
||||
<div class="rss-summary">
|
||||
<h1 class="flex items-start">
|
||||
RSS Feed Preview - <xsl:value-of select="/rss/channel/title"/>
|
||||
<svg
|
||||
class="inline-icon"
|
||||
version="1.1"
|
||||
width="128px"
|
||||
height="128px"
|
||||
id="RSSicon"
|
||||
viewBox="0 0 256 256"
|
||||
sodipodi:docname="Feed-icon.svg"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview32"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="2.9085291"
|
||||
inkscape:cx="161.07798"
|
||||
inkscape:cy="133.22886"
|
||||
inkscape:window-width="2048"
|
||||
inkscape:window-height="1252"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="RSSicon"/>
|
||||
<defs
|
||||
id="defs17">
|
||||
<linearGradient
|
||||
x1="0.085"
|
||||
y1="0.085"
|
||||
x2="0.915"
|
||||
y2="0.915"
|
||||
id="RSSg">
|
||||
<stop
|
||||
offset="0.0"
|
||||
stop-color="#E3702D"
|
||||
id="stop2"/>
|
||||
<stop
|
||||
offset="0.1071"
|
||||
stop-color="#EA7D31"
|
||||
id="stop4"/>
|
||||
<stop
|
||||
offset="0.3503"
|
||||
stop-color="#F69537"
|
||||
id="stop6"/>
|
||||
<stop
|
||||
offset="0.5"
|
||||
stop-color="#FB9E3A"
|
||||
id="stop8"/>
|
||||
<stop
|
||||
offset="0.7016"
|
||||
stop-color="#EA7C31"
|
||||
id="stop10"/>
|
||||
<stop
|
||||
offset="0.8866"
|
||||
stop-color="#DE642B"
|
||||
id="stop12"/>
|
||||
<stop
|
||||
offset="1.0"
|
||||
stop-color="#D95B29"
|
||||
id="stop14"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect
|
||||
width="256"
|
||||
height="256"
|
||||
rx="55"
|
||||
ry="55"
|
||||
x="0"
|
||||
y="0"
|
||||
fill="#CC5D15"
|
||||
id="rect19"
|
||||
style="fill:#414141;fill-opacity:1"/>
|
||||
<rect
|
||||
width="246"
|
||||
height="246"
|
||||
rx="50"
|
||||
ry="50"
|
||||
x="5"
|
||||
y="5"
|
||||
fill="#F49C52"
|
||||
id="rect21"
|
||||
style="fill:#414141;fill-opacity:1"/>
|
||||
<rect
|
||||
width="236"
|
||||
height="236"
|
||||
rx="47"
|
||||
ry="47"
|
||||
x="10"
|
||||
y="10"
|
||||
fill="url(#RSSg)"
|
||||
id="rect23"
|
||||
style="fill:#414141;fill-opacity:1"/>
|
||||
<circle
|
||||
cx="68"
|
||||
cy="189"
|
||||
r="24"
|
||||
fill="#FFF"
|
||||
id="circle25"/>
|
||||
<path
|
||||
d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z"
|
||||
fill="#FFF"
|
||||
id="path27"/>
|
||||
<path
|
||||
d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z"
|
||||
fill="#FFF"
|
||||
id="path29"/>
|
||||
<rect
|
||||
width="256"
|
||||
height="256"
|
||||
rx="55"
|
||||
ry="55"
|
||||
x="299.70761"
|
||||
y="188.99872"
|
||||
fill="#CC5D15"
|
||||
id="rect19-3"
|
||||
style="fill:#414141;fill-opacity:1"/>
|
||||
<rect
|
||||
width="246"
|
||||
height="246"
|
||||
rx="50"
|
||||
ry="50"
|
||||
x="304.70761"
|
||||
y="193.99872"
|
||||
fill="#F49C52"
|
||||
id="rect21-6"
|
||||
style="fill:#414141;fill-opacity:1"/>
|
||||
<rect
|
||||
width="236"
|
||||
height="236"
|
||||
rx="47"
|
||||
ry="47"
|
||||
x="309.70761"
|
||||
y="198.99872"
|
||||
fill="url(#RSSg)"
|
||||
id="rect23-7"
|
||||
style="fill:#414141;fill-opacity:1"/>
|
||||
<circle
|
||||
cx="367.70761"
|
||||
cy="377.99872"
|
||||
r="24"
|
||||
fill="#ffffff"
|
||||
id="circle25-5"/>
|
||||
<path
|
||||
d="m 459.7076,401.99872 h -34 a 82,82 0 0 0 -82,-82 v -34 a 116,116 0 0 1 116,116 z"
|
||||
fill="#ffffff"
|
||||
id="path27-3"/>
|
||||
<path
|
||||
d="m 483.7076,401.99872 a 140,140 0 0 0 -140,-140 v -35 a 175,175 0 0 1 175,175 z"
|
||||
fill="#ffffff"
|
||||
id="path29-5"/>
|
||||
</svg>
|
||||
</h1>
|
||||
<p>
|
||||
<xsl:value-of select="/atom:feed/atom:subtitle"/>
|
||||
</p>
|
||||
|
||||
<h2>Adoption Notices</h2>
|
||||
<xsl:for-each select="/rss/channel/item">
|
||||
<div class="post-summary">
|
||||
<h1>
|
||||
<a>
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="atom:link/@href"/>
|
||||
</xsl:attribute>
|
||||
<xsl:value-of select="title"/>
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<div class="post-description">
|
||||
<xsl:value-of select="description"/>
|
||||
<h2>Adoption Notices</h2>
|
||||
<xsl:for-each select="/rss/channel/item">
|
||||
<div class="post-summary">
|
||||
<h1>
|
||||
<a>
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="atom:link/@href"/>
|
||||
</xsl:attribute>
|
||||
<xsl:value-of select="title"/>
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<div class="post-description">
|
||||
<xsl:value-of select="description"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</xsl:for-each>
|
||||
</xsl:for-each>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user