:sparkles: Improve theme style

static/css/hugo-academic.css

@@ -1,17 +1,15 @@
 /*************************************************
- *  Academia Theme for Hugo.
- *  http://www.cushen.me
- *  Copyright 2016 George Cushen
+ *  Hugo Academic: an academic theme for Hugo.
+ *  https://github.com/gcushen/hugo-academic
  **************************************************/
 
-
 /*************************************************
  *  Fonts
  **************************************************/
 
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
-@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);
-@import url(https://fonts.googleapis.com/css?family=Merriweather);
+@import url(//fonts.googleapis.com/css?family=Lato:400,700);
+@import url(//fonts.googleapis.com/css?family=Roboto+Mono);
+@import url(//fonts.googleapis.com/css?family=Merriweather);
 
 /*************************************************
  *  Core
@@ -29,22 +27,33 @@ body {
     padding-top: 90px;
 }
 
-h1, h2, h3, h4, h5, h6 {
-    font-family: 'Roboto', sans-serif;
-    font-weight: 700;
-    line-height: 1;
+h1, h2, h3, h4, h5, h6, .navbar-default {
+    font-family: 'Lato', sans-serif;
+    font-weight: 400;
+    line-height: 1em;
     text-rendering: optimizeLegibility;
 }
 
-a, a:visited {
-    color: #33cc99;
+h2 {
+    margin-bottom: 21px;
+    font-size: 48px;
+    font-weight: 400;
+}
+
+h3 {
+    margin-bottom: 11px;
+    font-weight: 700;
+}
+
+a, a:visited, h3.post-title a:hover {
+    color: #0095eb;
     text-decoration:none;
     transition:color 0.6s ease;
     -webkit-transition:color 0.6s ease;
 }
 
 a:hover {
-    color: #11aa66;
+    color: #005181;
 }
 
 h3.post-title a {
@@ -53,30 +62,80 @@ h3.post-title a {
     -webkit-transition: color 0.6s ease;
 }
 
-h3.post-title a:hover {
-    color: #33cc99;
-}
-
 pre, code {
     font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
 }
 
+*, *:before, *:after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.row:after, .row:before {
+    content: " ";
+    display: table;
+}
+
 /*************************************************
  *  Footer
  **************************************************/
 
-footer, footer p {
-    font-size: 0.9em;
-    margin: 4em 0 0;
-    padding: 2em 0;
-    text-align: center;
+footer {
+    margin: 4rem 0 0;
+    padding: 2rem 0;
     width: 100%;
 }
 
-.site-footer {
+footer p {
+    font-size: 0.75rem;
+    text-align: center;
+}
+
+footer p.powered-by {
+    line-height: 40px;
+}
+
+.site-footer, footer a#back_to_top i {
     color: #899596;
 }
 
+/*************************************************
+ *  Home Sections
+ **************************************************/
+
+.home-section-wrapper {
+    position: relative;
+    margin-bottom: 45px;
+    border-style: solid;
+    border-color: #f7f7f7;
+    border-width: 0px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-attachment: scroll;
+    background-size: cover;
+}
+
+.home-section-wrapper.full_width {
+    padding-left: calc(0vw);
+    padding-right: calc(0vw);
+    margin-left: calc(0vw);
+    margin-right: calc(0vw);
+}
+
+.home-section-wrapper.full_width.home {
+    padding: 110px 371.25px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    width: 1905px;
+    margin-left: -382.5px;
+    background-color: rgb(247, 247, 247);
+}
+
+.home-section-wrapper.full_width.home.alt {
+    background-color: rgb(255, 255, 255);
+}
+
 /*************************************************
  *  Blog Articles
  **************************************************/
@@ -85,6 +144,14 @@ footer, footer p {
     margin-bottom: 20px;
 }
 
+.article-list-item {
+    margin-bottom: 40px;
+}
+
+.article-list-item:last-child {
+    margin-bottom: 0 !important;
+}
+
 .article-list-item .article-metadata {
     margin-bottom: 5px;
 }
@@ -94,6 +161,21 @@ footer, footer p {
     color: #888;
 }
 
+.share {
+    width: 140px;
+    line-height: 1;
+}
+
+.share a {
+    color: #0095eb;
+    text-decoration: none;
+    font-size: 1.75rem;
+}
+
+#comments {
+    padding: 20px;
+}
+
 /*************************************************
  *  Publications
  **************************************************/
@@ -195,10 +277,10 @@ ul.ul-edu li .description p.institution {
  **************************************************/
 
 .btn-primary {
-    border-color: #33cc99;
+    border-color: #0095eb;
 }
 .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
-    background: #33cc99;
+    background: #0095eb;
 }
 
 /*************************************************
@@ -213,7 +295,7 @@ ul.ul-edu li .description p.institution {
 
 .btn-primary.btn-outline {
     /*color: #428bca;*/
-    color: #33cc99;
+    color: #0095eb;
 }
 
 .btn-success.btn-outline {
@@ -262,7 +344,7 @@ ul.ul-edu li .description p.institution {
 }
 
 .navbar-default .navbar-nav li a:hover {
-    color: #11aa66;
+    color: #0095eb;
 }
 
 .navbar-brand, .navbar-nav li a {
@@ -283,6 +365,14 @@ ul.ul-edu li .description p.institution {
 }
 
 @media (max-width:992px){
+    .home-section-wrapper.full_width.home {
+        padding: 110px 0px;
+        margin-top: 0px;
+        margin-bottom: 0px;
+        margin-left: 0px;
+        width: 100%;
+    }
+
     .space-below {
         margin-bottom: 10px;
     }
@@ -293,6 +383,7 @@ ul.ul-edu li .description p.institution {
 
     .navbar-header {
         float: none;
+        min-height: inherit;
     }
     .navbar-left,.navbar-right {
         float: none !important;

static/js/hugo-academic.js

@@ -1,7 +1,84 @@
-(function(){
+/*************************************************
+ *  Hugo Academic: an academic theme for Hugo.
+ *  https://github.com/gcushen/hugo-academic
+ **************************************************/
+
+(function($){
+
+  /* ---------------------------------------------------------------------------
+   * Add smooth scrolling to all links inside the main navbar.
+   * --------------------------------------------------------------------------- */
+
+  $("#navbar-main li.nav-item a").on('click', function(event){
+
+    var hash = this.hash;
+    var url = $(this).attr('href');
+
+    if( hash && $(hash).length && (url.split('#')[0] == window.location.pathname)) {
+      // Prevent default click behavior
+      event.preventDefault();
+
+      var navbarHeight = $('.navbar-header').innerHeight;
+
+      // Use jQuery's animate() method for smooth page scrolling.
+      // The numerical parameter specifies the time (ms) taken to scroll to the specified hash.
+      $('html, body').animate({
+        scrollTop: $(hash).offset().top - navbarHeight
+      }, 800, function () {
+        // Add hash (#) to URL once finished scrolling to hash position
+        window.location.hash = hash;
+      });
+    }
+  });
+
+  /* ---------------------------------------------------------------------------
+   * Smooth scrolling for mouse wheel.
+   * --------------------------------------------------------------------------- */
+
+  function smoothScroll(scrollTime, scrollDistance){
+
+    if (navigator.userAgent.indexOf('Mac') != -1 || navigator.userAgent.indexOf('Firefox') > -1 || jQuery('body').hasClass('is-horizontal')) {
+      return;
+    }
+
+    jQuery(window).on("mousewheel DOMMouseScroll", function(event){
+
+      event.preventDefault();
+
+      var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
+      var scrollTop = jQuery(window).scrollTop();
+      var finalScroll = scrollTop - parseInt(delta*scrollDistance);
+
+      TweenMax.to(jQuery(window), scrollTime, {
+        scrollTo : { y: finalScroll, autoKill:true },
+        ease: Expo.easeOut,
+        autoKill: true,
+        overwrite: 5
+      });
+
+    });
+
+  }
+
+  /* ---------------------------------------------------------------------------
+   * Hide mobile collapsable menu on clicking a link.
+   * --------------------------------------------------------------------------- */
+
+  $(document).on('click','.navbar-collapse.in',function(e) {
+    if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
+      $(this).collapse('hide');
+    }
+  });
+
+  /* --------------------------------------------------------------------------------------------------------------------------
+   * On Window Load.
+   * ----------------------------------------------------------------------------------------------------------------------- */
+
+  $(window).load(function(){
+
+    // Enable smooth scrolling with mouse wheel
+    smoothScroll(1.3, 220);
 
-  $("a[href='#'").click(function(e) {
-    e.preventDefault();
   });
 
-})();
+})(jQuery);