From d5c6b7ddcf3eb29c8af5398768d18708c35c0aa2 Mon Sep 17 00:00:00 2001
From: Said Achmiz <achmizs@gmail.com>
Date: Mon, 10 Feb 2020 22:07:13 -0500
Subject: [PATCH] Added depth effect to boxes

---
 assets/css/main.css | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 4df1ee1..b17f79b 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -30,6 +30,7 @@
 
 	--deus-box-background-color: var(--deus-color-dark-grey);
 	--deus-box-border-color: var(--deus-color-gold);
+	--deus-box-shadow-color: var(--deus-color-gold-shadow);
 
 	--deus-body-text-color: var(--deus-color-white);
 	--deus-body-text-shadow-color: var(--deus-color-white-opacity-one-quarter);
@@ -148,6 +149,7 @@ main nav {
 	width: 100%;
 	padding: 0.75em 1.25em;
 	border-bottom: var(--deus-box-border-width) solid var(--deus-box-border-color);
+	box-shadow: 0 1px 0 0 var(--deus-box-shadow-color);
 	z-index: 1001;
 	transition:
 		top 0.3s ease,
@@ -291,7 +293,9 @@ article {
 	padding: var(--deus-post-padding);
 	background-color: var(--deus-box-background-color);
 	border: var(--deus-box-border-width) solid var(--deus-box-border-color);
-	box-shadow: 0 0 0 1px var(--deus-body-background-color);
+	box-shadow:
+		0 0 0 1px var(--deus-box-shadow-color),
+		0 0 0 2px var(--deus-body-background-color);
 	z-index: 1;
 }
 @supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) {
@@ -323,12 +327,16 @@ article h1 {
 	background-color: var(--deus-box-background-color);
 	border: var(--deus-box-border-width) solid var(--deus-box-border-color);
 	box-shadow:
-		  calc(-1 * var(--deus-post-heading-spacing)) calc(var(--deus-post-heading-spacing)) 0 0 var(--deus-body-background-color),
-		  calc(-1 * var(--deus-post-heading-spacing)) 0 0 0 var(--deus-body-background-color),
-		  0 calc(var(--deus-post-heading-spacing)) 0 0 var(--deus-body-background-color),
-		  calc(-1 * var(--deus-post-heading-spacing)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-border-color),
-		  calc(-1 * var(--deus-box-border-width)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-color),
-		  calc(-1 * var(--deus-post-heading-spacing)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-color);
+		0 0 0 1px var(--deus-box-shadow-color),
+		calc(-1 * var(--deus-post-heading-spacing)) calc(var(--deus-post-heading-spacing)) 0 1px var(--deus-body-background-color),
+		calc(-1 * var(--deus-post-heading-spacing)) 0 0 1px var(--deus-body-background-color),
+		0 calc(var(--deus-post-heading-spacing)) 0 1px var(--deus-body-background-color),
+		calc(-1 * calc(var(--deus-post-heading-spacing) + 1px)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
+		calc(-1 * var(--deus-box-border-width)) calc(var(--deus-post-heading-spacing) + 1px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
+		calc(-1 * calc(var(--deus-post-heading-spacing) + 1px)) calc(var(--deus-post-heading-spacing) + 1px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
+		calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-border-color),
+		calc(-1 * var(--deus-box-border-width)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-border-color),
+		calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-border-color);
 	font-family: var(--deus-heading-font);
 	font-size: var(--deus-heading-font-size);
 	font-weight: var(--deus-heading-font-weight);