Add noscript-warning

layout/_macro/sidebar.njk

@@ -7,7 +7,6 @@
 
   <aside class="sidebar">
     <div class="sidebar-inner">
-
       {%- set display_toc = page.toc.enable and display_toc %}
       {%- if display_toc %}
         {%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
@@ -43,7 +42,6 @@
           <span>0%</span>
         </div>
       {%- endif %}
-
     </div>
   </aside>
   <div id="sidebar-dimmer"></div>

layout/_scripts/noscript.njk

@@ -1,5 +1,7 @@
 <noscript>
   <style>
+  body { margin-top: 2rem; }
+
   .use-motion .brand,
   .use-motion .menu-item,
   .sidebar-inner,
@@ -23,4 +25,5 @@
   .search-pop-overlay, .sidebar-nav { display: none; }
   .sidebar-panel { display: block; }
   </style>
+  <div id="noscript-warning">Theme NexT works best with JavaScript enabled</div>
 </noscript>

source/css/_common/components/components.styl

@@ -6,6 +6,20 @@ if (hexo-config('back2top.enable')) {
   @import (hexo-config('back2top.sidebar') ? 'back-to-top-sidebar' : 'back-to-top');
 }
 
+#noscript-warning {
+  background-color: lighten($red, 20%);
+  color: #fff;
+  font-family: sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  left: 0;
+  position: fixed;
+  text-align: center;
+  top: 0;
+  width: 100%;
+  z-index: $zindex-5;
+}
+
 @import 'reading-progress' if (hexo-config('reading_progress.enable'));
 
 @import 'post';

source/css/_schemes/Mist/_header.styl

@@ -1,9 +1,5 @@
 // Header
 // --------------------------------------------------
-.header {
-  background: var(--content-bg-color);
-}
-
 .header-inner {
   align-items: center;
   display: flex;

source/css/_schemes/Pisces/_layout.styl

@@ -2,22 +2,12 @@
   // Make sure that .header and .main-inner are the same height
   // Required for .sidebar `position: sticky;`
   align-self: stretch;
-  width: $sidebar-desktop;
-
-  +desktop-large() {
-    width: $sidebar-desktop;
-  }
-
-  +tablet-mobile() {
-    width: auto;
-  }
 }
 
 .header-inner {
   background: var(--content-bg-color);
   border-radius: $border-radius-inner;
   box-shadow: $box-shadow-inner;
-  top: 0;
   width: $sidebar-desktop;
 
   +desktop-large() {

source/css/_variables/Mist.styl

@@ -7,6 +7,7 @@ $link-decoration-color   = $grey-light;
 $content-bg-color        = $whitesmoke;
 $menu-item-bg-color      = $grey-lighter;
 
+$head-bg                 = var(--content-bg-color);
 $brand-color             = $black-deep;
 $brand-hover-color       = $brand-color;