Mobile layout fixes and tweaks

_includes/css/main.css

@@ -69,6 +69,10 @@ hr {
 .left, .container .left { text-align: left; }
 .right, .container .right { text-align: right; }
 
+.container h1 {
+  margin-top: 10px;
+}
+
 .container h1, .container h2, .container h3, .container h4 {
   margin-bottom: 20px;
   text-align: center;
@@ -340,8 +344,6 @@ nav ul li:hover, nav ul li.active {
   }
 }
 
-li.p-downloads a:after { content: ' Downloads'; }
-
 /* mid size (tablets, landscapes) */
 @media only screen and (max-width: 679px) {
   nav { font-size:10px; }
@@ -370,6 +372,15 @@ li.p-downloads a:after { content: ' Downloads'; }
   }
 }
 
+/*
+ super tiny size (phones)
+ point at which nav wraps
+ without decrease font size
+ */
+@media only screen and (max-width: 326px) {
+  nav { font-size: 9px; }
+}
+
 /* anything not desktop */
 @media only screen and (max-width: 767px) {
 	.container h1 { font-size: 30px; }
@@ -377,7 +388,6 @@ li.p-downloads a:after { content: ' Downloads'; }
 	.container h3 { font-size: 20px; }
 	.container h4 { font-size: 18px; }
 
-
   .section { padding:130px 0; }
   .sectiondivider {
     width:200px;
@@ -386,7 +396,6 @@ li.p-downloads a:after { content: ' Downloads'; }
     top:-100px;
     margin-left:-100px;
   }
-  .sectiondivider img {
     width:150px;
     height:180px;
   }
@@ -409,4 +418,5 @@ li.p-downloads a:after { content: ' Downloads'; }
     -moz-column-count:    2;
     column-count:         2;
   }
+
 }

_includes/css/skeleton.css

@@ -89,3 +89,17 @@
     width: 0;
     height: 0;
   }
+
+/* top nav tweaks */
+@media(min-width:768px) {
+	.hide-on-larger-view {
+		display: none !important;
+	}
+
+}
+
+@media(max-width:767px) {
+	.hide-on-smaller-view {
+		display: none !important;
+	}
+}

_posts/2017-01-01-home.md

@@ -1,5 +1,6 @@
 ---
 title: "home"
+short_title: "home"
 bg: purewhite
 color: black
 style: center

_posts/2017-01-02-features.md

@@ -1,5 +1,6 @@
 ---
 title: "Features"
+short_title: "Features"
 bg: turquoise
 color: black
 style: left

_posts/2017-01-03-downloads.md

@@ -1,5 +1,6 @@
 ---
-title: "Fonts"
+title: "Fonts Downloads"
+short_title: "Fonts"
 bg: '#3484bb'
 color: white
 fa-icon: download

_posts/2017-01-04-cheat-sheet.md

@@ -1,5 +1,6 @@
 ---
 title: "Cheat Sheet"
+short_title: "Icons"
 bg: gray
 color: white
 fa-icon: search

_posts/2017-01-05-contributors.md

@@ -1,5 +1,6 @@
 ---
 title: "Contributors"
+short_title: "People"
 bg: 'red'
 color: white
 fa-icon: flask

_posts/2017-01-06-release.md

@@ -1,5 +1,6 @@
 ---
 title: "Changelog"
+short_title: "Log"
 bg: '#ff8b25'
 color: white
 fa-icon: bullhorn

index.html

@@ -20,9 +20,11 @@
     <nav><ul>
       {% for node in site.posts reversed %}
         {% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
-        <li class="p-{{id}}"><a href="#{{id}}">
-            <i class="fa fa-{{ node.fa-icon }}"></i>
-            {{node.title}}</a>
+        <li class="p-{{id}} hide-on-larger-view"><a href="#{{id}}">
+            <i class="fa fa-{{ node.fa-icon }}"></i> {{node.short_title}}</a>
+        </li>
+        <li class="p-{{id}} hide-on-smaller-view"><a href="#{{id}}">
+            <i class="fa fa-{{ node.fa-icon }}"></i> {{node.title}}</a>
         </li>
       {% endfor %}
     </ul></nav>