new: reader view: footer has manage icons (#7133)

* add footer

* rename content thin medium large class

* rework css

* footer improved

30 files changed, 236 insertions, 193 deletions

diff --git a/app/views/feed/contentSelectorPreview.phtml b/app/views/feed/contentSelectorPreview.phtml
index 75e9bc5b6..0fc22c8ed 100644
--- a/app/views/feed/contentSelectorPreview.phtml
+++ b/app/views/feed/contentSelectorPreview.phtml
@@ -40,7 +40,7 @@
 				</label>
 			</div>
 
-			<div class="content large">
+			<div class="content content_large">
 				<div dir="auto" id="freshrss_rendered_view"><?= $this->htmlContent ?></div>
 				<pre id="freshrss_raw_view" hidden="hidden"> <?= htmlspecialchars($this->htmlContent) ?></pre>
 			</div>
diff --git a/app/views/helpers/index/article.phtml b/app/views/helpers/index/article.phtml
index 54a8cbf56..535f10dda 100644
--- a/app/views/helpers/index/article.phtml
+++ b/app/views/helpers/index/article.phtml
@@ -8,129 +8,160 @@
 		return;
 	}
 ?>
-<article class="flux_content" dir="auto">
-<div class="content <?= FreshRSS_Context::userConf()->content_width ?>">
-	<header>
-		<?php
-			$favoriteUrl = ['c' => 'entry', 'a' => 'bookmark', 'params' => ['id' => $entry->id()]];
-			if ($entry->isFavorite()) {
-				$favoriteUrl['params']['is_favorite'] = '0';
-			}
-			$readUrl = ['c' => 'entry', 'a' => 'read', 'params' => ['id' => $entry->id()]];
-			if ($entry->isRead()) {
-				$readUrl['params']['is_read'] = '0';
-			}
-		?>
-		<div class="article-header-topline horizontal-list">
-			<?php if (FreshRSS_Auth::hasAccess()) { ?>
-				<?php if (FreshRSS_Context::userConf()->topline_read && FreshRSS_Context::userConf()->show_article_icons == 't') { ?>
-					<div class="item manage">
-						<a class="read" href="<?= Minz_Url::display($readUrl) ?>" title="<?= _t('conf.shortcut.mark_read') ?>"><?= _i($entry->isRead() ? 'read' : 'unread') ?></a>
-					</div>
-				<?php } ?>
-				<?php if (FreshRSS_Context::userConf()->topline_favorite && FreshRSS_Context::userConf()->show_article_icons == 't') { ?>
-					<div class="item manage">
-						<a class="bookmark" href="<?= Minz_Url::display($favoriteUrl) ?>" title="<?= _t('conf.shortcut.mark_favorite') ?>"><?= _i($entry->isFavorite() ? 'starred' : 'non-starred') ?></a>
-					</div>
-				<?php } ?>
-			<?php } ?>
-			<div class="item">
-				<?php if (FreshRSS_Context::userConf()->show_feed_name === 't') { ?>
-					<a class="website" href="<?= _url('index', 'reader', 'get', 'f_' . $feed->id()) ?>" title="<?= _t('gen.action.filter') ?>">
-						<?php if (FreshRSS_Context::userConf()->show_favicons): ?>
-							<img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php
-						endif; ?><span><?= $feed->name() ?></span></a>
-				<?php } ?>
-			</div>
+<article class="flux_content content_<?= FreshRSS_Context::userConf()->content_width ?>" dir="auto">
+	<div class="content">
+		<header>
 			<?php
