Retina versions of box depth effects

assets/css/main.css

@@ -11,6 +11,7 @@
 	--deus-color-medium-blue: #0f5093;
 	--deus-color-light-blue: #2069b3;
 	--deus-color-gold: #fdc22f;
+	--deus-color-dark-gold: #c8a44d;
 	--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);
@@ -34,6 +35,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-box-shadow-color-intermediate-retina: var(--deus-color-dark-gold);
 
 	--deus-body-text-color: var(--deus-color-white);
 	--deus-body-text-shadow-color: var(--deus-color-white-opacity-one-quarter);
@@ -76,6 +78,20 @@
 	--deus-post-spacing: 3rem;
 	
 }
+@media only screen and (max-width: 960px) {
+	:root {
+		/*	Layout. */
+		--deus-body-padding: 6rem 1rem;
+		--deus-post-padding: 1.25rem;
+	}
+}
+@media only screen and (max-width: 520px) {
+	:root {
+		/*	Layout. */
+		--deus-body-padding: 6rem 0.5rem;
+		--deus-post-padding: 1rem;
+	}
+}
 @media only screen and (max-resolution: 191dpi) {
 	:root {
 		--deus-body-text-shadow: 0 0 0 var(--deus-body-text-shadow-color);
@@ -160,6 +176,16 @@ main nav {
 		opacity 0.15s ease,
 		filter 0.15s ease;
 }
+@media only screen and (min-resolution: 192dpi) {
+	main nav {
+		border-bottom: none;
+		box-shadow: 
+			0 -0.5px 0 0 var(--deus-box-shadow-color-intermediate-retina) inset,
+			0  0.5px 0 0 var(--deus-box-border-color),
+			0    1px 0 0 var(--deus-box-shadow-color-intermediate-retina),
+			0  1.5px 0 0 var(--deus-box-shadow-color);
+	}
+}
 main nav.hidden {
 	top: -5rem;
 }
@@ -303,6 +329,17 @@ article {
 		0 0 0 2px var(--deus-body-background-color);
 	z-index: 1;
 }
+@media only screen and (min-resolution: 192dpi) {
+	article {
+		border: none;
+		box-shadow:
+			0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina) inset,
+			0 0 0 0.5px var(--deus-box-border-color),
+			0 0 0   1px var(--deus-box-shadow-color-intermediate-retina),
+			0 0 0 1.5px var(--deus-box-shadow-color);
+			0 0 0 2.5px var(--deus-body-background-color);
+	}
+}
 @supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) {
 	article {
 		text-align: justify;
@@ -333,12 +370,15 @@ article h1 {
 	border: var(--deus-box-border-width) solid var(--deus-box-border-color);
 	box-shadow:
 		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);
@@ -354,6 +394,36 @@ article h1 {
 		*/
 	padding-top: calc(0.5 * var(--deus-post-padding) + 0.125em);
 }
+@media only screen and (min-resolution: 192dpi) {
+	article h1 {
+		border: none;
+		box-shadow:
+			0 0 0 0.5px var(--deus-box-shadow-color),
+			0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina) inset,
+			0 0 0   1px var(--deus-box-border-color) inset,
+			0 0 0 1.5px var(--deus-box-shadow-color-intermediate-retina) inset,
+
+			calc(-1 * (var(--deus-post-heading-spacing) + 1px)) calc(var(--deus-post-heading-spacing) + 1px) 0 1px var(--deus-body-background-color),
+			calc(-1 * (var(--deus-post-heading-spacing) + 1px)) 0 0 1px var(--deus-body-background-color),
+			0 calc(var(--deus-post-heading-spacing) + 1px) 0 1px var(--deus-body-background-color),
+
+			calc(-1 * calc(var(--deus-post-heading-spacing) + 1.5px)) calc(var(--deus-box-border-width) + 0.0px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
+			calc(-1 * (var(--deus-box-border-width) + 0.0px)) calc(var(--deus-post-heading-spacing) + 1.5px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
+			calc(-1 * calc(var(--deus-post-heading-spacing) + 1.5px)) calc(var(--deus-post-heading-spacing) + 1.5px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
+
+			calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) calc(var(--deus-box-border-width) + 0.5px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina),
+			calc(-1 * (var(--deus-box-border-width) + 0.5px)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina),
+			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-shadow-color-intermediate-retina),
+
+			calc(-1 * calc(var(--deus-post-heading-spacing) + 2.5px)) calc(var(--deus-box-border-width) + 1px) 0 var(--deus-box-border-width) var(--deus-box-border-color),
+			calc(-1 * (var(--deus-box-border-width) + 1px)) calc(var(--deus-post-heading-spacing) + 2.5px) 0 var(--deus-box-border-width) var(--deus-box-border-color),
+			calc(-1 * calc(var(--deus-post-heading-spacing) + 2.5px)) calc(var(--deus-post-heading-spacing) + 2.5px) 0 var(--deus-box-border-width) var(--deus-box-border-color),
+
+			calc(-1 * calc(var(--deus-post-heading-spacing) + 3px)) calc(var(--deus-box-border-width) + 1.5px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina),
+			calc(-1 * (var(--deus-box-border-width) + 1.5px)) calc(var(--deus-post-heading-spacing) + 3px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina),
+			calc(-1 * calc(var(--deus-post-heading-spacing) + 3px)) calc(var(--deus-post-heading-spacing) + 3px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina);
+	}
+}
 
 article h1 a {
 	text-shadow: 2px 2px 1px var(--deus-link-text-shadow-color);