jekyll-theme-isabelline 0.1.18 → 0.1.23

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58f2738bd5d62cc452b9db650957053913de10d4ca506890251b16053def49f7
-  data.tar.gz: ab52d1ba4723f9c9d590ca3264661c15d0a4bd53d3639f60637cc551280737b2
+  metadata.gz: 54f8c8361f0dbdec8be508ff7a42a84c080888817d17bd50522a11d94291391c
+  data.tar.gz: a3568115fb01e50122908ca1928c7510a14fa5cade8c0aee347dfb28220772ae
 SHA512:
-  metadata.gz: bcfc7446c8780a752e34059e55fc18c08eeaae1bd89aefa08846b925a7670238016febabd4405433388247c59e3ab0979629107b47c590a90f98e245ac956f45
-  data.tar.gz: db675d77e0bcfb356169432e8589c791df6d7d43b922f4e9d7b255c946aabeb03cb5a632ca4e67ec89fada2c960212ff4cecaac5eb0eb40268e0734b66eae09e
+  metadata.gz: 646ec113bc9e246c17ed30c6ebfa42039ca32da83e4a64ef6c4c705ea2c84e2e23ec1e7d5879f136e78d258bd226bad26601cd2194c492f2b2f1288b7dca792d
+  data.tar.gz: b545cc2d12f0faa42e24efee3dc0d86f1fbf2a480222f437df3c95ac3139ee1d03b4ee20b169fcc3eb337585b89d90a2d224df909db06a6b56d345503aee1bf1

data/README.md

@@ -1,3 +1,36 @@
 # jekyll-theme-isabelline
 
-README is being worked on in [a post](/README/)
+Simple clean mobile-friendly theme for long form note taking. Works for blogging too.
+
+## Features:
+
+* Compatible with Jekyll 4
+* Designed for long form writing
+* Reserved, classy, easy to read, minimalistic visual design
+* Semantic lightweight mobile first markup; special attention to markup of block quotes, asides, images, image galleries
+* Customizable color scheme
+
+## Installation
+
+Add this line to site's `Gemfile`: 
+
+```ruby
+gem "jekyll-theme-isabelline", "~> 0.1.0"
+```
+And add this line to your Jekyll site `_config.yaml`:
+
+```yaml
+theme: jekyll-theme-isabelline
+```
+
+And then execute:
+
+```sh
+ $ bundle
+```
+
+Or, install from CLI:
+
+```sh
+ $ gem install jekyll-theme-isabelline
+```

data/_includes/footer.html

@@ -28,4 +28,5 @@
 
 <div id="snackbar">Loading...</div>
 <!-- <script src='/assets/js/slides.js'></script> -->
-<script src='{{ "/assets/js/clipboard.js" | relative_url }}'></script>
+<script src='{{ "/assets/js/clipboard.js" | relative_url }}'></script>
+<script src='{{ "/assets/js/gallery.js" | relative_url }}'></script>

data/_includes/gallery.html

@@ -0,0 +1,29 @@
+{% assign gallery_name = include.name | default: "gallery" %}
+
+{% assign gallery_prefix = page.id | prepend: "/assets" | append: "/" | append: gallery_name %}
+
+{% assign sorted_static_files = site.static_files | map: "path" | sort %}
+
+{% assign valid_image_extensions = "jpg,jpeg,png,gif" | split: "," %}
+
+<div class="gallery" id="gallery-{{ gallery_name }}">
+	{% assign image_index = 0 %}
+	{% assign gallery_nav = "" %}
+	<div class="images">
+		{% for image_path in sorted_static_files %}
+			{% assign image_ext = image_path | split: "." | last %}
+			{% if valid_image_extensions contains image_ext %}
+				{% if image_path contains gallery_prefix %}
+					{% assign image_index = image_index | plus: 1 %}
+					<img id="{{ gallery_name }}-{{ image_index }}" src="{{ site.baseurl }}{{ image_path }}" />
+				{% endif %}
+			{% endif %}
+		{% endfor %}
+	</div>
+	<nav>
+		<div class="play">
+			<input type="checkbox" checked="false" id="{{ gallery_name }}-play" />
+			<label for="{{ gallery_name }}-play"></label>
+		</div>
+	</nav>
+</div>

data/_includes/head.html

