added context function and glitch effect

assets/js/src/__init.coffee

@@ -3,19 +3,24 @@
 $(document).ready ->
 
   window.Uno = Uno =
-
     version: '1.1.24'
 
     cover:
       width: -> $(".panel-cover").width()
       isCollapsed: -> $(".panel-cover").hasClass("panel-cover--collapsed")
+      collapsed: -> $(".panel-cover").addClass("panel-cover--collapsed")
 
     search:
       container: -> $('#results')
       form: (action) -> $("#search")[action]()
 
     loadingBar: (action) -> $(".pace")[action]()
 
+    context: ->
+      # get the context from the first class name of body
+      # https://github.com/TryGhost/Ghost/wiki/Context-aware-Filters-and-Helpers
+      document.body.className.split(" ")[0].split("-")[0]
+
     readTime: do ->
 
       container = $('.content-wrapper')
@@ -45,3 +50,5 @@ $(document).ready ->
           container.readingTime readingTimeTarget: ".post-reading-time"
 
   $("body").removeClass "no-js"
+  context = document.body.dataset['page'] ?= Uno.context()
+  Uno.cover.collapsed() if context is 'post' or 'error'

assets/scss/components/_effects.scss

@@ -127,3 +127,8 @@
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
 }
+
+.example-one {
+  font-size: 100px;
+  @include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
+}

assets/scss/components/_post.scss

@@ -81,15 +81,6 @@
   margin-bottom: .2em;
   font-size: 1.5em;
   line-height: 1.3em;
-  //     a {
-    //   color: $gray-darkest;
-    //       &:hover {
-      //   color: $hover-color;
-      //
-      //
-    }
-    //
-  }
 }
 .post-list__meta {
   display: block;

assets/scss/modules/_mixins.scss

@@ -0,0 +1,59 @@
+/*
+  (TEXT) PARAMS
+  =================
+  1. Namespace
+  2. Intensity
+  3. Text color
+  4. Background color (flat)
+  5. Highlight #1 color
+  6. Highlight #2 color
+  7. Width (px)
+  8. Height (px)
+*/
+
+@mixin textGlitch($name, $intensity, $textColor, $background, $highlightColor1, $highlightColor2, $width, $height) {
+
+  color: $textColor;
+  position: relative;
+  $steps: $intensity;
+
+  // Ensure the @keyframes are generated at the root level
+  @at-root {
+    // We need two different ones
+    @for $i from 1 through 2 {
+      @keyframes #{$name}-anim-#{$i} {
+        @for $i from 0 through $steps {
+          #{percentage($i*(1/$steps))} {
+            clip: rect(
+              random($height)+px,
+              $width+px,
+              random($height)+px,
+              0
+            );
+          }
+        }
+      }
+    }
+  }
+  &:before,
+  &:after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: $background;
+    clip: rect(0, 0, 0, 0);
+  }
+  &:after {
+    left: 2px;
+    text-shadow: -1px 0 $highlightColor1;
+    animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
+  }
+  &:before {
+    left: -2px;
+    text-shadow: 2px 0 $highlightColor2;
+    animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
+  }
+
+}

assets/scss/uno.scss

@@ -6,10 +6,11 @@
 // ------------------------------
 
 @import 'modules/reset.scss';
-@import 'modules/grid.scss';
 @import 'modules/variables.scss';
-@import 'modules/fonts.scss';
+@import 'modules/mixins.scss';
+@import 'modules/grid.scss';
 @import 'modules/global.scss';
+@import 'modules/fonts.scss';
 
 // ------------------------------
 // COMPONENTS

partials/comments.hbs

@@ -1,13 +1,13 @@
 <section class="post-comments">
   <div id="disqus_thread"></div>
   <script type="text/javascript">
-      var disqus_shortname = 'kikobeats'; // required: replace example with your forum shortname
-      /* * * DON'T EDIT BELOW THIS LINE * * */
-      (function() {
-          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-          dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-      })();
+  var disqus_shortname = 'kikobeats'; // required: replace example with your forum shortname
+  /* * * DON'T EDIT BELOW THIS LINE * * */
+  (function() {
+  var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+  dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+  })();
   </script>
   <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
   <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

partials/google-analytics.hbs

@@ -3,9 +3,7 @@
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
   ga('create', 'UA-34372837-2', 'auto');
   ga('require', 'linkid', 'linkid.js');
   ga('send', 'pageview');
-
 </script>

partials/pagination.hbs

@@ -1,13 +1,12 @@
 {{#if next}}
 <hr class="post-list__divider " />
-
 <nav class="pagination" role="navigation">
-    {{#if prev}}
-        <a class="newer-posts pagination__newer btn btn-small" href="{{page_url prev}}#open">&larr; Newer Posts</a>
-    {{/if}}
-    <span class="pagination__page-number">Page {{page}} of {{pages}}</span>
-    {{#if next}}
-        <a class="older-posts pagination__older btn btn-small" href="{{page_url next}}#open">Older Posts &rarr;</a>
-    {{/if}}
+  {{#if prev}}
+  <a class="newer-posts pagination__newer btn btn-small" href="{{page_url prev}}#open">&larr; Newer Posts</a>
+  {{/if}}
+  <span class="pagination__page-number">Page {{page}} of {{pages}}</span>
+  {{#if next}}
+  <a class="older-posts pagination__older btn btn-small" href="{{page_url next}}#open">Older Posts &rarr;</a>
+  {{/if}}
 </nav>
 {{/if}}

partials/side-panel.hbs

@@ -1,4 +1,4 @@
-<header class="panel-cover {{#if post}}panel-cover--collapsed{{/if}}" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
+<header class="panel-cover" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
   <div class="panel-main">
 
     <div class="panel-main__inner panel-inverted">