Merged main.

static/css/layouts/main.css

@@ -50,17 +50,17 @@ a:hover {
 }
 
 .btn-dark {
-  background-color: #3c4858;
-  border-color: #3c4858;
-  color: #e5e9f2;
-  transition: all 0.3s ease-out;
+  background-color: #3c4858!important;
+  border-color: #3c4858!important;
+  color: #e5e9f2!important;
+  transition: all 0.3s ease-out!important;
 }
 
 .btn-dark:hover,
 .btn-dark:focus {
-  background-color: #248aaa;
-  border-color: #248aaa;
-  transition: all 0.3s ease-out;
+  background-color: #248aaa!important;
+  border-color: #248aaa!important;
+  transition: all 0.3s ease-out!important;
 }
 
 .btn-outline-info {
@@ -432,16 +432,29 @@ mark {
   code {
     padding: 0px;
   }
+
+  h1 {
+    font-size: 2.2rem;
+  }
 }
 
 /* iPhoneX, iPhone 6,7,8 */
 @media only screen and (max-width: 375px) {
+  h1 {
+    font-size: 2rem;
+  }
 }
 
 /* Galaxy S5, Moto G4 */
 @media only screen and (max-width: 360px) {
+  h1 {
+    font-size: 1.8rem;
+  }
 }
 
 /* iPhone 5 or before */
 @media only screen and (max-width: 320px) {
+  h1 {
+    font-size: 1.5rem;
+  }
 }

static/css/layouts/single.css

@@ -37,6 +37,7 @@ body {
 }
 
 .toc-holder {
+  position: -webkit-sticky;
   position: sticky;
   top: 4.5rem;
   overflow-x: hidden;
@@ -205,6 +206,69 @@ h6 {
   padding: 10px;
 }
 
+.share-buttons .btn {
+  color: #e5e9f2 !important;
+  transition: all 0.3s ease-out !important;
+}
+
+.share-buttons .btn:hover,
+.share-buttons .btn:focus {
+  background-color: #248aaa !important;
+  border-color: #248aaa !important;
+  transition: all 0.3s ease-out !important;
+}
+
+.share-buttons .facebook-btn {
+  background-color: #4267b2 !important;
+  border-color: #4267b2 !important;
+}
+
+.share-buttons .twitter-btn {
+  background-color: #1da1f2 !important;
+  border-color: #1da1f2 !important;
+}
+
+.share-buttons .reddit-btn {
+  background-color: #ff4500 !important;
+  border-color: #ff4500 !important;
+}
+
+.share-buttons .tumblr-btn {
+  background-color: #34465d !important;
+  border-color: #34465d !important;
+}
+
+.share-buttons .pocket-btn {
+  background-color: #ef4056 !important;
+  border-color: #ef4056 !important;
+}
+
+.share-buttons .linkedin-btn {
+  background-color: #2867b2 !important;
+  border-color: #2867b2 !important;
+}
+
+.share-buttons .diaspora-btn {
+  background-color: #3c4858 !important;
+  border-color: #3c4858 !important;
+}
+
+.share-buttons .mastodon-btn {
+  background-color: #2791da !important;
+  border-color: #2791da !important;
+}
+
+.share-buttons .whatsapp-btn {
+  background-color: #4ac959 !important;
+  border-color: #4ac959 !important;
+}
+
+.share-buttons .email-btn {
+  background-color: #3c4858 !important;
+  border-color: #3c4858 !important;
+  transition: all 0.3s ease-out !important;
+}
+
 .btn-improve-page {
   text-align: right;
 }
@@ -236,6 +300,19 @@ h6 {
 #scroll-to-top.show {
   visibility: visible;
 }
+.taxonomy-terms {
+  text-align: center;
+}
+.taxonomy-terms li {
+  font-size: 0.8em;
+  list-style-type: none;
+  display: inline-block;
+  background: #248aaa;
+}
+
+.taxonomy-terms a {
+  color: #f9fafc;
+}
 
 /* ============= Device specific fixes ======= */
 

static/css/navigators/navbar.css

@@ -6,8 +6,8 @@
   height: 50px;
   z-index: 99999;
   transition: all 0.4s ease-out;
-  margin: 0;
-  padding-top: 0.1rem;
+  margin: 0px;
+  padding-top: 0.4rem;
   text-align: center;
 }
 
@@ -30,6 +30,7 @@
 .initial-navbar li a:hover {
   color: #f9fafc;
   transition: all 0.3s ease-out;
+  transform: translateY(-2px);
 }
 
 .navbar-collapse {

static/css/navigators/sidebar.css

@@ -8,6 +8,7 @@
 
 .sidebar-holder {
   top: 2.5rem;
+  position: -webkit-sticky;
   position: sticky;
   background-color: #f9fafc;
   height: 100vh;
@@ -191,6 +192,7 @@ a.focused {
     transition: all ease-out 0.3s;
   }
   .sidebar-holder {
+    position: -webkit-sticky;
     position: sticky;
     top: 2.5rem;
     width: 100%;
@@ -220,6 +222,7 @@ a.focused {
     transition: all ease-out 0.3s;
   }
   .sidebar-holder {
+    position: -webkit-sticky;
     position: sticky;
     top: 2.5rem;
     width: 100%;

static/css/sections/about.css

@@ -87,11 +87,14 @@
   background: #3c4858;
   font-size: 1rem;
   color: #f9fafc;
-  line-height: 135px;
+  line-height: initial;
   text-align: center;
   position: absolute;
   top: 5%;
   left: 5%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .circular-progress.blue .circular-progress-bar {
@@ -496,11 +499,24 @@
   .about-section.container {
     max-width: 100%;
   }
+  
+  .circular-progress {
+    width: 135px;
+    height: 135px;
+  }
 }
 
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
+  .circular-progress {
+    width: 150px;
+    height: 150px;
+  }
+
+  .circular-progress .circular-progress-value {
+    font-size: 1rem;
+  }
 }
 
 /* iPhoneX, iPhone 6,7,8 */
@@ -513,4 +529,12 @@
 
 /* iPhone 5 or before */
 @media only screen and (max-width: 320px) {
+  .col-6 {
+    flex: auto;
+    max-width: 100%;
+  }
+
+  .social-link {
+    flex-wrap: wrap;
+  }
 }

static/css/sections/accomplishments.css

@@ -1,3 +1,9 @@
+.accomplishments-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
 .accomplishments-section .card {
   background: #fff;
   border-top: 2px solid #248aaa;

static/css/sections/achievements.css

@@ -2,6 +2,12 @@
   padding-top: 0.5rem;
 }
 
+.achievements-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
 #gallery .achievement-entry {
   cursor: pointer;
   margin-top: 5px;

static/css/sections/education.css

@@ -19,6 +19,12 @@
   text-align: right;
 }
 
+.education-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
 .education-section .icon {
   width: 2rem;
   padding-left: 0;
@@ -36,7 +42,7 @@
 }
 
 .education-section .education-info-table tr:first-child .hline {
-  height: 60%;
+  height: 65%;
   top: auto;
 }
 
@@ -102,7 +108,9 @@
   border: none;
   color: #212529;
 }
-
+.education-section .taken-courses th.course-name-header{
+  width: 50%;
+}
 .education-section .taken-courses .hidden-course {
   display: none;
   transition: all 1s ease-out;

static/css/sections/experiences.css

@@ -6,6 +6,12 @@
   margin-top: 1.5rem !important;
 }
 
+.experiences-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
 .experiences-section ul {
   padding-left: 1rem;
 }

static/css/sections/home.css

@@ -45,7 +45,7 @@
   margin-bottom: 10px;
 }
 
-.home .greeting {
+.home .greeting, .home .greeting-subtitle {
   color: #f9fafc;
 }
 

static/css/sections/recent-posts.css

@@ -2,6 +2,12 @@
   padding-top: 1rem;
 }
 
+.recent-posts-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
 .recent-posts-section .card .card-footer span {
   font-size: 10pt;
   color: #6c757d !important;

static/css/sections/skills.css

@@ -8,6 +8,12 @@
   border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
 }
 
+.skills-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
 .skills-section .skill-card-link {
   text-decoration: none;
 }
@@ -19,6 +25,7 @@
 .skills-section .card {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+  height: 100%;
 }
 
 .skills-section .card .card-body {
@@ -57,7 +64,7 @@
     padding-right: 0;
   }
   .skills-section .container {
-    max-width: 100%;
+    max-width: 95%;
   }
 }
 

