Improved device experience

assets/js/src/__init.coffee

@@ -33,5 +33,11 @@ $ ->
           $(this).mouseover -> $(this).html(postDate)
           $(this).mouseout -> $(this).html(postDateInDays)
         cb?()
-
       DateInDays ".post.meta > time"
+
+    device: ->
+      w = window.innerWidth
+      h = window.innerHeight
+      return 'mobile' if (w <= 480)
+      return 'tablet' if (w <= 1024)
+      'desktop'

assets/js/src/main.coffee

@@ -3,6 +3,11 @@
 $ ->
   el = document.body
   el.dataset.page ?= Uno.context()
+  el.dataset.device ?= Uno.device()
+  console.log Uno.device()
+  $(window).on "resize", Uno.device()
+  $(window).on "orientationchange", Uno.device()
+
   Uno.readTime()
   FastClick.attach el unless Uno.is 'device', 'desktop'
 

assets/scss/components/_media-queries.scss

@@ -11,13 +11,10 @@
   }
 }
 // ------------------------------
-// < 1023px (Tablet)
+// < 1024px (Tablet)
 // ------------------------------
 
-@media all and (max-width:1023px) {
-  html {
-    font-size: 90%;
-  }
+@media all and (max-width:1024px) {
 
   /* disabling element, too much information*/
   .pace,
@@ -138,13 +135,10 @@
   }
 }
 // ------------------------------
-// < 500px (Mobile)
+// < 480px (Mobile)
 // ------------------------------
 
-@media all and (max-width:500px) {
-  html {
-    font-size: 80%;
-  }
+@media all and (max-width:480px) {
   .main {
     padding: 1rem 0;
   }
@@ -172,7 +166,6 @@
   }
   #post-title {
     margin: 2.5rem 0;
-    text-align: left;
   }
   .post {
     &.newer,
@@ -197,4 +190,8 @@
       display: none;
     }
   }
+
+  blockquote>p {
+    margin: 2rem -1rem;
+  }
 }

assets/scss/components/_post.scss

@@ -26,31 +26,31 @@
     }
   }
 }
-section.post {
-  a {
-    transition: all $aside-animation-time;
-
-    &::after {
-      position: absolute;
-      bottom: -.5px;
-      left: 0;
+.post {
+  > p {
+    > img {
       width: 100%;
-      height: 0;
-      content: '';
-      border-bottom: 1px solid $primary-color;
+      margin: 1.5rem auto;
+      text-align: center;
+      border-radius: $border-radius;
     }
-    &:hover {
-      border-color: $hover-color;
+    > a {
+      transition: all $aside-animation-time;
+
+      &::after {
+        position: absolute;
+        bottom: -.5px;
+        left: 0;
+        width: 100%;
+        height: 0;
+        content: '';
+        border-bottom: 1px solid $primary-color;
+      }
+      &:hover {
+        border-color: $hover-color;
+      }
     }
   }
-}
-.post {
-  > p > img {
-    width: 100%;
-    margin: 1.5rem auto;
-    text-align: center;
-    border-radius: $border-radius;
-  }
   pre {
     width: 95%;
   }
@@ -72,10 +72,12 @@ section.post {
     > a {
       padding: .167rem .25rem;
       font-size: .55rem;
-      color: darken($primary-color, 100%);
+      color: darken($primary-color,
+      100%);
       color: $gray-lightest;
       text-transform: uppercase;
-      background-color: rgba($primary-color, .7);
+      background-color: rgba($primary-color,
+      .7);
       border-radius: .25rem;
       transition: all $aside-animation-time;
 
@@ -96,7 +98,7 @@ section.post {
     }
   }
   &.comments {
-    padding: 60px 0;
+    padding: 3.75rem 0;
     border-top: 1px solid $gray-light;
   }
 }

assets/scss/modules/_global.scss

@@ -5,7 +5,7 @@
 html {
   height: 100%;
   max-height: 100%;
-  font-size: 16px;
+  font-size: $unit;
 }
 html,
 body {

gulpfile.coffee

@@ -30,9 +30,7 @@ src =
               'assets/js/src/cover.coffee'
               'assets/js/src/search.coffee'
               'assets/js/src/post.coffee']
-    vendor : ['assets/vendor/parrotjs/dist/parrot.standalone.js'
-              'assets/vendor/parrot-module-device/dist/parrot.device.js'
-              'assets/vendor/fastclick/lib/fastclick.js'
+    vendor : ['assets/vendor/fastclick/lib/fastclick.js'
               'assets/vendor/ghostHunter/jquery.ghostHunter.min.js'
               'assets/vendor/pace/pace.min.js'
               'assets/vendor/reading-time/build/readingTime.min.js']

partials/aside.hbs

@@ -3,7 +3,7 @@
   <div class="cover container">
     <div class="profile">
       {{#if @blog.logo}}
-      <a id="avatar-link" title="link to homepage for {{@blog.title}}">
+      <a id="avatar-link" title="link to homepage for {{@blog.title}}" href="javascript:history.back()">
         <img src="{{@blog.logo}}" alt="{{@blog.title}} avatar" class="profile avatar hvr-buzz-out" />
         <h1>Kiko Beats</h1>
       </a>

post.hbs

@@ -15,8 +15,8 @@
       </div>
 
       <a href="https://twitter.com/intent/tweet?url={{url absolute="true"}};text={{title}} » " alt="Tweet '{{title}}'" target="_blank">
-        <h1 class="icon-reverse icon-social-twitter-post" id="post-title">{{{title}}}.</h1>
         {{#if image}}<img id="post-image" src={{image}} alt="{{{title}}}">{{/if}}
+        <h1 class="icon-reverse icon-social-twitter-post" id="post-title">{{{title}}}.</h1>
       </a>
     </header>