jekyll-theme-isabelline 0.1.23 → 0.1.27

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 54f8c8361f0dbdec8be508ff7a42a84c080888817d17bd50522a11d94291391c
-  data.tar.gz: a3568115fb01e50122908ca1928c7510a14fa5cade8c0aee347dfb28220772ae
+  metadata.gz: f970b12d01b718712a62d350a4f2e11b98ef80342af746052c95730e40514bd6
+  data.tar.gz: ea919d54dafea08f71509f9cb2803f5f0c03e02252ad893efb6d23cd4cf2b9cb
 SHA512:
-  metadata.gz: 646ec113bc9e246c17ed30c6ebfa42039ca32da83e4a64ef6c4c705ea2c84e2e23ec1e7d5879f136e78d258bd226bad26601cd2194c492f2b2f1288b7dca792d
-  data.tar.gz: b545cc2d12f0faa42e24efee3dc0d86f1fbf2a480222f437df3c95ac3139ee1d03b4ee20b169fcc3eb337585b89d90a2d224df909db06a6b56d345503aee1bf1
+  metadata.gz: 928e547b5ecb52d3dee916041083a21d74d0ea765c21553f0d6ef0db7599781ab6327149496be2c979336c4412d8b6f661199a3550b71044700daf95338a289b
+  data.tar.gz: c68cedfb5c1107e9b41744eacff7f65253b7ee681611e37840c2436b8dc3d2567600218c40d6e9823ad72ac489a1c8a8ee8dc352b7d84c779a3a6e71a7dd1c78

data/_includes/gallery.html

@@ -2,26 +2,78 @@
 
 {% 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: "," %}
+{% assign valid_image_extensions = ".jpg,.jpeg,.png,.gif" | split: "," %}
+{% assign valid_image_sizes = "-300,-700" | split: "," %}
+
+{% assign sorted_static_files = site.static_files | map: "path" | sort | join: "|" | append: gallery_prefix | append: "/dummy-700.jpg" | split: "|" %}
+
+{% assign img_sizes = "(max-width: 500px) 300px, 700px" %}
+
+{% assign prev_same_image_path = "-" %}
 
 <div class="gallery" id="gallery-{{ gallery_name }}">
 	{% assign image_index = 0 %}
 	{% assign gallery_nav = "" %}
+	{% assign image_srcset = "" %}
 	<div class="images">
 		{% for image_path in sorted_static_files %}
-			{% assign image_ext = image_path | split: "." | last %}
+			{% assign image_ext = image_path | split: "." | last | prepend: "." %}
 			{% 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 }}" />
+
+					{% assign same_image_path = "" %}
+					{% assign srcset = "" %}
+
+					{% for dash_size in valid_image_sizes %}
+						{% if image_path contains dash_size %}
+							{% assign same_image_path = image_path | split: dash_size | first %}
+
+							{% assign size = dash_size | remove: "-" %}
+							{% assign srcset = image_path | prepend: site.baseurl | append: " " | append: size | append: "w" %}
+							<!-- <li>srcset1={{ srcset }}</li> -->
+						{% endif %}
+						<!-- <li>srcset2={{ srcset }}</li> -->
+					{% endfor %}
+					
+
+					{% if same_image_path == blank %}
+						{% assign src = image_path %}
+					{% endif %}
+
+					{% if srcset != blank %}
+						<!-- <li>srcset3={{ srcset }}</li> -->
+						<!-- <li>prev_same_image_path={{ prev_same_image_path }}</li> -->
+						<!-- <li>same_image_path={{ same_image_path }}</li> -->
+						{% if same_image_path == prev_same_image_path && true %}
+							{% if image_srcset != blank %}
+								{% assign image_srcset = image_srcset | append: "," %}
+							{% endif %}
+							{% assign image_srcset = image_srcset | append: srcset %}
+						{% else %}
+							{% if prev_same_image_path == "-" %}
+								{% assign prev_same_image_path = same_image_path %}
+								{% assign image_srcset = srcset %}
+							{% else %}
+								{% assign image_index = image_index | plus: 1 %}
+								<img id="{{ gallery_name}}-{{ image_index }}" srcset="{{ image_srcset }}" sizes="{{ img_sizes }}" src="{{ site.baseurl }}{{ src }}" />
+								{% assign prev_same_image_path = same_image_path %}
+								{% assign image_srcset = "" %}
+
+							{% endif %}
+						{% endif %}
+					{% endif %}
 				{% endif %}
 			{% endif %}
 		{% endfor %}
 	</div>
 	<nav>
