Merge pull request #171 from bordoni/mobile-social-nav

Mobile friendly Social Links

Author: danielbachhuber

_includes/navigation.html

@@ -13,11 +13,14 @@
 			<a href="{{ link.url }}">{{ link.text }}</a>
 		</li>
 	{% endfor %}
-
-		<li class="align-right">
+	</ul>
+</nav>
+<nav class="social-nav">
+	<ul>
+		<li>
 			<a href="https://github.com/wp-cli/wp-cli" class="btn-source rounded" target="_blank"><i class="icon-github-circled"></i></a>
 		</li>
-		<li class="align-right">
+		<li>
 			<a href="https://twitter.com/wpcli" class="btn-twitter rounded" target="_blank"><i class="icon-twitter"></i></a>
 		</li>
 	</ul>

assets/css/stylesheet.css

@@ -254,8 +254,8 @@ img {
 /* Clearfix */
 
 .cf:before, .cf:after {
-	content:"";
-	display:table;
+	content: "";
+	display: table;
 }
 
 .cf:after {
@@ -322,21 +322,25 @@ footer {
 	margin: 20px 10px 40px 10px;
 }
 
-.main-nav {
+.main-nav,
+.social-nav {
 	position: relative;
 }
-.main-nav ul {
+.main-nav ul,
+.social-nav ul {
 	list-style: none;
 }
-.main-nav li {
+.main-nav li,
+.social-nav li {
 	float: left;
 	text-align: center;
 	margin: 0;
 }
 .main-nav li:first-child a {
 	padding-left: 0;
 }
-.main-nav a {
+.main-nav a,
+.social-nav a {
 	display: block;
 	padding: 8px 18px;
 	color: #7AD03A;
@@ -365,11 +369,11 @@ footer {
 }
 
 /* Secondary main-nav */
-.main-nav .align-right {
+.social-nav li {
 	float: right;
 	margin-left: .5em;
 }
-.main-nav .rounded {
+.social-nav .rounded {
 	padding: 0;
 	width: 1.8em;
 	height: 1.8em;
@@ -379,10 +383,24 @@ footer {
 	background: #585858;
 	color: #292929;
 }
-.main-nav .rounded:hover {
+.social-nav .rounded:hover {
 	color: #7AD03A;
 }
 
+@media (max-width: 770px) {
+	.social-nav {
+		display: table;
+		margin: 0 auto;
+		padding-top: 5px;
+		min-width: 100px;
+	}
+
+	.social-nav li {
+		float: none;
+		margin: 0 5px;
+	}
+}
+
 /* Search in header */
 .main-nav .search {
 	border-radius: 3em;
@@ -516,7 +534,7 @@ body.display-global-parameters #main_content {
 	margin-bottom: 5px;
 }
 
- // Adjust visibility per page
+/* Adjust visibility per page */
 body.command-line-interface-for-wordpress .global-parameters,
 body.configuration .global-parameters{
 	display: none;
@@ -691,36 +709,38 @@ hr:after,
 }
 
 /* i18n menu */
-.cf .container
-{
+.cf .container {
 	position: relative;
 }
 
-.cf .container .languages
-{
+.cf .container .languages {
 	position: absolute;
 	top: 0px;
 	right: 0px;
+	margin-right: 20px;
 }
 
+
 @media screen and (-webkit-min-device-pixel-ratio:0) {
 	header h2,
 	.main-nav a {
 		font-weight: 400;
 	}
 }
 
-@media (max-width: 800px) {
+@media (max-width: 970px) {
 	header h1 {
 		margin-left: 0;
 	}
-
-	.main-nav .align-right {
-		float: none;
-	}
 }
+
 @media (max-width: 690px) {
 	.main-nav li a {
 		padding-left: 0;
 	}
+
+	.main-nav li:nth-child(6) a {
+		padding-left: 9px;
+		padding-right: 9px;
+	}
 }