Added twemoji as dependency

Kikobeats · Nov 15, 2015 · f150cdc · f150cdc
1 parent 3810a2c
commit f150cdc
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 59 deletions.
diff --git a/assets/js/src/__init.coffee b/assets/js/src/__init.coffee
@@ -45,3 +45,16 @@ $ ->
       return 'mobile' if (w <= 480)
       return 'tablet' if (w <= 1024)
       'desktop'
+
+    parseEmojis: ->
+      twemoji.parse document.body,
+        folder: 'svg'
+        ext: '.svg'
+        callback: (icon, options, variant) ->
+          switch icon
+            # © copyright
+            # ® registered trademark
+            when 'a9', 'ae', '2122'
+              # ™ trademark
+              return false
+          ''.concat options.base, options.size, '/', icon, options.ext
diff --git a/assets/js/src/main.coffee b/assets/js/src/main.coffee
@@ -6,6 +6,7 @@ $ ->
   el.dataset.page = Uno.context()
   el.dataset.device = Uno.device()
 
+  Uno.parseEmojis()
   Uno.readTime()
   FastClick.attach el unless Uno.is 'device', 'desktop'
 

diff --git a/assets/scss/modules/_global.scss b/assets/scss/modules/_global.scss
@@ -5,97 +5,75 @@
 html {
   height: 100%;
   max-height: 100%;
+  font-size: $unit;
 
   &.expanded {
     overflow-y: hidden;
   }
-
-  font-size: $unit;
 }
-html,
-body {
+html, body {
   height: 100%;
 }
 body {
   font-family: $sans-font;
-
   color: $gray-darker;
 }
-
 mark {
   background: saturate($secondary-color, 60%);
 }
-
 ::selection {
   background: lighten($secondary-color, 26%);
 }
-
 ::scrollbar {
   display: none;
 }
-
 // ------------------------------
 // TYPOGRAPHY
 // ------------------------------
 
 a {
   position: relative;
-
   transition: all $aside-animation-time;
   text-decoration: none;
-
   color: $link-color;
 
   &:hover {
     color: $hover-color;
   }
 }
-h1,
-h2,
-h3,
-h4,
-h5,
-h5 {
+h1, h2, h3, h4, h5, h5 {
   font-family: $serif-font;
   -webkit-font-smoothing: antialiased;
   font-weight: lighter;
-
   color: $gray-darkest;
 }
 h1 {
   margin: $margin-h1 0;
-
   font-size: $font-h1;
   line-height: 3rem;
 }
 h2 {
   margin: $margin-h2 0;
-
   font-size: $font-h2;
 }
 h3 {
   margin: $margin-h3 0;
-
   font-size: $font-h3;
 }
 h4 {
   margin: $margin-h4 0;
-
   font-size: $font-h4;
 }
 h5 {
   margin: $margin-h5 0;
-
   font-size: $font-h5;
 }
 h6 {
   margin: $margin-h6 0;
-
   font-size: $font-h6;
 }
 p {
   margin-bottom: 1.3rem;
-
   line-height: 1.7rem;
 
   > code {
@@ -111,13 +89,11 @@ em {
 blockquote {
   > p {
     margin: 2.5rem -3rem;
-
     font-family: $quote-font;
     font-size: 1.2rem;
     -webkit-font-smoothing: antialiased;
     font-style: italic;
     line-height: 1.4;
-
     text-align: center;
     letter-spacing: .01rem;
     word-wrap: break-word;
@@ -127,17 +103,14 @@ blockquote {
 // BASIC STYLING
 // ------------------------------
 
-ol,
-ul {
+ol, ul {
   margin: 0 0 1.3rem 2.5rem;
 
   li {
     margin: 0 0 .2rem 0;
-
     line-height: 1.6rem;
   }
-  ol,
-  ul {
+  ol, ul {
     margin: .1rem 0 .2rem 2rem;
   }
 }
@@ -147,49 +120,38 @@ ol {
 ul {
   list-style-type: disc;
 }
-
 li > code {
   @include inline-code-style;
 }
-
 pre {
   padding: 1rem 2.5%;
   margin-bottom: 1.3rem;
-
   font-family: $code-font;
   font-size: .9rem;
   font-weight: $font-weight-normal;
   line-height: 1.3rem;
-
   word-wrap: break-word;
-
   color: $gray-dark;
   border: 1px solid #d9d9d9;
   border-radius: 3px;
 
   > code {
     font-family: $code-font;
     font-size: .85rem;
-
     color: $gray-dark;
   }
 }
-
-code:hover,
-pre:hover {
+code:hover, pre:hover {
   color: $gray-darkest;
 }
 .block-heading {
   position: relative;
   bottom: -15px;
-
   font-size: .8rem;
   font-weight: bold;
-
   text-align: center;
   letter-spacing: 1px;
   text-transform: uppercase;
-
   @include column(12);
 }
 .label {
@@ -207,7 +169,6 @@ pre:hover {
 
 .container {
   position: relative;
-
   width: $total-width - $gutter-width;
   margin: 0 auto;
 }
@@ -217,11 +178,8 @@ main {
   right: 0;
   bottom: 0;
   left: 22.5rem;
-
   padding: 2rem 3rem;
 
-
-
   > .content {
     padding: 2rem 0;
     margin: 0 3.7rem;
@@ -232,9 +190,7 @@ main {
     > footer {
       display: block;
       padding: 2em 0 0;
-
       font-size: .7em;
-
       color: lighten($gray-dark, 10%);
       border-top: 2px solid $gray-light;
     }
@@ -246,17 +202,22 @@ main {
 
   a {
     text-decoration: underline;
-
     color: lighten($gray-dark, 5%);
 
     &:hover {
       color: $hover-color;
     }
   }
 }
+.emoji {
+  width: auto !important;
+  width: 1em !important;
+  height: 1em !important;
+  margin: 0 .05em 0 .1em !important;
+  vertical-align: -.1em !important;
+}
 .divider {
   margin: 10px auto;
-
   border-top: 1px solid $divider-color;
 
   &.long {
@@ -268,7 +229,6 @@ main {
   &.post {
     width: 30%;
     margin: 1.7rem 0;
-
     border-top: 1px solid $gray-light;
   }
 }

diff --git a/bower.json b/bower.json
@@ -14,26 +14,27 @@
     "url": "https://github.com/Kikobeats/uno-zen/issues"
   },
   "keywords": [
+    "elegant",
     "ghost",
+    "minimalism",
     "theme",
     "uno",
-    "zen",
-    "elegant",
-    "minimalism"
+    "zen"
   ],
   "dependencies": {
     "animate.css": "*",
     "fastclick": "*",
+    "fitvids": "*",
     "ghostHunter": "git://github.com/i11ume/ghostHunter.git",
     "pace": "*",
     "reading-time": "*",
-    "fitvids": "*"
+    "twemoji": "git://github.com/twitter/twemoji.git#gh-pages"
   },
   "ignore": [
     "**/.*",
-    "node_modules",
-    "bower_components",
     "assets/vendor ",
+    "bower_components",
+    "node_modules",
     "test",
     "tests"
   ],

diff --git a/gulpfile.coffee b/gulpfile.coffee
@@ -43,6 +43,7 @@ src =
               'assets/vendor/ghostHunter/jquery.ghostHunter.min.js'
               'assets/vendor/pace/pace.min.js'
               'assets/vendor/fitvids/jquery.fitvids.js'
+              'assets/vendor/twemoji/twemoji.min.js'
               'assets/vendor/reading-time/build/readingTime.min.js']
   css      :
     main   : 'assets/css/' + dist.name + '.css'