Upgrade project grid

_config.yml

@@ -62,14 +62,6 @@ permalink: /blog/:year/:title/
 # Pagination
 pagination:
   enabled: true
-  collection: 'posts'
-  permalink: /page/:num/
-  per_page: 3
-  sort_field: 'date'
-  sort_reverse: true
-  trail:
-    before: 1 # The number of links before the current page
-    after: 3  # The number of links after the current page
 
 # Comments
 disqus_shortname: al-folio # put your disqus shortname
@@ -152,8 +144,8 @@ scholar:
 
 enable_google_analytics:  false
 enable_katex:             true
-enable_mansory:           false
+enable_mansory:           true
-enable_progressbar:       false
+enable_progressbar:       true
 enable_tooltips:          false
 show_social_icons:        false
 
@@ -161,11 +153,33 @@ show_social_icons:        false
 # Library versions
 # -----------------------------------------------------------------------------
 
-academicons_version: "1.8.6"
+academicons:
-bootstrap_version: "4.4.1"
+  version: "1.8.6"
-fontawesome_version: "5.11.2"
+  integrity: "sha256-uFVgMKfistnJAfoCUQigIl+JfUaP47GrRKjf6CTPVmw="
-highlight_version: "9.15.10"
+bootstrap:
-jquery_version: "3.4.1"
+  version: "4.4.1"
-katex_version: "0.11.1"
+  integrity:
-mdb_version: "4.8.10"
+    css: "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
-popper_version: "1.15.0"
+    js: "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+fontawesome:
+  version: "5.13.0"
+  integrity: "sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ="
+jquery:
+  version: "3.4.1"
+  integrity: "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+katex:
+  version: "0.11.1"
+  integrity:
+    css: "sha256-V8SV2MO1FUb63Bwht5Wx9x6PVHNa02gv8BgH/uH3ung="
+    js: "sha256-F/Xda58SPdcUCr+xhSGz9MA2zQBPb0ASEYKohl8UCHc="
+mansory:
+  version: "4.2.2"
+  integrity: "sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI="
+mdb:
+  version: "4.17.0"
+  integrity:
+    css: "sha256-/SwJ2GDcEt5382i8zqDwl36VJGECxEoIcBIuoLmLR4g="
+    js: "sha256-UGNYR+uy841zU5TiO2yXD96UktHt9TM4/WXvsDLr4l0="
+popper:
+  version: "2.4.0"
+  integrity: "sha256-OH05DFHUWzr725HmuHo3pnuvUUn+TJuj8/Qz9xytFEw="

_includes/head.html

@@ -6,12 +6,12 @@
 <meta name="description" content="{{ site.description }}">
 
 <!-- Bootstrap & MDB -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/{{ site.bootstrap_version }}/css/bootstrap.min.css">
+<link href="https://stackpath.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/css/bootstrap.min.css" rel="stylesheet" integrity="{{ site.bootstrap.integrity.css }}" crossorigin="anonymous">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb_version }}/css/mdb.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb.version }}/css/mdb.min.css" integrity="{{ site.mdb.integrity.css }}" crossorigin="anonymous" />
 
 <!-- Fonts & Icons -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{{ site.fontawesome_version }}/css/all.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{{ site.fontawesome.version }}/css/all.min.css"  integrity="{{ site.fontawesome.integrity }}" crossorigin="anonymous">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/{{ site.academicons_version }}/css/academicons.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/{{ site.academicons.version }}/css/academicons.min.css" integrity="{{ site.academicons.integrity }}" crossorigin="anonymous">
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:100,300,400,500,700|Material+Icons">
 
 <!-- Styles -->

_includes/header.html

@@ -30,6 +30,7 @@
               {% endif %}
             </a>
           </li>
+          {% if site.blog_name %}
           <!-- Blog -->
           <li class="nav-item {% if page.url contains 'blog' %}active{% endif %}">
             <a class="nav-link" href="{{ '/blog/' | relative_url }}">
