outer toc bug fix

assets/sass/components/_switch.scss

@@ -1,10 +1,11 @@
 .switch {
   position: relative;
-  // display: inline-block;
   width: 28px;
   height: 14px;
   margin-top: 0.7rem;
   margin-left: 1rem;
+
+  @include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
 }
 
 .switch input { 
@@ -20,6 +21,7 @@
   left: 0;
   right: 0;
   bottom: 0;
+
   @include transition(all, 0.2s, ease);
   @include themify($themes) {
     background-color: themed('switch-background-color');
@@ -32,7 +34,8 @@
   height: 11px;
   width: 11px;
   left: 1.72px;
-  bottom: 1.72px;  
+  bottom: 1.72px;
+
   @include transition(all, 0.2s, ease);
   @include themify($themes) {
     background-color: themed('switch-button-color');

assets/sass/components/_toc.scss

@@ -48,8 +48,10 @@
       color: themed('toc-label-color');
     }
 
-    @media only screen and (max-width: 1300px) {
-      display: none;
+    &--outer {
+      @media only screen and (max-width: 1300px) {
+        display: none;
+      }
     }
   }
 

layouts/partials/body/main-right.html

@@ -1,8 +1,8 @@
 <div class="wrapper__right">
-  {{ if eq ($.Param "tocPosition") "outer" }}
+  {{ if and (eq ($.Param "tocPosition") "outer") .IsPage }}
     {{ if or ($.Param "enableToc") ($.Param "toc") }}
       <div class="toc__flexbox--outer" data-position="fixed">
-        <h6 class="toc__title">{{ i18n "toc-label" }}</h6>
+        <h6 class="toc__title toc__title--outer">{{ i18n "toc-label" }}</h6>
         {{ if $.Param "enableTocSwitch" }}
         <label class="switch">
           <input id="visible-toc" aria-label="Visible TOC" type="checkbox" {{ if $.Param "hideToc" }}{{ else }}checked{{ end }}>