Better navigation on mobile.

Author: dblock

_config.yml

@@ -1,4 +1,6 @@
-title: Ruby Grape | An opinionated micro-framework for creating REST-like APIs in Ruby.
+title:
+  long: Ruby Grape | An opinionated micro-framework for creating REST-like APIs in Ruby.
+  short: Ruby Grape | API Framework
 locale: en_US
 url: # https://ruby-grape.github.io
 markdown: kramdown

_data/.gitkeep

@@ -0,0 +1 @@
+# keep

_data/navigation.yml

@@ -1,5 +1,5 @@
 <meta charset="utf-8">
-<title>{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}</title>
+<title>{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title.long }}</title>
 {% if page.excerpt %}<meta name="description" content="{{ page.excerpt | strip_html }}">{% endif %}
 <meta name="keywords" content="{{ page.tags | join: ', ' }}">
 {% if page.author %}

_includes/_head.html

@@ -1,19 +1,5 @@
 <div class="navigation-wrapper">
 	<div class="site-name">
-		<!--<a href="{{ site.url }}/">{{ site.title }}</a>-->
+		<a href="{{ site.url }}/">{{ site.title.short }}</a>
 	</div><!-- /.site-name -->
-	<div class="top-navigation">
-		<nav role="navigation" id="site-nav" class="nav sliding-menu-content">
-		    <ul>
-	        {% for link in site.data.navigation %}
-				    {% if link.url contains 'http' %}
-				        {% assign domain = '' %}
-				        {% else %}
-				        {% assign domain = site.url %}
-				    {% endif %}
-				    <li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
-					{% endfor %}
-		    </ul>
-		</nav>
-	</div><!-- /.top-navigation -->
 </div><!-- /.navigation-wrapper -->

_includes/_navigation.html

@@ -1,5 +1,5 @@
 <!-- Twitter Cards -->
-<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
+<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title.long }}{% endif %}">
 {% if page.excerpt %}<meta name="twitter:description" content="{{ page.excerpt | strip_html }}">{% endif %}
 {% if site.owner.twitter %}<meta name="twitter:site" content="@{{ site.owner.twitter }}">{% endif %}
 {% if author.twitter %}<meta name="twitter:creator" content="@{{ author.twitter }}">{% endif %}
@@ -13,7 +13,7 @@
 <!-- Open Graph -->
 <meta property="og:locale" content="{{ site.locale }}">
 <meta property="og:type" content="article">
-<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
+<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title.long }}{% endif %}">
 {% if page.excerpt %}<meta property="og:description" content="{{ page.excerpt | strip_html }}">{% endif %}
 <meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.url }}">
-<meta property="og:site_name" content="{{ site.title }}">
+<meta property="og:site_name" content="{{ site.title.long }}">

_includes/_open-graph.html

@@ -19,7 +19,7 @@
     {% include _search.html %}
   </div>
   <article class="page">
-    <h1>{{ page.title }}</h1>
+    <h2><a href='/'>&lt; Home</a> | {{ page.title }}</h2>
     <div class="article-wrap">
       {{ content }}
     </div><!-- /.article-wrap -->

_layouts/page.html

@@ -10,6 +10,18 @@ body {
 	font-weight: 700;
 	text-transform: uppercase;
 	@include clearfix;
+	@media #{$micro} {
+		display: block;
+	}
+	@media #{$small} {
+		display: none;
+	}
+	@media #{$large} {
+		display: none;
+	}
+	@media #{$x-large} {
+		display: none;
+	}
 }
 .site-name {
 	@include grid(12,10);