fix bug in transition between pages in dark theme (axios#81)

Co-authored-by: Anton Krylov <[email protected]>
Co-authored-by: Jay <[email protected]>

Author: 3 people

scss/index.scss

@@ -60,13 +60,13 @@ body {
   }
 
   background: var(--col-bg);
-  transition: 300ms;
+  transition: var(--transition-delay);
 }
 
 header {
   z-index: 100;
   background: var(--col-bg);
-  transition: 300ms;
+  transition: var(--transition-delay);
   position: fixed;
   top: 0;
   left: 0;
@@ -121,7 +121,7 @@ header {
   nav {
     display: none;
     a {
-      transition: opacity 300ms;
+      transition: opacity var(--transition-delay);
       color: var(--col-fg);
       opacity: 0.5;
       text-decoration: none;
@@ -157,7 +157,7 @@ aside {
   border-right: 1px solid var(--gray-2);
 
   transform: translateX(-100%);
-  transition: transform 300ms;
+  transition: transform var(--transition-delay);
 
   .aside-container {
     flex: 1 0 0;
@@ -287,13 +287,13 @@ aside {
     padding: 2rem;
     width: 100%;
     background: var(--col-bg);
-    transition: 300ms;
+    transition: var(--transition-delay);
   }
 
   .theme {
     color: var(--gray-2);
     background: var(--gray-2);
-    transition: 300ms;
+    transition: var(--transition-delay);
 
     width: 100%;
     height: 8rem;
@@ -312,19 +312,19 @@ aside {
 
     .light,
     .dark {
-      transition: 300ms;
+      transition: var(--transition-delay);
       font-size: 0;
 
       svg > circle,
       svg > path {
-        transition: 300ms;
+        transition: var(--transition-delay);
         color: var(--col-fg);
       }
     }
 
     .slider {
       margin: 0px 25px;
-      transition: 300ms;
+      transition: var(--transition-delay);
 
       border-radius: 100px;
       height: 20px;
@@ -333,7 +333,7 @@ aside {
       position: relative;
 
       .roller {
-        transition: 300ms;
+        transition: var(--transition-delay);
         height: 16px;
         width: 16px;
         border-radius: 50%;

scss/variables.scss

@@ -16,6 +16,9 @@
   --shadow-blue-dark: 0px 10px 20px rgba(var(--col-blue-rgb), 0.2);
 
   --shadow-blue: var(--shadow-blue-light);
+
+  /* Delays */
+  --transition-delay: 0ms;
 }
 
 body.dark {

templates/post.ejs

@@ -64,7 +64,7 @@
             <path fill-rule="evenodd" clip-rule="evenodd" d="M132.182 27.497C130.07 27.497 128.15 27.129 126.422 26.393C124.694 25.625 123.205 24.601 121.957 23.321C120.709 22.009 119.749 20.537 119.077 18.905C118.406 17.273 118.069 15.593 118.069 13.865C118.069 12.105 118.421 10.409 119.125 8.77695C119.829 7.14495 120.822 5.70496 122.102 4.45695C123.382 3.17695 124.885 2.16895 126.613 1.43295C128.341 0.696953 130.229 0.328949 132.277 0.328949C134.389 0.328949 136.31 0.728952 138.038 1.52895C139.766 2.29695 141.238 3.33695 142.454 4.64895C143.702 5.92895 144.661 7.38495 145.333 9.01695C146.005 10.649 146.342 12.3129 146.342 14.0089C146.342 15.7689 145.99 17.465 145.286 19.097C144.582 20.697 143.589 22.137 142.309 23.417C141.061 24.665 139.574 25.657 137.846 26.393C136.118 27.129 134.23 27.497 132.182 27.497ZM123.925 13.913C123.925 15.353 124.262 16.729 124.934 18.041C125.605 19.321 126.549 20.361 127.765 21.161C129.013 21.961 130.501 22.361 132.229 22.361C133.989 22.361 135.477 21.945 136.693 21.113C137.91 20.249 138.837 19.177 139.477 17.8969C140.117 16.5849 140.438 15.241 140.438 13.865C140.438 12.425 140.102 11.0649 139.43 9.78495C138.758 8.50495 137.798 7.48095 136.549 6.71295C135.333 5.91295 133.878 5.51295 132.182 5.51295C130.422 5.51295 128.917 5.92895 127.669 6.76095C126.453 7.59295 125.525 8.64896 124.885 9.92896C124.245 11.209 123.925 12.537 123.925 13.913Z" fill="currentColor"/>
             <path fill-rule="evenodd" clip-rule="evenodd" d="M0 27.305L11.712 0.472954H16.464L28.128 27.305H21.984L19.296 21.017H8.88L6.192 27.305H0ZM14.112 7.52895L10.176 15.977H17.904L14.112 7.52895Z" fill="currentColor"/>
             <path d="M50.8211 0.472954L58.2131 9.97695L65.6051 0.472954H71.8931L61.2851 14.057L71.5571 27.305H65.2691L58.2131 18.185L51.2051 27.305H44.8211L55.1411 14.057L44.4851 0.472954H50.8211Z" fill="currentColor"/>
-            </svg>            
+            </svg>
         </a>
       </div>
       <details class="dropdown-language">
@@ -190,6 +190,7 @@
         if (isDarkThemeActive) {
           document.querySelector("button.theme").classList.toggle("dark");
         }
+        document.documentElement.style.setProperty('--transition-delay', '300ms');
       };
     </script>
   </body>