@@ -7,6 +7,6 @@
 			{{ page.title }} · {{ site.title }}
 		{% endif %}
 	</title>
-	<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">
+	<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
 	{% include head-meta.html %}
 </head>

data/_includes/image.html

@@ -11,9 +11,16 @@
 	{% capture alt %}alt="{{ alt }}" title="{{ alt }}"{% endcapture %}
 {% endif %}
 
-{% assign frame=include.frame | default: true %}
+{% assign frame=include.frame %}
+{% if frame == blank %}
+	{% assign frame=true %}
+{% endif %}
+
+{% if include.width != blank %}
+	{% capture width %}style="width:{{ include.width }}"{% endcapture %}
+{% endif %}
 
-<figure class="figure {% if include.caption %}caption{% endif %} {% if frame %}frame{% endif %}">
-	<a target="_blank" href="{{ imagePath }}"><img {{ src }} {{ alt }} width="100%" /></a>
+<figure {{width}} class="figure {% if include.caption %}caption{% endif %} {% if frame %}frame{% endif %}">
+	<a target="_blank" href="{{ imagePath }}"><img {{ src }} {{ alt }} style="width:100%" /></a>
 	{% if caption != blank %}<figcaption>{{ caption }}</figcaption>{% endif %}
 </figure>

data/_includes/post_index.html

@@ -1,22 +1,38 @@
 
-{% assign title=(include.title | default: site.index.title)%}
+{% assign title=include.title %}
 
-{% if title == blank %}
-	<h1>{{ include.posts | size }} blogs since {{ include.posts | sort: 'date' | map: 'date' | compact | first | date: '%Y' }}</h1>
-{% else if %}
+{% if title != blank %}
 	<h1>{{ title }}</h1>
+{% else %}
+	<h1>{{ include.posts | size }} blogs since {{ include.posts | sort: 'date' | map: 'date' | compact | first | date: '%Y' }}</h1>
 {% endif %}
 
-{% if site.index.intro != blank %}
-	{{ site.index.intro }}
-{% endif %}
-
-{% if site.index.subtitle != blank %}
-	<h2>{{ site.index.subtitle }}</h2>
-{% endif %}
 
 {% assign prev_year = 'first run' %}
 {% assign sorted_posts = include.posts | sort: "date" | reverse %}
+
+{% assign pinned_posts=sorted_posts | where: "pinned", 1 %}
+
+{% if pinned_posts.size > 0 %}
+	<ul class="index">
+	{% for post in pinned_posts %}
+		<li>
+			<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+			<span class="posted">{{ post.date | date: "%b %-d, %Y" }}</span>
+			{% if jekyll.environment == "local" %}
+				{% if post.collection == 'private' %}
+					<span class="badge collection {{ post.collection }}">{{ post.collection }}</span>
+				{% endif %}
+				{% if post.draft %}
+					<span class="badge draft">draft</span>
+				{% endif %}
+			{% endif %}
+		</li>
+	{% endfor %}
+	</ul>
+{% endif %}
+
+
 {% for post in sorted_posts %}
 
 	{% assign current_year = post.date | date: "%Y" %}

data/_layouts/gallery.html

@@ -0,0 +1,10 @@
+---
+layout: base
+---
+
+
+<main>
+	<article>
+		{{ content }}
+	</article>
+</main>

data/_sass/_config.scss

@@ -41,7 +41,7 @@ $serif: "Noto Serif", Times, serif;
 
 $header-serif: "Bree Serif",$serif;
 $body-serif: "Noto Serif", "Bree Serif",$serif;
-$header-color: darken($body-background-color,80%);
+$header-color: darken($body-background-color,90%);
 $header-link-color: darken($body-background-color,70%);
 
 $image-caption-serif: "Fira Sans Extra Condensed", "Neucha", $sans-serif;

data/_sass/_isabelline.scss