static/js/auto-render.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var a={};return function(){n.d(a,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,a=0,i=e.length;n<t.length;){var o=t[n];if(a<=0&&t.slice(n,n+i)===e)return n;"\\"===o?n++:"{"===o?a++:"}"===o&&a--,n++}return-1},i=/^\\begin{/,o=function(e,t){for(var n,a=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")})).join("|")+")");-1!==(n=e.search(o));){n>0&&(a.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=i.test(d)?d:e.slice(t[l].left.length,n);a.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&a.push({type:"text",data:e}),a},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var a=document.createDocumentFragment(),i=0;i<n.length;i++)if("text"===n[i].type)a.appendChild(document.createTextNode(n[i].data));else{var l=document.createElement("span"),d=n[i].data;r.displayMode=n[i].display;try{r.preProcess&&(d=r.preProcess(d)),t().render(d,l,r)}catch(e){if(!(e instanceof t().ParseError))throw e;r.errorCallback("KaTeX auto-render: Failed to parse `"+n[i].data+"` with ",e),a.appendChild(document.createTextNode(n[i].rawData));continue}a.appendChild(l)}return a},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var a=t.childNodes[n];if(3===a.nodeType){var i=l(a.textContent,r);i&&(n+=i.childNodes.length-1,t.replaceChild(i,a))}else 1===a.nodeType&&function(){var t=" "+a.className+" ";-1===r.ignoredTags.indexOf(a.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(a,r)}()}},s=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},d(e,r)}}(),a=a.default}()}));

static/js/home.js

@@ -63,28 +63,6 @@ var projectCards;
       }
     }
 