@@ -39,9 +40,11 @@
               {% endif %}
             </a>
           </li>
+          {% endif %}
           <!-- Other pages -->
-          {% for p in site.pages %}
+          {% assign sorted_pages = site.pages | sort: "title" %}
-          {% if p.nav %}
+          {% for p in sorted_pages %}
+          {% if p.nav and p.autogen == nil %}
           <li class="nav-item {% if page.title == p.title %}active{% endif %}">
               <a class="nav-link" href="{{ p.url | relative_url }}">
                 {{ p.title }}
@@ -57,13 +60,4 @@
     </div>
   </nav>
 
-  {% if site.enable_progressbar %}
-  <!-- Scrolling Progress Bar -->
-  <progress id="progress" value="0">
-    <div class="progress-container">
-      <span class="progress-bar"></span>
-    </div>
-  </progress>
-  {% endif %}
-
 </header>

_includes/hemline.html

@@ -1,8 +1,8 @@
 <!-- Load Core and Bootstrap JS -->
-<script src="https://code.jquery.com/jquery-{{ site.jquery_version }}.slim.min.js"></script>
+<script src="https://code.jquery.com/jquery-{{ site.jquery.version }}.slim.min.js" integrity="{{ site.jquery.integrity }}" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/{{ site.popper_version }}/umd/popper.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/{{ site.popper.version }}/umd/popper.min.js" integrity="{{ site.popper.integrity }}" crossorigin="anonymous"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/{{ site.bootstrap_version }}/js/bootstrap.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/js/bootstrap.min.js" integrity="{{ site.bootstrap.integrity.js }}" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb_version }}/js/mdb.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb.version }}/js/mdb.min.js"  integrity="{{ site.bootstrap.integrity.js }}" crossorigin="anonymous"></script>
 
 <!-- Load Common JS -->
 <script src="{{ '/assets/js/common.js' | relative_url }}"></script>
@@ -12,19 +12,28 @@
 
 {% if site.enable_katex %}
 <!-- Load KaTeX -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.css" integrity="sha256-V8SV2MO1FUb63Bwht5Wx9x6PVHNa02gv8BgH/uH3ung=" crossorigin="anonymous" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex.version }}/katex.min.css" integrity="{{ site.katex.integrity.css }}" crossorigin="anonymous" />
-<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.js" integrity="sha256-F/Xda58SPdcUCr+xhSGz9MA2zQBPb0ASEYKohl8UCHc=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex.version }}/katex.min.js" integrity="{{ site.katex.integrity.js }}" crossorigin="anonymous"></script>
 <script src="{{ '/assets/js/katex.js' | relative_url }}"></script>
 {% endif %}
 
 {% if site.enable_mansory %}
 <!-- Load Mansory -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/{{ site.mansory.version }}/masonry.pkgd.min.js" integrity="{{ site.masonry.integrity }}" crossorigin="anonymous"></script>
-{% endif %}
 
-{% if site.enable_progressbar %}
+<!-- Project Cards Layout -->
-<!-- Load Progress Bar -->
+<script type="text/javascript">
-<script src="{{ '/assets/js/progressbar.js' | relative_url }}"></script>
+  // Init Masonry
+  var $grid = $('.grid').masonry({
+    gutter: 10,
+    horizontalOrder: true,
+    itemSelector: '.grid-item',
+  });
+  // layout Masonry after each image loads
+  $grid.imagesLoaded().progress( function() {
+    $grid.masonry('layout');
+  });
+</script>
 {% endif %}
 
 {% if site.enable_tooltips %}

_layouts/distill.html

@@ -55,8 +55,6 @@
 
     <!-- Content -->
 
-    <div class="container-fluid">
-
     <div class="post distill">
 
       <d-title>
@@ -77,8 +75,6 @@
 
     </div>
 
-    </div>
-
     <!-- Footer -->
 
     {% include footer.html %}

