precise borders

faisalnjs · Oct 20, 2023 · 1c77565 · 1c77565
1 parent 497f6b5
commit 1c77565
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 6 deletions.
diff --git a/frontend/pages/articles.ejs b/frontend/pages/articles.ejs
@@ -17,7 +17,7 @@
 		<h3><%- cms.articles.length %> Article<% if (cms.articles.length != 1) { %>s<% } %></h3>
 	</div>
 	<div class="articles">
-		<div class="grid">
+		<div class="grid<% if ((cms.articles.length % 3) != 0) { %> hideBorder<%= cms.articles.length % 3 %><% } %>">
 			<% 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 %>" title="<%= article.title %>">
 				<div class="inner">

diff --git a/frontend/pages/artworks.ejs b/frontend/pages/artworks.ejs
@@ -17,7 +17,7 @@
 		<h3><%- cms.artworks.length %> Artwork</h3>
 	</div>
 	<div class="articles">
-		<div class="grid">
+		<div class="grid<% if ((cms.artworks.length % 3) != 0) { %> hideBorder<%= cms.artworks.length % 3 %><% } %>">
 			<% 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 %>" title="<%= artwork.title %>">
 				<div class="inner">

diff --git a/frontend/pages/newspapers.ejs b/frontend/pages/newspapers.ejs
@@ -17,7 +17,7 @@
 		<h3><%- cms.newspapers.length %> Newspaper<% if (cms.newspapers.length != 1) { %>s<% } %></h3>
 	</div>
 	<div class="articles">
-		<div class="grid">
+		<div class="grid<% if ((cms.newspapers.length % 3) != 0) { %> hideBorder<%= cms.newspapers.length % 3 %><% } %>">
 			<% 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 %>" title="<%= newspaper.title %>">
 				<div class="inner">

diff --git a/frontend/pages/polls.ejs b/frontend/pages/polls.ejs
@@ -17,7 +17,7 @@
 		<h3><%- cms.polls.length %> Poll<% if (cms.polls.length != 1) { %>s<% } %></h3>
 	</div>
 	<div class="articles">
-		<div class="grid">
+		<div class="grid<% if ((cms.polls.length % 3) != 0) { %> hideBorder<%= cms.polls.length % 3 %><% } %>">
 			<% const polls = cms.polls.sort((a, b) => new Date(b.date) - new Date(a.date)); for (let i = 0; i < polls.length; i++) { const poll = polls[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 %>/polls/<%= poll.slug %>" title="<%= poll.question %>">
 				<div class="inner">

diff --git a/frontend/pages/tag.ejs b/frontend/pages/tag.ejs
@@ -25,7 +25,7 @@
 	</div>
 	<div class="split">
 		<div class="articles">
-			<div class="grid">
+			<div class="grid<% if ((filteredArticles.length % 2) != 0) { %> hideBorder<%= filteredArticles.length % 2 %><% } %>">
 				<% 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 %>" title="<%= article.title %>">
 					<div class="inner">

diff --git a/frontend/pages/tags.ejs b/frontend/pages/tags.ejs
@@ -39,7 +39,7 @@
 		<h3><%= Object.keys(tags).length %> Tag<% if (Object.keys(tags).length != 1) { %>s<% } %></h3>
 	</div>
 	<div class="articles">
-		<div class="grid">
+		<div class="grid<% if ((Object.keys(tags).length % 3) != 0) { %> hideBorder<%= Object.keys(tags).length % 3 %><% } %>">
 			<% if (Object.keys(tags).length != 0) { for (let i = 0; i < Object.keys(tags).length; i++) { const tag = Object.keys(tags)[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 %>/tags/<%= tag.toLowerCase().replaceAll(" ", "-") %>" title="#<%= tag.toLowerCase().replaceAll(" ", "-") %>">
 				<div class="inner">

diff --git a/frontend/public/css/styles.css b/frontend/public/css/styles.css
@@ -557,6 +557,14 @@ header .main .search form input::placeholder {
 	justify-content: center;
 }
 
+.articles .grid.hideBorder1 .article:nth-last-child(2) {
+	border-bottom: 1px solid var(--text);
+}
+
+.articles .grid.hideBorder1 .article:nth-last-child(3), .articles .grid.hideBorder2 .article:nth-last-child(3) {
+	border-bottom: 1px solid var(--text);
+}
+
 .articles.individual .grid {
 	border-top: 1px solid #c7c7c7;
 	border-bottom: 1px solid #c7c7c7;
@@ -1158,6 +1166,10 @@ footer .inner .bottom .socials i:hover {
 	border-right: 1px solid var(--text) !important;
 }
 
+.split .articles .grid.hideBorder1 .article:nth-last-child(2) {
+    border-bottom: 1px solid var(--text) !important;
+}
+
 .split .articles .grid .article:nth-last-child(-n + 2) {
 	border-bottom: none !important;
 }