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 65f7a0d5c7b2ac5633b96e8167b5369aa5482ab0..ead162c50e54c7c24e2734cf15159e712b3baeec 100644 (file)
--- 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 07c91ef88c518ea5ab7e4e5d0f18c981022fcaa4..fc0efe3c713cc755c29f95beb49650d324a120c9 100644 (file)
--- 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; */