89 lines
2.6 KiB
HTML
89 lines
2.6 KiB
HTML
---
|
|
title: Blog Posts
|
|
layout: page
|
|
header_red: true
|
|
backing_img: /assets/images/innovation__monochromatic.svg
|
|
backing_scalar: "height:90%;"
|
|
uses:
|
|
- masonry
|
|
---
|
|
|
|
<p>Here is a list of things I find interesting, and writeups of projects I have worked on.</p>
|
|
|
|
<div class="row" id="blog-grid">
|
|
{% assign i = 0 %}
|
|
{% for post in site.posts %}
|
|
<div class="col-sm-4">
|
|
<div class="card blog-post-card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{post.title}}</h5>
|
|
<p class="card-text">{{post.description}}</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
{% assign post_date = post.date | split: " " %}
|
|
<small class="text-muted">Published: {{post_date.first}}</small>
|
|
<a href="{{post.url}}"><button class="btn btn-outline-primary btn-sm" style="float:right;">Read
|
|
Post</button></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% assign i = i | plus:1 %}
|
|
{% endfor %}
|
|
|
|
</div>
|
|
|
|
<!-- Grid handler -->
|
|
<script>
|
|
|
|
function orderPostGrid() {
|
|
$('#blog-grid').masonry({
|
|
// options
|
|
itemSelector: '.blog-post-card',
|
|
// columnWidth: 500,
|
|
transitionDuration: '0s'
|
|
});
|
|
}
|
|
|
|
// re-order in 2 seconds in case anything was still lazy-loading
|
|
setTimeout(orderPostGrid, 1500);
|
|
setTimeout(orderPostGrid, 2000);
|
|
setTimeout(orderPostGrid, 5000);
|
|
</script>
|
|
|
|
<!-- <div class="list-group" id="posts">
|
|
|
|
{% assign i = 0 %}
|
|
{% for post in site.posts %}
|
|
{% assign the_date = post.date | split: " " %}
|
|
|
|
{% if i == 0 %}
|
|
<a href="{{post.url}}" class="list-group-item list-group-item-action">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<div class="card-body">
|
|
<h5 class="mb-1">{{post.title}}
|
|
{% if post.is_short %}
|
|
<span class="badge badge-secondary">Mini Post</span>
|
|
{% endif %}
|
|
</h5>
|
|
<p class="card-text">{{post.description}}</p>
|
|
</div>
|
|
<small style="color:gray;" class="maybe-date">{{the_date.first}}</small>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
{% else %}
|
|
|
|
|
|
<a href="{{post.url}}" class="list-group-item list-group-item-action">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h5 class="mb-1">{{post.title}}</h5>
|
|
<small style="color:gray;" class="maybe-date">{{the_date.first}}</small>
|
|
</div>
|
|
<p class="card-text">{{post.description}}</p>
|
|
</a>
|
|
|
|
{% endif %}
|
|
{% assign i = i | plus:1 %}
|
|
{% endfor %}
|
|
</div> --> |