Show and animate .mobile-label on normal screens.

static/css/main.css

@@ -97,8 +97,12 @@ header nav hr {
  	transform: skewX(-15deg);
  }
  header nav a {
-	display: block;
+ 	display: flex;
-	margin: 0 2em;
+ 	align-items: center;
+ 	position: relative;
+ 	align-self: stretch;
+ 	margin: 0;
+ 	padding: 0 2em;
  	font-size: 1em;
  }
  header nav a.title {
@@ -107,8 +111,32 @@ header nav a.title {
  	font-size: 1.75em;
  	text-align: center;
  }
-header nav i {
+ header nav a i { font-size: 1.2em; }
-	font-size: 1.2em;
+
+ /* Only enable label animations on normal screens. */
+ @media screen and (min-width: 900px) {
+ 	header nav a i {
+ 		transition: all 0.2s ease;
+ 		margin: 0;
+ 	}
+
+ 	header nav a:hover i { margin-bottom: 0.75em; }
+
+ 	header nav a .mobile-label {
+ 		transition: all 0.2s ease;
+ 		display: block;
+ 		position: absolute;
+ 		left: 50%;
+ 		transform: translate(-50%, 0);
+ 		opacity: 0;
+ 		font-size: 0.9em;
+ 		white-space: nowrap;
+ 	}
+ 	header nav a:hover .mobile-label {
+ 		opacity: 1;
+ 		transform: translate(-50%, 80%);
+ 	}
+ 	header nav a img + .mobile-label { display: none; }
  }
 
 /*
@@ -577,10 +605,6 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
  *   Small Screens   *
  * ================= */
 
-.mobile-label {
-	display: none;
-}
-
  @media screen and (max-width: 900px) {
  	header {
  		flex-direction: column;
@@ -662,6 +686,9 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
  		width: 100%;
  		border: solid #F4F4F4 0.1rem;
  	}
+ 	header:focus-within #content > nav a .mobile-label {
+ 		display: initial;
+ 	}
 
  	body > main > * {
  		padding: 0 5%;
@@ -678,10 +705,6 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
  		min-width: 80%;
  		min-height: 80%;
  	}
-
-    .mobile-label {
-        display: initial;
-    }
  }
 
  /*== Pagination ==*/