Some tweaks for mobile first

Author: Brandon Brown

_assets/styles/site.less

@@ -4,6 +4,8 @@
 
 @import 'skeleton.less';
 
+@mobile-width: 550px;
+
 
 // Main Site CSS
 
@@ -78,7 +80,7 @@
 }
 
 // Restrict site width larger than mobile
-@media (min-width: 550px) {
+@media (min-width: @mobile-width) {
   .main-header,
   .main-footer,
   .main-content-feed,
@@ -103,7 +105,7 @@
   .margin-lr;
 }
 
-@media (min-width: 550px) {
+@media (min-width: @mobile-width) {
   .main-header-title,
   .main-header-description,
   .main-header-nav,
@@ -141,7 +143,7 @@
   .navigation-item;
 }
 
-@media (min-width: 550px) {
+@media (min-width: @mobile-width) {
   .main-header-image {
     height: 16rem;
   }
@@ -215,6 +217,20 @@
   }
 }
 
+.page-title,
+.page-subtitle {
+  display: inline;
+}
+
+.page-title {
+
+}
+
+.page-subtitle {
+  font-size: 80%;
+  color: #666;
+}
+
 // Main footer
 .main-footer {
   .u-text-center;
@@ -242,7 +258,7 @@
   transition: opacity .2s ease;
 }
 
-@media (min-width: 550px) {
+@media (min-width: @mobile-width) {
   #checkin_map {
     height: 60rem;
     margin-top: 4rem;
@@ -256,26 +272,18 @@
   margin-left: -2rem;
   margin-right: -2rem;
   transition: opacity .2s ease;
-
-  display: flex;
-	flex-wrap: wrap;
-  justify-content: space-between;
 }
 
 .instagram-post {
-  width: calc(50% - 4rem);
-  margin-right: 2rem;
-  margin-bottom: 2rem;
-  border-radius: .3rem;
+
 }
 
 .instagram-link {
   display: inline-block;
-  height: 100%;
 }
 
 .instagram-image {
-
+  width: 100vw;
 }
 
 .instagram-caption {
@@ -289,9 +297,16 @@
 
 }
 
-
-@media (min-width: 550px) {
+@media (min-width: @mobile-width) {
   #instagram_images {
-    margin-top: 4rem;
+    display: flex;
+  	flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .instagram-post {
+    width: calc(50% - 4rem);
+    margin-right: 2rem;
+    margin-bottom: 2rem;
   }
 }

_includes/foot.html

@@ -105,18 +105,32 @@
     var images_div = document.getElementById('instagram_images')
 
     for (var imageId in results) {
-      var imageItem = results[imageId]
-      caption = imageItem.caption.replace(/\S*#(\S+)/gi, '<a href="https://instagram.com/explore/tags/$1" class="instagram-tag">#$1</a>')
-
-      images_div.innerHTML += ' \
-        <div class="instagram-post"> \
-          <a href="' + imageItem.url + '" class="instagram-link"> \
-            <img src="' + imageItem.image + '" class="instagram-image" /> \
-          </a> \
-          <div class="instagram-caption"> \
-            ' + caption + ' \
-          </div> \
-        </div>'
+      var data = results[imageId]
+      caption = data.caption.replace(/\S*#(\S+)/gi, '<a href="https://instagram.com/explore/tags/$1" class="instagram-tag">#$1</a>')
+
+      if (data.type === 'image') {
+        images_div.innerHTML += ' \
+          <div class="instagram-post"> \
+            <a href="' + data.url + '" class="instagram-link"> \
+              <img src="' + data.image + '" class="instagram-image" /> \
+            </a> \
+            <div class="instagram-caption"> \
+              ' + caption + ' \
+            </div> \
+          </div>'
+      }
+      // TODO: UNTESTED!
+      // else if (data.type === 'video') {
+      //   images_div.innerHTML += ' \
+      //     <div class="instagram-post"> \
+      //       <video width="480" height="480" controls> \
+      //       <source src="' + data.video + '" type="video/mp4"/> \
+      //       </video> \
+      //       <div class="instagram-caption"> \
+      //         ' + caption + ' \
+      //       </div> \
+      //     </div>'
+      // }
     }
 
     images_div.style.opacity = '1.0'

_layouts/page.html

@@ -3,7 +3,7 @@
 ---
 
 <article class="main-content-page">
-  <h2>
+  <h2 class="page-title">
     {{ page.title }}
   </h2>
 

_pages/mk7-gti.html

@@ -5,5 +5,8 @@
 include_in_nav: false
 ---
 
+<h5 class="page-subtitle">
+  Powered by <a href="https://instagram.com/_vigti/">Instagram</a>
+</h5>
 
 <div id="instagram_images" style="opacity:0;"></div>

gulp_tasks/tasks/instagram.js

@@ -42,17 +42,21 @@ const buildJSON = (buildPath, callback) => {
   for (let item of response.data) {
     if (item.type === 'image') {
       imageItems[item.id] = {
+        type: item.type,
         url: item.link,
         image: item.images.standard_resolution.url,
+        height: item.images.standard_resolution.height,
+        width: item.images.standard_resolution.width,
         caption: item.caption.text,
         tags: item.tags,
         likes: item.likes.count,
       }
     }
-    else if (item.type === 'image') {
+    else if (item.type === 'video') {
       imageItems[item.id] = {
+        type: item.type,
         url: item.link,
-        image: item.videos.standard_resolution.url,
+        video: item.videos.standard_resolution.url,
         caption: item.caption.text,
         tags: item.tags,
         likes: item.likes.count,