From e6c588b4c60eacb24c6d0b380c76238f740e7446 Mon Sep 17 00:00:00 2001
From: Faisal N <contact@faisaln.com>
Date: Tue, 17 Oct 2023 10:19:23 -0400
Subject: [PATCH] alts, bug fixes

---
 frontend/pages/about.ejs        |  4 ++--
 frontend/pages/article.ejs      |  2 +-
 frontend/pages/articles.ejs     |  2 +-
 frontend/pages/artwork.ejs      |  4 ++--
 frontend/pages/artworks.ejs     |  2 +-
 frontend/pages/index.ejs        |  4 ++--
 frontend/pages/newspaper.ejs    |  2 +-
 frontend/pages/newspapers.ejs   |  2 +-
 frontend/pages/poll.ejs         |  2 +-
 frontend/pages/search.ejs       | 10 +++++-----
 frontend/pages/tag.ejs          |  2 +-
 frontend/partials/footer.ejs    |  2 +-
 frontend/partials/suggested.ejs |  2 +-
 frontend/public/css/styles.css  | 14 +++++++++++---
 14 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/frontend/pages/about.ejs b/frontend/pages/about.ejs
index 508a29a..3fe4af4 100644
--- a/frontend/pages/about.ejs
+++ b/frontend/pages/about.ejs
@@ -8,12 +8,12 @@
 	<%- include('../partials/header.ejs'); %>
 	<div class="about">
 		<div class="split">
-			<% if (cms.about[0].image != null) { %><img src="<%- vars.asset_prefix %><%= cms.about[0].image.path %>" /><% } %>
+			<% if (cms.about[0].image != null) { %><img src="<%- vars.asset_prefix %><%= cms.about[0].image.path %>"<% if (cms.about[0].image.description != "") { %>alt="<%= cms.about[0].image.description %>"<% } %> /><% } %>
 			<div class="content">
 				<%- cms.about[0].content %>
 			</div>
 		</div>
-		<% if (cms.about[0].image-2 != null) { %><img src="<%- vars.asset_prefix %><%= cms.about[0]['image-2'].path %>" /><% } %>
+		<% if (cms.about[0].image-2 != null) { %><img src="<%- vars.asset_prefix %><%= cms.about[0]['image-2'].path %>"<% if (cms.about[0]['image-2'].description != "") { %>alt="<%= cms.about[0]['image-2'].description %>"<% } %> /><% } %>
 	</div>
 	<%- include('../partials/footer.ejs'); %>
 </body>
