add gallery feature (wip)

_blog/example-gallery.md

@@ -0,0 +1,10 @@
+---
+title: Photo gallery example
+layout: gallery
+date: 2019-07-24
+tags: example gallery deleteme
+---
+
+PATH: {{ page.path }}
+
+PATH: {{ page.id }}

_includes/gallery.html

@@ -0,0 +1,8 @@
+{% assign images = (include.images | split: "|") %}
+{% assign thumbnails = (include.thumbnails | split: "|") %}
+
+<div class="gallery">
+	{% for image in images %}
+		<a href="{{ include.dir }}/{{ image }}"><img src="{{ include.dir }}/{{ image }}" /></a>
+	{% endfor %}
+</div>

_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 %}
 
-<figure class="figure {% if include.caption %}caption{% endif %} {% if frame %}frame{% endif %}">
-	<a target="_blank" href="{{ imagePath }}"><img {{ src }} {{ alt }} width="100%" /></a>
+{% if include.width != blank %}
+	{% capture width %}style="width:{{ include.width }}"{% endcapture %}
+{% endif %}
+
+<figure {{width}} class="figure {% if include.caption %}caption{% endif %} {% if frame %}frame{% endif %}">
+	<a target="_blank" href="{{ imagePath }}"><img {{ src }} {{ alt }} /></a>
 	{% if caption != blank %}<figcaption>{{ caption }}</figcaption>{% endif %}
 </figure>

_layouts/gallery.html

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

_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;
@@ -190,7 +193,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;
@@ -205,6 +209,24 @@ main {
 		}
 	}
 
+	p img {
+		border-radius: 4px;
+		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 +235,23 @@ main {
 		}
 	}
 
+	div.gallery {
+		width: 100%;
+		float: left;
+		margin-bottom: 1em;
+		
+		img {
+			// width: 45%;
+			
+			height: 200px;
+			float: left;
+		}
+	}
+
+	div.gallery + p {
+		clear: both;
+	}
+
 	// drop caps
 	// TODO: this needs work
 	@if $drop-caps {
@@ -263,14 +302,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;
 				}