Minor fixes of the dark mode + automatic equation numbering (alshediv…

…at#160)

* Add an option for showing selected publications

* Improve publication styles

* Update README.md

* Clearfix

* Fix minor issues with dark mode

* Add automatic equation numbering (alshedivat#158)

* Fix a typo

.gitignore

@@ -3,5 +3,5 @@ _site
 .jekyll-metadata
 .DS_store
 .ruby-version
-Gemfile.lock
 .tweet-cache/
+Gemfile.lock

_config.yml

@@ -5,7 +5,7 @@
 title: blank # the website title (if blank, full name will be used instead)
 first_name: You
 middle_name: R.
-last_name: (Long Last) Name
+last_name: Name
 email: [email protected]
 description: > # the ">" symbol means to ignore newlines until "footer_text:"
   A simple, whitespace theme for academics. Based on [*folio](https://github.com/bogoli/-folio) design.
@@ -26,16 +26,14 @@ navbar_fixed: true
 footer_fixed: true
 
 # Dimensions
-max_width: 800px  
+max_width: 800px
 
 # TODO: add layout settings (single page vs. multi-page)
 
 # -----------------------------------------------------------------------------
 # Open Graph
 # -----------------------------------------------------------------------------
 # Display links to the page with a preview object on social media.
-# To achieve this, change serve_og_meta to true and then provide the URL of the
-# preview image as the value of og_image.
 serve_og_meta: false # Include Open Graph meta tags in the HTML head
 og_image: # The site-wide (default for all links) Open Graph preview image
 
@@ -157,7 +155,7 @@ enable_google_analytics:  false
 enable_mansory:           true
 enable_math:              true
 enable_tooltips:          false
-enable_darkmode:          false
+enable_darkmode:          true
 show_social_icons:        false
 
 # -----------------------------------------------------------------------------

_includes/scripts/mathjax.html

@@ -1,5 +1,12 @@
 {% if site.enable_math %}
 <!-- MathJax -->
+<script type="text/javascript">
+  window.MathJax = {
+    tex: {
+      tags: 'ams'
+    }
+  };
+</script>
 <script defer type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@{{ site.mathjax.version }}/es5/tex-mml-chtml.js"></script>
 <script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
 {% endif %}

_posts/2015-10-20-math.md

@@ -9,7 +9,17 @@ This theme supports rendering beautiful math in inline and display modes using [
 To use display mode, again surround your expression with `$$` and place it as a separate paragraph. Here is an example:
 
 $$
-\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
+\sum_{k=1}^\infty |\langle x, e_k \rangle|^2 \leq \|x\|^2
 $$
 
+You can also use `\begin{equation}...\end{equation}` instead of `$$` for display mode math.
+MathJax will automatically number equations:
+
+\begin{equation}
+\label{eq:caushy-shwarz}
+\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
+\end{equation}
+
+and by adding `\label{...}` inside the equation environment, we can now refer to the equation using `\eqref`.
+
 Note that MathJax 3 is [a major re-write of MathJax](https://docs.mathjax.org/en/latest/upgrading/whats-new-3.0.html){:target="\_blank"} that brought a significant improvement to the loading and rendering speed, which is now [on par with KaTeX](http://www.intmath.com/cg5/katex-mathjax-comparison.php){:target="\_blank"}.

_sass/_base.scss

@@ -4,6 +4,10 @@
 
 // Typography
 
+p, h1, h2, h3, h4, h5, h6, em, div, span, strong {
+  color: var(--global-text-color);
+}
+
 a, table.table a {
   color: var(--global-theme-color);
   &:hover {
@@ -182,10 +186,10 @@ a, table.table a {
 
 // Footer
 footer.fixed-bottom {
-  color: var(--global-footer-text-color);
   background-color: var(--global-footer-bg-color);
   font-size: 0.75rem;
   .container {
+    color: var(--global-footer-text-color);
     padding-top: 9px;
     padding-bottom: 8px;
   }
@@ -243,10 +247,20 @@ footer.sticky-bottom {
   }
 }
 
-.pagination .page-item.active .page-link {
-  background-color: var(--global-theme-color);
-  &:hover {
-    background-color: var(--global-theme-color);
+.pagination {
+  .page-item {
+    .page-link {
+      color: var(--global-text-color);
+      &:hover {
+        color: $black-color;
+      }
+    }
+    &.active .page-link {
+      background-color: var(--global-theme-color);
+      &:hover {
+        background-color: var(--global-theme-color);
+      }
+    }
   }
 }
 
@@ -393,10 +407,10 @@ footer.sticky-bottom {
         transition: all 0.15s ease;
       }
       div.abstract.hidden {
-        border: dashed 1px white;
+        border: dashed 1px var(--global-bg-color);
       }
       div.abstract.hidden.open {
-        border-color: $grey-color;
+        border-color: var(--global-text-color);
       }
     }
   }

assets/js/common.js

@@ -5,4 +5,5 @@ $(document).ready(function() {
     $('a.bibtex').click(function() {
         $(this).parent().parent().find(".bibtex.hidden").toggleClass('open');
     });
+    $('.navbar-nav').find('a').removeClass('waves-effect waves-light');
 });

assets/js/dark_mode.js

@@ -1,35 +1,34 @@
 $(document).ready(function() {
     const mode_toggle = document.getElementById("light-toggle");
-  
+
     mode_toggle.addEventListener("click", function() {
-        const temp = localStorage.getItem('theme');
+        const temp = localStorage.getItem("theme");
         toggleTheme(temp);
     });
-    
+
     let toggleTheme = (theme) => {
         if (theme == "dark") {
-            setTheme(null);
+            setTheme("light");
         } else {
-            setTheme('dark');
+            setTheme("dark");
         }
     }
-  
+
     let setTheme = (theme) =>  {
         trans();
         if (theme) {
-            document.documentElement.setAttribute('data-theme', theme) 
+            document.documentElement.setAttribute("data-theme", theme)
         }
         else {
-            document.documentElement.removeAttribute('data-theme');
+            document.documentElement.removeAttribute("data-theme");
         }
-        localStorage.setItem('theme', theme);
+        localStorage.setItem("theme", theme);
     };
-  
+
     let trans = () => {
-        document.documentElement.classList.add('transition');
+        document.documentElement.classList.add("transition");
         window.setTimeout(() => {
-            document.documentElement.classList.remove('transition')
-        }, 1000)
+            document.documentElement.classList.remove("transition")
+        }, 500)
     }
 });
-

assets/js/theme.js

@@ -1,4 +1,4 @@
-//Has to be in the head tag, otherwise a flicker effect will occur.
+// Has to be in the head tag, otherwise a flicker effect will occur.
 let initTheme = (theme) => {
   if (theme == null) {
     const userPref = window.matchMedia;