@@ -129,12 +129,15 @@ header {
 		font-size: 80%;
 		font-weight: normal;
 		margin: .5em 0;
-		float: right;
+		float: left;
 		
 		// site menu shows posts in "global" category
 		ul {
 			padding: 0;
 			margin: 0;
+			li:first-child {
+				padding-left: 0;
+			}
 			li {
 				color: $header-link-color;
 				list-style: none;
@@ -156,15 +159,6 @@ header {
 	}
 }
 
-// div.column {
-// 	width: 30%;
-// 	float: left;
-// 	padding: .5rem;
-// 	margin: .5rem;
-// 	border: 1px solid #ccc;
-// }
-
-// link styling
 a {
 	color: darken($link-color,15%);
 	&:hover, &:active, &:visited {
@@ -190,7 +184,8 @@ main {
 
 	// figure is a composition of the image and caption
 	figure {
-		margin: 1em 0;
+		margin: 1em auto;
+		width: 80%;
 		figcaption {
 			//font-size: .8em;
 			text-align: center;
@@ -200,11 +195,29 @@ main {
 		}
 
 		img {
-			border-radius: 4px;
+			border-radius: 6px;
 			// width: 100%;
 		}
 	}
 
+	p img {
+		border-radius: 6px;
+		width: 100%;
+	}
+
+	p img + em {
+		font-family: $image-caption-serif;
+		color: $image-caption-color;
+		font-style: normal;
+		text-align: center;
+		display: block;
+		width: 100%;
+	}
+
+	figure.frame img {
+		border: 1px solid $header-color;
+	}
+
 	// for slideshows show the first figure, hide rest
 	div.slideshow figure {
 		display: none;
@@ -213,6 +226,106 @@ main {
 		}
 	}
 
+	div.gallery {
+		width: 100%;
+		float: left;
+		margin-bottom: 1em;
+		
+		img {
+			width: 100%;
+			
+			// height: 200px;
+			// float: left;
+		}
+
+		div.images {
+			position: relative;
+			height: 500px;
+			overflow: hidden;
+
+			will-change: height;
+			transition: 300ms ease;
+
+			img.transition {
+				will-change: left;
+				transition: 300ms ease;
+			}
+
+			img.left   { left: -100% !important; }
+			img.right  { left:  100% !important; }
+			img.center { left:    0  !important; }
+
+			img {
+				cursor: pointer;
+				border-radius: 6px;
+				
+				position: absolute;
+				top: 0;
+				left: 100%;
+			}
+			
+			img:first-child {
+				left: 0;
+			}
+		}
+
+
+		nav {
+			width: 100%;
+			text-align: center;
+			i {
+				cursor: pointer;
+				margin: .5rem;
+				display: inline-block;
+				width: 1rem;
+				height: 1rem;
+				border-radius: .5rem;
+				transition: all 300ms ease;
+
+				background-color: hsl($hue,10,80);
+				&.selected {
+					background-color: hsl($hue,50,40);
+				}
+			}
+
+			// slightly modified version of
+			// https://css-tricks.com/making-pure-css-playpause-button/
+			.play {
+				float: left;
+
+				label {
+					margin: .5rem;
+					display: inline-block;
+					box-sizing: border-box;
+					width: 0;
+					height: 1rem;
+					cursor: pointer;
+					border-color: transparent transparent transparent hsl($hue,50,40); // same color as i.selected
+
+					transition: 300ms all ease;
+					will-change: border-width;
+
+					// paused state
+					border-style: double;
+					border-width: 0 0 0 1rem;
+				}
+				input[type='checkbox'] {
+					display: none;
+					&:checked + label {
+						border-style: solid;
+						border-width: .5rem 0 .5rem 1rem;
+					}
+				}
+			}
+		}
+
+
+	}
+
+	div.gallery + p {
+		clear: both;
+	}
+
 	// drop caps
 	// TODO: this needs work
 	@if $drop-caps {
@@ -263,14 +376,14 @@ main {
 			padding-left: 0;
 			li {
 				list-style: none;
-				padding-left: 1em;
-				padding-bottom: .2em;
+				padding-left: 1.2em;
+				padding-bottom: .3em;
 				margin-left: 0;
 				
 				// mdash for unordered list items
 				&::before {
 					content: "\2014";
-					margin-left: -1em;
+					margin-left: -1.2em;
 					margin-right: .2em;
 				}
 

data/assets/blog/getting-started/undraw_browsing_online_sr8c.svg

@@ -0,0 +1 @@
+<svg id="b34a7ed3-b085-4444-bb69-8e8541180262" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="744.61498" height="542.26178" viewBox="0 0 744.61498 542.26178"><path d="M932.50251,629.9509a322.61072,322.61072,0,0,1-15.07,89.18c-.21.67-.43,1.33-.65,2h-56.24c.06-.6.12-1.27.18-2,3.75-43.11,25.37-305.49-.48-350.36C862.50251,372.41086,936.86249,492.97086,932.50251,629.9509Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><path d="M928.28254,719.13089c-.47.67-.96,1.34-1.46,2h-42.19c.32-.57.69-1.24,1.12-2,6.97-12.58,27.6-50.19,46.75-89.18,20.58-41.9,39.46-85.39,37.87-101.13C970.86249,532.37088,985.10248,640.59085,928.28254,719.13089Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><path d="M283.04472,675.92378a158.394,158.394,0,0,0,7.399,43.78516c.10309.32894.21112.653.31912.98195H318.3753c-.02945-.29461-.05894-.62355-.0884-.98195-1.84115-21.166-12.456-149.988.23569-172.01807C317.413,549.478,280.90408,608.67,283.04472,675.92378Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><path d="M285.11662,719.70894c.23078.32894.47135.65789.71684.98195H306.5477c-.15712-.27986-.33877-.60881-.54989-.98195-3.42211-6.17648-13.5509-24.64205-22.95309-43.78516-10.10427-20.57187-19.37389-41.92437-18.59322-49.65232C264.21092,628.01442,257.21944,681.14773,285.11662,719.70894Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><path d="M811.27948,721.05261H523.01163a5.34456,5.34456,0,0,1-5.33828-5.33828V644.20739a5.34457,5.34457,0,0,1,5.33828-5.33828H811.27948a5.34457,5.34457,0,0,1,5.33828,5.33828v71.50694A5.34456,5.34456,0,0,1,811.27948,721.05261ZM523.01163,641.00442a3.20647,3.20647,0,0,0-3.203,3.203v71.50694a3.20647,3.20647,0,0,0,3.203,3.203H811.27948a3.20647,3.20647,0,0,0,3.203-3.203V644.20739a3.20647,3.20647,0,0,0-3.203-3.203Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><circle cx="340.11008" cy="498.34802" r="21.74535" fill="#e6e6e6"/><path d="M618.024,662.72023a3.62423,3.62423,0,0,0,0,7.24845H788.88027a3.62422,3.62422,0,1,0,0-7.24845Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><path d="M618.024,684.46558a3.62422,3.62422,0,0,0,0,7.24844h73.52a3.62422,3.62422,0,1,0,0-7.24844Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><path d="M883.27948,615.05261H595.01163a5.34456,5.34456,0,0,1-5.33828-5.33828V538.20739a5.34457,5.34457,0,0,1,5.33828-5.33828H883.27948a5.34457,5.34457,0,0,1,5.33828,5.33828v71.50694A5.34456,5.34456,0,0,1,883.27948,615.05261ZM595.01163,535.00442a3.20647,3.20647,0,0,0-3.203,3.203v71.50694a3.20647,3.20647,0,0,0,3.203,3.203H883.27948a3.20647,3.20647,0,0,0,3.203-3.203V538.20739a3.20647,3.20647,0,0,0-3.203-3.203Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><circle cx="412.11008" cy="392.34802" r="21.74535" fill="#e6e6e6"/><path d="M690.024,556.72023a3.62423,3.62423,0,0,0,0,7.24845H860.88027a3.62422,3.62422,0,1,0,0-7.24845Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><path d="M690.024,578.46558a3.62422,3.62422,0,0,0,0,7.24844h73.52a3.62422,3.62422,0,1,0,0-7.24844Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><path d="M827.27948,436.05261H539.01163a5.34456,5.34456,0,0,1-5.33828-5.33828V184.20739a5.34457,5.34457,0,0,1,5.33828-5.33828H827.27948a5.34457,5.34457,0,0,1,5.33828,5.33828V430.71433A5.34456,5.34456,0,0,1,827.27948,436.05261ZM539.01163,181.00442a3.20647,3.20647,0,0,0-3.203,3.203V430.71433a3.20647,3.20647,0,0,0,3.203,3.203H827.27948a3.20647,3.20647,0,0,0,3.203-3.203V184.20739a3.20647,3.20647,0,0,0-3.203-3.203Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><circle cx="356.11008" cy="213.34802" r="21.74535" fill="#e6e6e6"/><path d="M634.024,377.72023a3.62422,3.62422,0,0,0,0,7.24845H804.88027a3.62422,3.62422,0,1,0,0-7.24845Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><path d="M634.024,399.46558a3.62422,3.62422,0,0,0,0,7.24844h73.52a3.62422,3.62422,0,1,0,0-7.24844Z" transform="translate(-227.69251 -178.86911)" fill="#e6e6e6"/><path d="M355.039,461.66244l3.1777,25.30059a13.30065,13.30065,0,0,0,18.60319,10.49486l0,0a13.30065,13.30065,0,0,0,6.2482-18.56187l-13.36334-24.29862-4.3696-104.46964-28.259,6.59024Z" transform="translate(-227.69251 -178.86911)" fill="#ffb8b8"/><polygon points="233.19 517.322 211.19 519.322 198.19 338.322 197.69 384.822 149.69 512.822 130.69 497.822 162.19 370.322 147.19 299.322 245.19 299.322 233.19 517.322" fill="#2f2e41"/><path d="M482.69846,720.6521l-40.89749-.99874a11.082,11.082,0,0,1-11.75527-12.79412l1.676-10.53039a9.01161,9.01161,0,0,1,8.25674-7.57218h0c6.98,7.22421,14.2,6.15724,21.61179-1.54559l16.85941,17.103,2.51765-.33842a8.38681,8.38681,0,0,1,9.17284,5.97815h0A8.38682,8.38682,0,0,1,482.69846,720.6521Z" transform="translate(-227.69251 -178.86911)" fill="#2f2e41"/><path d="M389.54319,719.29961l-41.0141-15.4744a11.84639,11.84639,0,0,1-5.64946-17.693l6.35939-9.45957a9.63322,9.63322,0,0,1,11.41191-3.6322h0c3.522,10.14429,11.00406,12.35517,21.65525,8.21643l10.4609,20.28718,2.59391.80357a8.96533,8.96533,0,0,1,6.20894,9.92156v0A8.96534,8.96534,0,0,1,389.54319,719.29961Z" transform="translate(-227.69251 -178.86911)" fill="#2f2e41"/><circle cx="198.19" cy="47.32178" r="26" fill="#ffb8b8"/><path d="M428.88251,274.19089l-45-1c12.36493-13.68021,19.87616-27.95128,21-43h24Z" transform="translate(-227.69251 -178.86911)" fill="#ffb8b8"/><path d="M475.88251,492.19089c-42.47778-10.89874-82.33441-18.24478-107-5,4.31966-45.41129-.67687-103.379-15.49915-163.96512-4.81437-19.67875-1.549-37.411,15.99915-47.53488l23.5-13.5,36,1,18.78311,10.39155a47.16015,47.16015,0,0,1,25.25368,50.97711C462.82727,377.66693,468.28069,434.98523,475.88251,492.19089Z" transform="translate(-227.69251 -178.86911)" fill="#3f3d56"/><path d="M484.88251,460.19089l3.52391,25.25469a13.30065,13.30065,0,0,1-15.22634,14.9793h0A13.30067,13.30067,0,0,1,462.31151,484.132l6.571-26.94111-23-102,29-1Z" transform="translate(-227.69251 -178.86911)" fill="#ffb8b8"/><path d="M378.88251,365.19089l-47-3c3.67218-46.2356,14.122-71.51129,30-80l17,20Z" transform="translate(-227.69251 -178.86911)" fill="#3f3d56"/><path d="M443.88251,217.19089c-9.16009-2.93048-13.91406,15.85229-27.5,27.5-3.08831,2.64775-10.794-7.67615-13.5-4.5l-4.37524-13.31663c-5.191-15.79959,4.1631-33.02343,20.42725-36.495q.64759-.13823,1.30658-.24816h0a29.15735,29.15735,0,0,1,32.87228,20.91065,3.85886,3.85886,0,0,1-2.9263,4.75332Z" transform="translate(-227.69251 -178.86911)" fill="#2f2e41"/><polygon points="257.19 177.322 213.19 187.322 211.19 115.322 236.19 116.322 257.19 177.322" fill="#3f3d56"/><rect y="540.26178" width="738.22003" height="2" fill="#3f3d56"/><path d="M895.76841,350.074H607.50056a5.34457,5.34457,0,0,1-5.33829-5.33828V218.22876a5.34457,5.34457,0,0,1,5.33829-5.33829H895.76841a5.34457,5.34457,0,0,1,5.33828,5.33829V344.7357A5.34457,5.34457,0,0,1,895.76841,350.074Z" transform="translate(-227.69251 -178.86911)" fill="#f50057"/><path d="M666.20634,256.98533a3.62423,3.62423,0,1,0,0,7.24845H837.06263a3.62422,3.62422,0,0,0,0-7.24845Z" transform="translate(-227.69251 -178.86911)" fill="#fff"/><path d="M666.20634,277.98533a3.62423,3.62423,0,1,0,0,7.24845H837.06263a3.62422,3.62422,0,0,0,0-7.24845Z" transform="translate(-227.69251 -178.86911)" fill="#fff"/><path d="M666.20634,298.73068a3.62422,3.62422,0,1,0,0,7.24844h73.52a3.62422,3.62422,0,1,0,0-7.24844Z" transform="translate(-227.69251 -178.86911)" fill="#fff"/></svg>

data/assets/js/gallery.js

@@ -0,0 +1,161 @@
+(function () {
+	// "hydrate" div.gallery with play/pause and nav behaviors
+	var process_gallery = function (g) {
+		var
+			// milliseconds to wait before switch to next slide
+			NEXT_SLIDE_TIMEOUT = 3000;
+
+		var 
+			images_container = g.querySelector('.images'),
+
+			// images in this gallery
+			images = g.querySelectorAll('.images img'),
+
+			// container for nav buttons
+			gallery_nav = g.querySelector('nav'),
+			
+			// clickable buttons, one per image
+			// computed below
+			navs = [],
+
+			// index of the currently selected image
+			selected_index = 0,
+
+			// play control consists of a label and a checkbox
+			// defer computing because nav innerHTML gets clobbered
+			play_checkbox,
+
+			// handle to setInterval
+			play_interval;
+
+/*
+ +--------+--------+--------+
+ | image1 | image2 | image3 |
+ |        |selected|        |
+ +--------+--------+--------+
+ */
+
+ 		var adjust_height = function (index) {
+ 			images_container.style.height = images[index].offsetHeight + 'px';
+ 		}
+
+		// show image at index
+		// update nav controls accordingly
+		var select_image = function (index) {
+			if (selected_index === index) return;
+
+			var slide = function () {
+				images[selected_index].removeEventListener('transitionend', slide);
+
+				images[selected_index].classList.remove('transition');
+				images[index].classList.remove('transition');
+
+				navs[index].classList.add('selected');
+				navs[selected_index].classList.remove('selected');
+				
+				selected_index = index;
+			}
+
+			images[selected_index].addEventListener('transitionend', slide);
+
+			if (index < selected_index) {
+				setTimeout(function () {
+					images[index].classList.remove('right');
+					images[index].classList.add('left');
+
+					adjust_height(index);
+
+					setTimeout(function () {
+						images[index].classList.add('transition');
+						images[selected_index].classList.add('transition');
+						images[index].classList.remove('left');
+						images[index].classList.add('center');
+						images[selected_index].classList.add('right');
+						images[selected_index].classList.remove('center');
+					},1)
+				},1)
+
+			} else {
+				setTimeout(function () {
+					images[index].classList.remove('left');
+					images[index].classList.add('right');
+
+					adjust_height(index);
+
+					setTimeout(function () {
+						images[index].classList.add('transition');
+						images[selected_index].classList.add('transition');
+						images[index].classList.remove('right');
+						images[index].classList.add('center');
+						images[selected_index].classList.add('left');
+						images[selected_index].classList.remove('center');
+					},1);
+				},1);
+
+			}
+		}
+
+		// show next image
+		var next_image = function () {
+			if (selected_index >= images.length-1) {
+				select_image(0);
+			} else {
+				select_image(selected_index+1);
+			}
+		}
+
+		// handler for nav buttons
+		// selects an image corresponding to the clicked nav button
+		var nav_to_image = function () {
+			select_image(Array.from(navs).indexOf(this));
+		}
+
+		// play/pause slideshow
+		var toggle_play = function () {
+			if (play_checkbox.checked===true) {
+				clearInterval(play_interval);
+			} else {
+				play_interval = setInterval(next_image, NEXT_SLIDE_TIMEOUT);
+			}
+		}
+
+		// build nav bullets
+		var navHtml = '';
+		for (var i=0; i<images.length; ++i) {
+			var image = images[i]
+			image.addEventListener('click', next_image)
+			navHtml += '<i class="' + (i===0? 'selected' : '') + '" data-target="' + image.id + '"></i>'
+		}
+		gallery_nav.innerHTML += navHtml;
+
+		// attach nav bullet listeners
+		navs = gallery_nav.querySelectorAll('i');
+		for (var i=0; i<navs.length; ++i) {
+			var nav = navs[i];
+			nav.addEventListener('click', nav_to_image)
+		}
+
+		// play button
+		play_checkbox = g.querySelector('.play input[type=checkbox]');
+		play_checkbox.addEventListener('change', toggle_play);
+
+		// resize image container when initial image loads
+		if (images[selected_index].complete) {
+			adjust_height(selected_index);
+		} else {
+			images[selected_index].addEventListener('load', function () {
+				adjust_height(selected_index);
+			});
+			images[selected_index].addEventListener('error', function() {
+				console.warn('error loading image', arguments, images[selected_index].src, images[selected_index])
+			});
+		}
+	}
+
+	var galleries = document.getElementsByClassName('gallery');
+
+	for (var i=0; i<galleries.length; ++i) {
+		var g = galleries[i];
+		process_gallery(g);
+	}
+})();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-isabelline
 version: !ruby/object:Gem::Version
-  version: 0.1.18
+  version: 0.1.23
 platform: ruby
 authors:
 - Rouslan Zenetl
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-06-03 00:00:00.000000000 Z
+date: 2020-09-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -36,14 +36,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.0.2
+        version: 2.1.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.0.2
+        version: 2.1.0
 description: 
 email:
 - isabelline@rzen.dev
@@ -58,6 +58,7 @@ files:
 - _includes/byline.html
 - _includes/disqus.html
 - _includes/footer.html
+- _includes/gallery.html
 - _includes/google_analytics.html
 - _includes/head-meta.html
 - _includes/head.html
@@ -66,6 +67,7 @@ files:
 - _includes/post_index.html
 - _layouts/.DS_Store
 - _layouts/base.html
+- _layouts/gallery.html
 - _layouts/page.html
 - _layouts/post.html
 - _layouts/tags.html
@@ -76,7 +78,17 @@ files:
 - _sass/_snackbar.scss
 - _sass/_syntax.scss
 - assets/.DS_Store
-- assets/blog/example1/Quarter_Horse_Buckskin.jpg
+- assets/blog/example/Quarter_Horse_Buckskin.jpg
+- assets/blog/example/gallery/1/lanius_isabellinus1.jpg
+- assets/blog/example/gallery/Lanius_isabellinus1.jpg
+- assets/blog/example/gallery/dusan-smetana-ah7KHxYg6Ow-unsplash.jpg
+- assets/blog/example/gallery/jay-ruzesky-h13Y8vyIXNU-unsplash.jpg
+- assets/blog/example/gallery/maurits-bausenhart-OkYjLpB2gzA-unsplash.jpg
+- assets/blog/example/gallery/sneaky-elbow-h00rqvO5A-M-unsplash.jpg
+- assets/blog/example/gallery2/Quarter_Horse_Buckskin.jpg
+- assets/blog/example/gallery2/dusan-smetana-ah7KHxYg6Ow-unsplash.jpg
+- assets/blog/example/gallery2/jay-ruzesky-h13Y8vyIXNU-unsplash.jpg
+- assets/blog/getting-started/undraw_browsing_online_sr8c.svg
 - assets/css/style.scss
 - assets/favicon/README.md
 - assets/favicon/android-chrome-192x192.png
@@ -105,10 +117,11 @@ files:
 - assets/fonts/Noto Serif/ga6Iaw1J5X9T9RW6j9bNfFoWaDq8fMVxMw.woff2
 - assets/fonts/Noto Serif/ga6Iaw1J5X9T9RW6j9bNfFsWaDq8fMVxMw.woff2
 - assets/js/clipboard.js
+- assets/js/gallery.js
 - assets/js/slides.js
 - assets/js/snackbar.js
 - index.html
-homepage: https://github.com/rzen/jekyll-theme-isabelline
+homepage: https://git.rzen.dev/rzen/jekyll-theme-isabelline
 licenses:
 - MIT
 metadata:
@@ -128,7 +141,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.6
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: Simple clean mobile-friendly theme for long form note taking. Works for blogging