advertisement, gradients, bug fixes

frontend/partials/footer.ejs

@@ -1,3 +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><% } %>
 <footer style="background-image: url('<%- vars.asset_prefix %><%= cms.siteDetails[0].background.path %>')">
 	<div class="inner">
 		<div class="top">

frontend/partials/head.ejs

@@ -4,7 +4,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
 	:root {
-		--theme: <%=cms.siteDetails[0].color %>
+		--theme: <%=cms.siteDetails[0].color %>;
+		--noise: url('<%- vars.asset_prefix %><%= cms.siteDetails[0].noise.path %>');
 	}
 </style>
 <style>

frontend/partials/socials.ejs

@@ -1,3 +1,3 @@
 <% cms.siteDetails[0].socials.sort((a, b) => a._o - b._o); for (item of cms.siteDetails[0].socials.filter(item => { return item.active })) { %>
-<a href="<%= item.url %>" title="<%= item.title %>"><i class="fas fa-<%= item.data.icon %>"></i></a>
+<a href="<%= item.url %>" title="<%= item.title %>"><i class="fa-brands fa-<%= item.data.icon %>"></i></a>
 <% } %>

frontend/public/css/styles.css

@@ -12,6 +12,10 @@
 		position: fixed !important;
 		top: 35px !important;
 	}
+
+	.articles .grid {
+		grid-template-columns: repeat(3, 30%) !important;
+	}
 }
 
 @media screen and (max-width: 1200px) {
@@ -226,6 +230,14 @@
 }
 
 html {
+	background: var(--theme);
+	background: -moz-linear-gradient(150deg, var(--theme) 0%, transparent 10%);
+	background: -webkit-linear-gradient(
+		150deg,
+		var(--theme) 0%,
+		transparent 10%
+	);
+	background: linear-gradient(150deg, var(--theme) 0%, transparent 10%);
 	background-color: var(--background);
 	color: var(--text);
 	font-family: Montserrat, sans-serif;
@@ -326,6 +338,7 @@ header .socials i {
 	align-items: center;
 	justify-content: center;
 	background-color: var(--background);
+	font-size: 20px;
 }
 
 header .socials a:nth-child(even) i {
@@ -495,7 +508,7 @@ header .main .search form input::placeholder {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	background-color: #f7f7f7;
+	background: #f7f7f7 var(--noise) repeat 0 0;
 	color: var(--text);
 	gap: 20px;
 	width: 100%;
@@ -600,6 +613,12 @@ header .main .search form input::placeholder {
 .articles .grid .article img {
 	width: 100%;
 	height: 200px;
+	transition: 0.5s;
+}
+
+.articles .grid .article img:hover {
+	box-shadow: var(--theme) 0px 0px 70px -15px;
+	transition: 0.5s;
 }
 
 .articles .grid .article h3 {
@@ -662,6 +681,15 @@ header .main .search form input::placeholder {
 	width: 100%;
 }
 
+.article-i .image, .article-i img {
+	transition: 0.5s;
+}
+
+.article-i .image:hover, .article-i img:hover {
+	box-shadow: var(--theme) 0px 0px 70px -15px;
+	transition: 0.5s;
+}
+
 .article-i .split {
 	display: flex;
 	flex-direction: row;
@@ -1000,6 +1028,7 @@ footer .inner .bottom .socials i {
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	font-size: 20px;
 }
 
 .toTop {
@@ -1068,3 +1097,24 @@ footer .inner .bottom .socials i {
 	width: 100% !important;
 	height: unset !important;
 }
+
+.advertisement {
+	width: 100%;
+	padding: 100px 0;
+	background-color: #f7f7f7;
+	display: flex;
+	justify-content: center;
+}
+
+.advertisement a {
+	max-width: 75%;
+	width: max-content;
+	display: flex;
+	justify-content: center;
+}
+
+.advertisement a img {
+	width: 100%;
+	max-width: 1000px;
+	box-shadow: var(--theme) 0px 0px 30px 0px;
+}

index.js

@@ -446,7 +446,7 @@ async function startApp() {
 
     app.get('/denycookies', async (req, res) => {
         req.session.cookiesDenied = true;
-        res.redirect('/');
+        res.redirect(cms.siteDetails[0].denycookiesredirect);
     });
 
     app.get('/enablecookies', async (req, res) => {