Mobile layout for nav UI

assets/css/main.css

@@ -221,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. =*/
 /*=-------=*/

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 href='/deus/pages/about'>About</a>
-			<a href='/deus/posts'>News</a>
+			<a
+				class='nav-item logo' 
+				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>