-			if (FreshRSS_Context::userConf()->topline_link && FreshRSS_Context::userConf()->show_article_icons == 't') { ?>
-				<div class="item link">
-					<a target="_blank" rel="noreferrer" href="<?= $entry->link() ?>" class="item-element" title="<?= _t('conf.shortcut.see_on_website') ?>"><?= _i('link') ?></a>
-				</div>
-			<?php } ?>
-		</div>
-
-		<?php
-			if (in_array(FreshRSS_Context::userConf()->show_tags, ['b', 'h'], true)) {
-				$this->renderHelper('index/tags');
-			}
-		?>
-		<h1 class="title"><a target="_blank" rel="noreferrer" class="go_website" href="<?= $entry->link() ?>"><?= $entry->title() ?></a></h1>
-		<?php if (in_array(FreshRSS_Context::userConf()->show_author_date, ['h','b'], true)) { ?>
-			<div class="subtitle horizontal-list">
+				$favoriteUrl = ['c' => 'entry', 'a' => 'bookmark', 'params' => ['id' => $entry->id()]];
+				if ($entry->isFavorite()) {
+					$favoriteUrl['params']['is_favorite'] = '0';
+				}
+				$readUrl = ['c' => 'entry', 'a' => 'read', 'params' => ['id' => $entry->id()]];
+				if ($entry->isRead()) {
+					$readUrl['params']['is_read'] = '0';
+				}
+			?>
+			<div class="article-header-topline horizontal-list">
 				<?php if (FreshRSS_Auth::hasAccess()) { ?>
-					<?php if (FreshRSS_Context::userConf()->topline_read && FreshRSS_Context::userConf()->show_article_icons == 'a') { ?>
+					<?php if (FreshRSS_Context::userConf()->topline_read && FreshRSS_Context::userConf()->show_article_icons == 't') { ?>
 						<div class="item manage">
 							<a class="read" href="<?= Minz_Url::display($readUrl) ?>" title="<?= _t('conf.shortcut.mark_read') ?>"><?= _i($entry->isRead() ? 'read' : 'unread') ?></a>
 						</div>
 					<?php } ?>
-					<?php if (FreshRSS_Context::userConf()->topline_favorite && FreshRSS_Context::userConf()->show_article_icons == 'a') { ?>
+					<?php if (FreshRSS_Context::userConf()->topline_favorite && FreshRSS_Context::userConf()->show_article_icons == 't') { ?>
 						<div class="item manage">
 							<a class="bookmark" href="<?= Minz_Url::display($favoriteUrl) ?>" title="<?= _t('conf.shortcut.mark_favorite') ?>"><?= _i($entry->isFavorite() ? 'starred' : 'non-starred') ?></a>
 						</div>
 					<?php } ?>
 				<?php } ?>
 				<div class="item">
-					<?php if (FreshRSS_Context::userConf()->show_feed_name === 'a') { ?>
-						<span class="website"><a href="<?= $this->internal_rendering ? $feed->website() : _url('index', 'reader', 'get', 'f_' . $feed->id()) ?>" title="<?= _t('gen.action.filter') ?>">
+					<?php if (FreshRSS_Context::userConf()->show_feed_name === 't') { ?>
+						<a class="website" href="<?= _url('index', 'reader', 'get', 'f_' . $feed->id()) ?>" title="<?= _t('gen.action.filter') ?>">
 							<?php if (FreshRSS_Context::userConf()->show_favicons): ?>
 								<img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php
-							endif; ?><span><?= $feed->name() ?></span></a></span>
-					<?php }
-						if (!empty($entry->authors())) {
-							$this->renderHelper('index/authors');
-							if ($this->feed === null || $this->entry === null) {
-								throw new Exception('Unexpected side effect!');	// Should never occur. Only for PHPStan
-							}
-						}
-					?>
-				</div>
-				<div class="item date">
-					<time datetime="<?= $entry->machineReadableDate() ?>"><?= $entry->date() ?></time>
+							endif; ?><span><?= $feed->name() ?></span></a>
+					<?php } ?>
 				</div>
 				<?php
-				if (FreshRSS_Context::userConf()->topline_link && FreshRSS_Context::userConf()->show_article_icons == 'a') { ?>
+				if (FreshRSS_Context::userConf()->topline_link && FreshRSS_Context::userConf()->show_article_icons == 't') { ?>
 					<div class="item link">
 						<a target="_blank" rel="noreferrer" href="<?= $entry->link() ?>" class="item-element" title="<?= _t('conf.shortcut.see_on_website') ?>"><?= _i('link') ?></a>
 					</div>
 				<?php } ?>
 			</div>
-		<?php } ?>
-	</header>
-
-	<div class="text">
-		<?= $entry->content(true) ?>
-	</div>
-	<?php
-	$display_authors_date = in_array(FreshRSS_Context::userConf()->show_author_date, ['b', 'f'], true);
-	$display_tags = in_array(FreshRSS_Context::userConf()->show_tags, ['b', 'f'], true);
 
-	if ($display_authors_date || $display_tags) {
-		?>
-		<footer>
-			<?php if ($display_authors_date) { ?>
-				<div class="subtitle">
-					<?php if (FreshRSS_Context::userConf()->show_feed_name === 'a') { ?>
-						<div class="website"><a href="<?= _url('index', 'reader', 'get', 'f_' . $feed->id()) ?>" title="<?= _t('gen.action.filter') ?>">
-							<?php if (FreshRSS_Context::userConf()->show_favicons): ?>
-								<img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php
-							endif; ?><span><?= $feed->name() ?></span></a></div>
-					<?php }
-						$this->renderHelper('index/authors');
-					?>
-					<div class="date">
+			<?php
+				if (in_array(FreshRSS_Context::userConf()->show_tags, ['b', 'h'], true)) {
+					$this->renderHelper('index/tags');
+				}
+			?>
+			<h1 class="title"><a target="_blank" rel="noreferrer" class="go_website" href="<?= $entry->link() ?>"><?= $entry->title() ?></a></h1>
+			<?php if (in_array(FreshRSS_Context::userConf()->show_author_date, ['h','b'], true)) { ?>
+				<div class="subtitle horizontal-list">
+					<?php if (FreshRSS_Auth::hasAccess()) { ?>
+						<?php if (FreshRSS_Context::userConf()->topline_read && FreshRSS_Context::userConf()->show_article_icons == 'a') { ?>
+							<div class="item manage">
+								<a class="read" href="<?= Minz_Url::display($readUrl) ?>" title="<?= _t('conf.shortcut.mark_read') ?>"><?= _i($entry->isRead() ? 'read' : 'unread') ?></a>
+							</div>
+						<?php } ?>
+						<?php if (FreshRSS_Context::userConf()->topline_favorite && FreshRSS_Context::userConf()->show_article_icons == 'a') { ?>
+							<div class="item manage">
+								<a class="bookmark" href="<?= Minz_Url::display($favoriteUrl) ?>" title="<?= _t('conf.shortcut.mark_favorite') ?>"><?= _i($entry->isFavorite() ? 'starred' : 'non-starred') ?></a>
+							</div>
+						<?php } ?>
+					<?php } ?>
+					<div class="item">
+						<?php if (FreshRSS_Context::userConf()->show_feed_name === 'a') { ?>
+							<span class="website"><a href="<?= $this->internal_rendering ? $feed->website() : _url('index', 'reader', 'get', 'f_' . $feed->id()) ?>" title="<?= _t('gen.action.filter') ?>">
+								<?php if (FreshRSS_Context::userConf()->show_favicons): ?>
+									<img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php
+								endif; ?><span><?= $feed->name() ?></span></a></span>
+						<?php }
+							if (!empty($entry->authors())) {
+								$this->renderHelper('index/authors');
+								if ($this->feed === null || $this->entry === null) {
+									throw new Exception('Unexpected side effect!');	// Should never occur. Only for PHPStan
+								}
+							}
+						?>
+					</div>
+					<div class="item date">
 						<time datetime="<?= $entry->machineReadableDate() ?>"><?= $entry->date() ?></time>
 					</div>
+					<?php
+					if (FreshRSS_Context::userConf()->topline_link && FreshRSS_Context::userConf()->show_article_icons == 'a') { ?>
+						<div class="item link">
+							<a target="_blank" rel="noreferrer" href="<?= $entry->link() ?>" class="item-element" title="<?= _t('conf.shortcut.see_on_website') ?>"><?= _i('link') ?></a>
+						</div>
+					<?php } ?>
 				</div>
-				<?php
-			}
+			<?php } ?>
+		</header>
 
-			if ($display_tags) {
-				$this->renderHelper('index/tags');
-			}
-		?>
-		</footer>
+		<div class="text">
+			<?= $entry->content(true) ?>
+		</div>
 		<?php
-	} ?>
-</div>
+		$display_authors_date = in_array(FreshRSS_Context::userConf()->show_author_date, ['b', 'f'], true);
+		$display_tags = in_array(FreshRSS_Context::userConf()->show_tags, ['b', 'f'], true);
+
+		if ($display_authors_date || $display_tags) {
+			?>
+			<footer>
+				<?php if ($display_authors_date) { ?>
+					<div class="subtitle">
+						<?php if (FreshRSS_Context::userConf()->show_feed_name === 'a') { ?>
+							<div class="website"><a href="<?= _url('index', 'reader', 'get', 'f_' . $feed->id()) ?>" title="<?= _t('gen.action.filter') ?>">
+								<?php if (FreshRSS_Context::userConf()->show_favicons): ?>
+									<img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php
+								endif; ?><span><?= $feed->name() ?></span></a></div>
+						<?php }
+							$this->renderHelper('index/authors');
+						?>
+						<div class="date">
+							<time datetime="<?= $entry->machineReadableDate() ?>"><?= $entry->date() ?></time>
+						</div>
+					</div>
+					<?php
+				}
+
+				if ($display_tags) {
+					$this->renderHelper('index/tags');
+				}
+				?>
+			</footer>
+			<?php
+		} ?>
+	</div>
+
+	<footer>
+		<ul class="horizontal-list bottom">
+			<?php if (FreshRSS_Auth::hasAccess()) { ?>
+				<?php if (FreshRSS_Context::userConf()->bottomline_read) { ?>
+					<li class="item manage">
+						<a class="read" href="<?= Minz_Url::display($readUrl) ?>" title="<?= _t('conf.shortcut.mark_read') ?>"><?= _i($entry->isRead() ? 'read' : 'unread') ?></a>
+					</li>
+				<?php } ?>
+				<?php if (FreshRSS_Context::userConf()->bottomline_favorite) { ?>
+					<li class="item manage">
+						<a class="bookmark" href="<?= Minz_Url::display($favoriteUrl) ?>" title="<?= _t('conf.shortcut.mark_favorite') ?>"><?= _i($entry->isFavorite() ? 'starred' : 'non-starred') ?></a>
+					</li>
+				<?php } ?>
+			<?php } ?>
+			<li class="item share"></li>
+			<?php
+			if (FreshRSS_Context::userConf()->bottomline_date) {
+				?>
+				<li class="item date">
+					<time datetime="<?= $entry->machineReadableDate() ?>" class="item-element"><?= $entry->date() ?></time>&nbsp;
+				</li>
+				<?php
+			}
+			if (FreshRSS_Context::userConf()->bottomline_link) { ?>
+				<li class="item link">
+					<a target="_blank" rel="noreferrer" href="<?= $entry->link() ?>" class="item-element" title="<?= _t('conf.shortcut.see_on_website') ?>"><?= _i('link') ?></a>
+				</li>
+			<?php } ?>
+		</ul>
+	</footer>
 </article>
diff --git a/app/views/index/normal.phtml b/app/views/index/normal.phtml
index fc242ae0f..38ce30276 100644
--- a/app/views/index/normal.phtml
+++ b/app/views/index/normal.phtml
@@ -96,7 +96,7 @@ $today = @strtotime('today');
 				throw new Exception('Unexpected side effect!');	// Should never occur. Only for PHPStan
 			}
 		?><article class="flux_content" dir="auto">
-			<div class="content <?= FreshRSS_Context::userConf()->content_width ?>">
+			<div class="content content_<?= FreshRSS_Context::userConf()->content_width ?>">
 				<header>
 					<?php if (FreshRSS_Context::userConf()->show_feed_name === 't') { ?>
 						<div class="website"><a href="<?= _url('index', 'index', 'get', 'f_' . $this->feed->id()) ?>" title="<?= _t('gen.action.filter') ?>">
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index bd0cad66b..c5a65f58f 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -943,7 +943,7 @@ kbd {
 	background: inherit !important;
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: var(--background-color-middle);
 	border-color: var(--border-color-dark);
 }
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index bdaec3db6..1ec1e29d6 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -943,7 +943,7 @@ kbd {
 	background: inherit !important;
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: var(--background-color-middle);
 	border-color: var(--border-color-dark);
 }
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index 89b6c9a2d..8987ce2b7 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -235,7 +235,7 @@ main.prompt {
 
 
 /*=== Content of feed articles */
-.content, .content.thin {
+.content, .content_thin {
 	padding: 20px 10px;
 
 	font-size: 1.125rem;
diff --git a/p/themes/Ansum/_reader-view.scss b/p/themes/Ansum/_reader-view.scss
index ca63f4f20..d0b661887 100644
--- a/p/themes/Ansum/_reader-view.scss
+++ b/p/themes/Ansum/_reader-view.scss
@@ -8,7 +8,7 @@
 		color: variables.$main-font-color;
 		border: none;
 
-		.content {
+		.flux_content {
 			background-color: variables.$white;
 			border: none;
 
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 6961abe0b..b471c48b8 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -878,51 +878,51 @@ main.prompt {
 }
 
 /*=== Content of feed articles */
-.content, .content.thin {
+.content, .content_thin {
 	padding: 20px 10px;
 	font-size: 1.125rem;
 	line-height: 1.8rem;
 }
-.content h1.title a, .content h1 a, .content.thin h1.title a, .content.thin h1 a {
+.content h1.title a, .content h1 a, .content_thin h1.title a, .content_thin h1 a {
 	color: #363330;
 	font-family: "spectral", serif;
 	font-size: 2rem;
 }
-.content h1.title a:hover, .content h1 a:hover, .content.thin h1.title a:hover, .content.thin h1 a:hover {
+.content h1.title a:hover, .content h1 a:hover, .content_thin h1.title a:hover, .content_thin h1 a:hover {
 	color: #ca7227;
 	text-decoration: none;
 }
-.content .author, .content.thin .author {
+.content .author, .content_thin .author {
 	color: #6d655f;
 	font-size: 1.125rem;
 }
-.content p, .content ul, .content.thin p, .content.thin ul {
+.content p, .content ul, .content_thin p, .content_thin ul {
 	font-size: 1.125rem;
 	line-height: 1.8rem;
 }
-.content .content hr, .content.thin .content hr {
+.content .content hr, .content_thin .content hr {
 	margin: 30px 10px;
 	background: #e4d8cc;
 	height: 1px;
 	border: 0;
 	box-shadow: 0 2px 5px #ccc;
 }
-.content pre, .content.thin pre {
+.content pre, .content_thin pre {
 	background: #221f1d;
 	color: #fff;
 	border-radius: 3px;
 }
-.content pre code, .content.thin pre code {
+.content pre code, .content_thin pre code {
 	background: transparent;
 	color: #fff;
 	border: none;
 }
-.content code, .content.thin code {
+.content code, .content_thin code {
 	background: #fcfaf8;
 	border-color: #f5f0ec;
 	border-radius: 3px;
 }
-.content blockquote, .content.thin blockquote {
+.content blockquote, .content_thin blockquote {
 	margin: 0;
 	padding: 5px 20px;
 	background: #fcfaf8;
@@ -931,7 +931,7 @@ main.prompt {
 	border-top: 1px solid #e4d8cc;
 	border-bottom: 1px solid #e4d8cc;
 }
-.content blockquote p, .content.thin blockquote p {
+.content blockquote p, .content_thin blockquote p {
 	margin: 0;
 }
 
@@ -1114,11 +1114,11 @@ main.prompt {
 	color: #363330;
 	border: none;
 }
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: #fff;
 	border: none;
 }
-#stream.reader .flux .content .author {
+#stream.reader .flux .flux_content .author {
 	color: #ba9;
 }
 
@@ -1332,6 +1332,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
-
-/*# sourceMappingURL=ansum.css.map */
+}
\ No newline at end of file
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 846072ed8..3d77beb4e 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -878,51 +878,51 @@ main.prompt {
 }
 
 /*=== Content of feed articles */
-.content, .content.thin {
+.content, .content_thin {
 	padding: 20px 10px;
 	font-size: 1.125rem;
 	line-height: 1.8rem;
 }
-.content h1.title a, .content h1 a, .content.thin h1.title a, .content.thin h1 a {
+.content h1.title a, .content h1 a, .content_thin h1.title a, .content_thin h1 a {
 	color: #363330;
 	font-family: "spectral", serif;
 	font-size: 2rem;
 }
-.content h1.title a:hover, .content h1 a:hover, .content.thin h1.title a:hover, .content.thin h1 a:hover {
+.content h1.title a:hover, .content h1 a:hover, .content_thin h1.title a:hover, .content_thin h1 a:hover {
 	color: #ca7227;
 	text-decoration: none;
 }
-.content .author, .content.thin .author {
+.content .author, .content_thin .author {
 	color: #6d655f;
 	font-size: 1.125rem;
 }
-.content p, .content ul, .content.thin p, .content.thin ul {
+.content p, .content ul, .content_thin p, .content_thin ul {
 	font-size: 1.125rem;
 	line-height: 1.8rem;
 }
-.content .content hr, .content.thin .content hr {
+.content .content hr, .content_thin .content hr {
 	margin: 30px 10px;
 	background: #e4d8cc;
 	height: 1px;
 	border: 0;
 	box-shadow: 0 2px 5px #ccc;
 }
-.content pre, .content.thin pre {
+.content pre, .content_thin pre {
 	background: #221f1d;
 	color: #fff;
 	border-radius: 3px;
 }
-.content pre code, .content.thin pre code {
+.content pre code, .content_thin pre code {
 	background: transparent;
 	color: #fff;
 	border: none;
 }
-.content code, .content.thin code {
+.content code, .content_thin code {
 	background: #fcfaf8;
 	border-color: #f5f0ec;
 	border-radius: 3px;
 }
-.content blockquote, .content.thin blockquote {
+.content blockquote, .content_thin blockquote {
 	margin: 0;
 	padding: 5px 20px;
 	background: #fcfaf8;
@@ -931,7 +931,7 @@ main.prompt {
 	border-top: 1px solid #e4d8cc;
 	border-bottom: 1px solid #e4d8cc;
 }
-.content blockquote p, .content.thin blockquote p {
+.content blockquote p, .content_thin blockquote p {
 	margin: 0;
 }
 
@@ -1114,11 +1114,11 @@ main.prompt {
 	color: #363330;
 	border: none;
 }
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: #fff;
 	border: none;
 }
-#stream.reader .flux .content .author {
+#stream.reader .flux .flux_content .author {
 	color: #ba9;
 }
 
@@ -1332,4 +1332,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
+}
\ No newline at end of file
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 5eac2762f..e6ff8f2b8 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -543,7 +543,7 @@ button.as-link[disabled] {
 	background-color: var(--dark-background-color2);
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: var(--dark-background-color1);
 	border: none;
 }
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 26ab3f222..3faf057f7 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -543,7 +543,7 @@ button.as-link[disabled] {
 	background-color: var(--dark-background-color2);
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: var(--dark-background-color1);
 	border: none;
 }
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 53a8e57c2..498b36603 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -850,7 +850,7 @@ th {
 	border: none;
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: #fff;
 	border-color: #ecf0f1;
 }
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 17c70439b..5d050ab85 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -850,7 +850,7 @@ th {
 	border: none;
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: #fff;
 	border-color: #ecf0f1;
 }
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index c18545822..2bbbbb694 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -247,7 +247,7 @@ main.prompt {
 }
 
 /*=== Content of feed articles */
-.content, .content.thin {
+.content, .content_thin {
 	padding: 20px 10px;
 
 	font-size: 1.125rem;
diff --git a/p/themes/Mapco/_reader-view.scss b/p/themes/Mapco/_reader-view.scss
index ca63f4f20..d0b661887 100644
--- a/p/themes/Mapco/_reader-view.scss
+++ b/p/themes/Mapco/_reader-view.scss
@@ -8,7 +8,7 @@
 		color: variables.$main-font-color;
 		border: none;
 
-		.content {
+		.flux_content {
 			background-color: variables.$white;
 			border: none;
 
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 4c8509923..1454acc43 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -898,52 +898,52 @@ main.prompt {
 }
 
 /*=== Content of feed articles */
-.content, .content.thin {
+.content, .content_thin {
 	padding: 20px 10px;
 	font-size: 1.125rem;
 	line-height: 1.8rem;
 }
-.content h1.title a, .content h1 a, .content.thin h1.title a, .content.thin h1 a {
+.content h1.title a, .content h1 a, .content_thin h1.title a, .content_thin h1 a {
 	color: #303136;
 	font-family: "spectral", serif;
 	font-size: 2rem;
 }
-.content h1.title a:hover, .content h1 a:hover, .content.thin h1.title a:hover, .content.thin h1 a:hover {
+.content h1.title a:hover, .content h1 a:hover, .content_thin h1.title a:hover, .content_thin h1 a:hover {
 	color: #36c;
 	text-decoration: none;
 }
-.content .author, .content.thin .author {
+.content .author, .content_thin .author {
 	color: #5b6871;
 	font-size: 1.125rem;
 }
-.content p, .content ul, .content.thin p, .content.thin ul {
+.content p, .content ul, .content_thin p, .content_thin ul {
 	font-size: 1.125rem;
 	line-height: 1.8rem;
 }
-.content .content hr, .content.thin .content hr {
+.content .content hr, .content_thin .content hr {
 	margin: 30px 10px;
 	background: #d5d8db;
 	height: 1px;
 	border: 0;
 	box-shadow: 0 2px 5px #ccc;
 }
-.content pre, .content.thin pre {
+.content pre, .content_thin pre {
 	background: #1d1e22;
 	color: #fff;
 	border-radius: 3px;
 }
-.content pre code, .content.thin pre code {
+.content pre code, .content_thin pre code {
 	background: transparent;
 	color: #fff;
 	border: none;
 }
-.content code, .content.thin code {
+.content code, .content_thin code {
 	background: #fde3e3;
 	color: #e41212;
 	font-size: 1rem;
 	border-radius: 3px;
 }
-.content blockquote, .content.thin blockquote {
+.content blockquote, .content_thin blockquote {
 	margin: 0;
 	padding: 0.5rem 1.5rem;
 	background: #f9fafb;
@@ -951,7 +951,7 @@ main.prompt {
 	color: #5b6871;
 	border-left: 4px solid #d5d8db;
 }
-.content blockquote p, .content.thin blockquote p {
+.content blockquote p, .content_thin blockquote p {
 	margin: 0;
 }
 
@@ -1129,11 +1129,11 @@ main.prompt {
 	color: #303136;
 	border: none;
 }
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: #fff;
 	border: none;
 }
-#stream.reader .flux .content .author {
+#stream.reader .flux .flux_content .author {
 	color: #a6a7ae;
 }
 
@@ -1352,6 +1352,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
-
-/*# sourceMappingURL=mapco.css.map */
+}
\ No newline at end of file
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 511d2fdf0..9972d7a3c 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -898,52 +898,52 @@ main.prompt {
 }
 
 /*=== Content of feed articles */
-.content, .content.thin {
+.content, .content_thin {
 	padding: 20px 10px;
 	font-size: 1.125rem;
 	line-height: 1.8rem;
 }
-.content h1.title a, .content h1 a, .content.thin h1.title a, .content.thin h1 a {
+.content h1.title a, .content h1 a, .content_thin h1.title a, .content_thin h1 a {
 	color: #303136;
 	font-family: "spectral", serif;
 	font-size: 2rem;
 }
-.content h1.title a:hover, .content h1 a:hover, .content.thin h1.title a:hover, .content.thin h1 a:hover {
+.content h1.title a:hover, .content h1 a:hover, .content_thin h1.title a:hover, .content_thin h1 a:hover {
 	color: #36c;
 	text-decoration: none;
 }
-.content .author, .content.thin .author {
+.content .author, .content_thin .author {
 	color: #5b6871;
 	font-size: 1.125rem;
 }
-.content p, .content ul, .content.thin p, .content.thin ul {
+.content p, .content ul, .content_thin p, .content_thin ul {
 	font-size: 1.125rem;
 	line-height: 1.8rem;
 }
-.content .content hr, .content.thin .content hr {
+.content .content hr, .content_thin .content hr {
 	margin: 30px 10px;
 	background: #d5d8db;
 	height: 1px;
 	border: 0;
 	box-shadow: 0 2px 5px #ccc;
 }
-.content pre, .content.thin pre {
+.content pre, .content_thin pre {
 	background: #1d1e22;
 	color: #fff;
 	border-radius: 3px;
 }
-.content pre code, .content.thin pre code {
+.content pre code, .content_thin pre code {
 	background: transparent;
 	color: #fff;
 	border: none;
 }
-.content code, .content.thin code {
+.content code, .content_thin code {
 	background: #fde3e3;
 	color: #e41212;
 	font-size: 1rem;
 	border-radius: 3px;
 }
-.content blockquote, .content.thin blockquote {
+.content blockquote, .content_thin blockquote {
 	margin: 0;
 	padding: 0.5rem 1.5rem;
 	background: #f9fafb;
@@ -951,7 +951,7 @@ main.prompt {
 	color: #5b6871;
 	border-right: 4px solid #d5d8db;
 }
-.content blockquote p, .content.thin blockquote p {
+.content blockquote p, .content_thin blockquote p {
 	margin: 0;
 }
 
@@ -1129,11 +1129,11 @@ main.prompt {
 	color: #303136;
 	border: none;
 }
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: #fff;
 	border: none;
 }
-#stream.reader .flux .content .author {
+#stream.reader .flux .flux_content .author {
 	color: #a6a7ae;
 }
 
@@ -1352,4 +1352,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
+}
\ No newline at end of file
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index d327e4d83..511278b71 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -1191,7 +1191,7 @@ optgroup::before {
 	border: none;
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: var(--accent-bg);
 	border: none;
 	border-radius: 12px;
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index eb61ed04f..b6c3434a6 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -1191,7 +1191,7 @@ optgroup::before {
 	border: none;
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: var(--accent-bg);
 	border: none;
 	border-radius: 12px;
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 702ea855a..5cab9bef8 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -1004,7 +1004,7 @@ a:hover .icon {
 	border: none;
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: var(--background-color-light);
 	border-color: var(--border-color);
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 5879a9e70..99a0364e7 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -1004,7 +1004,7 @@ a:hover .icon {
 	border: none;
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: var(--background-color-light);
 	border-color: var(--border-color);
 }
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 4633d30cd..36b0a3a35 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -967,7 +967,7 @@ a.signin {
 	border: none;
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: var(--background-color-white);
 	border-color: var(--border-color-grey-light);
 }
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 8d98fdd80..862270759 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -967,7 +967,7 @@ a.signin {
 	border: none;
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: var(--background-color-white);
 	border-color: var(--border-color-grey-light);
 }
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index d30e427dd..64e0770a9 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -1140,7 +1140,7 @@ button.as-link {
 #stream.reader .flux::after {
 	border: none;
 }
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	border-color: var(--color-border-grey);
 }
 #stream.reader .flux .author {
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index e8656d48f..d87d97e68 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -1140,7 +1140,7 @@ button.as-link {
 #stream.reader .flux::after {
 	border: none;
 }
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	border-color: var(--color-border-grey);
 }
 #stream.reader .flux .author {
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index ea7049086..2048b5cf5 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -1458,7 +1458,7 @@ button.as-link {
 		border: none;
 	}
 
-	.content {
+	.flux_content {
 		border-color: var(--color-border-grey);
 	}
 
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index e8752bb96..63a566f16 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -628,7 +628,7 @@ th {
 	color: #333;
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: #fff;
 	border-color: #ddd;
 }
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index e614bdafc..d4cceb6da 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -628,7 +628,7 @@ th {
 	color: #333;
 }
 
-#stream.reader .flux .content {
+#stream.reader .flux .flux_content {
 	background-color: #fff;
 	border-color: #ddd;
 }
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index b1825c96d..a39d393c6 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -206,8 +206,8 @@ img.favicon {
 	vertical-align: middle;
 }
 
-.content.thin figure,
-.content.medium figure {
+.content_thin figure,
+.content_medium figure {
 	margin: 8px 0px;
 }
 
@@ -1551,15 +1551,15 @@ a.website:hover .favicon {
 	padding-bottom: calc(2 * var(--frss-padding-top-bottom));
 }
 
-.content.large {
+.content_large {
 	max-width: 1100px;
 }
 
-.content.medium {
+.content_medium {
 	max-width: 900px;
 }
 
-.content.thin {
+.content_thin {
 	max-width: 650px;
 }
 
@@ -2347,12 +2347,20 @@ html.slider-active {
 	padding: 1rem 0 2rem;
 }
 
-.reader .flux .content {
+.reader .flux .flux_content {
 	padding: 3rem 0;
 	background-color: var(--frss-background-color);
 	border: 1px solid var(--frss-border-color);
 }
 
+.reader .flux_content {
+	margin: auto;
+}
+
+.reader .content ~ footer {
+	padding: 0 3rem;
+}
+
 #loglist-wrapper {
 	overflow-x: auto;
 }
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 460756cbc..4e4e25979 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -206,8 +206,8 @@ img.favicon {
 	vertical-align: middle;
 }
 
-.content.thin figure,
-.content.medium figure {
+.content_thin figure,
+.content_medium figure {
 	margin: 8px 0px;
 }
 
@@ -1551,15 +1551,15 @@ a.website:hover .favicon {
 	padding-bottom: calc(2 * var(--frss-padding-top-bottom));
 }
 
-.content.large {
+.content_large {
 	max-width: 1100px;
 }
 
-.content.medium {
+.content_medium {
 	max-width: 900px;
 }
 
-.content.thin {
+.content_thin {
 	max-width: 650px;
 }
 
@@ -2347,12 +2347,20 @@ html.slider-active {
 	padding: 1rem 0 2rem;
 }
 
-.reader .flux .content {
+.reader .flux .flux_content {
 	padding: 3rem 0;
 	background-color: var(--frss-background-color);
 	border: 1px solid var(--frss-border-color);
 }
 
+.reader .flux_content {
+	margin: auto;
+}
+
+.reader .content ~ footer {
+	padding: 0 3rem;
+}
+
 #loglist-wrapper {
 	overflow-x: auto;
 }