css: m-container-inflatable is now a class instead of ID.

Because I realized that having multiple inflatable containers (one after
another) is a completely valid use case. Sorry for breaking your stuff
with this.

diff --git a/css/m-components.css b/css/m-components.css
index f222e19b8370985bc6c25387e73516402b011043..fa46a39cdb9b9008f3951e4ebbdddfa3654d2d05 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -1119,55 +1119,55 @@ article section:target figure.m-code-figure {
 }
 
 /* Inflatable content */
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
-#m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
+.m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
+.m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
   margin-left: -1rem;
   margin-right: -1rem;
 }
 
 @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 {
+  .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-left: -10%;
     margin-right: -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 {
+  .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-left: -10%;
     margin-right: -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 {
+  .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-left: -10%;
     margin-right: -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,
-#m-container-inflatable section:target > .m-block,
-#m-container-inflatable section:target > pre.m-code,
-#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-#m-container-inflatable section:target section > .m-note,
-#m-container-inflatable section:target section > .m-frame,
-#m-container-inflatable section:target section > .m-block,
-#m-container-inflatable section:target section > pre.m-code,
-#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+.m-container-inflatable section:target > .m-note,
+.m-container-inflatable section:target > .m-frame,
+.m-container-inflatable section:target > .m-block,
+.m-container-inflatable section:target > pre.m-code,
+.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target section > .m-note,
+.m-container-inflatable section:target section > .m-frame,
+.m-container-inflatable section:target section > .m-block,
+.m-container-inflatable section:target section > pre.m-code,
+.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -1175,44 +1175,44 @@ article section:target figure.m-code-figure {
   border-bottom-left-radius: 0;
   padding-left: 0.75rem;
 }
-#m-container-inflatable section:target > figure.m-code-figure::before,
-#m-container-inflatable section:target section > figure.m-code-figure::before {
+.m-container-inflatable section:target > figure.m-code-figure::before,
+.m-container-inflatable section:target section > figure.m-code-figure::before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
-#m-container-inflatable section:target > pre.m-code,
-#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-#m-container-inflatable section:target section > pre.m-code,
-#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+.m-container-inflatable section:target > pre.m-code,
+.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target section > pre.m-code,
+.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
   border-color: var(--line-color);
 }
-#m-container-inflatable section:target > .m-note.m-default,
-#m-container-inflatable section:target section > .m-note.m-default {
+.m-container-inflatable section:target > .m-note.m-default,
+.m-container-inflatable section:target section > .m-note.m-default {
   border-left-color: var(--line-color);
 }
-#m-container-inflatable section:target > .m-note.m-primary,
-#m-container-inflatable section:target section > .m-note.m-primary {
+.m-container-inflatable section:target > .m-note.m-primary,
+.m-container-inflatable section:target section > .m-note.m-primary {
   border-left-color: var(--primary-color);
 }
-#m-container-inflatable section:target > .m-note.m-success,
-#m-container-inflatable section:target section > .m-note.m-success {
+.m-container-inflatable section:target > .m-note.m-success,
+.m-container-inflatable section:target section > .m-note.m-success {
   border-left-color: var(--success-color);
 }
-#m-container-inflatable section:target > .m-note.m-warning,
-#m-container-inflatable section:target section > .m-note.m-warning {
+.m-container-inflatable section:target > .m-note.m-warning,
+.m-container-inflatable section:target section > .m-note.m-warning {
   border-left-color: var(--warning-color);
 }
-#m-container-inflatable section:target > .m-note.m-danger,
-#m-container-inflatable section:target section > .m-note.m-danger {
+.m-container-inflatable section:target > .m-note.m-danger,
+.m-container-inflatable section:target section > .m-note.m-danger {
   border-left-color: var(--danger-color);
 }
-#m-container-inflatable section:target > .m-note.m-info,
-#m-container-inflatable section:target section > .m-note.m-info {
+.m-container-inflatable section:target > .m-note.m-info,
+.m-container-inflatable section:target section > .m-note.m-info {
   border-left-color: var(--info-color);
 }
-#m-container-inflatable section:target > .m-note.m-dim,
-#m-container-inflatable section:target section > .m-note.m-dim {
+.m-container-inflatable section:target > .m-note.m-dim,
+.m-container-inflatable section:target section > .m-note.m-dim {
   border-left-color: var(--dim-color);
 }
 

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 71edd6dd8c0a96c1a0a0454e72705eda78b63c38..59ee85e2080988d151dcaa2951480f51f6ec067f 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -148,7 +148,7 @@ body { margin: 0; }
 .m-pull-t-11 { right: calc(11 * 100% / 12); }
 @media screen and (min-width: 576px) {
   .m-container { width: 560px; }
-  #m-container-inflatable .m-col-s-10 .m-container-inflate {
+  .m-container-inflatable .m-col-s-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -228,7 +228,7 @@ body { margin: 0; }
 }
 @media screen and (min-width: 768px) {
   .m-container { width: 750px; }
-  #m-container-inflatable .m-col-m-10 .m-container-inflate {
+  .m-container-inflatable .m-col-m-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -308,7 +308,7 @@ body { margin: 0; }
 }
 @media screen and (min-width: 992px) {
   .m-container { width: 960px; }
-  #m-container-inflatable .m-col-l-10 .m-container-inflate {
+  .m-container-inflatable .m-col-l-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -1416,52 +1416,52 @@ article section:target figure.m-code-figure {
     border-right-width: 0;
   }
 }
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
-#m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
+.m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
+.m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
   margin-left: -1rem;
   margin-right: -1rem;
 }
 @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 {
+  .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-left: -10%;
     margin-right: -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 {
+  .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-left: -10%;
     margin-right: -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 {
+  .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-left: -10%;
     margin-right: -10%;
   }
 }
-#m-container-inflatable section:target > .m-note,
-#m-container-inflatable section:target > .m-frame,
-#m-container-inflatable section:target > .m-block,
-#m-container-inflatable section:target > pre.m-code,
-#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-#m-container-inflatable section:target section > .m-note,
-#m-container-inflatable section:target section > .m-frame,
-#m-container-inflatable section:target section > .m-block,
-#m-container-inflatable section:target section > pre.m-code,
-#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+.m-container-inflatable section:target > .m-note,
+.m-container-inflatable section:target > .m-frame,
+.m-container-inflatable section:target > .m-block,
+.m-container-inflatable section:target > pre.m-code,
+.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target section > .m-note,
+.m-container-inflatable section:target section > .m-frame,
+.m-container-inflatable section:target section > .m-block,
+.m-container-inflatable section:target section > pre.m-code,
+.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -1469,44 +1469,44 @@ article section:target figure.m-code-figure {
   border-bottom-left-radius: 0;
   padding-left: 0.75rem;
 }
-#m-container-inflatable section:target > figure.m-code-figure::before,
-#m-container-inflatable section:target section > figure.m-code-figure::before {
+.m-container-inflatable section:target > figure.m-code-figure::before,
+.m-container-inflatable section:target section > figure.m-code-figure::before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
-#m-container-inflatable section:target > pre.m-code,
-#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-#m-container-inflatable section:target section > pre.m-code,
-#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+.m-container-inflatable section:target > pre.m-code,
+.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target section > pre.m-code,
+.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
   border-color: #405363;
 }
-#m-container-inflatable section:target > .m-note.m-default,
-#m-container-inflatable section:target section > .m-note.m-default {
+.m-container-inflatable section:target > .m-note.m-default,
+.m-container-inflatable section:target section > .m-note.m-default {
   border-left-color: #405363;
 }
-#m-container-inflatable section:target > .m-note.m-primary,
-#m-container-inflatable section:target section > .m-note.m-primary {
+.m-container-inflatable section:target > .m-note.m-primary,
+.m-container-inflatable section:target section > .m-note.m-primary {
   border-left-color: #a5c9ea;
 }
-#m-container-inflatable section:target > .m-note.m-success,
-#m-container-inflatable section:target section > .m-note.m-success {
+.m-container-inflatable section:target > .m-note.m-success,
+.m-container-inflatable section:target section > .m-note.m-success {
   border-left-color: #3bd267;
 }
-#m-container-inflatable section:target > .m-note.m-warning,
-#m-container-inflatable section:target section > .m-note.m-warning {
+.m-container-inflatable section:target > .m-note.m-warning,
+.m-container-inflatable section:target section > .m-note.m-warning {
   border-left-color: #c7cf2f;
 }
-#m-container-inflatable section:target > .m-note.m-danger,
-#m-container-inflatable section:target section > .m-note.m-danger {
+.m-container-inflatable section:target > .m-note.m-danger,
+.m-container-inflatable section:target section > .m-note.m-danger {
   border-left-color: #cd3431;
 }
-#m-container-inflatable section:target > .m-note.m-info,
-#m-container-inflatable section:target section > .m-note.m-info {
+.m-container-inflatable section:target > .m-note.m-info,
+.m-container-inflatable section:target section > .m-note.m-info {
   border-left-color: #2f83cc;
 }
-#m-container-inflatable section:target > .m-note.m-dim,
-#m-container-inflatable section:target section > .m-note.m-dim {
+.m-container-inflatable section:target > .m-note.m-dim,
+.m-container-inflatable section:target section > .m-note.m-dim {
   border-left-color: #747474;
 }
 pre.m-code span.hll {

diff --git a/css/m-grid.css b/css/m-grid.css
index 35efbcafe181166cbc63d77d44c421e484fd9f17..d0a34cbf811a984d62606968156d148ce27f7d2c 100644 (file)
--- a/css/m-grid.css
+++ b/css/m-grid.css
@@ -161,7 +161,7 @@ body { margin: 0; }
 @media screen and (min-width: 576px) {
   .m-container { width: 560px; }
 
-  #m-container-inflatable .m-col-s-10 .m-container-inflate {
+  .m-container-inflatable .m-col-s-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -253,7 +253,7 @@ body { margin: 0; }
 @media screen and (min-width: 768px) {
   .m-container { width: 750px; }
 
-  #m-container-inflatable .m-col-m-10 .m-container-inflate {
+  .m-container-inflatable .m-col-m-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -345,7 +345,7 @@ body { margin: 0; }
 @media screen and (min-width: 992px) {
   .m-container { width: 960px; }
 
-  #m-container-inflatable .m-col-l-10 .m-container-inflate {
+  .m-container-inflatable .m-col-l-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 98e7ff04012d07586b43c894cad7b1b15428dd0b..1dff3603f8a3ee621d4a4737ff087c389d505929 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -148,7 +148,7 @@ body { margin: 0; }
 .m-pull-t-11 { right: calc(11 * 100% / 12); }
 @media screen and (min-width: 576px) {
   .m-container { width: 560px; }
-  #m-container-inflatable .m-col-s-10 .m-container-inflate {
+  .m-container-inflatable .m-col-s-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -228,7 +228,7 @@ body { margin: 0; }
 }
 @media screen and (min-width: 768px) {
   .m-container { width: 750px; }
-  #m-container-inflatable .m-col-m-10 .m-container-inflate {
+  .m-container-inflatable .m-col-m-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -308,7 +308,7 @@ body { margin: 0; }
 }
 @media screen and (min-width: 992px) {
   .m-container { width: 960px; }
-  #m-container-inflatable .m-col-l-10 .m-container-inflate {
+  .m-container-inflatable .m-col-l-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -1416,52 +1416,52 @@ article section:target figure.m-code-figure {
     border-right-width: 0;
   }
 }
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
-#m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
+.m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
+.m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
   margin-left: -1rem;
   margin-right: -1rem;
 }
 @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 {
+  .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-left: -10%;
     margin-right: -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 {
+  .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-left: -10%;
     margin-right: -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 {
+  .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-left: -10%;
     margin-right: -10%;
   }
 }
-#m-container-inflatable section:target > .m-note,
-#m-container-inflatable section:target > .m-frame,
-#m-container-inflatable section:target > .m-block,
-#m-container-inflatable section:target > pre.m-code,
-#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-#m-container-inflatable section:target section > .m-note,
-#m-container-inflatable section:target section > .m-frame,
-#m-container-inflatable section:target section > .m-block,
-#m-container-inflatable section:target section > pre.m-code,
-#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+.m-container-inflatable section:target > .m-note,
+.m-container-inflatable section:target > .m-frame,
+.m-container-inflatable section:target > .m-block,
+.m-container-inflatable section:target > pre.m-code,
+.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target section > .m-note,
+.m-container-inflatable section:target section > .m-frame,
+.m-container-inflatable section:target section > .m-block,
+.m-container-inflatable section:target section > pre.m-code,
+.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -1469,44 +1469,44 @@ article section:target figure.m-code-figure {
   border-bottom-left-radius: 0;
   padding-left: 0.75rem;
 }
-#m-container-inflatable section:target > figure.m-code-figure::before,
-#m-container-inflatable section:target section > figure.m-code-figure::before {
+.m-container-inflatable section:target > figure.m-code-figure::before,
+.m-container-inflatable section:target section > figure.m-code-figure::before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
-#m-container-inflatable section:target > pre.m-code,
-#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-#m-container-inflatable section:target section > pre.m-code,
-#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+.m-container-inflatable section:target > pre.m-code,
+.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target section > pre.m-code,
+.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
   border-color: #f7e3db;
 }
-#m-container-inflatable section:target > .m-note.m-default,
-#m-container-inflatable section:target section > .m-note.m-default {
+.m-container-inflatable section:target > .m-note.m-default,
+.m-container-inflatable section:target section > .m-note.m-default {
   border-left-color: #f7e3db;
 }
-#m-container-inflatable section:target > .m-note.m-primary,
-#m-container-inflatable section:target section > .m-note.m-primary {
+.m-container-inflatable section:target > .m-note.m-primary,
+.m-container-inflatable section:target section > .m-note.m-primary {
   border-left-color: #cb4b16;
 }
-#m-container-inflatable section:target > .m-note.m-success,
-#m-container-inflatable section:target section > .m-note.m-success {
+.m-container-inflatable section:target > .m-note.m-success,
+.m-container-inflatable section:target section > .m-note.m-success {
   border-left-color: #31c25d;
 }
-#m-container-inflatable section:target > .m-note.m-warning,
-#m-container-inflatable section:target section > .m-note.m-warning {
+.m-container-inflatable section:target > .m-note.m-warning,
+.m-container-inflatable section:target section > .m-note.m-warning {
   border-left-color: #c7cf2f;
 }
-#m-container-inflatable section:target > .m-note.m-danger,
-#m-container-inflatable section:target section > .m-note.m-danger {
+.m-container-inflatable section:target > .m-note.m-danger,
+.m-container-inflatable section:target section > .m-note.m-danger {
   border-left-color: #f60000;
 }
-#m-container-inflatable section:target > .m-note.m-info,
-#m-container-inflatable section:target section > .m-note.m-info {
+.m-container-inflatable section:target > .m-note.m-info,
+.m-container-inflatable section:target section > .m-note.m-info {
   border-left-color: #2e7dc5;
 }
-#m-container-inflatable section:target > .m-note.m-dim,
-#m-container-inflatable section:target section > .m-note.m-dim {
+.m-container-inflatable section:target > .m-note.m-dim,
+.m-container-inflatable section:target section > .m-note.m-dim {
   border-left-color: #bdbdbd;
 }
 pre.m-code span.hll {

diff --git a/doc/css/grid.rst b/doc/css/grid.rst
index a065365e580a5652a24f65e53ed5c7ce1ea6300f..200a80e68ba5dee776bb1d13f02efbcf4211c222 100644 (file)
--- a/doc/css/grid.rst
+++ b/doc/css/grid.rst
@@ -334,12 +334,12 @@ use the full available width --- for example to show big pictures or to fit
 many things next to each other.
 
 If you have a ten-column content area with one column space on each side, mark
-your :css:`.m-container` element with :css:`#m-container-inflatable` and then
+your :css:`.m-container` element with :css:`.m-container-inflatable` and then
 put your nested content in elements marked with :css:`.m-container-inflate`.
 
 .. code:: html
 
-    <div class="m-container" id="m-container-inflatable">
+    <div class="m-container m-container-inflatable">
       <div class="m-row">
         <div class="m-col-l-10 m-push-l-1">
           <div class="m-container-inflate">.m-container-inflate</div>

diff --git a/doc/css/page-layout.rst b/doc/css/page-layout.rst
index 70db13d805781d9a1cb6131555bf6455e8e82b86..14dfa52293d18c7211aa65ef1ac41b9e4ccfca9e 100644 (file)
--- a/doc/css/page-layout.rst
+++ b/doc/css/page-layout.rst
@@ -519,7 +519,7 @@ Date and author name is rendered on top left and right in front of the cover
 image, the heading (and optional subheading) as well. By default, the text on
 top of the cover image is rendered white, add an additional :css:`.m-inverted`
 CSS class to have it black. The article contents are marked with
-:css:`#m-container-inflatable` to make
+:css:`.m-container-inflatable` to make
 `inflated nested layouts <{filename}/css/grid.rst#inflatable-nested-grid>`_
 such as `image grid <{filename}/css/components.rst#image-grid>`_ possible.
 
@@ -555,7 +555,7 @@ such as `image grid <{filename}/css/components.rst#image-grid>`_ possible.
           </div>
         </div>
       </header>
-      <div class="m-container" id="m-container-inflatable">
+      <div class="m-container m-container-inflatable">
         <div class="m-row">
           <div class="m-col-m-10 m-push-m-1 m-nopady">
           Article contents. Pellentesque est neque, aliquet nec consectetur in,

diff --git a/pelican-theme/templates/article.html b/pelican-theme/templates/article.html
index 0a00ee679eed38f00c2fe39e7532855e4fde50b4..9802f7a49666bbb963b86c81905d89511fe27a74 100644 (file)
--- a/pelican-theme/templates/article.html
+++ b/pelican-theme/templates/article.html
@@ -57,7 +57,7 @@
         </div>
       </div>
     </header>
-    <div class="m-container" id="m-container-inflatable">
+    <div class="m-container m-container-inflatable">
       <div class="m-row">
         <div class="m-col-m-10 m-push-m-1 m-nopady">
 <!-- content -->

diff --git a/pelican-theme/templates/page.html b/pelican-theme/templates/page.html
index 691bfa1cd22719367e8c2c08e1a00f173d512c49..a1f3d1692d5b5d24aa52690b57a473a398d6879d 100644 (file)
--- a/pelican-theme/templates/page.html
+++ b/pelican-theme/templates/page.html
@@ -53,7 +53,7 @@
     </div>
   </div>
   {% endif %}
-  <div class="m-container" id="m-container-inflatable">
+  <div class="m-container m-container-inflatable">
     <div class="m-row">
       <div class="m-col-l-10 m-push-l-1">
         {% if not page.landing %}