-		<div class="play">
+<!-- 		<div class="preview">
+			<div class="vg"></div>
+			<div class="hg"></div>
+		</div>
+ -->		<div class="play">
 			<input type="checkbox" checked="false" id="{{ gallery_name }}-play" />
 			<label for="{{ gallery_name }}-play"></label>
 		</div>

data/_includes/image.html

@@ -11,8 +11,7 @@
 	{% capture alt %}alt="{{ alt }}" title="{{ alt }}"{% endcapture %}
 {% endif %}
 
-{% assign frame=include.frame %}
-{% if frame == blank %}
+{% if include.frame == blank %}
 	{% assign frame=true %}
 {% endif %}
 

data/_includes/post_index.html

@@ -17,7 +17,7 @@
 	<ul class="index">
 	{% for post in pinned_posts %}
 		<li>
-			<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+			<a href="{{ post.url | relative_url }}">{{ post.title | markdownify | remove: '<p>' | remove: '</p>' }}</a>
 			<span class="posted">{{ post.date | date: "%b %-d, %Y" }}</span>
 			{% if jekyll.environment == "local" %}
 				{% if post.collection == 'private' %}
@@ -47,7 +47,7 @@
 	{% endif %}
 
 	<li>
-		<a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+		<a href="{{ site.baseurl }}{{ post.url }}">{{ post.title | markdownify | remove: '<p>' | remove: '</p>' }}</a>
 		<span class="posted">{{ post.date | date: "%b %-d" }}</span>
 		{% if jekyll.environment == "local" %}
 			{% if post.collection == 'private' %}

data/_sass/_config.scss

@@ -44,7 +44,8 @@ $body-serif: "Noto Serif", "Bree Serif",$serif;
 $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;
+$image-caption-serif: "Noto Serif", "Bree Serif",$serif;
+// $image-caption-serif: "Fira Sans Extra Condensed", "Neucha", $sans-serif;
 $image-caption-color: $body-color;
 
 $main-link-color: darken($body-background-color,80%);

data/_sass/_isabelline.scss

