fix: style & Lazyload

xiaerfei · Feb 21, 2018 · 3bedeb1 · 3bedeb1
1 parent 4a42fa3
commit 3bedeb1
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 67 deletions.
diff --git a/_includes/components/tags.html b/_includes/components/tags.html
@@ -18,7 +18,7 @@
 <div class="m-tags js-tags">
   <ul>
     <li>
-      <button type="button" class="js-article-tag js-tag-show-all all pill-button">Show All
+      <button type="button" class="js-article-tag js-tag-show-all all pill-button inactive">Show All
         <div class="tag-count">{{ site.posts | size }}</div>
       </button>
     </li>
@@ -43,7 +43,7 @@
       {%- else -%}
         {%- assign c_index = 4 -%}
       {%- endif -%}
-      <li><button type="button" class="js-article-tag tag-{{ c_index }} pill-button"
+      <li><button type="button" class="js-article-tag tag-{{ c_index }} pill-button inactive"
         data-tag="{{ tag[0] | strip | url_encode }}">
           <span>{{ tag[0] | strip }}</span><div class="tag-count">{{ tag[1].size }}</div>
         </button>

diff --git a/_includes/scripts/utils.html b/_includes/scripts/utils.html
@@ -1,7 +1,6 @@
 <script>
   window.Lazyload = (function(doc) {
     var queue = {js: [], css: []}, sources = {js: {}, css: {}}, context = this;
-
     var Set = (function() {
       var add = function(item) {
         var i, data = this._data;
@@ -25,9 +24,7 @@
         }
       }
       Set.prototype.add = add;
-      Set.prototype.get = function(index) {
-        return this._data[index];
-      };
+      Set.prototype.get = function(index) { return this._data[index]; };
       Set.prototype.has = function(item) {
         var i, data = this._data;
         for (i = 0; i < data.length; i++) {
@@ -51,10 +48,9 @@
         }
         return true;
       };
-
       Set.prototype.values = function() {
         return this._data;
-      }
+      };
       return Set;
     })();
 
@@ -67,35 +63,33 @@
       }
       return node;
     }
-
     var end = function(type, url, urls) {
-      var s, q, qi, cbs, i, cur,
-        val = urls.values(), flag;
+      var s, q, qi, cbs, i, j, cur,
+        val, flag;
       if (type === 'js' || type ==='css') {
         s = sources[type], q = queue[type];
         s[url] = true;
         for (i = 0; i < q.length; i++) {
           cur = q[i];
-          if (urls.is(cur.urls)) {
-            qi = cur;
-            break;
-          }
-        }
-        qi && (cbs = qi.callbacks);
-        for (flag = true, i = 0; i < val.length; i++) {
-          cur = val[i]
-          if (!s[cur]) {
-            flag = false;
-          }
-        }
-        if (flag && cbs && cbs.length > 0) {
-          for (i = 0; i < cbs.length; i++) {
-            cbs[i].call(context);
+          if (cur.urls.has(url)) {
+            qi = cur, val = qi.urls.values();
+            qi && (cbs = qi.callbacks);
+            for (flag = true, j = 0; j < val.length; j++) {
+              cur = val[j]
+              if (!s[cur]) {
+                flag = false;
+              }
+            }
+            if (flag && cbs && cbs.length > 0) {
+              for (j = 0; j < cbs.length; j++) {
+                cbs[j].call(context);
+              }
+              qi.load = true;
+            }
           }
         }
       }
-    }
-
+    };
     var load = function(type, urls, callback) {
       var s, si, q, qi, node, i, cur, flag,
         _urls = typeof urls === 'string' ? new Set([urls]) : new Set(urls), val, url;
@@ -109,44 +103,42 @@
           }
         }
         val = _urls.values();
-        for (flag = true, i = 0; i < val.length; i++) {
-          url = val[i]
-          if (!s[url]) {
-            flag = false;
-          }
-        }
         if (qi) {
-          callback && (flag || qi.callbacks.push(callback));
-          callback && (flag && callback());
+          callback && (qi.load || qi.callbacks.push(callback));
+          callback && (qi.load && callback());
         } else {
           q.push({
             urls: _urls,
-            callbacks: callback ? [callback] : []
+            callbacks: callback ? [callback] : [],
+            load: false
           });
           for (i = 0; i < val.length; i++) {
             node = null, url = val[i];
-            (type === 'js' && s[url] === undefined) && (s[url] = false, node = createNode('script', { src: url }));
-            (type === 'css'&& s[url] === undefined) && (s[url] = false, node = createNode('link', { rel: 'stylesheet', href: url }));
-            if (node) {
-              node.onload = function(e) {
-                end(type, url, _urls);
-              };
-              (doc.head || doc.body).appendChild(node);
+            if (s[url] === undefined) {
+              (type === 'js' ) && (node = createNode('script', { src: url }));
+              (type === 'css') && (node = createNode('link', { rel: 'stylesheet', href: url }));
+              if (node) {
+                node.onload = (function(type, url) {
+                  return function() {
+                    end(type, url);
+                  }
+                })(type, url);
+                (doc.head || doc.body).appendChild(node);
+                s[url] = false;
+              }
             }
           }
         }
       }
