Skip to content

Instantly share code, notes, and snippets.

@andrlik
Created October 21, 2022 14:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrlik/eeafe947722291b3fdb3be9cb66394a5 to your computer and use it in GitHub Desktop.
Save andrlik/eeafe947722291b3fdb3be9cb66394a5 to your computer and use it in GitHub Desktop.
Atom stylesheet example for andrlik.org
body {max-width: 960px;margin: 0 auto;padding: 24px 12px 48px 12px;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #ffffff;background-color: #333333;background-attachment: fixed;background-size: cover;font-family: "PT Sans", 'Source Sans Pro', 'Verdana', sans-serif}.head {display: flex;flex: wrap;align-items: center;justify-content: start;margin-bottom: 48px; color: #242121;}.avatar {padding-right: 20px;}.description {flex-grow: 1;padding-left: 20px;border-left: 1px solid #E6E6E6; color: #ffffff;}.description a {color: #ffffff;}main { background-color: #ffffff; color: #242121; padding:4px 20px; border-radius:10px;}article {padding-bottom: 20px;border-bottom: 2px solid #E6E6E6;}h2 {margin-bottom: 36px;}h3 {font-size: 22px;} a { color: #D9411E;}footer {font-size: 16px;}.rss-logo {width: 30px;height: 30px;padding-right: 8px;}.aboutfeeds {font-size: 16px;background-color: #F5F5F5;margin: 20px 0 40px 0;padding: 4px 20px;color: #242121; border-radius:10px;}.about {margin-top: 40px;font-size: 16px;color: #242121;}.about img {padding-right: 8px;vertical-align: middle;}
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/" 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="feed/title"/> RSS Feed</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="/theme/stylesheet/fontcss.css"/>
<link rel="stylesheet" href="/theme/stylesheet/feed.css"/>
</head>
<body>
<header>
<h1><svg class="rss-logo" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 256 256"><defs><linearGradient x1=".085" y1=".085" x2=".915" y2=".915" id="a"><stop offset="0" stop-color="#E3702D"/><stop offset=".107" stop-color="#EA7D31"/><stop offset=".35" stop-color="#F69537"/><stop offset=".5" stop-color="#FB9E3A"/><stop offset=".702" stop-color="#EA7C31"/><stop offset=".887" stop-color="#DE642B"/><stop offset="1" stop-color="#D95B29"/></linearGradient></defs><rect width="256" height="256" rx="55" ry="55" fill="#CC5D15"/><rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#F49C52"/><rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#a)"/><circle cx="68" cy="189" r="24" fill="#FFF"/><path d="M160 213h-34a82 82 0 0 0-82-82V97a116 116 0 0 1 116 116z" fill="#FFF"/><path d="M184 213A140 140 0 0 0 44 73V38a175 175 0 0 1 175 175z" fill="#FFF"/></svg><xsl:value-of select="atom:feed/atom:title"/></h1>
<div class="aboutfeeds">
<p>This is a web feed, also known as an RSS feed. To know more read <a href="https://aboutfeeds.com/" target="_blank"><strong>About Feeds</strong> <small>↗︎</small></a> by Matt Webb.</p>
<p><big>↘️ <strong>Subscribe</strong> by copying the URL into your RSS reader.</big></p>
</div>
<div class="head">
<div class="avatar">
<img src="/images/IMG_0002.jpg" height="100" width="100" alt="Avatar of Daniel Andrlik"/>
</div>
<div class="description">
<p><xsl:value-of select="atom:feed/atom:subtitle"/></p>
<p><a hreflang="en"><xsl:attribute name="href"><xsl:value-of select="atom:feed/atom:link/attribute::href"/></xsl:attribute>Visit Website &#x2192;</a></p>
</div>
</div>
</header>
<main>
<p class="about"><img src="/favicon.png" alt="Ministry of Intrigue icon" width="24" height="24"/><a href="https://www.andrlik.org/about/">About Daniel Andrlik</a>.</p>
<h2>📄 Recent Posts</h2>
<xsl:for-each select="atom:feed/atom:entry">
<article>
<h3><a hreflang="en"><xsl:attribute name="href"><xsl:value-of select="atom:link/attribute::href"/></xsl:attribute><xsl:value-of select="atom:title"/></a></h3>
<footer>Published: <time><xsl:value-of select="atom:published" /></time></footer>
</article>
</xsl:for-each>
</main>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment