From 2b6a90cb526586734829dc1317eb77bdeccdddc5 Mon Sep 17 00:00:00 2001
From: 1v9 <mkb@live.cn>
Date: Fri, 11 Oct 2019 14:59:55 +0800
Subject: [PATCH] Replace id with class name (#1209)

---
 layout/_layout.swig                           |  8 +-
 layout/_partials/footer.swig                  |  2 +-
 layout/_partials/post/post-reward.swig        |  6 +-
 layout/_scripts/pages/schedule.swig           | 49 +++++--------
 layout/page.swig                              |  4 +-
 .../_common/components/pages/schedule.styl    | 73 +++++--------------
 .../components/post/post-copyright.styl       |  4 +-
 .../_common/components/post/post-gallery.styl | 26 +++----
 .../_common/components/post/post-reward.styl  | 44 +++++------
 .../_common/components/post/post-widgets.styl |  2 +-
 .../components/third-party/search.styl        | 10 +--
 source/css/_common/outline/footer/footer.styl | 18 ++---
 source/css/_common/outline/header/header.styl |  8 +-
 source/css/_common/outline/outline.styl       |  8 +-
 .../_common/outline/sidebar/sidebar-nav.styl  |  3 +-
 source/css/_common/scaffolding/base.styl      |  2 +-
 source/css/_common/scaffolding/tags/tabs.styl |  2 +-
 source/css/_schemes/Gemini/index.styl         |  2 +-
 source/css/_schemes/Mist/_menu.styl           |  2 +-
 source/css/_schemes/Mist/index.styl           |  2 +-
 source/css/_schemes/Muse/_layout.styl         |  4 +-
 source/css/_schemes/Pisces/_layout.styl       |  4 +-
 source/css/_schemes/Pisces/_menu.styl         |  2 +-
 source/js/schemes/muse.js                     |  7 +-
 source/js/schemes/pisces.js                   |  2 +-
 source/js/utils.js                            | 10 +--
 26 files changed, 117 insertions(+), 187 deletions(-)

diff --git a/layout/_layout.swig b/layout/_layout.swig
index 5e846e1da5..35e7b02175 100644
--- a/layout/_layout.swig
+++ b/layout/_layout.swig
@@ -27,19 +27,19 @@
   <div class="container{%- if theme.motion.enable %} use-motion{%- endif %}">
     <div class="headband"></div>
 
-    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
+    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
       <div class="header-inner">{% include '_partials/header/index.swig' %}</div>
     </header>
 
     {{ partial('_partials/widgets.swig', {}, {cache: theme.cache.enable}) }}
 
-    <main id="main" class="main">
+    <main class="main">
       <div class="main-inner">
         <div class="content-wrap">
           {%- if theme.scheme === 'Pisces' or theme.scheme === 'Gemini' %}
             {% include '_partials/header/sub-menu.swig' %}
           {%- endif %}
-          <div id="content" class="content">
+          <div class="content">
             {% block content %}{% endblock %}
           </div>
           {% include '_partials/comments.swig' %}
@@ -50,7 +50,7 @@
       </div>
     </main>
 
-    <footer id="footer" class="footer">
+    <footer class="footer">
       <div class="footer-inner">
         {{ partial('_partials/footer.swig', {}, {cache: theme.cache.enable}) }}
         {{ partial('_partials/analytics/index.swig', {}, {cache: theme.cache.enable}) }}
diff --git a/layout/_partials/footer.swig b/layout/_partials/footer.swig
index fc16984867..bb659023ae 100644
--- a/layout/_partials/footer.swig
+++ b/layout/_partials/footer.swig
@@ -13,7 +13,7 @@
   {%- set current = date(Date.now(), "YYYY") %}
   &copy; {% if theme.footer.since and theme.footer.since != current %}{{ theme.footer.since }} – {% endif %}
   <span itemprop="copyrightYear">{{ current }}</span>
-  <span class="with-love" id="animate">
+  <span class="with-love">
     <i class="fa fa-{{ theme.footer.icon.name }}"></i>
   </span>
   <span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright or author }}</span>