_projects/1_project.markdown

@@ -3,6 +3,7 @@ layout: page
 title: Project 1
 description: a project with a background image
 img: /assets/img/12.jpg
+importance: 1
 ---
 
 Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.

_projects/2_project.markdown

@@ -3,6 +3,7 @@ layout: page
 title: Project 2
 description: a project with a background image
 img: /assets/img/2.jpg
+importance: 2
 ---
 
 Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.

_projects/3_project.markdown

@@ -4,6 +4,7 @@ title: Project 3
 description: a project that redirects to another website
 img:
 redirect: https://unsplash.com
+importance: 3
 ---
 
 Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.

_projects/4_project.markdown

@@ -3,6 +3,7 @@ layout: page
 title: Project 4
 description: another without an image
 img:
+importance: 3
 ---
 
 Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.

_projects/5_project.markdown

@@ -3,6 +3,7 @@ layout: page
 title: Project 5
 description: a project with a background image
 img: /assets/img/1.jpg
+importance: 3
 ---
 
 Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.

_projects/6_project.markdown

@@ -3,6 +3,7 @@ layout: page
 title: Project 6
 description: a project with no image
 img:
+importance: 4
 ---
 
 Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.

_sass/_base.scss

@@ -217,3 +217,23 @@ footer.sticky-bottom {
     text-decoration: none;
   }
 }
+
+
+// Projects
+
+.projects {
+  .grid-item {
+    width: 250px;
+    margin-bottom: 10px;
+    a {
+      color: black;
+      text-decoration: none;
+      &:hover {
+        color: $theme-color;
+      }
+    }
+  }
+  .card img {
+    width: 100%;
+  }
+}

assets/js/progressbar.js

@@ -1,46 +0,0 @@
-$(document).ready(function() {
-  var navbarHeight = $('#navbar').outerHeight(true);
-  $('body').css({ 'padding-top': navbarHeight });
-  $('progress-container').css({ 'padding-top': navbarHeight });
-  var progressBar = $('#progress');
-  progressBar.css({ 'top': navbarHeight });
-  var getMax = function() { return $(document).height() - $(window).height(); }
-  var getValue = function() { return $(window).scrollTop(); }
-  // Check if the browser supports the progress element.
-  if ('max' in document.createElement('progress')) {
-    // Set the 'max' attribute for the first time.
-    progressBar.attr({ max: getMax() });
-    progressBar.attr({ value: getValue() });
-
-    $(document).on('scroll', function() {
-      // On scroll only the 'value' attribute needs to be calculated.
-      progressBar.attr({ value: getValue() });
-    });
-
-    $(window).resize(function() {
-      var navbarHeight = $('#navbar').outerHeight(true);
-      $('body').css({ 'padding-top': navbarHeight });
-      $('progress-container').css({ 'padding-top': navbarHeight });
-      progressBar.css({ 'top': navbarHeight });
-      // On resize, both the 'max' and 'value' attributes need to be calculated.
-      progressBar.attr({ max: getMax(), value: getValue() });
-    });
-  } else {
-    var max = getMax(), value, width;
-    var getWidth = function() {
-      // Calculate the window width as a percentage.
-      value = getValue();
-      width = (value/max) * 100;
-      width = width + '%';
-      return width;
-    }
-    var setWidth = function() { progressBar.css({ width: getWidth() }); };
-    setWidth();
-    $(document).on('scroll', setWidth);
-    $(window).on('resize', function() {
-      // Need to reset the 'max' attribute.
-      max = getMax();
-      setWidth();
-    });
-  }
-});

blog/index.html

@@ -2,6 +2,14 @@
 layout: default
 pagination:
   enabled: true
+  collection: posts
+  permalink: /page/:num/
+  per_page: 3
+  sort_field: date
+  sort_reverse: true
+  trail:
+    before: 1 # The number of links before the current page
+    after: 3  # The number of links after the current page
 ---
 
 <div class="post">