@@ -255,6 +255,12 @@ main {
 			img.right  { left:  100% !important; }
 			img.center { left:    0  !important; }
 
+			img.thumbnail {
+				margin: 10px;
+				float: left;
+				position: static;
+			}
+
 			img {
 				cursor: pointer;
 				border-radius: 6px;
@@ -269,7 +275,6 @@ main {
 			}
 		}
 
-
 		nav {
 			width: 100%;
 			text-align: center;
@@ -280,7 +285,8 @@ main {
 				width: 1rem;
 				height: 1rem;
 				border-radius: .5rem;
-				transition: all 300ms ease;
+				transition: 300ms ease;
+				will-change: background-color;
 
 				background-color: hsl($hue,10,80);
 				&.selected {
@@ -317,9 +323,33 @@ main {
 					}
 				}
 			}
-		}
-
 
+			.preview {
+				position: relative;
+				cursor: pointer;
+				float: right;
+				margin: .5rem;
+				width: 14px;
+				height: 14px;
+				background-color: hsl($hue,50,40);
+				.vg, .hg {
+					border: 1px solid $body-background-color;
+					position: absolute;
+				}
+				.vg {
+					top: -1px;
+					left:4px;
+					width: 4px;
+					height: 100%;
+				}
+				.hg {
+					left: -1px;
+					top:4px;
+					height: 4px;
+					width: 100%;
+				}
+			}
+		}
 	}
 
 	div.gallery + p {

data/assets/js/gallery.js

@@ -1,11 +1,13 @@
 (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;
+			NEXT_SLIDE_TIMEOUT = 5000;
 
 		var 
+			// will be resized to the height of currently selected image
 			images_container = g.querySelector('.images'),
 
 			// images in this gallery
@@ -14,6 +16,10 @@
 			// container for nav buttons
 			gallery_nav = g.querySelector('nav'),
 			
+			// show all images
+			// computed below
+			preview_nav,
+
 			// clickable buttons, one per image
 			// computed below
 			navs = [],
@@ -26,7 +32,9 @@
 			play_checkbox,
 
 			// handle to setInterval
-			play_interval;
+			play_interval,
+
+			play_suspended = false;
 
 /*
  +--------+--------+--------+
@@ -35,28 +43,84 @@
  +--------+--------+--------+
  */
 
+		var suspended = function () {
+			return play_suspended || document.hidden || document.msHidden || document.webkitHidden;
+		}
+
  		var adjust_height = function (index) {
  			images_container.style.height = images[index].offsetHeight + 'px';
  		}
 
+/*
+   +----------------------------------------+
+   | +----------+ +----------+ +----------+ |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | +----------+ +----------+ +----------+ |
+   |                                        |
+   | +----------+ +----------+ +----------+ |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | +----------+ +----------+ +----------+ |
+   |                                        |
+   | +----------+ +----------+ +----------+ |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | +----------+ +----------+ +----------+ |
+   |                                        |
+   | +----------+ +----------+              |
+   | |          | |          |              |
+   | |          | |          |              |
+   | |          | |          |              |
+   | |          | |          |              |
+   | |          | |          |              |
+   | +----------+ +----------+              |
+   +----------------------------------------+
+ */
+
+
+ 		var show_preview = function () {
+ 			var thumb_size = (images_container.offsetWidth - 6*10) / 3;
+ 			for (var i=0; i<images.length; ++i) {
+ 				var image = images[i];
+ 				if (image.offsetHeight > image.offsetWidth) {
+ 					console.log('showing tall preview', thumb_size, image.offsetWidth, 'x', image.offsetHeight)
+ 					image.style.width = thumb_size + 'px';
+ 				} else {
+ 					console.log('showing wide preview', thumb_size, image.offsetWidth, 'x', image.offsetHeight)
+ 					image.style.height = thumb_size + 'px';
+ 				}
+ 				image.classList.add('thumbnail');
+ 			}
+ 		}
+
 		// 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 (suspended()) return;
+			images[selected_index].addEventListener('transitionend', slide, {once: true});
+
+			navs[index].classList.add('selected');
 
 			if (index < selected_index) {
 				setTimeout(function () {
@@ -97,6 +161,7 @@
 
 		// show next image
 		var next_image = function () {
+			if (suspended()) return;
 			if (selected_index >= images.length-1) {
 				select_image(0);
 			} else {
@@ -139,6 +204,14 @@
 		play_checkbox = g.querySelector('.play input[type=checkbox]');
 		play_checkbox.addEventListener('change', toggle_play);
 
+		// g.querySelector('.preview').addEventListener('click', function () {
+		// 	show_preview();
+		// });
+
+		window.addEventListener('resize', function () {
+			adjust_height(selected_index);
+		});
+
 		// resize image container when initial image loads
 		if (images[selected_index].complete) {
 			adjust_height(selected_index);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-isabelline
 version: !ruby/object:Gem::Version
-  version: 0.1.23
+  version: 0.1.27
 platform: ruby
 authors:
 - Rouslan Zenetl
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-10 00:00:00.000000000 Z
+date: 2022-02-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -141,7 +141,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.4
+rubygems_version: 3.2.2
 signing_key: 
 specification_version: 4
 summary: Simple clean mobile-friendly theme for long form note taking. Works for blogging