Added depth effect to UI links

assets/css/main.css

@@ -12,6 +12,9 @@
 	--deus-color-light-blue: #2069b3;
 	--deus-color-gold: #fdc22f;
 	--deus-color-gold-shadow: #a5842e;
+	--deus-color-gold-shadow-opacity-one-quarter: rgba(165, 132, 46, 0.25);
+	--deus-color-gold-shadow-opacity-one-half: rgba(165, 132, 46, 0.5);
+	--deus-color-gold-shadow-opacity-three-quarters: rgba(165, 132, 46, 0.75);
 	--deus-color-golden-brown: #684f00;
 	--deus-color-darker-grey: #161a1f;
 	--deus-color-dark-grey: #272b30;
@@ -30,6 +33,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);
@@ -38,6 +42,7 @@
 	--deus-link-color-hover: var(--deus-color-white);
 	--deus-link-color-active: var(--deus-color-white);
 	--deus-link-color-visited: var(--deus-color-gold);
+	--deus-link-text-shadow-color: var(--deus-color-gold-shadow-opacity-one-quarter);
 	
 	--deus-image-border-color: var(--deus-color-golden-brown);
 
@@ -148,6 +153,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,
@@ -168,6 +174,7 @@ main nav a {
 	font-weight: bold;
 	font-feature-settings: var(--deus-nav-ui-font-opentype-features);
 	font-variant: var(--deus-nav-ui-font-variant);
+	text-shadow: 2px 2px 0 var(--deus-link-text-shadow-color);
 
 	/*	Workaround for baseline bug in “Spectral” font.
 		*/
@@ -291,7 +298,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 +332,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),
+		0 0 0 1px var(--deus-box-shadow-color),
-		  calc(-1 * var(--deus-post-heading-spacing)) 0 0 0 var(--deus-body-background-color),
+		calc(-1 * var(--deus-post-heading-spacing)) calc(var(--deus-post-heading-spacing)) 0 1px 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)) 0 0 1px 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),
+		0 calc(var(--deus-post-heading-spacing)) 0 1px var(--deus-body-background-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 * 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-post-heading-spacing)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-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);
@@ -342,6 +355,10 @@ article h1 {
 	padding-top: calc(0.5 * var(--deus-post-padding) + 0.125em);
 }
 
+article h1 a {
+	text-shadow: 2px 2px 0 var(--deus-link-text-shadow-color);
+}
+
 article h1 a:hover {
 	text-decoration: none;
 }