Improve menu spacing, Remove Google font loading

jgthms · jgthms · commit 249be616d99b · 2016-11-30T22:04:32.000Z
diff --git a/_includes/google-fonts.html b/_includes/google-fonts.html
@@ -1,18 +1,3 @@
-<script async type="text/javascript">
-  WebFontConfig = {
-    google: { families: [ 'Source+Sans+Pro:400,700,400italic,700italic:latin', 'Source+Code+Pro::latin' ] }
-  };
-  (function() {
-    var wf = document.createElement('script');
-    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
-      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
-    wf.type = 'text/javascript';
-    wf.async = 'true';
-    var s = document.getElementsByTagName('script')[0];
-    s.parentNode.insertBefore(wf, s);
-  })();
-</script>
-
 <script async type="text/javascript">
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/_includes/menu.html b/_includes/menu.html
@@ -34,8 +34,8 @@
     </a>
   </header>
   <nav class="menu-collections">
-    <p><strong>Collections</strong></p>
     <ul>
+      <li><a class="menu-collection-link{% if page.template == 'index' %} menu-collection-link--active{% endif %}" href="{{site.url}}/">All</a></li>
       <li><a class="menu-collection-link{% if page.collection_name == 'Animations' %} menu-collection-link--active{% endif %}" href="{{site.url}}/animations/">Animations</a></li>
       <li><a class="menu-collection-link{% if page.collection_name == 'Box model' %} menu-collection-link--active{% endif %}" href="{{site.url}}/box-model/">Box model</a></li>
       <li><a class="menu-collection-link{% if page.collection_name == 'Flexbox' %} menu-collection-link--active{% endif %}" href="{{site.url}}/flexbox/">Flexbox</a></li>
diff --git a/css/website.css b/css/website.css
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 ---
-# this is an empty front matter
+template: index
 ---
 
 <!DOCTYPE html>
diff --git a/sass/menu.sass b/sass/menu.sass
@@ -3,7 +3,7 @@
   position: relative
 
 .menu-header
-  padding: 1.5rem
+  padding: 1.5rem 1.5rem 0
 
 .menu-logo
   align-items: center
@@ -29,15 +29,16 @@
   width: 160px
 
 .menu-collections
-  border-top: 1px solid $border
   padding: 1rem
-  li
-    display: inline-block
-    vertical-align: top
+  ul
+    align-items: flex-start
+    display: flex
+    flex-wrap: wrap
 
 .menu-collection-link
   border-radius: 2px
-  padding: 2px 4px
+  display: block
+  padding: 0 6px
   &:hover
     background: $alpha
     color: $alpha-invert
@@ -201,6 +202,7 @@
 
 +mobile
   .menu-collections
+    justify-content: center
     text-align: center
     li
       margin: 0.25rem
@@ -239,8 +241,7 @@
     flex-shrink: 0
   .menu-collections
     font-size: 0.8rem
-    li
-      margin-left: -2px
+    padding-left: 1.5rem
   .menu-nav
     border-top: 1px solid $border
     display: flex