diff --git a/frontend/pages/article.ejs b/frontend/pages/article.ejs
index 07ebd0a..5830c5f 100644
--- a/frontend/pages/article.ejs
+++ b/frontend/pages/article.ejs
@@ -26,7 +26,7 @@
 					<% if (article.tags != null) { %><p>Tags: <% for (tag of article.tags) { %><a href="<%- vars.domain %>/tags/<%= tag %>">#<%= tag.toLowerCase().replaceAll(" ", "-") %></a> <% } %></p><% } %>
 				</div>
 				<div class="author">
-					<img src="<%- vars.asset_prefix %><% if ((article.author != "") && (article.author != null)) { %><%= cms.siteDetails[0].unknown.path %><% } else { %><%= cms.siteDetails[0].favicon.path %><% } %>" />
+					<img src="<%- vars.asset_prefix %><% if ((article.author != "") && (article.author != null)) { %><%= cms.siteDetails[0].unknown.path %><% } else { %><%= cms.siteDetails[0].favicon.path %><% } %>" alt="Author" />
 					<div class="info">
 						<h4><% if ((article.author != "") && (article.author != null)) { %><%= article.author %><% } else { %><%= cms.siteDetails[0].title %><% } %></h4>
 						<h5><a href="<%- vars.domain %>"><%= cms.siteDetails[0].title %></a> - Writer<% if ((article.author != "") && (article.author != null)) { %><% } else { %>s<% } %></h5>
diff --git a/frontend/pages/articles.ejs b/frontend/pages/articles.ejs
index 99ae911..ab33f2c 100644
--- a/frontend/pages/articles.ejs
+++ b/frontend/pages/articles.ejs
@@ -21,7 +21,7 @@
 			<% const articles = cms.articles.sort((a, b) => new Date(b.date) - new Date(a.date)); for (let i = 0; i < articles.length; i++) { const article = articles[i]; %>
 			<a class="article<% if (i % 3 === 0) { %> left<% } else if (i === 1 || (i - 1) % 3 === 0) { %> middle<% } else if ((i - 2) % 3 === 0) { %> right<% } %>" href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>">
 				<div class="inner">
-					<img src="<% if (article.images[0] != null) { %><%- vars.asset_prefix %><%= article.images[0].path %>" <% if (article.images[0].width < article.images[0].height) { %>style="width: min-content;" <% } } else { %> "<% } %> />
+					<img src="<% if (article.images[0] != null) { %><%- vars.asset_prefix %><%= article.images[0].path %>" <% if (article.images[0].width < article.images[0].height) { %>style="width: min-content;" <% } } else { %> "<% } %><% if (article.images[0].description != "") { %>alt="<%= article.images[0].description %>"<% } %> />
 					<h3><%= article.title %></h3>
 					<% if (article.description != null) { %><h4><%= article.description.slice(0, 50) %>...</h4><% } %>
 					<p><% var date = new Date(article.date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %><% if ((article.author != "") && (article.author != null)) { %> / <%= article.author %><% } %></p>
diff --git a/frontend/pages/artwork.ejs b/frontend/pages/artwork.ejs
index d7b9e77..75b7fc8 100644
--- a/frontend/pages/artwork.ejs
+++ b/frontend/pages/artwork.ejs
@@ -26,7 +26,7 @@
 					<% if (artwork.tags != null) { %><p>Tags: <% for (tag of artwork.tags) { %><a href="<%- vars.domain %>/tags/<%= tag %>">#<%= tag.toLowerCase().replaceAll(" ", "-") %></a> <% } %></p><% } %>
 				</div>
 				<div class="author">
-					<img src="<%- vars.asset_prefix %><% if ((artwork.author != "") && (artwork.author != null)) { %><%= cms.siteDetails[0].unknown.path %><% } else { %><%= cms.siteDetails[0].favicon.path %><% } %>" />
+					<img src="<%- vars.asset_prefix %><% if ((artwork.author != "") && (artwork.author != null)) { %><%= cms.siteDetails[0].unknown.path %><% } else { %><%= cms.siteDetails[0].favicon.path %><% } %>" alt="Author" />
 					<div class="info">
 						<h4><% if ((artwork.author != "") && (artwork.author != null)) { %><%= artwork.author %><% } else { %><%= cms.siteDetails[0].title %><% } %></h4>
 						<h5><a href="<%- vars.domain %>"><%= cms.siteDetails[0].title %></a> - Writer<% if ((artwork.author != "") && (artwork.author != null)) { %><% } else { %>s<% } %></h5>
@@ -44,7 +44,7 @@
 				</div>
 			</div>
 		</div>
-		<img src="<%- vars.asset_prefix %><%= artwork.artwork.path %>" />
+		<img src="<%- vars.asset_prefix %><%= artwork.artwork.path %>"<% if (artwork.artwork.description != "") { %>alt="<%= artwork.artwork.description %>"<% } %> />
 		<h4 style="max-width: 700px"><%= artwork.description %></h4>
 		<div class="comments">
 			<h1>Comments</h1>
diff --git a/frontend/pages/artworks.ejs b/frontend/pages/artworks.ejs
index d25c41e..5ab3c48 100644
--- a/frontend/pages/artworks.ejs
+++ b/frontend/pages/artworks.ejs
@@ -21,7 +21,7 @@
 			<% const artworks = cms.artworks.sort((a, b) => new Date(b.date) - new Date(a.date)); for (let i = 0; i < artworks.length; i++) { const artwork = artworks[i]; %>
 			<a class="article<% if (i % 3 === 0) { %> left<% } else if (i === 1 || (i - 1) % 3 === 0) { %> middle<% } else if ((i - 2) % 3 === 0) { %> right<% } %>" href="<%- vars.domain %>/artworks/<%= artwork.slug %>">
 				<div class="inner">
-					<img src="<% if (artwork.artwork != null) { %><%- vars.asset_prefix %><%= artwork.artwork.path %>" <% if (artwork.artwork.width < artwork.artwork.height) { %>style="width: min-content;" <% } } else { %> "<% } %> />
+					<img src="<% if (artwork.artwork != null) { %><%- vars.asset_prefix %><%= artwork.artwork.path %>" <% if (artwork.artwork.width < artwork.artwork.height) { %>style="width: min-content;" <% } } else { %> "<% } %><% if (artwork.artwork.description != "") { %>alt="<%= artwork.artwork.description %>"<% } %> />
 					<h3><%= artwork.title %></h3>
 					<% if (artwork.description != null) { %><h4><%= artwork.description.slice(0, 50) %>...</h4><% } %>
 					<p><% var date = new Date(artwork.date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %><% if ((artwork.author != "") && (artwork.author != null)) { %> / <%= artwork.author %><% } %></p>
diff --git a/frontend/pages/index.ejs b/frontend/pages/index.ejs
index 88c31fa..7fcc1c3 100644
--- a/frontend/pages/index.ejs
+++ b/frontend/pages/index.ejs
@@ -40,7 +40,7 @@
 			<% for (let i = 0; i < 3 && i < cms.articles.length; i++) { const article = cms.articles.sort((a, b) => new Date(b.date) - new Date(a.date))[i]; %>
 			<a class="article<% if (i % 3 === 0) { %> left<% } else if (i === 1 || (i - 1) % 3 === 0) { %> middle<% } else if ((i - 2) % 3 === 0) { %> right<% } %>" href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>">
 				<div class="inner">
-					<img src="<% if (article.images[0] != null) { %><%- vars.asset_prefix %><%= article.images[0].path %>" <% if (article.images[0].width < article.images[0].height) { %>style="width: min-content;" <% } } else { %> "<% } %> />
+					<img src="<% if (article.images[0] != null) { %><%- vars.asset_prefix %><%= article.images[0].path %>" <% if (article.images[0].width < article.images[0].height) { %>style="width: min-content;" <% } } else { %> "<% } %><% if (article.images[0].description != "") { %>alt="<%= article.images[0].description %>"<% } %> />
 					<h3><%= article.title %></h3>
 					<% if (article.description != null) { %><h4><%= article.description.slice(0, 50) %>...</h4><% } %>
 					<p><% var date = new Date(article.date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %><% if ((article.author != "") && (article.author != null)) { %> / <%= article.author %><% } %></p>
@@ -56,7 +56,7 @@
 			<% for (let i = 0; i < 3 && i < cms.artworks.length; i++) { const artwork = cms.artworks.sort((a, b) => new Date(b.date) - new Date(a.date))[i]; %>
 			<a class="article<% if (i % 3 === 0) { %> left<% } else if (i === 1 || (i - 1) % 3 === 0) { %> middle<% } else if ((i - 2) % 3 === 0) { %> right<% } %>" href="<%- vars.domain %>/artworks/<%= artwork.slug %>">
 				<div class="inner">
-					<img src="<%- vars.asset_prefix %><%= artwork.artwork.path %>" <% if (artwork.artwork.width < artwork.artwork.height) { %>style="width: min-content;" <% } %> />
+					<img src="<%- vars.asset_prefix %><%= artwork.artwork.path %>" <% if (artwork.artwork.width < artwork.artwork.height) { %>style="width: min-content;" <% } %><% if (artwork.artwork.description != "") { %>alt="<%= artwork.artwork.description %>"<% } %> />
 					<h3><%= artwork.title %></h3>
 					<p><% var date = new Date(artwork.date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %><% if ((artwork.author != "") && (artwork.author != null)) { %> / <%= artwork.author %><% } %></p>
 				</div>
diff --git a/frontend/pages/newspaper.ejs b/frontend/pages/newspaper.ejs
index 1fac926..f2fd48c 100644
--- a/frontend/pages/newspaper.ejs
+++ b/frontend/pages/newspaper.ejs
@@ -21,7 +21,7 @@
 					<% if (newspaper.tags != null) { %><p>Tags: <% for (tag of newspaper.tags) { %><a href="<%- vars.domain %>/tags/<%= tag %>">#<%= tag.toLowerCase().replaceAll(" ", "-") %></a> <% } %></p><% } %>
 				</div>
 				<div class="author">
-					<img src="<%- vars.asset_prefix %><%= cms.siteDetails[0].favicon.path %>" />
+					<img src="<%- vars.asset_prefix %><%= cms.siteDetails[0].favicon.path %>" alt="Author" />
 					<div class="info">
 						<h4><%= cms.siteDetails[0].title %></h4>
 						<h5><a href="<%- vars.domain %>"><%= cms.siteDetails[0].title %></a> - Writers</h5>
diff --git a/frontend/pages/newspapers.ejs b/frontend/pages/newspapers.ejs
index 2194c33..46a2a46 100644
--- a/frontend/pages/newspapers.ejs
+++ b/frontend/pages/newspapers.ejs
@@ -21,7 +21,7 @@
 			<% for (let i = 0; i < cms.newspapers.length; i++) { const newspaper = cms.newspapers.sort((a, b) => new Date(b.date) - new Date(a.date))[i]; %>
 			<a class="article<% if (i === 1 || (i - 1) % 3 === 0) { %> middle<% } %>" href="<%- vars.domain %>/newspapers/<%= newspaper.slug %>">
 				<div class="inner">
-					<img src="<%- vars.asset_prefix %><%= newspaper.image.path %>" />
+					<img src="<%- vars.asset_prefix %><%= newspaper.image.path %>"<% if (newspaper.image.description != "") { %>alt="<%= newspaper.image.description %>"<% } %> />
 					<h3><%= newspaper.title %></h3>
 					<p><% var date = new Date(newspaper.date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %></p>
 				</div>
diff --git a/frontend/pages/poll.ejs b/frontend/pages/poll.ejs
index 0ee4a11..03eb01f 100644
--- a/frontend/pages/poll.ejs
+++ b/frontend/pages/poll.ejs
@@ -35,7 +35,7 @@
 					<p><%= answerCount.reduce((a, b) => a + b) %> Vote<% if (answerCount.reduce((a, b) => a + b) != 1) { %>s<% } %></p>
 				</div>
 				<div class="author">
-					<img src="<%- vars.asset_prefix %><%= cms.siteDetails[0].favicon.path %>" />
+					<img src="<%- vars.asset_prefix %><%= cms.siteDetails[0].favicon.path %>" alt="Author" />
 					<div class="info">
 						<h4>By <% if ((poll.author != "") && (poll.author != null)) { %><%= poll.author %><% } else { %><a href="<%- vars.domain %>"><%= cms.siteDetails[0].title %></a> Writers, <a href="<%- vars.domain %>"><%= cms.siteDetails[0].title %></a><% } %></h4>
 						<h5>Published <% var date = new Date(poll.date); if (date.isToday()) { %>today<% } else if (ifYesterday(date)) { %>yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %></h5>
diff --git a/frontend/pages/search.ejs b/frontend/pages/search.ejs
index 1385ba2..b435108 100644
--- a/frontend/pages/search.ejs
+++ b/frontend/pages/search.ejs
@@ -53,7 +53,7 @@
 		<div class="grid">
 			<% filteredNewspapers.sort((a, b) => b._created - a._created).forEach(newspaper => { %>
 			<a class="article" href="<%- vars.domain %>/newspaper/<%= newspaper.slug %>">
-				<img src="<%- vars.asset_prefix %><%= newspaper.image.path %>" />
+				<img src="<%- vars.asset_prefix %><%= newspaper.image.path %>"<% if (newspaper.image.description != "") { %>alt="<%= newspaper.image.description %>"<% } %> />
 				<div class="inner">
 					<h3>Newspaper: <%= newspaper.title %></h3>
 					<p><% var date = new Date(newspaper.date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %></p>
@@ -62,7 +62,7 @@
 			<% }); %>
 			<% filteredArticles.sort((a, b) => new Date(b.date) - new Date(a.date)).forEach(article => { %>
 			<a class="article" href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>">
-				<img src="<% if (article.images[0] != null) { %><%- vars.asset_prefix %><%= article.images[0].path %><% } else { %> <% } %>" />
+				<img src="<% if (article.images[0] != null) { %><%- vars.asset_prefix %><%= article.images[0].path %><% } else { %> <% } %>"<% if (article.images[0].description != "") { %>alt="<%= article.images[0].description %>"<% } %> />
 				<div class="inner">
 					<h3>Article: <%= article.title %></h3>
 					<% if (article.description != null) { %><h4><%= article.description.slice(0, 50) %>...</h4><% } %>
@@ -72,7 +72,7 @@
 			<% }); %>
 			<% filteredTags.sort((a, b) => a.localeCompare(b)).forEach(tag => { %>
 			<a class="article" href="<%- vars.domain %>/tags/<%= tag %>">
-				<img src=" ">
+				<img src=" " alt="">
 				<div class="inner">
 					<h3>Tag: <%= tag %></h3>
 					<p><%- tags[tag].length %> Article<% if (tags[tag].length != 1) { %>s<% } %></p>
@@ -81,7 +81,7 @@
 			<% }); %>
 			<% filteredPolls.sort((a, b) => new Date(b.date) - new Date(a.date)).forEach(poll => { %>
 			<a class="article" href="<%- vars.domain %>/polls/<%= poll.slug %>">
-				<img src=" ">
+				<img src=" " alt="">
 				<div class="inner">
 					<h3>Poll: <%= poll.question %></h3>
 					<h4><%= poll.description %></h4>
@@ -91,7 +91,7 @@
 			<% }); %>
 			<% filteredArtworks.sort((a, b) => new Date(b.date) - new Date(a.date)).forEach(artwork => { %>
 			<a class="article" href="<%- vars.domain %>/artworks/<%= artwork.slug %>">
-				<img src="<%- vars.asset_prefix %><%= artwork.artwork.path %>" />
+				<img src="<%- vars.asset_prefix %><%= artwork.artwork.path %>"<% if (artwork.artwork.description != "") { %>alt="<%= artwork.artwork.description %>"<% } %> />
 				<div class="inner">
 					<h3>Artwork: <%= artwork.title %></h3>
 					<p><% var date = new Date(article.date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %><% if ((article.author != "") && (article.author != null)) { %> / <%= article.author %><% } %></p>
diff --git a/frontend/pages/tag.ejs b/frontend/pages/tag.ejs
index 4cdb1e9..25d3175 100644
--- a/frontend/pages/tag.ejs
+++ b/frontend/pages/tag.ejs
@@ -28,7 +28,7 @@
 			<% if (filteredArticles.length != 0) { const articles = filteredArticles.sort((a, b) => b._created - a._created); for (let i = 0; i < articles.length; i++) { const article = articles[i]; %>
 			<a class="article<% if (i % 3 === 0) { %> left<% } else if (i === 1 || (i - 1) % 3 === 0) { %> middle<% } else if ((i - 2) % 3 === 0) { %> right<% } %>" href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>">
 				<div class="inner">
-					<img src="<% if (article.images[0] != null) { %><%- vars.asset_prefix %><%= article.images[0].path %>" <% if (article.images[0].width < article.images[0].height) { %>style="width: min-content;" <% } } else { %> "<% } %> />
+					<img src="<% if (article.images[0] != null) { %><%- vars.asset_prefix %><%= article.images[0].path %>" <% if (article.images[0].width < article.images[0].height) { %>style="width: min-content;" <% } } else { %> "<% } %><% if (article.images[0].description != "") { %>alt="<%= article.images[0].description %>"<% } %> />
 					<h3><%= article.title %></h3>
 					<% if (article.description != null) { %><h4><%= article.description.slice(0, 50) %>...</h4><% } %>
 					<p><% var date = new Date(article.date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %><% if ((article.author != "") && (article.author != null)) { %> / <%= article.author %><% } %></p>
diff --git a/frontend/partials/footer.ejs b/frontend/partials/footer.ejs
index d2e1b72..188f869 100644
--- a/frontend/partials/footer.ejs
+++ b/frontend/partials/footer.ejs
@@ -1,4 +1,4 @@
-<% if (cms.siteDetails[0].advertisement != null) { %><div class="advertisement"><a href="<%= cms.siteDetails[0]['advertisement-link'] %>"><img src="<%- vars.asset_prefix %><%= cms.siteDetails[0].advertisement.path %>" /></a></div><% } %>
+<% if (cms.siteDetails[0].advertisement != null) { %><div class="advertisement"><a href="<%= cms.siteDetails[0]['advertisement-link'] %>"><img src="<%- vars.asset_prefix %><%= cms.siteDetails[0].advertisement.path %>" alt="Advertisement" /></a></div><% } %>
 <footer style="background-image: url('<%- vars.asset_prefix %><%= cms.siteDetails[0].background.path %>')">
 	<div class="inner">
 		<div class="top">
diff --git a/frontend/partials/suggested.ejs b/frontend/partials/suggested.ejs
index f5ee106..202b7b6 100644
--- a/frontend/partials/suggested.ejs
+++ b/frontend/partials/suggested.ejs
@@ -9,7 +9,7 @@
 		<% const articles = cms.articles.filter(a => a.slug !== (article || []).slug).sort(() => Math.random() - 0.5).slice(0, 3); for (let i = 0; i < 3; i++) { const article = articles[i]; %>
 			<a class="article<% if (i % 3 === 0) { %> left<% } else if (i === 1 || (i - 1) % 3 === 0) { %> middle<% } else if ((i - 2) % 3 === 0) { %> right<% } %>" href="<%- vars.domain %>/articles/<%= new Date(article.date).getFullYear() %>/<%= article.slug %>">
 				<div class="inner">
-					<img src="<% if (article.images[0] != null) { %><%- vars.asset_prefix %><%= article.images[0].path %>" <% if (article.images[0].width < article.images[0].height) { %>style="width: min-content;" <% } } else { %> "<% } %> />
+					<img src="<% if (article.images[0] != null) { %><%- vars.asset_prefix %><%= article.images[0].path %>" <% if (article.images[0].width < article.images[0].height) { %>style="width: min-content;" <% } } else { %> "<% } %><% if (article.images[0].description != "") { %>alt="<%= article.images[0].description %>"<% } %> />
 					<h3><%= article.title %></h3>
 					<% if (article.description != null) { %><h4><%= article.description.slice(0, 50) %>...</h4><% } %>
 					<p><% var date = new Date(article.date); if (date.isToday()) { %>Today<% } else if (ifYesterday(date)) { %>Yesterday<% } else { %><%= date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) %><% } %><% if ((article.author != "") && (article.author != null)) { %> / <%= article.author %><% } %></p>
diff --git a/frontend/public/css/styles.css b/frontend/public/css/styles.css
index d4dfb4f..5fa6f8b 100644
--- a/frontend/public/css/styles.css
+++ b/frontend/public/css/styles.css
@@ -52,10 +52,11 @@
 
 	.articles h2 {
 		width: 90% !important;
+		font-size: 40px !important;
 	}
 
 	.articles hr {
-		margin-left: 5.5%;
+		margin-left: 5.5% !important;
 	}
 
 	.articles .grid {
@@ -64,7 +65,7 @@
 	}
 
 	.articles .grid .article {
-		padding: 50px !important;
+		padding: 50px 20px !important;
 		border: none !important;
 		border-bottom: 1px solid var(--text) !important;
 	}
@@ -79,6 +80,10 @@
 }
 
 @media screen and (max-width: 800px) {
+	html {
+		background: var(--background) !important;
+	}
+	
 	.mobileOnly {
 		display: block !important;
 	}
@@ -158,6 +163,10 @@
 		border-right: unset !important;
 	}
 
+	.articles .grid .article:nth-last-child(2) {
+		border-bottom: 1px solid var(--text) !important;
+	}
+
 	.banner {
 		width: 70vw !important;
 		padding: 5vw 15vw !important;
@@ -230,7 +239,6 @@
 }
 
 html {
-	background: var(--theme);
 	background: -moz-linear-gradient(150deg, var(--theme) 0%, transparent 10%);
 	background: -webkit-linear-gradient(
 		150deg,