add gallery support. Fix max-width of wide iamges

yoonwaiyan · Sep 3, 2018 · 6c3b7ff · 6c3b7ff
1 parent c7efb30
commit 6c3b7ff
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 6 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/js/script.js b/assets/js/script.js
diff --git a/package.json b/package.json
@@ -2,9 +2,9 @@
   "name": "attila",
   "description": "Ghost Theme",
   "demo": "http://attila.zutrinken.com",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "engines": {
-    "ghost": ">=1.25.0"
+    "ghost": ">=2.1.0"
   },
   "license": "MIT",
   "screenshots": {

diff --git a/src/js/script.js b/src/js/script.js
@@ -91,6 +91,22 @@ jQuery(function($) {
 		}
 	});
 
+	/* ==========================================================================
+	   Gallery
+	   ========================================================================== */
+
+	function gallery() {
+		var images = document.querySelectorAll('.kg-gallery-image img');
+		images.forEach(function (image) {
+			var container = image.closest('.kg-gallery-image');
+			var width = image.attributes.width.value;
+			var height = image.attributes.height.value;
+			var ratio = width / height;
+			container.style.flex = ratio + ' 1 0%';
+		});
+	}
+	gallery();
+
 	/* ==========================================================================
 	   Style code blocks with highlight and numbered lines
 	   ========================================================================== */

diff --git a/src/sass/style.scss b/src/sass/style.scss
@@ -348,7 +348,7 @@ img[src$="#full"] {
   max-width: none !important;
 
   &.kg-width-wide {
-    max-width: 48em;
+    max-width: 48em !important;
     min-width: 100%;
     width: 75vw;
   }
@@ -379,6 +379,50 @@ img[src$="#full"] {
   }
 }
 
+.kg-gallery-card {
+  margin: 0 0 2em;
+  max-width: 48em !important;
+  min-width: 100%;
+  width: 75vw;
+
+  figcaption {
+    font-family: 'Fira Sans', sans-serif;
+    color: $color-blue-60;
+    text-align: center;
+    max-width: 32em;
+    margin: auto;
+  	font-size: 0.75em;
+  	line-height: 1.25em;
+  	padding: 0.667em 0;
+  }
+}
+
+.kg-gallery-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.kg-gallery-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.kg-gallery-image img {
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.kg-gallery-row:not(:first-of-type) {
+  margin: 0.75em 0 0 0;
+}
+
+.kg-gallery-image:not(:first-of-type) {
+  margin: 0 0 0 0.75em;
+}
+
 .kg-embed-card {
   margin: 0 0 2em;