-    }
-
+    };
     return {
       js: function(url, callback) {
         load('js', url, callback);
       },
       css: function(url, callback) {
         load('css', url, callback);
       }
-    }
-
+    };
   })(this.document);
 
   window.throttle = function(func, wait) {

diff --git a/_sass/common/_variables.scss b/_sass/common/_variables.scss
@@ -1,6 +1,6 @@
 $base: (
-  font-family:            (-apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif),
-  code-font-family:       ("SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace),
+  font-family:            (-apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif),
+  code-font-family:       (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),
 
   font-size-root:         16px,
   font-size:              1rem,

diff --git a/_sass/common/components/_button.scss b/_sass/common/components/_button.scss
@@ -21,10 +21,20 @@
   }
   &.inactive {
     cursor: not-allowed;
-    @include link-colors(
-        rgba($text-color-3, .5), $main-color-3,
-        rgba($text-color-3, .5), $main-color-3
-    );
+    @include link-normal {
+      color: rgba($text-color-3, .2) !important;
+      background-color: $main-color-3 !important;
+      svg path {
+        fill: rgba($text-color-3, .2) !important;
+      }
+    }
+    @include link-emphasize {
+      color: rgba($text-color-3, .2) !important;
+      background-color: $main-color-3 !important;
+      svg path {
+        fill: rgba($text-color-3, .2) !important;
+      }
+    }
   }
 }
 

diff --git a/_sass/components/_article.content.scss b/_sass/components/_article.content.scss
@@ -16,8 +16,9 @@
       text-decoration: none;
       opacity: 0;
       & > svg {
-        width: 1rem;
-        height: 1rem;
+        width: map-get($base, font-size);
+        height: map-get($base, font-size);
+        margin-bottom: - .2 * map-get($base, font-size);
       }
     }
     &:hover {
@@ -47,10 +48,6 @@
       margin-bottom: 0;
     }
   }
-  .footnotes {
-    @include split-line();
-    margin-top: map-get($base, vertical-space-large) * 2;
-  }
   img:not(.emoji) {
     max-width: 100%;
     max-height: 37rem;
@@ -62,6 +59,13 @@
     width: map-get($base, line-height-large) * .7rem;
     height: map-get($base, line-height-large) * .7rem;
   }
+  .footnotes {
+    @include split-line();
+    margin-top: map-get($base, vertical-space-large) * 2;
+  }
+  .mjx-chtml {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
   code {
     @include round-rect(default, .2rem .5rem);
     background-color: $text-background-color;
@@ -78,6 +82,7 @@
       background-color: transparent;
       word-wrap: normal;
       &.language-mermaid, &.language-chart {
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
         display: none;
         &[data-processed] {
           display: block;
@@ -87,7 +92,7 @@
   }
   .highlighter-rouge>.highlight, figure.highlight {
     &>pre {
-      @include round-rect(default, 1rem 1rem);
+      @include round-rect(default, 1rem 0 1rem 1rem);
       margin: 0;
       background-color: $text-background-color;
       &>code {
@@ -130,7 +135,7 @@
               width: 100%;
               @include flexbox;
               &>.code {
-                padding: 0 1rem 1rem 1rem;
+                padding: 0 0 1rem .5rem;
                 overflow: auto;
                 -webkit-overflow-scrolling: touch;
               }

diff --git a/_sass/components/_tags.scss b/_sass/components/_tags.scss
@@ -16,15 +16,23 @@
     }
   }
   .tag-1 {
-    background-color: rgba($main-color-1, .4);
+    @include link-normal() {
+      background-color: rgba($main-color-1, .4);
+    }
   }
   .tag-2 {
-    background-color: rgba($main-color-1, .55);
+    @include link-normal() {
+      background-color: rgba($main-color-1, .55);
+    }
   }
   .tag-3 {
-    background-color: rgba($main-color-1, .7);
+    @include link-normal() {
+      background-color: rgba($main-color-1, .7);
+    }
   }
   .tag-4 {
-    background-color: rgba($main-color-1, .9);
+    @include link-normal() {
+      background-color: rgba($main-color-1, .9);
+    }
   }
 }
diff --git a/about.md b/about.md
@@ -11,7 +11,7 @@ key: page-about
 Just say something about yourself. :+1:
 
 {% highlight javascript %}
-  (() => console.log('hello, world!'))();
+(() => console.log('hello, world!'))();
 {% endhighlight %}
 
 ## title