diff --git a/layout/_partials/post/post-reward.swig b/layout/_partials/post/post-reward.swig
index 99ad60accd..a02be54077 100644
--- a/layout/_partials/post/post-reward.swig
+++ b/layout/_partials/post/post-reward.swig
@@ -1,6 +1,6 @@
-<div id="reward-container">
+<div class="reward-container">
   <div>{{ theme.reward_settings.comment }}</div>
-  <button id="reward-button" disable="enable" onclick="var qr = document.getElementById(&quot;qr&quot;); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
+  <button disable="enable" onclick="var qr = document.getElementById(&quot;qr&quot;); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
     {{ __('reward.donate') }}
   </button>
   <div id="qr" style="display: none;">
@@ -12,7 +12,7 @@
       {% else %}
         {%- set translation = name %}
       {%- endif %}
-      <div style="display: inline-block">
+      <div style="display: inline-block;">
         <img src="{{ url_for(image) }}" alt="{{ author }} {{ translation }}">
         <p>{{ translation }}</p>
       </div>
diff --git a/layout/_scripts/pages/schedule.swig b/layout/_scripts/pages/schedule.swig
index d648e5192f..0898cd966a 100644
--- a/layout/_scripts/pages/schedule.swig
+++ b/layout/_scripts/pages/schedule.swig
@@ -46,7 +46,7 @@
   var queryLoop = setInterval(fetchData, 60000);
 
   function fetchData() {
-    var eventList = document.getElementById('event-list');
+    var eventList = document.querySelector('.event-list');
     if (!eventList) return;
 
     fetch(request_url).then(response => {
@@ -89,19 +89,19 @@
     elapsed = Math.abs(elapsed);
 
     if      ( elapsed < msPerHour  ) {
-      return Math.round(elapsed/msPerMinute) + ' minutes ' + tense;
+      return Math.round(elapsed / msPerMinute) + ' minutes ' + tense;
     }
     else if ( elapsed < msPerDay   ) {
-      return Math.round(elapsed/msPerHour) + ' hours ' + tense;
+      return Math.round(elapsed / msPerHour) + ' hours ' + tense;
     }
     else if ( elapsed < msPerMonth ) {
-      return 'about ' + Math.round(elapsed/msPerDay) + ' days ' + tense;
+      return 'about ' + Math.round(elapsed / msPerDay) + ' days ' + tense;
     }
     else if ( elapsed < msPerYear  ) {
-      return 'about ' + Math.round(elapsed/msPerMonth) + ' months ' + tense;
+      return 'about ' + Math.round(elapsed / msPerMonth) + ' months ' + tense;
     }
     else {
-      return 'about' + Math.round(elapsed/msPerYear) + ' years' + tense;
+      return 'about' + Math.round(elapsed / msPerYear) + ' years' + tense;
     }
   }
 
@@ -128,36 +128,27 @@
       default:
         throw 'Time data error';
     }
-    durationFormat = {
+    var durationFormat = {
       weekday: 'short',
       hour   : '2-digit',
       minute : '2-digit'
     };
-    relativeTimeStr = (tense == 0) ? 'NOW' : getRelativeTime(now, start);
-    durationStr = start.toLocaleTimeString([], durationFormat) + ' - ' +
-                  end.toLocaleTimeString([], durationFormat);
+    var relativeTimeStr = (tense == 0) ? 'NOW' : getRelativeTime(now, start);
+    var durationStr = start.toLocaleTimeString([], durationFormat) + ' - ' + end.toLocaleTimeString([], durationFormat);
 
-    liOpen  = '<li class="event ' + tenseClass + '">';
-    liClose = '</li>';
-    h2Open  = '<h2 class="event-summary">';
-    h2Close = '</h2>';
-
-    locationDOM     = '';
+    var locationDOM = '';
     if (calendar.showLocation && event.location) {
-      locationDOM   = '<span class="event-location event-details">' + event.location + '</span>';
+      locationDOM = '<span class="event-location event-details">' + event.location + '</span>';
     }
-    relativeTimeDOM = '<span class="event-relative-time">' + relativeTimeStr + '</span>';
-    durationDOM     = '<span class="event-duration event-details">' + durationStr + '</span>';
-
-    eventContent =
-      liOpen +
-        h2Open +
-          event.summary +
-          relativeTimeDOM+
-        h2Close +
-        locationDOM +
-        durationDOM +
-      liClose;
+
+    var eventContent = `<div class="event ${tenseClass}">
+        <h2 class="event-summary">
+          ${event.summary}
+          <span class="event-relative-time">${relativeTimeStr}</span>
+        </h2>
+        ${locationDOM}
+        <span class="event-duration event-details">${durationStr}</span>
+      </div>`;
     return eventContent;
   }
 })();
