manbearwolf

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');

var assets = {
    'js': [
        "bower_components/jquery/dist/jquery.js",
        "bower_components/highlightjs/highlight.pack.js",

manbearwolf

<a href="https://drive.google.com/uc?export=view&id=XXX"><img src="https://drive.google.com/uc?export=view&id=XXX" style="width: 500px; max-width: 100%; height: auto" title="Click for the larger version." /></a>

manbearwolf

div.carousel-container {

}
div.carousel-container > * {
	display: inline-block;
	vertical-align: middle;
}
div.carousel-container > button {
	color: transparent;
	border: 0px;

manbearwolf

<!--To center an image-->
<p align="center">
![alt]()
</p>

<!--To right align an image-->
<p align="right">
![alt]()
</p>

manbearwolf

Off canvas menu with touch handles.

View an example here.

This example is based on elements of this post.

Incliudes a OffCanvasMenuController to handle touch events bound to the off canvas menu. For example when swiping from the outer left side to the right, the left off canvas menu is dragged along.

Example usage

manbearwolf

<!-- using the truncate filter -->
{% for post in site.posts limit:10 %}
   <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
   <span class="post-date">{{ post.date | date: "%B %d, %Y" }}</span>
   {% if post.content.size > 2000 %}
      {{ post.content | truncatewords: 300 }} <!-- bad! content gives you rendered html and you will truncate in the middle of a node -->
      <a href="{{ post.url }}">read more</a>
   {% else %}
      {{ post.content }}
   {% endif %}