From dc464c94823e0560c8be8ddd9432c347a7abb7f4 Mon Sep 17 00:00:00 2001
From: Shannon Kay <me@shannonkay.com>
Date: Sun, 2 Mar 2025 01:12:12 -0800
Subject: [PATCH] Shannon theme and Cozy theme

---
 cozy.nnwtheme/Info.plist        |  16 +
 cozy.nnwtheme/stylesheet.css    | 559 ++++++++++++++++++++++++++++++++
 cozy.nnwtheme/template.html     |  47 +++
 shannon.nnwtheme/Info.plist     |  16 +
 shannon.nnwtheme/stylesheet.css | 558 +++++++++++++++++++++++++++++++
 shannon.nnwtheme/template.html  |  47 +++
 6 files changed, 1243 insertions(+)
 create mode 100644 cozy.nnwtheme/Info.plist
 create mode 100644 cozy.nnwtheme/stylesheet.css
 create mode 100644 cozy.nnwtheme/template.html
 create mode 100644 shannon.nnwtheme/Info.plist
 create mode 100644 shannon.nnwtheme/stylesheet.css
 create mode 100644 shannon.nnwtheme/template.html

diff --git a/cozy.nnwtheme/Info.plist b/cozy.nnwtheme/Info.plist
new file mode 100644
index 0000000..b28fc72
--- /dev/null
+++ b/cozy.nnwtheme/Info.plist
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+   <key>Name</key>
+   <string>Cozy</string>
+   <key>ThemeIdentifier</key>
+   <string>com.shannonkay.cozytheme</string>
+   <key>CreatorHomePage</key>
+   <string>https://www.shannonkay.com</string>
+   <key>CreatorName</key>
+   <string>Shannon Kay</string>
+   <key>Version</key>
+   <integer>1</integer>
+</dict>
+</plist>
\ No newline at end of file
diff --git a/cozy.nnwtheme/stylesheet.css b/cozy.nnwtheme/stylesheet.css
new file mode 100644
index 0000000..abe0e62
--- /dev/null
+++ b/cozy.nnwtheme/stylesheet.css
@@ -0,0 +1,559 @@
+/* Shared iOS and macOS CSS rules. Platform specific rules are at the bottom of this file. */
+
+body {
+	margin-left: auto;
+	margin-right: auto;
+	background-color: var(--background-color);
+	word-wrap: break-word;
+	max-width: 44em;
+}
+
+a {
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+.feedlink {
+	font-weight: bold;
+}
+
+.headerTable {
+	width: 100%;
+	height: 68px;
+}
+
+.systemMessage {
+	position: absolute;
+	top: 45%;
+	left: 50%;
+	transform: translateX(-55%) translateY(-50%);
+	-webkit-user-select: none;
+	cursor: default;
+}
+
+:root {
+	--background-color: #f4ebeb;
+	--header-table-border-color: rgba(0, 0, 0, 0.1);
+	--header-color: #f34482;
+	--body-code-color: #44364a;
+	--code-background-color: #e4cfee;
+	--system-message-color: #fc82a3;
+	--feedlink-color: rgba(255, 0, 0, 0.6);
+	--article-title-color: #fc82a3;
+	--article-date-color: #685a68;
+	--table-cell-border-color: #f7d3d6;
+	--sup-link-color: rgba(255, 255, 255, 0.9);
+	--header-font: "ivystyle-sans", Helvetica, Verdana, Geneva, Tahoma, Seravek, sans-serif;
+	--article-font: "ivyjournal", "adobe-garamond-pro", Garamond, Baskerville, Seravek, serif;
+}
+
+@media(prefers-color-scheme: dark) {
+	:root {
+		--background-color: #282a36;
+		--header-color: #ffcddc;
+		--body-code-color: #ff79c6;
+		--system-message-color: #faa0c7;
+		--feedlink-color: #ffdfe9;
+		--article-title-color: #faa0c7;
+		--article-date-color: #f4ebee;
+		--table-cell-border-color: #f7d3d6;
+		--code-background-color: #1a1e24;
+	}
+}
+
+body .headerTable {
+	border-bottom: 1px solid var(--header-table-border-color);
+	color: var(--header-color);
+	
+}
+
+body .header {
+	color: var(--header-color);
+	font-family: var(--header-font);
+	font-size: 1.5rem;
+	
+}
+
+body .header a:link, .header a:visited {
+	color: var(--header-color);
+	font-family: var(--header-font);
+	font-size: 1.5rem;
+}
+
+body code, body pre {
+	color: var(--body-code-color);
+	padding: 0.2rem;
+}
+
+body > .systemMessage {
+	color: var(--system-message-color);
+}
+
+.feedlink a:link, .feedlink a:visited {
+	color: var(--feedlink-color);
+}
+    border: solid white 2pt;
+} */
+.avatar img {
+	border-radius: 4px;
+}
+
+.feedIcon {
+	border-radius: 4px;
+}
+
+.rightAlign {
+	text-align: end;
+}
+
+.leftAlign {
+	text-align: start;
+}
+
+.articleTitle a:link, .articleTitle a:visited {
+	color: var(--article-title-color);
+	margin-top: 26px;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	font-size: 2rem;
+}
+
+.articleDateline {
+	margin-bottom: 5px;
+	/* font-weight: bold; */
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	font-variant-caps: all-small-caps;
+	/* letter-spacing: 0.025em; */
+}
+
+.articleDateline a:link, .articleDateline a:visited {
+	color: var(--article-date-color);
+}
+
+.articleDatelineTitle {
+	margin-bottom: 5px;
+	font-weight: bold;
+	font-variant-caps: all-small-caps;
+}
+
+.articleDatelineTitle a:link, .articleDatelineTitle a:visited {
+	color: var(--article-title-color);
+}
+
+.externalLink {
+	margin-top: 15px;
+	margin-bottom: 15px;
+	font-size: 0.875em;
+	font-style: italic;
+	color: var(--article-date-color);
+	width: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.externalLink a {
+	font-family: "SF Mono", Menlo, Courier, monospace;
+	font-size: 0.85em;
+	font-variant-caps: normal;
+	letter-spacing: 0em;
+}
+
+.articleBody {
+	margin-top: 20px;
+	line-height: 1.6em;
+	text-align: justify;
+	color: #594f67;
+}
+
+.articleBody a {
+	padding: 0px 1px;
+}
+
+h1 {
+	/* line-height: 1.15em; */
+	font-weight: bold;
+	padding-bottom: 0;
+	margin-bottom: 5px;
+}
+h1, h2, h3, h4 {
+	font-family: var(--header-font);
+	text-align: left;
+	color: var(--header-color);
+}
+pre {
+	max-width: 100%;
+	margin: 0;
+	overflow: auto;
+	overflow-y: hidden;
+	word-wrap: normal;
+	word-break: normal;
+	border-radius: 3px;
+}
+
+pre {
+	line-height: 1.4286em;
+}
+
+code, pre {
+	font-family: "SF Mono Regular", Menlo, Courier, monospace;
+	/* font-size: 1em; */
+	-webkit-hyphens: none;
+	background: var(--code-background-color);
+}
+
+code {
+	padding: 1px 2px;
+	border-radius: 2px;
+}
+
+pre code {
+	letter-spacing: -.027em;
+	/* font-size: 0.9375em; */
+}
+
+.nnw-overflow {
+	overflow-x: auto;
+}
+
+/*
+ Instead of the last-child bits, border-collapse: collapse
+ could have been used. However, then the inter-cell borders
+ overlap the table border, which looks bad.
+ */
+.nnw-overflow table {
+	margin-bottom: 1px;
+	border-spacing: 0;
+	border: 1px solid var(--secondary-accent-color);
+	font-size: inherit;
+}
+
+.nnw-overflow table table {
+	margin-bottom: 0;
+	border: none;
+}
+
+.nnw-overflow td, .nnw-overflow th {
+	-webkit-hyphens: none;
+	word-break: normal;
+	border: 1px solid var(--table-cell-border-color);
+	border-top: none;
+	border-left: none;
+	padding: 5px;
+}
+
+.nnw-overflow tr :matches(td, th):last-child {
+	border-right: none;
+}
+
+.nnw-overflow :matches(thead, tbody, tfoot):last-child > tr:last-child :matches(td, th) {
+	border-bottom: none;
+}
+
+.nnw-overflow td pre {
+	border: none;
+	padding: 0;
+}
+
+.nnw-overflow table[border="0"] {
+	border-width: 0;
+}
+
+img, figure, video, div, object {
+	max-width: 100%;
+	height: auto !important;
+	margin: 0 auto;
+}
+figure img {
+	border: solid 0.2rem #faa0c7;
+}
+
+iframe {
+	max-width: 100%;
+	margin: 0 auto;
+}
+
+iframe.nnw-constrained {
+	max-height: 50vw;
+}
+
+figure {
+	margin-bottom: 1em;
+	margin-top: 1em;
+}
+
+figcaption {
+	font-size: 14px;
+	line-height: 1.3em;
+	padding: 0.2rem;
+}
+
+sup {
+	vertical-align: top;
+	position: relative;
+	bottom: 0.2rem;
+}
+
+sub {
+	vertical-align: bottom;
+	position: relative;
+	top: 0.2rem;
+}
+
+hr {
+	border: 1.5px solid var(--table-cell-border-color);
+}
+
+.iframeWrap {
+	position: relative;
+	display: block;
+	padding-top: 56.25%;
+}
+
+.iframeWrap iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100% !important;
+	width: 100% !important;
+}
+
+blockquote {
+	margin-inline-start: 0;
+	margin-inline-end: 0;
+	padding-inline-start: 15px;
+	border-inline-start: 3px solid var(--block-quote-border-color);
+}
+
+/* Feed Specific */
+
+.feedbin--article-wrap {
+	border-top: 1px solid var(--header-table-border-color);
+}
+
+/* Newsfoot theme for light mode (default) */
+.newsfoot-footnote-popover {
+	background: #ccc;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.25);
+	color: black;
+	padding: 1px;
+}
+
+.newsfoot-footnote-popover-arrow {
+	background: #fafafa;
+	border: 1px solid #ccc;
+}
+
+.newsfoot-footnote-popover-inner {
+	background: #fafafa;
+}
+
+body a.footnote,
+body a.footnote:visited,
+.newsfoot-footnote-popover + a.footnote:hover {
+	background: #aaa;
+	color: white;
+	transition: background-color 200ms ease-out;
+}
+
+a.footnote:hover,
+.newsfoot-footnote-popover + a.footnote {
+	background: #666;
+	transition: background-color 200ms ease-out;
+}
+
+/* Newsfoot theme for dark mode */
+@media screen and (prefers-color-scheme: dark) {
+	.newsfoot-footnote-popover {
+		background: #444;
+		color: rgb(224, 224, 224);
+	}
+
+	.newsfoot-footnote-popover-arrow {
+		background: #242424;
+		border: 1px solid #444;
+	}
+
+	.newsfoot-footnote-popover-inner {
+		background: #242424;
+	}
+
+	body a.footnote,
+	body a.footnote:visited,
+	.newsfoot-footnote-popover + a.footnote:hover {
+		background: #aaa;
+		color: white;
+		transition: background-color 200ms ease-out;
+	}
+
+	a.footnote:hover,
+	.newsfoot-footnote-popover + a.footnote {
+		background: #666;
+		transition: background-color 200ms ease-out;
+	}
+
+}
+
+/* iOS Specific */
+@supports (-webkit-touch-callout: none) {
+	
+	body {
+		margin-top: 3px;
+		margin-bottom: 20px;
+		padding-left: 20px;
+		padding-right: 20px;
+
+		word-break: break-word;
+		-webkit-hyphens: auto;
+		-webkit-text-size-adjust: none;
+	}
+
+	:root {
+		color-scheme: light dark;
+		font: var(--article-font);
+		--primary-accent-color: #f34482;
+		--secondary-accent-color: #fb72a2;
+		--block-quote-border-color: #f3e1e8;
+		--ios-hover-color: #f3e1e8; /* placeholder */
+		/* font-size: 1rem; */
+		/* The font-size is replaced at runtime by the dynamic type size */
+		/* font-size: [[font-size]]px; */
+		font-size: calc([[font-size]]px + 4px);
+		
+	}
+
+	@media(prefers-color-scheme: dark) {
+		:root {
+			--primary-accent-color: #fbc0d4;
+			--secondary-accent-color: #fbe2eb;
+			--block-quote-border-color: #f8bfd3;
+			--header-table-border-color: rgba(255, 255, 255, 0.2);
+			--ios-hover-color: #444444; /* placeholder */
+		}
+	}
+
+	body a, body a:visited, body a * {
+		color: var(--secondary-accent-color);
+	}
+	.articleTitle a:link, .articleTitle a:visited {
+		font-size: 1.2rem;
+	}
+
+	.externalLink a {
+		font-size: inherit;
+	}
+
+	.articleBody a:link, .articleBody a:visited {
+		text-decoration: underline;
+		text-decoration-color: var(--primary-accent-color);
+		text-decoration-thickness: 1px;
+		text-underline-offset: 2px;
+		color: var(--secondary-accent-color);
+	}
+
+	.articleBody sup a:link, .articleBody sup a:visited {
+		text-decoration: none;
+		color: var(--sup-link-color);
+	}
+
+	body .header {
+		font: var(--header-font);
+		font-size: [[font-size]]px;
+	}
+
+	body .header a:link, body .header a:visited {
+		color: var(--secondary-accent-color);
+		font-size: [[font-size]]px;
+	}
+
+	.articleBody a:hover {
+		background: var(--ios-hover-color);
+	}
+
+	pre {
+		padding: 5px;
+	}
+
+	.nnw-overflow table {
+		border: 1px solid var(--secondary-accent-color);
+	}
+
+}
+
+/* macOS Specific */
+@supports not (-webkit-touch-callout: none) {
+	
+	body {
+		margin-top: 20px;
+		margin-bottom: 64px;
+		padding-left: 48px;
+		padding-right: 48px;
+		font-family: var(--article-font);
+	}
+
+	.smallText {
+		font-size: 14px;
+	}
+
+	.mediumText {
+		font-size: 16px;
+	}
+
+	.largeText {
+		font-size: 18px;
+	}
+
+	.xlargeText {
+		font-size: 20px;
+	}
+
+	.xxlargeText {
+		font-size: 22px;
+	}
+
+	:root {
+		color-scheme: light dark;
+		--accent-color: #ef2687;
+		--block-quote-border-color: rgba( 0,   0,   0, 0.25);
+		--hover-gradient-color-start: #f67b9c;
+		--hover-gradient-color-end: #faa0b8;
+		
+	}
+
+	@media(prefers-color-scheme: dark) {
+		:root {
+			--accent-color: #fbc0d4;
+			--block-quote-border-color: #f8bfd3;
+			--header-table-border-color: #f8bfd3;
+			--hover-gradient-color-start: #f67b9c;
+			--hover-gradient-color-end: #faa0b8;
+			--background-color: #282a36;
+		}
+	}
+
+	body a, body a:visited, body a * {
+		color: var(--accent-color);
+		background-color: var(--background-color);
+	}
+
+	.articleBody a:link, .articleBody a:visited {
+		border-bottom: 1px solid var(--accent-color);
+	}
+	.articleBody a:hover {
+		border-radius: 2px;
+		background: linear-gradient(0deg, var(--hover-gradient-color-start) 0%, var(--hover-gradient-color-end) 100%);
+		border-bottom: 1px solid var(--hover-gradient-color-end);
+		color: white;
+		text-decoration: none;
+	}
+
+	pre {
+		padding: 10px;
+	}
+
+	.nnw-overflow table {
+		border: 1px solid var(--accent-color);
+	}
+}
diff --git a/cozy.nnwtheme/template.html b/cozy.nnwtheme/template.html
new file mode 100644
index 0000000..a8bbed9
--- /dev/null
+++ b/cozy.nnwtheme/template.html
@@ -0,0 +1,47 @@
+<!-- Template Variables
+
+title: The title of the article
+preferred_link: The best link to associate with the article for linking out.
+
+external_link_label: A localized label for the external link.
+external_link_stripped: The external link minus the scheme. Useful for displaying the external link.
+external_link: The external link of the article if there is one provided by the author.
+
+feed_link_title: The name of the feed associated with this article.
+feed_link: The URL of the feed associated with this article.
+byline: HTML that combines all the authors and links to them if available.
+avatar_src: The image source URL for the feed icon / avatar.
+dateline_style: Either "articleDateline" or "articleDatelineTitle" depending on if the title was populated or not.
+
+datetime_long: Long version of a combined publish date and time.
+datetime_medium: Medium length version of a combined publish date and time.
+datetime_short: Short version of a combined publish date and time.
+
+date_long: Long version of the publish date.
+date_medium: Medium version of the publish date.
+date_short: Long version of the publish date.
+
+time_long: Long version of the publish time.
+time_medium: Medium version of the publish time.
+time_short: Long version of the publish time.
+
+text_size_class: The size class that the user has selected in Preferences for article text.
+body: The body of the article.
+
+-->
+
+<header class="headerContainer">
+	<table cellpadding=0 cellspacing=0 border=0 class="headerTable">
+	<tr>
+		<td class="header leftAlign"><a class="feedlink" href="[[feed_link]]">[[feed_link_title]]</a><br />[[byline]]</td>
+		<td class="header rightAlign avatar"><img id="nnwImageIcon" src="[[avatar_src]]" height=48 width=48 /></td>
+	</tr>
+	</table>
+</header>
+
+<article>
+<div class="articleTitle"><h1><a href="[[preferred_link]]">[[title]]</a></h1></div>
+<div class="[[dateline_style]]"><a href="[[preferred_link]]">[[datetime_medium]]</a></div>
+<div class="externalLink">[[external_link_label]] <a href="[[external_link]]">[[external_link_stripped]]</a></div>
+<div id="bodyContainer" class="articleBody [[text_size_class]]">[[body]]</div>
+</article>
diff --git a/shannon.nnwtheme/Info.plist b/shannon.nnwtheme/Info.plist
new file mode 100644
index 0000000..8385b77
--- /dev/null
+++ b/shannon.nnwtheme/Info.plist
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+   <key>Name</key>
+   <string>Shannon</string>
+   <key>ThemeIdentifier</key>
+   <string>com.shannonkay.shannontheme</string>
+   <key>CreatorHomePage</key>
+   <string>https://www.shannonkay.com</string>
+   <key>CreatorName</key>
+   <string>Shannon Kay</string>
+   <key>Version</key>
+   <integer>1</integer>
+</dict>
+</plist>
\ No newline at end of file
diff --git a/shannon.nnwtheme/stylesheet.css b/shannon.nnwtheme/stylesheet.css
new file mode 100644
index 0000000..99f022c
--- /dev/null
+++ b/shannon.nnwtheme/stylesheet.css
@@ -0,0 +1,558 @@
+/* Shared iOS and macOS CSS rules. Platform specific rules are at the bottom of this file. */
+
+body {
+	margin-left: auto;
+	margin-right: auto;
+	background-color: var(--background-color);
+	word-wrap: break-word;
+	max-width: 44em;
+}
+
+a {
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+.feedlink {
+	font-weight: bold;
+}
+
+.headerTable {
+	width: 100%;
+	height: 68px;
+}
+
+.systemMessage {
+	position: absolute;
+	top: 45%;
+	left: 50%;
+	transform: translateX(-55%) translateY(-50%);
+	-webkit-user-select: none;
+	cursor: default;
+}
+
+:root {
+	--background-color: #fceff0;
+	--header-table-border-color: rgba(0, 0, 0, 0.1);
+	--header-color: #f34482;
+	--body-code-color: #44364a;
+	--code-background-color: #ffdfe9;
+	--system-message-color: #fc82a3;
+	--feedlink-color: rgba(255, 0, 0, 0.6);
+	--article-title-color: #fc82a3;
+	--article-date-color: #685a68;
+	--table-cell-border-color: #f7d3d6;
+	--sup-link-color: rgba(255, 255, 255, 0.9);
+	--header-font: "ivystyle-sans", Helvetica, Verdana, Geneva, Tahoma, Seravek, sans-serif;
+	--article-font: "ivyjournal", "adobe-garamond-pro", Garamond, Baskerville, Seravek, serif;
+}
+
+@media(prefers-color-scheme: dark) {
+	:root {
+		--background-color: #282a36;
+		--header-color: #ffcddc;
+		--body-code-color: #ff79c6;
+		--system-message-color: #faa0c7;
+		--feedlink-color: #ffdfe9;
+		--article-title-color: #faa0c7;
+		--article-date-color: #f4ebee;
+		--table-cell-border-color: #f7d3d6;
+		--code-background-color: #1a1e24;
+	}
+}
+
+body .headerTable {
+	border-bottom: 1px solid var(--header-table-border-color);
+	color: var(--header-color);
+	
+}
+
+body .header {
+	color: var(--header-color);
+	font-family: var(--header-font);
+	font-size: 1.5rem;
+	
+}
+
+body .header a:link, .header a:visited {
+	color: var(--header-color);
+	font-family: var(--header-font);
+	font-size: 1.5rem;
+}
+
+body code, body pre {
+	color: var(--body-code-color);
+	padding: 0.2rem;
+}
+
+body > .systemMessage {
+	color: var(--system-message-color);
+}
+
+.feedlink a:link, .feedlink a:visited {
+	color: var(--feedlink-color);
+}
+    border: solid white 2pt;
+} */
+.avatar img {
+	border-radius: 4px;
+}
+
+.feedIcon {
+	border-radius: 4px;
+}
+
+.rightAlign {
+	text-align: end;
+}
+
+.leftAlign {
+	text-align: start;
+}
+
+.articleTitle a:link, .articleTitle a:visited {
+	color: var(--article-title-color);
+	margin-top: 26px;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	font-size: 2rem;
+}
+
+.articleDateline {
+	margin-bottom: 5px;
+	/* font-weight: bold; */
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	font-variant-caps: all-small-caps;
+	/* letter-spacing: 0.025em; */
+}
+
+.articleDateline a:link, .articleDateline a:visited {
+	color: var(--article-date-color);
+}
+
+.articleDatelineTitle {
+	margin-bottom: 5px;
+	font-weight: bold;
+	font-variant-caps: all-small-caps;
+}
+
+.articleDatelineTitle a:link, .articleDatelineTitle a:visited {
+	color: var(--article-title-color);
+}
+
+.externalLink {
+	margin-top: 15px;
+	margin-bottom: 15px;
+	font-size: 0.875em;
+	font-style: italic;
+	color: var(--article-date-color);
+	width: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.externalLink a {
+	font-family: "SF Mono", Menlo, Courier, monospace;
+	font-size: 0.85em;
+	font-variant-caps: normal;
+	letter-spacing: 0em;
+}
+
+.articleBody {
+	margin-top: 20px;
+	line-height: 1.6em;
+	text-align: justify;
+}
+
+.articleBody a {
+	padding: 0px 1px;
+}
+
+h1 {
+	/* line-height: 1.15em; */
+	font-weight: bold;
+	padding-bottom: 0;
+	margin-bottom: 5px;
+}
+h1, h2, h3, h4 {
+	font-family: var(--header-font);
+	text-align: left;
+	color: var(--header-color);
+}
+pre {
+	max-width: 100%;
+	margin: 0;
+	overflow: auto;
+	overflow-y: hidden;
+	word-wrap: normal;
+	word-break: normal;
+	border-radius: 3px;
+}
+
+pre {
+	line-height: 1.4286em;
+}
+
+code, pre {
+	font-family: "SF Mono Regular", Menlo, Courier, monospace;
+	/* font-size: 1em; */
+	-webkit-hyphens: none;
+	background: var(--code-background-color);
+}
+
+code {
+	padding: 1px 2px;
+	border-radius: 2px;
+}
+
+pre code {
+	letter-spacing: -.027em;
+	/* font-size: 0.9375em; */
+}
+
+.nnw-overflow {
+	overflow-x: auto;
+}
+
+/*
+ Instead of the last-child bits, border-collapse: collapse
+ could have been used. However, then the inter-cell borders
+ overlap the table border, which looks bad.
+ */
+.nnw-overflow table {
+	margin-bottom: 1px;
+	border-spacing: 0;
+	border: 1px solid var(--secondary-accent-color);
+	font-size: inherit;
+}
+
+.nnw-overflow table table {
+	margin-bottom: 0;
+	border: none;
+}
+
+.nnw-overflow td, .nnw-overflow th {
+	-webkit-hyphens: none;
+	word-break: normal;
+	border: 1px solid var(--table-cell-border-color);
+	border-top: none;
+	border-left: none;
+	padding: 5px;
+}
+
+.nnw-overflow tr :matches(td, th):last-child {
+	border-right: none;
+}
+
+.nnw-overflow :matches(thead, tbody, tfoot):last-child > tr:last-child :matches(td, th) {
+	border-bottom: none;
+}
+
+.nnw-overflow td pre {
+	border: none;
+	padding: 0;
+}
+
+.nnw-overflow table[border="0"] {
+	border-width: 0;
+}
+
+img, figure, video, div, object {
+	max-width: 100%;
+	height: auto !important;
+	margin: 0 auto;
+}
+figure img {
+	border: solid 0.2rem #faa0c7;
+}
+
+iframe {
+	max-width: 100%;
+	margin: 0 auto;
+}
+
+iframe.nnw-constrained {
+	max-height: 50vw;
+}
+
+figure {
+	margin-bottom: 1em;
+	margin-top: 1em;
+}
+
+figcaption {
+	font-size: 14px;
+	line-height: 1.3em;
+	padding: 0.2rem;
+}
+
+sup {
+	vertical-align: top;
+	position: relative;
+	bottom: 0.2rem;
+}
+
+sub {
+	vertical-align: bottom;
+	position: relative;
+	top: 0.2rem;
+}
+
+hr {
+	border: 1.5px solid var(--table-cell-border-color);
+}
+
+.iframeWrap {
+	position: relative;
+	display: block;
+	padding-top: 56.25%;
+}
+
+.iframeWrap iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100% !important;
+	width: 100% !important;
+}
+
+blockquote {
+	margin-inline-start: 0;
+	margin-inline-end: 0;
+	padding-inline-start: 15px;
+	border-inline-start: 3px solid var(--block-quote-border-color);
+}
+
+/* Feed Specific */
+
+.feedbin--article-wrap {
+	border-top: 1px solid var(--header-table-border-color);
+}
+
+/* Newsfoot theme for light mode (default) */
+.newsfoot-footnote-popover {
+	background: #ccc;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.25);
+	color: black;
+	padding: 1px;
+}
+
+.newsfoot-footnote-popover-arrow {
+	background: #fafafa;
+	border: 1px solid #ccc;
+}
+
+.newsfoot-footnote-popover-inner {
+	background: #fafafa;
+}
+
+body a.footnote,
+body a.footnote:visited,
+.newsfoot-footnote-popover + a.footnote:hover {
+	background: #aaa;
+	color: white;
+	transition: background-color 200ms ease-out;
+}
+
+a.footnote:hover,
+.newsfoot-footnote-popover + a.footnote {
+	background: #666;
+	transition: background-color 200ms ease-out;
+}
+
+/* Newsfoot theme for dark mode */
+@media screen and (prefers-color-scheme: dark) {
+	.newsfoot-footnote-popover {
+		background: #444;
+		color: rgb(224, 224, 224);
+	}
+
+	.newsfoot-footnote-popover-arrow {
+		background: #242424;
+		border: 1px solid #444;
+	}
+
+	.newsfoot-footnote-popover-inner {
+		background: #242424;
+	}
+
+	body a.footnote,
+	body a.footnote:visited,
+	.newsfoot-footnote-popover + a.footnote:hover {
+		background: #aaa;
+		color: white;
+		transition: background-color 200ms ease-out;
+	}
+
+	a.footnote:hover,
+	.newsfoot-footnote-popover + a.footnote {
+		background: #666;
+		transition: background-color 200ms ease-out;
+	}
+
+}
+
+/* iOS Specific */
+@supports (-webkit-touch-callout: none) {
+	
+	body {
+		margin-top: 3px;
+		margin-bottom: 20px;
+		padding-left: 20px;
+		padding-right: 20px;
+
+		word-break: break-word;
+		-webkit-hyphens: auto;
+		-webkit-text-size-adjust: none;
+	}
+
+	:root {
+		color-scheme: light dark;
+		font: var(--article-font);
+		--primary-accent-color: #f34482;
+		--secondary-accent-color: #fb72a2;
+		--block-quote-border-color: #f3e1e8;
+		--ios-hover-color: #f3e1e8; /* placeholder */
+		/* font-size: 1rem; */
+		/* The font-size is replaced at runtime by the dynamic type size */
+		/* font-size: [[font-size]]px; */
+		font-size: calc([[font-size]]px + 4px);
+		
+	}
+
+	@media(prefers-color-scheme: dark) {
+		:root {
+			--primary-accent-color: #fbc0d4;
+			--secondary-accent-color: #fbe2eb;
+			--block-quote-border-color: #f8bfd3;
+			--header-table-border-color: rgba(255, 255, 255, 0.2);
+			--ios-hover-color: #444444; /* placeholder */
+		}
+	}
+
+	body a, body a:visited, body a * {
+		color: var(--secondary-accent-color);
+	}
+	.articleTitle a:link, .articleTitle a:visited {
+		font-size: 1.2rem;
+	}
+
+	.externalLink a {
+		font-size: inherit;
+	}
+
+	.articleBody a:link, .articleBody a:visited {
+		text-decoration: underline;
+		text-decoration-color: var(--primary-accent-color);
+		text-decoration-thickness: 1px;
+		text-underline-offset: 2px;
+		color: var(--secondary-accent-color);
+	}
+
+	.articleBody sup a:link, .articleBody sup a:visited {
+		text-decoration: none;
+		color: var(--sup-link-color);
+	}
+
+	body .header {
+		font: var(--header-font);
+		font-size: [[font-size]]px;
+	}
+
+	body .header a:link, body .header a:visited {
+		color: var(--secondary-accent-color);
+		font-size: [[font-size]]px;
+	}
+
+	.articleBody a:hover {
+		background: var(--ios-hover-color);
+	}
+
+	pre {
+		padding: 5px;
+	}
+
+	.nnw-overflow table {
+		border: 1px solid var(--secondary-accent-color);
+	}
+
+}
+
+/* macOS Specific */
+@supports not (-webkit-touch-callout: none) {
+	
+	body {
+		margin-top: 20px;
+		margin-bottom: 64px;
+		padding-left: 48px;
+		padding-right: 48px;
+		font-family: var(--article-font);
+	}
+
+	.smallText {
+		font-size: 14px;
+	}
+
+	.mediumText {
+		font-size: 16px;
+	}
+
+	.largeText {
+		font-size: 18px;
+	}
+
+	.xlargeText {
+		font-size: 20px;
+	}
+
+	.xxlargeText {
+		font-size: 22px;
+	}
+
+	:root {
+		color-scheme: light dark;
+		--accent-color: #ef2687;
+		--block-quote-border-color: rgba( 0,   0,   0, 0.25);
+		--hover-gradient-color-start: #f67b9c;
+		--hover-gradient-color-end: #faa0b8;
+		
+	}
+
+	@media(prefers-color-scheme: dark) {
+		:root {
+			--accent-color: #fbc0d4;
+			--block-quote-border-color: #f8bfd3;
+			--header-table-border-color: #f8bfd3;
+			--hover-gradient-color-start: #f67b9c;
+			--hover-gradient-color-end: #faa0b8;
+			--background-color: #282a36;
+		}
+	}
+
+	body a, body a:visited, body a * {
+		color: var(--accent-color);
+		background-color: var(--background-color);
+	}
+
+	.articleBody a:link, .articleBody a:visited {
+		border-bottom: 1px solid var(--accent-color);
+	}
+	.articleBody a:hover {
+		border-radius: 2px;
+		background: linear-gradient(0deg, var(--hover-gradient-color-start) 0%, var(--hover-gradient-color-end) 100%);
+		border-bottom: 1px solid var(--hover-gradient-color-end);
+		color: white;
+		text-decoration: none;
+	}
+
+	pre {
+		padding: 10px;
+	}
+
+	.nnw-overflow table {
+		border: 1px solid var(--accent-color);
+	}
+}
diff --git a/shannon.nnwtheme/template.html b/shannon.nnwtheme/template.html
new file mode 100644
index 0000000..a8bbed9
--- /dev/null
+++ b/shannon.nnwtheme/template.html
@@ -0,0 +1,47 @@
+<!-- Template Variables
+
+title: The title of the article
+preferred_link: The best link to associate with the article for linking out.
+
+external_link_label: A localized label for the external link.
+external_link_stripped: The external link minus the scheme. Useful for displaying the external link.
+external_link: The external link of the article if there is one provided by the author.
+
+feed_link_title: The name of the feed associated with this article.
+feed_link: The URL of the feed associated with this article.
+byline: HTML that combines all the authors and links to them if available.
+avatar_src: The image source URL for the feed icon / avatar.
+dateline_style: Either "articleDateline" or "articleDatelineTitle" depending on if the title was populated or not.
+
+datetime_long: Long version of a combined publish date and time.
+datetime_medium: Medium length version of a combined publish date and time.
+datetime_short: Short version of a combined publish date and time.
+
+date_long: Long version of the publish date.
+date_medium: Medium version of the publish date.
+date_short: Long version of the publish date.
+
+time_long: Long version of the publish time.
+time_medium: Medium version of the publish time.
+time_short: Long version of the publish time.
+
+text_size_class: The size class that the user has selected in Preferences for article text.
+body: The body of the article.
+
+-->
+
+<header class="headerContainer">
+	<table cellpadding=0 cellspacing=0 border=0 class="headerTable">
+	<tr>
+		<td class="header leftAlign"><a class="feedlink" href="[[feed_link]]">[[feed_link_title]]</a><br />[[byline]]</td>
+		<td class="header rightAlign avatar"><img id="nnwImageIcon" src="[[avatar_src]]" height=48 width=48 /></td>
+	</tr>
+	</table>
+</header>
+
+<article>
+<div class="articleTitle"><h1><a href="[[preferred_link]]">[[title]]</a></h1></div>
+<div class="[[dateline_style]]"><a href="[[preferred_link]]">[[datetime_medium]]</a></div>
+<div class="externalLink">[[external_link_label]] <a href="[[external_link]]">[[external_link_stripped]]</a></div>
+<div id="bodyContainer" class="articleBody [[text_size_class]]">[[body]]</div>
+</article>