diff --git a/layout/page.swig b/layout/page.swig
index 78f1bef01e..03af5600c9 100644
--- a/layout/page.swig
+++ b/layout/page.swig
@@ -46,8 +46,8 @@
             </div>
           </div>
         {% elif page.type === 'schedule' %}
-          <ul id="event-list">
-          </ul>
+          <div class="event-list">
+          </div>
           {% include '_scripts/pages/schedule.swig' %}
         {% else %}
           {{ page.content }}
diff --git a/source/css/_common/components/pages/schedule.styl b/source/css/_common/components/pages/schedule.styl
index 1a13969bd0..90ae7c51c5 100644
--- a/source/css/_common/components/pages/schedule.styl
+++ b/source/css/_common/components/pages/schedule.styl
@@ -10,7 +10,7 @@
   }
 }
 
-#event-list {
+.event-list {
   padding: 0;
 
   hr {
@@ -28,18 +28,20 @@
     }
   }
 
-  li.event {
-    background: #f9f9f9;
+  .event {
+    background: $black-deep;
     margin: 20px 0;
     min-height: 40px;
-    padding-left: 10px;
+    padding: 15px 0 15px 10px;
 
-    h2.event-summary {
+    .event-summary {
+      color: white;
       margin: 0;
       padding-bottom: 3px;
 
       &::before {
-        color: $grey;
+        animation: dot-flash 1s alternate infinite ease-in-out;
+        color: white;
         content: '\f111';
         display: inline-block;
         font-family: $font-family-icons;
@@ -49,7 +51,7 @@
       }
     }
 
-    span.event-relative-time {
+    .event-relative-time {
       color: $grey;
       display: inline-block;
       font-size: 12px;
@@ -57,8 +59,8 @@
       padding-left: 12px;
     }
 
-    span.event-details {
-      color: $grey;
+    .event-details {
+      color: white;
       display: block;
       line-height: 18px;
       margin-left: 56px;
@@ -67,9 +69,9 @@
       text-indent: -24px;
 
       &::before {
-        color: $grey;
+        color: white;
         display: inline-block;
-        font-family: FontAwesome;
+        font-family: $font-family-icons;
         margin-right: 9px;
         text-align: center;
         text-indent: 0;
@@ -86,54 +88,17 @@
     }
   }
 
-  li.event-past {
-    background: #fcfcfc;
-    padding: 15px 0 15px 10px;
+  .event-past {
+    background: $whitesmoke;
 
-    > * {
-      opacity: .9;
-    }
-
-    h2.event-summary {
+    .event-summary, .event-details {
       color: $grey;
+      opacity: .9;
 
       &::before {
-        color: #dfdfdf;
-      }
-    }
-  }
-
-  li.event-now {
-    background: $black-deep;
-    color: white;
-    padding: 15px 0 15px 10px;
-
-    h2.event-summary {
-      &::before {
-        animation: dot-flash 1s alternate infinite ease-in-out;
-        color: white;
-      }
-    }
-
-    * {
-      color: white !important;
-    }
-  }
-
-  li.event-future {
-    background: $black-deep;
-    color: white;
-    padding: 15px 0 15px 10px;
-
-    h2.event-summary {
-      &::before {
-        animation: dot-flash 1s alternate infinite ease-in-out;
-        color: white;
+        animation: none;
+        color: $grey;
       }
     }
-
-    * {
-      color: white !important;
-    }
   }
 }
diff --git a/source/css/_common/components/post/post-copyright.styl b/source/css/_common/components/post/post-copyright.styl
index 46dd304489..c7a42c18d0 100644
--- a/source/css/_common/components/post/post-copyright.styl
+++ b/source/css/_common/components/post/post-copyright.styl
@@ -1,6 +1,6 @@
 .post-copyright {
-  background-color: #f9f9f9;
-  border-left: 3px solid #ff1700;
+  background-color: $whitesmoke;
+  border-left: 3px solid $red;
   list-style: none;
   margin: 2em 0 0;
   padding: .5em 1em;
diff --git a/source/css/_common/components/post/post-gallery.styl b/source/css/_common/components/post/post-gallery.styl
index 8b920a0071..4149a8c5d2 100644
--- a/source/css/_common/components/post/post-gallery.styl
+++ b/source/css/_common/components/post/post-gallery.styl
@@ -3,25 +3,25 @@
   display: table;
   table-layout: fixed;
   width: 100%;
+
+  .post-gallery-img {
+    border: 0;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+
+    img {
+      border: 0;
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
 }
 
 .post-gallery-row {
   display: table-row;
 }
 
-.post-gallery .post-gallery-img {
-  border: 0;
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-
-  img {
-    border: 0;
-    max-height: 100%;
-    max-width: 100%;
-  }
-}
-
 .fancybox-close, .fancybox-close:hover {
   border: 0;
 }
diff --git a/source/css/_common/components/post/post-reward.styl b/source/css/_common/components/post/post-reward.styl
index b0b4574d38..1856f537b4 100644
--- a/source/css/_common/components/post/post-reward.styl
+++ b/source/css/_common/components/post/post-reward.styl
@@ -1,30 +1,30 @@
-#reward-container {
+.reward-container {
   margin: 20px auto;
   padding: 10px 0;
   text-align: center;
   width: 90%;
-}
-
-#reward-button {
-  background: #f44336;
-  border: 0;
-  border-radius: 5px;
-  color: white;
-  cursor: pointer;
-  display: inline-block;
-  letter-spacing: normal;
-  line-height: 2;
-  margin: 0;
-  outline: 0;
-  padding: 0 15px;
-  text-indent: 0;
-  text-shadow: none;
-  text-transform: none;
-  vertical-align: text-top;
-}
 
-#reward-button span:hover {
-  background: #f7877f;
+  button {
+    background: $red;
+    border: 0;
+    border-radius: 5px;
+    color: white;
+    cursor: pointer;
+    display: inline-block;
+    letter-spacing: normal;
+    line-height: 2;
+    margin: 0;
+    outline: 0;
+    padding: 0 15px;
+    text-indent: 0;
+    text-shadow: none;
+    text-transform: none;
+    vertical-align: text-top;
+
+    &:hover {
+      background: darken($red, 20%);
+    }
+  }
 }
 
 #qr {
diff --git a/source/css/_common/components/post/post-widgets.styl b/source/css/_common/components/post/post-widgets.styl
index cc5aadf851..1c445b95d7 100644
--- a/source/css/_common/components/post/post-widgets.styl
+++ b/source/css/_common/components/post/post-widgets.styl
@@ -1,5 +1,5 @@
 .post-widgets {
-  border-top: 1px solid #eee;
+  border-top: 1px solid $gainsboro;
   margin-top: 15px;
   text-align: center;
 }
diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
index 3d8a6c201e..0a08d6e242 100644
--- a/source/css/_common/components/third-party/search.styl
+++ b/source/css/_common/components/third-party/search.styl
@@ -45,7 +45,7 @@
   }
 
   .popup-btn-close {
-    border-left: 1px solid #eee;
+    border-left: 1px solid $gainsboro;
     cursor: pointer;
     float: right;
 
@@ -118,7 +118,7 @@ if (hexo-config('algolia_search.enable')) {
   }
 
   .algolia-hit-item-link {
-    border-bottom: 1px dashed #ccc;
+    border-bottom: 1px dashed $grey-light;
     display: block;
     the-transition();
   }
@@ -166,7 +166,7 @@ if (hexo-config('local_search.enable')) {
     }
 
     p.search-result {
-      border-bottom: 1px dashed #ccc;
+      border-bottom: 1px dashed $grey-light;
       padding: 5px 0;
     }
 
@@ -175,8 +175,8 @@ if (hexo-config('local_search.enable')) {
     }
 
     .search-keyword {
-      border-bottom: 1px dashed #f00;
-      color: #f00;
+      border-bottom: 1px dashed $red;
+      color: $red;
       font-weight: bold;
     }
 
diff --git a/source/css/_common/outline/footer/footer.styl b/source/css/_common/outline/footer/footer.styl
index 7fc9c70b9c..2fb3e4a86e 100644
--- a/source/css/_common/outline/footer/footer.styl
+++ b/source/css/_common/outline/footer/footer.styl
@@ -24,15 +24,11 @@
   width: $content-desktop;
 
   +desktop-large() {
-    .container & {
-      width: $content-desktop-large;
-    }
+    width: $content-desktop-large;
   }
 
   +desktop-largest() {
-    .container & {
-      width: $content-desktop-largest;
-    }
+    width: $content-desktop-largest;
   }
 }
 
@@ -54,16 +50,14 @@
   }
 }
 
-if (hexo-config('footer.icon.animated')) {
-  #animate {
-    animation: iconAnimate 1.33s ease-in-out infinite;
-  }
-}
-
 .with-love {
   color: unquote(hexo-config('footer.icon.color'));
   display: inline-block;
   margin: 0 5px;
+
+  if (hexo-config('footer.icon.animated')) {
+    animation: iconAnimate 1.33s ease-in-out infinite;
+  }
 }
 
 .powered-by, .theme-info {
diff --git a/source/css/_common/outline/header/header.styl b/source/css/_common/outline/header/header.styl
index a6d32d0755..3baa551d21 100644
--- a/source/css/_common/outline/header/header.styl
+++ b/source/css/_common/outline/header/header.styl
@@ -11,15 +11,11 @@
   width: $content-desktop;
 
   +desktop-large() {
-    .container & {
-      width: $content-desktop-large;
-    }
+    width: $content-desktop-large;
   }
 
   +desktop-largest() {
-    .container & {
-      width: $content-desktop-largest;
-    }
+    width: $content-desktop-largest;
   }
 }
 
diff --git a/source/css/_common/outline/outline.styl b/source/css/_common/outline/outline.styl
index b03f3c8cc6..554d5294fa 100644
--- a/source/css/_common/outline/outline.styl
+++ b/source/css/_common/outline/outline.styl
@@ -8,15 +8,11 @@
   width: $content-desktop;
 
   +desktop-large() {
-    .container & {
-      width: $content-desktop-large;
-    }
+    width: $content-desktop-large;
   }
 
   +desktop-largest() {
-    .container & {
-      width: $content-desktop-largest;
-    }
+    width: $content-desktop-largest;
   }
 }
 
diff --git a/source/css/_common/outline/sidebar/sidebar-nav.styl b/source/css/_common/outline/sidebar/sidebar-nav.styl
index 9f094eb479..ae72d9f3de 100644
--- a/source/css/_common/outline/sidebar/sidebar-nav.styl
+++ b/source/css/_common/outline/sidebar/sidebar-nav.styl
@@ -1,6 +1,7 @@
 // Sidebar Navigation
 .sidebar-nav {
-  margin: 0 0 20px;
+  margin: 0;
+  padding-bottom: 20px;
   padding-left: 0;
 
   li {
diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
index e52854714e..44d3f5898e 100644
--- a/source/css/_common/scaffolding/base.styl
+++ b/source/css/_common/scaffolding/base.styl
@@ -98,7 +98,7 @@ dd {
 }
 
 kbd {
-  background-color: #f9f9f9;
+  background-color: $whitesmoke;
   background-image: linear-gradient(top, #eee, white, #eee);
   border: 1px solid $grey-light;
   border-radius: .2em;
diff --git a/source/css/_common/scaffolding/tags/tabs.styl b/source/css/_common/scaffolding/tags/tabs.styl
index b33eb410aa..3912671e97 100644
--- a/source/css/_common/scaffolding/tags/tabs.styl
+++ b/source/css/_common/scaffolding/tags/tabs.styl
@@ -24,7 +24,7 @@ $tbr = hexo-config('tabs.border_radius') is a 'unit' ? unit(hexo-config('tabs.bo
 
     li.tab {
       background-color: white;
-      border-bottom: 1px solid #ddd;
+      border-bottom: 1px solid $gray-lighter;
       border-left: 1px solid transparent;
       border-right: 1px solid transparent;
       border-top: 3px solid transparent;
diff --git a/source/css/_schemes/Gemini/index.styl b/source/css/_schemes/Gemini/index.styl
index fda0db819b..a03e47d640 100644
--- a/source/css/_schemes/Gemini/index.styl
+++ b/source/css/_schemes/Gemini/index.styl
@@ -112,7 +112,7 @@ $use-seo = hexo-config('seo');
   box-shadow: $box-shadow-inner;
 
   // Adapt submenu(s) with post-blocks.
-  + #content {
+  + .content {
     .post-block {
       box-shadow: $box-shadow;
       margin-top: $sidebar-offset;
diff --git a/source/css/_schemes/Mist/_menu.styl b/source/css/_schemes/Mist/_menu.styl
index 6ba6c09eef..ffdc497e07 100644
--- a/source/css/_schemes/Mist/_menu.styl
+++ b/source/css/_schemes/Mist/_menu.styl
@@ -19,7 +19,7 @@
 }
 
 .menu-item-active a {
-  background: #e1e1e1;
+  background: $gray-lighter;
 }
 
 .menu {
diff --git a/source/css/_schemes/Mist/index.styl b/source/css/_schemes/Mist/index.styl
index 40f35be50b..9fbbbe12e0 100644
--- a/source/css/_schemes/Mist/index.styl
+++ b/source/css/_schemes/Mist/index.styl
@@ -23,6 +23,7 @@
 // --------------------------------------------------
 .main-inner {
   padding-top: 80px;
+  padding-bottom: 80px;
 
   +mobile() {
     width: auto;
@@ -46,7 +47,6 @@
 .footer {
   background: $whitesmoke;
   color: $grey-dim;
-  margin-top: 80px;
   padding: 10px 0;
 }
 
diff --git a/source/css/_schemes/Muse/_layout.styl b/source/css/_schemes/Muse/_layout.styl
index 5086ce5013..90776fc8e6 100644
--- a/source/css/_schemes/Muse/_layout.styl
+++ b/source/css/_schemes/Muse/_layout.styl
@@ -10,8 +10,8 @@
   }
 }
 
-.footer {
-  margin-top: 60px;
+.main-inner {
+  padding-bottom: 60px;
 }
 
 embed {
diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl
index c23c878f5e..ca5a22f4c7 100644
--- a/source/css/_schemes/Pisces/_layout.styl
+++ b/source/css/_schemes/Pisces/_layout.styl
@@ -27,9 +27,7 @@
   width: $sidebar-desktop;
 
   +desktop-large() {
-    .container & {
-      width: $sidebar-desktop;
-    }
+    width: $sidebar-desktop;
   }
 
   +tablet-mobile() {
diff --git a/source/css/_schemes/Pisces/_menu.styl b/source/css/_schemes/Pisces/_menu.styl
index f2147c7fdc..5e5dcafa6e 100644
--- a/source/css/_schemes/Pisces/_menu.styl
+++ b/source/css/_schemes/Pisces/_menu.styl
@@ -21,7 +21,7 @@
 }
 
 .menu-item-active a {
-  background: #f9f9f9;
+  background: $whitesmoke;
 
   if (!hexo-config('menu_settings.badges')) {
     &::after {
diff --git a/source/js/schemes/muse.js b/source/js/schemes/muse.js
index 451aaea524..bff0f233f2 100644
--- a/source/js/schemes/muse.js
+++ b/source/js/schemes/muse.js
@@ -117,11 +117,8 @@ window.addEventListener('DOMContentLoaded', () => {
   sidebarToggleMotion.init();
 
   function updateFooterPosition() {
-    var containerHeight = document.querySelector('.header').offsetHeight + document.querySelector('.main').offsetHeight;
-    var footer = document.getElementById('footer');
-    if (footer.classList.contains('footer-fixed')) {
-      containerHeight += footer.outerHeight(true);
-    }
+    var footer = document.querySelector('.footer');
+    var containerHeight = document.querySelector('.header').offsetHeight + document.querySelector('.main').offsetHeight + footer.offsetHeight;
     footer.classList.toggle('footer-fixed', containerHeight <= window.innerHeight);
   }
 
diff --git a/source/js/schemes/pisces.js b/source/js/schemes/pisces.js
index c75118e1c0..c967309ac0 100644
--- a/source/js/schemes/pisces.js
+++ b/source/js/schemes/pisces.js
@@ -67,7 +67,7 @@ NexT.utils.getAffixParam = function() {
   const sidebarOffset = CONFIG.sidebar.offset || 12;
 
   let headerOffset = document.querySelector('.header-inner').offsetHeight + sidebarOffset;
-  let footer = document.querySelector('#footer');
+  let footer = document.querySelector('.footer');
   let footerInner = document.querySelector('.footer-inner');
   let footerMargin = footer.offsetHeight - footerInner.offsetHeight;
   let footerOffset = footer.offsetHeight + footerMargin;
diff --git a/source/js/utils.js b/source/js/utils.js
index 79e93cf3a9..2899f6ff5e 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -1,13 +1,5 @@
 /* global NexT, CONFIG */
 
-HTMLElement.prototype.outerHeight = function(flag) {
-  var height = this.offsetHeight;
-  if (!flag) return height;
-  var style = window.getComputedStyle(this);
-  height += parseInt(style.marginTop, 10) + parseInt(style.marginBottom, 10);
-  return height;
-};
-
 HTMLElement.prototype.wrap = function(wrapper) {
   this.parentNode.insertBefore(wrapper, this);
   this.parentNode.removeChild(this);
@@ -355,7 +347,7 @@ NexT.utils = {
    */
   initSidebarDimension: function() {
     var sidebarNav = document.querySelector('.sidebar-nav');
-    var sidebarNavHeight = sidebarNav.style.display !== 'none' ? sidebarNav.outerHeight(true) : 0;
+    var sidebarNavHeight = sidebarNav.style.display !== 'none' ? sidebarNav.offsetHeight : 0;
     var sidebarOffset = CONFIG.sidebar.offset || 12;
     var sidebarb2tHeight = CONFIG.back2top.enable && CONFIG.back2top.sidebar ? document.querySelector('.back-to-top').offsetHeight : 0;
     var sidebarSchemePadding = CONFIG.sidebarPadding + sidebarNavHeight + sidebarb2tHeight;