<!DOCTYPE html>
<html lang="en">
<head>
{% include head.html %}
</head>
<body>
<div class="site-ctr">
<!-- Navbar -->
{% include nav.html %}
<div class="reactive-bg">
<div class="color-space" id="color-space">
<div class="container" style="height:100%; text-align:right">
{% if page.backing_img %}
<img src="{{page.backing_img}}" style="{{page.backing_scalar}};padding-right:5%"></img>
{% else %}
<img src="/assets/images/innovation__monochromatic.svg" style="height:90%;padding-right:5%"></img>
{% endif %}
</div>
</div>
<div class="content-container">
<div class="title-container container">
<h1 id="page-title">{{page.title}}</h1>
<h4 id="page-subtitle">{{page.description}}</h4>
{% assign page_date = page.date | split: " " %}
<h6>
<small class="text-muted" {% if page.written %} data-toggle="tooltip" data-placement="top"
title="Written {{page.written}}" {% endif %} style="color:gray;">{{page_date.first}}</small>
{% for category in page.tags %}
<a href="/categories?c={{category}}"><span class="badge"
style="background-color: var(--light-gray);color:#333;">{{category}}</span></a>
{% endfor %}
{% if page.path contains "_drafts" %}
<a href="#"><span class="badge"
style="background-color: var(--light-gray);color:rgb(255, 0, 0);">draft</span></a>
{% endif %}
</h6>
</div><br>
<div class="inner-content-container container">
<!-- Main content -->
{{content}}
{% if page.categories %}
<br>
<hr>
<div class="retention">
<!-- Thank you text -->
<p>Thank you for reading this post. If you enjoyed the content, and want to let me know, or
want
to
ask any questions, please contact me via one of the methods <a href="/about">listed
here</a>. If
you would like to be notified about future posts, feel free to load <a href="/feed.xml">my
rss
feed</a> into your favorite feed reader, or <a
href="https://twitter.com/ewpratten">follow
me on Twitter</a> for notifications about my work and future posts.</p>
<!-- Other posts to check out -->
<p>If you have the time to read some more, I recommend checking out one of the following posts:
</p>
<div class="card-group">
{% assign i = 0 %}
{% for post in site.posts %}
{% if i < 3 and post.title != page.title %}
<div class="card">
<div class="card-body">
<h5 class="card-title">{{post.title}}</h5>
<h6 class="card-text">{{post.excerpt}}</h6>
</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>
{% assign i = i | plus:1 %}
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% include footer.html %}
<!-- A little script to set the header and nav color based on page type -->
<!-- <script>
// Read from liquid
var page_type = "{{page.type}}";
// Selectors
var color_space = document.getElementById("color-space");
var navbar = document.getElementById("navbar");
// Colors
var red = getComputedStyle(document.documentElement)
.getPropertyValue('--color-red');
var purple = getComputedStyle(document.documentElement)
.getPropertyValue('--color-purple');
// DEBUG
console.log(red);
console.log(purple);
// Set color
if (page_type == "post") {
color_space.setAttribute("background-color", red, "!important");
navbar.setAttribute("background-color", red, "!important");
} else {
color_space.setAttribute("background-color", purple, "!important");
navbar.setAttribute("background-color", purple, "!important");
}
</script> -->
</body>