<?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">
	<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
	<xsl:template match="/">
		<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
			<head>
				<title>TK's Web Quest 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"/>
				<style type="text/css">
          @font-face {
            font-family: 'luxi-mono';
            src: url("/assets/fonts/luxi-mono/bold.woff") format('woff');
            font-weight: bold;
            font-style: normal;
          }
          @font-face {
            font-family: 'luxi-mono';
            src: url("/assets/fonts/luxi-mono/regular.woff") format('woff');
            font-weight:normal;
            font-style: normal;
          }
          @font-face {
            font-family: 'luxi-mono';
            src: url("/assets/fonts/luxi-mono/regular-italic.woff") format('woff');
            font-weight: normal;
            font-style: italic;
          }
          @font-face {
            font-family: 'luxi-mono';
            src: url("/assets/fonts/luxi-mono/bold-italic.woff") format('woff');
            font-weight: bold;
            font-style: italic;
          }
          @font-face {
            font-family: 'tk-serif';
            src: url("/assets/fonts/tk-serif/light.woff") format('woff');
            font-weight: lighter;
            font-style: normal;
          }
          @font-face {
            font-family: 'tk-serif';
            src: url("/assets/fonts/tk-serif/light-italic.woff") format('woff');
            font-weight: lighter;
            font-style: italic;
          }
          @font-face {
            font-family: 'tk-serif';
            src: url("/assets/fonts/tk-serif/regular.woff") format('woff');
            font-weight: normal;
            font-style: normal;
          }
          @font-face {
            font-family: 'tk-serif';
            src: url("/assets/fonts/tk-serif/italic.woff") format('woff');
            font-weight: normal;
            font-style: italic;
          }
          @font-face {
            font-family: 'tk-serif';
            src: url("/assets/fonts/tk-serif/bold.woff") format('woff');
            font-weight: bold;
            font-style: normal;
          }
          @font-face {
            font-family: 'tk-serif';
            src: url("/assets/fonts/tk-serif/bold-italic.woff") format('woff');
            font-weight: bold;
            font-style: italic;
          }
          :root {
            --accent-main: #2578e7;
            --accent-soft: #e5f3ff;
            --accent-strong: #174da2;
            --accent-secondary: #bde8ff;
            --panel-shadow: #1d2833;
            --body-glow: rgba(255, 255, 255, 0.95);
            --body-start: rgba(255, 247, 232, 0.92);
            --body-end: rgba(255, 241, 221, 0.98);
            --grid-line: rgba(29, 40, 51, 0.04);
            --surface-solid: #ffffff;
            --surface-header-start: rgba(255, 255, 255, 0.85);
            --surface-header-end: rgba(255, 252, 245, 0.97);
            --surface-card: rgba(255, 255, 255, 0.92);
            --surface-card-soft: rgba(255, 248, 233, 0.95);
            --surface-muted: rgba(255, 255, 255, 0.75);
            --surface-panel-soft: rgba(255, 255, 255, 0.82);
            --shadow-color: rgba(29, 40, 51, 0.18);
            --marquee-ink: #0f1720;
            --button88start: #e5f3ff;
            --button88end: #bde8ff;
            --button88text: var(--color-ink);
            --font-sans: tk-serif;
            --font-display: luxi-mono;
            --color-paper: #fff7e8;
            --color-panel: #fffdf7;
            --color-ink: #16202a;
            --color-muted: #52606d;
            --color-line: #1d2833;
          }
          html {
            background: var(--color-paper);
            color: var(--color-ink);
          }
          body {
            width: min(1200px, calc(100% - 2rem));
            margin: 0 auto;
            padding: 1rem 0 3rem;
            min-height: 100vh;
            font-family: var(--font-sans);
            background:
              radial-gradient(circle at top left, var(--body-glow), transparent 24rem),
              linear-gradient(180deg, var(--body-start), var(--body-end)),
              repeating-linear-gradient(
                0deg,
                var(--grid-line) 0,
                var(--grid-line) 1px,
                transparent 1px,
                transparent 28px
              ),
              repeating-linear-gradient(
                90deg,
                var(--grid-line) 0,
                var(--grid-line) 1px,
                transparent 1px,
                transparent 28px
              );
            color: var(--color-ink);
          }
          * {
            box-sizing: border-box;
          }
          .content-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 1.5rem;
            align-items: start;
            margin-left: auto;
            margin-right: auto;
          }
          @media (min-width: 64rem) {
            .content-grid {
              grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.9fr);
            }
            .content-grid--single {
              grid-template-columns: minmax(0, 1fr);
            }
          }
          .stack-rows {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 1.5rem;
            min-width: 0;
          }
          header {
            display: flex;
            gap: 1rem;
            flex-direction: column;
            align-items: start;
            margin-bottom: 1.25rem;
            border: 3px solid var(--color-line);
            background: linear-gradient(180deg, var(--surface-header-start), var(--surface-header-end));
            box-shadow: 8px 8px 0 var(--shadow-color);
            padding: 1rem;
          }
          @media (min-width: 58rem) {
            header {
              grid-template-columns: minmax(0, 1fr) auto;
            }
          
            .site-brand {
              grid-column: 1 / -1;
            }
          }
          .site-brand__link a {
            display: inline-block;
            font-family: var(--font-sans);
            font-size: clamp(1.55rem, 2.5vw, 3rem);
            color: var(--color-ink);
            text-decoration: none;
          }
          .site-tagline {
            margin: 0.4rem 0 0;
            color: var(--color-muted);
            max-width: 48ch;
          }
          .site-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 0.65rem;
          }
          .site-nav__link {
            border: 2px solid var(--color-line);
            background: var(--color-panel);
            color: var(--color-ink);
            text-decoration: none;
            padding: 0.45rem 0.8rem;
            font-size: 1rem;
            box-shadow: 4px 4px 0 var(--shadow-color);
          }
          .site-nav__link.is-current {
            background: var(--accent-soft);
            border-color: var(--accent-strong);
          }
          h1 {
              font-size: 1.6rem;
              font-weight: bold;
          }
          .retro-panel {
            border: 3px solid var(--color-line);
            background: var(--color-panel);
            box-shadow: 10px 10px 0 var(--shadow-color);
          }
          .retro-panel__chrome {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: 0.7rem 0.9rem;
            border-bottom: 3px solid var(--color-line);
            background: linear-gradient(90deg, var(--accent-main), var(--accent-secondary));
          }
          .retro-panel__title {
            font-family: var(--font-display);
            font-size: 0.8rem;
            text-transform: lowercase;
            letter-spacing: 0.08em;
          }
          .retro-panel__lights {
            margin-left: auto;
            display: inline-flex;
            gap: 0.35rem;
          }
          .retro-panel__lights span {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 999px;
            border: 2px solid var(--color-line);
            background: var(--surface-muted);
          }
          .retro-panel__eyebrow {
            padding: 1.1rem;
            font-family: var(--font-display);
          }
          .retro-panel__header {
            padding:1.1rem;
            font-family: var(--font-sans);
            font-size: clamp(1.3rem, 2.25vw, 2.6rem);
          }
          .retro-panel__header a {
            text-decoration-style: none;
            color: var(--accent-color-strong);
          }
          .retro-panel__body {
            padding-left: 1.1rem;
            padding-right: 1.1rem;
            padding-bottom: 1.1rem;
          }
          h2 {
            font-size: 1.4rem;
            font-weight: normal;
          }
          .breadcrumbs {
            margin: 0 0 1rem;
            border: 2px solid var(--color-line);
            background: var(--surface-panel-soft);
            padding: 0.55rem 0.8rem;
            box-shadow: 10px 10px 0 var(--shadow-color);
          }
          .breadcrumbs__list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 1rem;
          }
          .breadcrumbs__list li + li::before {
            content: '/';
            margin-right: 0.45rem;
            color: var(--color-muted);
          }
          .post-card {
            border: 2px solid var(--color-line);
            background: linear-gradient(180deg, var(--surface-card), var(--surface-card-soft));
            padding: 1rem;
          }
          .post-card__meta,
          .entry-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
            color: var(--color-muted);
            font-size: 1rem;
          }
          .post-card__title {
            margin: 0.55rem 0;
            font-family: var(--font-display);
            font-size: 1.25rem;
            line-height: 1.25;
          }
          .post-card__title a {
            color: var(--color-ink);
            text-decoration: none;
          }
          .post-card__title a:hover {
            color: var(--accent-strong);
          }
          .panel-grid {
            display: grid;
            gap: 1rem;
            padding: 1.1rem;
          }
				</style>
			</head>
			<body>
        <header>
          <div class="site-brand__link">
            <a>
              <xsl:attribute name="href">
                <xsl:value-of select="/rss/channel/link" />
              </xsl:attribute>
              TK's Web Quest
            </a>
          </div>
          <div class="site-nav">
            <a class="site-nav__link" href="/">Home</a>
            <a class="site-nav__link" href="/blog/">Blog</a>
            <a class="site-nav__link" href="/games/">Games</a>
            <a class="site-nav__link" href="/webring/">Webring</a>
            <a class="site-nav__link" href="/about/">About</a>
            <a class="site-nav__link" href="/search/">Search</a>
            <a class="site-nav__link" href="/tags/">Tags</a>
            <a class="site-nav__link" href="/changelog/">Changelog</a>
          </div>
        </header>
        <div class="content-grid--single">
          <div class="stack-rows">
            <div class="breadcrumbs">
              <ul class="breadcrumbs__list">
                <li>
                  <a>
                    <xsl:attribute name="href">
                      <xsl:value-of select="/rss/channel/link" />
                    </xsl:attribute>
                    Home
                  </a>
                </li>
                <li>
                  RSS Feed
                </li>
              </ul>
            </div>
            <div class="retro-panel">
              <span class="retro-panel__chrome">
                <div class="retro-panel__title">
                  feed-info.txt
                </div>
                <div class="retro-panel__lights">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </span>
              <div class="retro-panel__eyebrow">
              </div>
              <div class="retro-panel__header">
                TK's Web Quest RSS Feed
              </div>
              <div class="retro-panel__body">
                <p>
                  RSS (Really Simple Syndication) is a classic internet technology for the distribution of content across the web. It powers all kinds of things, from the homepage at <a href="https://overworld.vg">Overworld</a> to podcast feeds, to blogs, just like this one! RSS is a fetch based protocol. While some RSS readers will go fetch new posts automatically in the background and notify you, the intended experience (at least on this site) is for the RSS reader to go get new posts <i>when you want them</i>. When you pull to refresh or open your reader, it scans through your subscriptions to look at feeds just like this one. If there's a new post, then it pulls the content straight from the XML. It's an indie-web friendly way to follow and read my posts as well as the posts of many other creators. I try to make my posts look as nice as I can on the main site, but if you are more likely to read them if they exist in the same place as other RSS subscriptions, then I would greatly appreciate you subscribing to this feed!
                </p>
                <h2>About this page:</h2>
                <p>
                  This is the RSS feed for TK's Web Quest. No, really, I'm serious! Look at the url in your browser. That "feed.xml" on the end means this is a real RSS feed and you can copy that link straight into your reader to subscribe. The feed on this page is styled using eXtensible Stylesheet Language, a relatively uncommon styling format specificially designed to allow XML to render like HTML with CSS. Like RSS, this is nothing new, but has fallen by the wayside as people hand-make their websites less and trust platforms to design everything for them more. 
                </p>
              </div>
            </div>
            <div class="retro-panel">
              <span class="retro-panel__chrome">
                <div clas="retro-panel__title">
                  feed.xml
                </div>
                <div class="retro-panel__lights">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </span>
              <div class="retro-panel__header">
                Recent Entries
              </div>
              <div class="retro-panel__body">
                <p>
                  Entries from the blog, sorted by date (newest first)
                </p>
              </div>
              <div class="panel-grid">
                <xsl:for-each select="/rss/channel/item">
                  <article class="post-card">
                    <p class="post-card__meta">
                      <span aria-hidden="true">// </span>
                      <span><time class="dt-published"><xsl:value-of select="pubDate" /></time></span>
                    </p>
                    <h3 class="post-card__title">
                      <a>
                        <xsl:attribute name="href">
                          <xsl:value-of select="link" />
                        </xsl:attribute>
                        <xsl:value-of select="title" />
                      </a>
                    </h3>
                  </article>
                </xsl:for-each>
              </div>
            </div>           
          </div>
        </div>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>