Refactored box depth effects; improved mobile layout

assets/css/main.css

@@ -77,7 +77,6 @@
 	/*	Layout. */
 	--deus-body-padding: 6rem 2rem;
 	--deus-content-max-width: 92ch;
-	--deus-box-border-width: 1px;
 	--deus-post-padding: 1.5rem;
 	--deus-post-heading-spacing: 5px;
 	--deus-post-spacing: 3rem;
@@ -97,7 +96,7 @@
 		--deus-post-padding: 1rem;
 	}
 }
-@media only screen and (max-resolution: 191dpi) {
+@media only screen and (max-resolution: 1dppx) {
 	:root {
 		--deus-body-text-shadow: 0 0 0 var(--deus-body-text-shadow-color);
 	}
@@ -173,7 +172,7 @@ main nav {
 	background-color: var(--deus-box-background-color);
 	width: 100%;
 	padding: 0.75em 1.25em;
-	border-bottom: var(--deus-box-border-width) solid var(--deus-box-border-color);
+	border-bottom: 1px solid var(--deus-box-border-color);
 	box-shadow: 0 1px 0 0 var(--deus-box-shadow-color);
 	z-index: 1001;
 	transition:
@@ -181,7 +180,7 @@ main nav {
 		opacity 0.15s ease,
 		filter 0.15s ease;
 }
-@media only screen and (min-resolution: 192dpi) {
+@media only screen and (min-resolution: 2dppx) {
 	main nav {
 		border-bottom: none;
 		box-shadow: 
@@ -328,21 +327,25 @@ article {
 	position: relative;
 	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-box-border-color) inset,
 		0 0 0 1px var(--deus-box-shadow-color),
 		0 0 0 2px var(--deus-body-background-color);
 	z-index: 1;
 }
-@media only screen and (min-resolution: 192dpi) {
+@media only screen and (min-resolution: 2dppx) {
 	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);
+			0 0 0 0.5px var(--deus-box-border-color) inset,
+			0 0 0 1.0px var(--deus-box-shadow-color-intermediate-retina) inset,
+			0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina),
+			0 0 0 1.0px var(--deus-box-shadow-color),
+			0 0 0 2.0px var(--deus-body-background-color);
+	}
+}
+@media only screen and (max-width: 960px) {
+	article {
+		margin-top: 2rem;
 	}
 }
 @supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) {
@@ -353,6 +356,7 @@ article {
 		hyphens: auto;
 	}
 }
+
 article + article {
 	margin-top: var(--deus-post-spacing);
 }
@@ -362,31 +366,26 @@ article + article {
 /*=--------------=*/
 
 article h1 {
+	position: relative;
 	float: right;
 	margin:
-		calc(-1 * var(--deus-post-padding) - var(--deus-box-border-width))
-		calc(-1 * var(--deus-post-padding) - var(--deus-box-border-width))
+		calc(-1 * var(--deus-post-padding))
+		calc(-1 * var(--deus-post-padding))
 		var(--deus-post-padding)
 		calc(1.5 * var(--deus-post-padding));
 	padding:
 		calc(0.5 * var(--deus-post-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-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),
+	/*	Workaround for baseline bug in “Spectral” font.
+		*/
+	padding-top: calc(0.5 * var(--deus-post-padding) + 0.125em);
 
-		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),
+	background-color: var(--deus-box-background-color);
+	box-shadow:
+		0 0 0 1px var(--deus-box-border-color) inset,
+		0 0 0 1px 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);
@@ -394,39 +393,70 @@ article h1 {
 	font-feature-settings: var(--deus-heading-font-opentype-features);
 	font-variant: var(--deus-heading-font-variant);
 	letter-spacing: var(--deus-heading-letter-spacing);
-
-	/*	Workaround for baseline bug in “Spectral” font.
-		*/
-	padding-top: calc(0.5 * var(--deus-post-padding) + 0.125em);
+	-webkit-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+article h1::after {
+	content: "";
+	position: absolute;
+	z-index: -1;
+	left: calc(-1 * (var(--deus-post-heading-spacing) + 2px));
+	right: -1px;
+	top: -1px;
+	bottom: calc(-1 * (var(--deus-post-heading-spacing) + 2px));
+	background-color: var(--deus-body-background-color);
+	box-shadow:
+		-1px 1px 0 0 var(--deus-box-shadow-color),
+		-2px 2px 0 0 var(--deus-box-border-color);
 }
-@media only screen and (min-resolution: 192dpi) {
+@media only screen and (min-resolution: 2dppx) {
 	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);
+			0 0 0 0.5px var(--deus-box-border-color) inset,
+			0 0 0 1.0px var(--deus-box-shadow-color-intermediate-retina) inset,
+			0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina),
+			0 0 0 1.0px var(--deus-box-shadow-color);
+	}
+	article h1::after {
+		box-shadow:
+			-0.5px 0.5px 0 0 var(--deus-box-shadow-color),
+			-1.0px 1.0px 0 0 var(--deus-box-shadow-color-intermediate-retina),
+			-1.5px 1.5px 0 0 var(--deus-box-border-color),
+			-2.0px 2.0px 0 0 var(--deus-box-shadow-color-intermediate-retina);
+	}
+}
+@media only screen and (max-width: 960px) {
+	article h1 {
+		float: none;
+		margin:
+			calc(-1 * (var(--deus-post-padding) + 1.125em))
+			calc(var(--deus-post-heading-spacing) + 4px)
+			2rem
+			calc(var(--deus-post-heading-spacing) + 4px);
+		text-align: center;
+	}
+	article h1::after {
+		top: calc(1.25em - 4px);
+		right: calc(-1 * (var(--deus-post-heading-spacing) + 2px));
+		box-shadow:
+			 0   1px 0 0   var(--deus-body-background-color),
+			 0   1px 0 1px var(--deus-box-shadow-color),
+			-1px 2px 0 1px var(--deus-box-border-color),
+			 1px 2px 0 1px var(--deus-box-border-color);
+	}
+	@media only screen and (min-resolution: 2dppx) {
+		article h1::after {
+			box-shadow:
+				     0   1px 0     0 var(--deus-body-background-color),
+				     0   1px 0 0.5px var(--deus-box-shadow-color),
+				-0.5px 1.5px 0 0.5px var(--deus-box-shadow-color-intermediate-retina),
+				 0.5px 1.5px 0 0.5px var(--deus-box-shadow-color-intermediate-retina),
+				  -1px   2px 0 0.5px var(--deus-box-border-color),
+				   1px   2px 0 0.5px var(--deus-box-border-color),
+				-1.5px 2.5px 0 0.5px var(--deus-box-shadow-color-intermediate-retina),
+				 1.5px 2.5px 0 0.5px var(--deus-box-shadow-color-intermediate-retina);
+		}
 	}
 }