-    // ==================== Adjust height of the skills card =============
-    function adjustSkillCardsHeight() {
-      if (!isMobile) { // no need to adjust height for mobile devices
-        // primary skills
-        var skillCards = document.getElementById("primary-skills");
-        if (skillCards != null) {
-          var cardElems = skillCards.getElementsByClassName("card");
-          var maxHeight = 0;
-          for (let i = 0; i < cardElems.length; i++) {
-            if (cardElems.item(i).clientHeight > maxHeight) {
-              maxHeight = cardElems.item(i).clientHeight;
-            }
-          }
-          for (let i = 0; i < cardElems.length; i++) {
-            cardElems.item(i).setAttribute("style", "min-height: " + maxHeight + "px;");
-          }
-        }
-      }
-    }
-    $(window).on("load", function () {
-      adjustSkillCardsHeight();
-    });
 
     // ================== Project cards =====================
     // Add click action on project category selector buttons
@@ -331,17 +309,17 @@ var projectCards;
           this.parentElement.classList.toggle("col-sm-12");
           if (this.children["SmallImage"].hasAttribute("active")) {
             let mainLogo = this.children["LargeImage"].getAttribute("Style");
-            this.children["LargeImage"].setAttribute("active",true);
+            this.children["LargeImage"].setAttribute("active", true);
             this.children["SmallImage"].removeAttribute("active");
 
             this.setAttribute("Style", mainLogo);
           } else {
             let mainLogo = this.children["SmallImage"].getAttribute("Style");
-            this.children["SmallImage"].setAttribute("active",true);
+            this.children["SmallImage"].setAttribute("active", true);
             this.children["LargeImage"].removeAttribute("active");
             this.setAttribute("Style", mainLogo);
           }
-         
+
           if (this.children["caption"] != undefined) {
             this.children["caption"].classList.toggle("hidden");
           }
