From: Vladimír Vondruš <mosra@centrum.cz>
Date: Mon, 11 Sep 2017 14:08:39 +0000 (+0200)
Subject: css: make image grid inflated the same way as notes, blocks and frames.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=b795c44c574a191ea97c5b6d075802270c345ff2;p=blog.git

css: make image grid inflated the same way as notes, blocks and frames.

Looks better on mobile, as the images span the full width then.
Unfortunately this required a hack that I'm not really proud of.
---

diff --git a/css/m-components.css b/css/m-components.css
index 65f7a0d5..ead162c5 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -898,6 +898,29 @@ figure.m-figure.m-fullwidth img {
   margin: 0 -1rem 1rem -1rem;
 }
 
+#m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid {
+  margin: 0 -1.25rem 1rem -1.25rem;
+}
+@media screen and (min-width: 576px) {
+  #m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
+  #m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
+    margin: 0 -10% 1rem -10%;
+  }
+}
+@media screen and (min-width: 768px) {
+  #m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
+  #m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
+    margin: 0 -10% 1rem -10%;
+  }
+}
+@media screen and (min-width: 992px) {
+  #m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
+  #m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
+    margin: 0 -10% 1rem -10%;
+  }
+}
+
 /* Active sections in inflatable content affect left border of some components */
 #m-container-inflatable section:target > .m-note,
 #m-container-inflatable section:target > .m-frame,
diff --git a/css/m-grid.css b/css/m-grid.css
index 07c91ef8..fc0efe3c 100644
--- a/css/m-grid.css
+++ b/css/m-grid.css
@@ -414,4 +414,8 @@ body {
   }
 }
 
+#m-container-inflatable {
+  overflow-x: hidden;  /* needed by image grid :( */
+}
+
 /* kate: indent-width 2; */