Mobile layout for nav UI

assets/css/main.css

@@ -87,6 +87,7 @@
 		/*	Layout. */
 		--deus-body-padding: 6rem 1rem;
 		--deus-post-padding: 1.25rem;
+		--deus-mobile-post-heading-inset: 1.75rem;
 	}
 }
 @media only screen and (max-width: 520px) {
@@ -220,6 +221,28 @@ main nav a:active {
 	transform: scale(0.9);
 }
 
+/*=-------------------=*/
+/*= Nav items (text). =*/
+/*=-------------------=*/
+
+@media only screen and (max-width: 520px) {
+	main nav a.text {
+		font-size: 0.625em;
+		padding-top: 0.375em;
+	}
+	main nav a.text::before {
+		content: attr(data-deus-icon);
+		display: block;
+		font-family: Font Awesome;
+		margin: auto;
+		text-align: center;
+		font-size: 1.75em;
+	}
+	main nav a + a {
+		margin-left: 1.5em;
+	}
+}
+
 /*=-------=*/
 /*= Logo. =*/
 /*=-------=*/
@@ -362,7 +385,7 @@ article + article {
 }
 @media only screen and (max-width: 960px) {
 	article + article {
-		margin-top: calc(1.75rem + var(--deus-post-spacing));
+		margin-top: calc(var(--deus-mobile-post-heading-inset) + var(--deus-post-spacing));
 	}
 }
 
@@ -435,14 +458,14 @@ article h1::after {
 	article h1 {
 		float: none;
 		margin:
-			calc(-1 * (var(--deus-post-padding) + 1.75rem))
+			calc(-1 * (var(--deus-post-padding) + var(--deus-mobile-post-heading-inset)))
 			calc(var(--deus-post-heading-spacing) + 4px)
 			2rem
 			calc(var(--deus-post-heading-spacing) + 4px);
 		text-align: center;
 	}
 	article h1::after {
-		top: calc(1.75rem - 1px);
+		top: calc(var(--deus-mobile-post-heading-inset) - 1px);
 		right: calc(-1 * (var(--deus-post-heading-spacing) + 2px));
 		box-shadow:
 			 0   1px 0 0   var(--deus-body-background-color),

includes/main-nav.html

@@ -1,10 +1,21 @@
 		<nav id='main-nav'>
-			<a href='/deus/' class='logo'><img src='/deus/assets/images/deus-logo-only.png'></a>
+			<a
-			<a href='/deus/pages/about'>About</a>
+				class='nav-item logo' 
-			<a href='/deus/posts'>News</a>
+				href='/deus/'
+					><img src='/deus/assets/images/deus-logo-only.png'></a>
+			<a
+				class='nav-item text icon-solid' 
+				data-deus-icon='&#xf05a;' 
+				href='/deus/pages/about'
+					>About</a>
+			<a 
+				class='nav-item text icon-regular' 
+				data-deus-icon='&#xf143;' 
+				href='/deus/posts'
+					>News</a>
 			<div class='social-buttons'>
 				<a class='social-button share' href='#'>&#xf1e0;</a>
 				<a class='social-button facebook' href='#'>&#xf39e;</a>
 				<a class='social-button twitter' href='#'>&#xf099;</a>
 			</div>
-		</nav>
+		</nav>