@@ -360,7 +338,6 @@ var projectCards;
     // re-render custom functions on window resize
     window.onresize = function () {
       detectDevice();
-      adjustSkillCardsHeight();
       adjustRecentPostsHeight();
       showAchievements();
     };

static/js/main.js

@@ -158,18 +158,16 @@ function toggleCourseVisibility(elem) {
   }
 
   // toggle hidden-course class from the third elements
-  for (var i = 0; i < courses.length; i++) {
-    if (i > 1 && courses[i].classList !== null) {
-      courses[i].classList.toggle("hidden-course");
+  for (const course of courses) {
+    if (course.classList.contains("hidden-course") || course.classList.contains("toggled-hidden-course")) {
+      course.classList.toggle("hidden-course");
+      course.classList.add("toggled-hidden-course");
     }
   }
 
-  // toggle the current button visibility
-  elem.classList.toggle("hidden");
-  // toggle the alternate button visibility
-  if  (elem.id === "show-more-btn"){
-    document.getElementById("show-less-btn").classList.toggle("hidden");
-  }else{
-    document.getElementById("show-more-btn").classList.toggle("hidden");
+  // toggle the buttons visibility
+  let buttonsToToggle = elem.parentNode.getElementsByClassName("show-more-btn");
+  for (const buttonToToggle of buttonsToToggle) {
+    buttonToToggle.classList.toggle("hidden");
   }
 }

static/js/navbar.js

@@ -1,5 +1,36 @@
 "use strict";
 
+const updateNavBar = () => {
+  if ($(document).scrollTop() > 40) {
+    $('#top-navbar').removeClass('initial-navbar');
+    $('#top-navbar').addClass('final-navbar shadow');
+
+    $('#navbar-toggler').removeClass('navbar-dark');
+    $('#navbar-toggler').addClass('navbar-light');
+
+    // get the main logo from hidden img tag
+    let mainLogo = document.getElementById("main-logo")
+    if (mainLogo !== null) {
+      let logoURL = mainLogo.getAttribute("src");
+      $('#logo').attr("src", logoURL);
+    }
+
+  } else {
+    $('#top-navbar').removeClass('final-navbar shadow');
+    $('#top-navbar').addClass('initial-navbar');
+
+    $('#navbar-toggler').removeClass('navbar-light');
+    $('#navbar-toggler').addClass('navbar-dark');
+
+    // get the inverted logo from hidden img tag
+    let invertedLogo = document.getElementById("inverted-logo")
+    if (invertedLogo !== null) {
+      let logoURL = invertedLogo.getAttribute("src");
+      $('#logo').attr("src", logoURL);
+    }
+  }
+};
+
 (function ($) {
   jQuery(document).ready(function () {
 
@@ -8,27 +39,7 @@
     // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
     // $.onscroll = function() {scrollFunction()};
     $(document).scroll(function () {
-      if ($(document).scrollTop() > 40) {
-        $('#top-navbar').removeClass('initial-navbar');
-        $('#top-navbar').addClass('final-navbar shadow');
-
-        $('#navbar-toggler').removeClass('navbar-dark');
-        $('#navbar-toggler').addClass('navbar-light');
-
-        // get the main logo from hidden img tag
-        let mainLogo = document.getElementById("main-logo").getAttribute("src");
-        $('#logo').attr("src", mainLogo);
-      } else {
-        $('#top-navbar').removeClass('final-navbar shadow');
-        $('#top-navbar').addClass('initial-navbar');
-
-        $('#navbar-toggler').removeClass('navbar-light');
-        $('#navbar-toggler').addClass('navbar-dark');
-
-        // get the inverted logo from hidden img tag
-        let invertedLogo = document.getElementById("inverted-logo").getAttribute("src");
-        $('#logo').attr("src", invertedLogo);
-      }
+      updateNavBar();
     });
 
     // Creates a click handler to collapse the navigation when
@@ -39,6 +50,8 @@
         $('.navbar-collapse').collapse('hide');
       });
     }
+
+    updateNavBar();
   });
 
 })(jQuery);