From: Vladimír Vondruš Date: Sat, 3 Nov 2018 21:23:58 +0000 (+0100) Subject: css: reworked support for floatable components. X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=0c746406603209bf19d90e669d148eb674d8a8d4;p=blog.git css: reworked support for floatable components. What's done, roughly: * It's now possible to tuck the floating components out of the page flow similarly to .m-container-inflate. This required me to update the active section highlighting to handle this case correctly as well (and there's a lot more CSS for that now, ugh). * The .m-container-inflate has now padding after to make it better integrable into everything else. * OTOH, the all-around padding for .m-col-*-* elements is done only when they are direct children of .m-row. Otherwise, the padding is done only for .m-left-*, .m-right-*, .m-center-* and only on sides where it is needed. Also added a few tests for functionality that was neglected before. --- diff --git a/css/m-components.css b/css/m-components.css index 0fe98dfd..81f93038 100644 --- a/css/m-components.css +++ b/css/m-components.css @@ -932,12 +932,72 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid, .m-container-inflatable > .m-row > [class*='m-col-'] section > pre, .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure, -.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure { +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure, +.m-container-inflatable [class*='m-center-'] > .m-note, +.m-container-inflatable [class*='m-center-'] > .m-frame, +.m-container-inflatable [class*='m-center-'] > .m-block, +.m-container-inflatable [class*='m-center-'] > .m-imagegrid, +.m-container-inflatable [class*='m-center-'] > pre, +.m-container-inflatable [class*='m-center-'] > .m-code-figure, +.m-container-inflatable [class*='m-center-'] > .m-console-figure, +.m-container-inflatable [class*='m-left-'] > .m-note, +.m-container-inflatable [class*='m-left-'] > .m-frame, +.m-container-inflatable [class*='m-left-'] > .m-block, +.m-container-inflatable [class*='m-left-'] > .m-imagegrid, +.m-container-inflatable [class*='m-left-'] > pre, +.m-container-inflatable [class*='m-left-'] > .m-code-figure, +.m-container-inflatable [class*='m-left-'] > .m-console-figure, +.m-container-inflatable [class*='m-right-'] > .m-note, +.m-container-inflatable [class*='m-right-'] > .m-frame, +.m-container-inflatable [class*='m-right-'] > .m-block, +.m-container-inflatable [class*='m-right-'] > .m-imagegrid, +.m-container-inflatable [class*='m-right-'] > pre, +.m-container-inflatable [class*='m-right-'] > .m-code-figure, +.m-container-inflatable [class*='m-right-'] > .m-console-figure, +.m-container-inflatable .m-container-inflate > .m-note, +.m-container-inflatable .m-container-inflate > .m-frame, +.m-container-inflatable .m-container-inflate > .m-block, +.m-container-inflatable .m-container-inflate > .m-imagegrid, +.m-container-inflatable .m-container-inflate > pre, +.m-container-inflatable .m-container-inflate > .m-code-figure, +.m-container-inflatable .m-container-inflate > .m-console-figure +{ margin-left: -1rem; margin-right: -1rem; } @media screen and (min-width: 576px) { + .m-container-inflatable .m-center-s > .m-note, + .m-container-inflatable .m-center-s > .m-frame, + .m-container-inflatable .m-center-s > .m-block, + .m-container-inflatable .m-center-s > .m-imagegrid, + .m-container-inflatable .m-center-s > pre, + .m-container-inflatable .m-center-s > .m-code-figure, + .m-container-inflatable .m-center-s > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-s > .m-note, + .m-container-inflatable .m-left-s > .m-frame, + .m-container-inflatable .m-left-s > .m-block, + .m-container-inflatable .m-left-s > .m-imagegrid, + .m-container-inflatable .m-left-s > pre, + .m-container-inflatable .m-left-s > .m-code-figure, + .m-container-inflatable .m-left-s > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-s > .m-note, + .m-container-inflatable .m-right-s > .m-frame, + .m-container-inflatable .m-right-s > .m-block, + .m-container-inflatable .m-right-s > .m-imagegrid, + .m-container-inflatable .m-right-s > pre, + .m-container-inflatable .m-right-s > .m-code-figure, + .m-container-inflatable .m-right-s > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } + .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%; @@ -945,6 +1005,37 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- } } @media screen and (min-width: 768px) { + .m-container-inflatable .m-center-m > .m-note, + .m-container-inflatable .m-center-m > .m-frame, + .m-container-inflatable .m-center-m > .m-block, + .m-container-inflatable .m-center-m > .m-imagegrid, + .m-container-inflatable .m-center-m > pre, + .m-container-inflatable .m-center-m > .m-code-figure, + .m-container-inflatable .m-center-m > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-m > .m-note, + .m-container-inflatable .m-left-m > .m-frame, + .m-container-inflatable .m-left-m > .m-block, + .m-container-inflatable .m-left-m > .m-imagegrid, + .m-container-inflatable .m-left-m > pre, + .m-container-inflatable .m-left-m > .m-code-figure, + .m-container-inflatable .m-left-m > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-m > .m-note, + .m-container-inflatable .m-right-m > .m-frame, + .m-container-inflatable .m-right-m > .m-block, + .m-container-inflatable .m-right-m > .m-imagegrid, + .m-container-inflatable .m-right-m > pre, + .m-container-inflatable .m-right-m > .m-code-figure, + .m-container-inflatable .m-right-m > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } + .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%; @@ -952,6 +1043,37 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- } } @media screen and (min-width: 992px) { + .m-container-inflatable .m-center-l > .m-note, + .m-container-inflatable .m-center-l > .m-frame, + .m-container-inflatable .m-center-l > .m-block, + .m-container-inflatable .m-center-l > .m-imagegrid, + .m-container-inflatable .m-center-l > pre, + .m-container-inflatable .m-center-l > .m-code-figure, + .m-container-inflatable .m-center-l > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-l > .m-note, + .m-container-inflatable .m-left-l > .m-frame, + .m-container-inflatable .m-left-l > .m-block, + .m-container-inflatable .m-left-l > .m-imagegrid, + .m-container-inflatable .m-left-l > pre, + .m-container-inflatable .m-left-l > .m-code-figure, + .m-container-inflatable .m-left-l > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-l > .m-note, + .m-container-inflatable .m-right-l > .m-frame, + .m-container-inflatable .m-right-l > .m-block, + .m-container-inflatable .m-right-l > .m-imagegrid, + .m-container-inflatable .m-right-l > pre, + .m-container-inflatable .m-right-l > .m-code-figure, + .m-container-inflatable .m-right-l > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } + .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%; diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css index ff18c0af..ee8d6b79 100644 --- a/css/m-dark+doxygen.compiled.css +++ b/css/m-dark+doxygen.compiled.css @@ -41,7 +41,7 @@ body { margin: 0; } clear: both; display: table; } -[class*='m-col-'] { +.m-row > [class*='m-col-'] { position: relative; padding: 1rem; } @@ -53,17 +53,11 @@ body { margin: 0; } [class*='m-show-'] { display: none; } -[class*='m-col-'].m-left-s, [class*='m-col-'].m-right-s, [class*='m-col-'].m-center-s, -[class*='m-col-'].m-left-m, [class*='m-col-'].m-right-m, [class*='m-col-'].m-center-m, -[class*='m-col-'].m-left-l, [class*='m-col-'].m-right-l, [class*='m-col-'].m-center-l { - margin-left: -1rem; - margin-right: -1rem; +.m-container-inflate, :not(.m-row) > [class*='m-col-'] { + margin-bottom: 1rem; } -.m-row > [class*='m-col-'].m-left-s, .m-row > [class*='m-col-'].m-right-s, .m-row > [class*='m-col-'].m-center-s, -.m-row > [class*='m-col-'].m-left-m, .m-row > [class*='m-col-'].m-right-m, .m-row > [class*='m-col-'].m-center-m, -.m-row > [class*='m-col-'].m-left-l, .m-row > [class*='m-col-'].m-right-l .m-row > [class*='m-col-'].m-center-l { - margin-left: 0; - margin-right: 0; +.m-container-inflate:last-child, :not(.m-row) > [class*='m-col-']:last-child { + margin-bottom: 0; } .m-container.m-nopad, [class*='m-col-'].m-nopad, .m-container.m-nopadx, [class*='m-col-'].m-nopadx, @@ -78,35 +72,22 @@ body { margin: 0; } [class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt { padding-top: 0; } -[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb { +[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb, +.m-container-inflate.m-nopadb { padding-bottom: 0; } [class*='m-col-t-'] { float: left; } -[class*='m-col-t-'].m-left-t, [class*='m-col-t-'].m-right-t { - padding-top: 0px; - padding-bottom: 0px; -} .m-left-t { + padding-right: 1rem; float: left; } .m-right-t, [class*='m-col-t-'].m-right-t { + padding-left: 1rem; float: right; } .m-center-t, [class*='m-col-t-'].m-center-t { float: none; } -[class*='m-col-t-'].m-left-t { - margin-left: -1rem; -} -[class*='m-col-t-'].m-right-t { - margin-right: -1rem; -} -.m-row > [class*='m-col-t-'].m-left-t { - margin-left: 0; -} -.m-row > [class*='m-col-t-'].m-right-t { - margin-right: 0; -} .m-center-t, [class*='m-col-t-'].m-center-t { margin-left: auto; margin-right: auto; @@ -148,35 +129,25 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } - [class*='m-col-s-'] { float: left; } - [class*='m-col-s-'].m-left-s, [class*='m-col-s-'].m-right-s { - padding-top: 0px; - padding-bottom: 0px; + .m-container-inflatable .m-col-s-10 .m-container-inflate.m-left-s { + margin-left: -10%; + } + .m-container-inflatable .m-col-s-10 .m-container-inflate.m-right-s { + margin-right: -10%; } + [class*='m-col-s-'] { float: left; } .m-left-s { + padding-right: 1rem; float: left; } .m-right-s, [class*='m-col-s-'].m-right-s { + padding-left: 1rem; float: right; } - [class*='m-col-s-'].m-left-s { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-s-'].m-right-s { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-s-'].m-left-s { - margin-left: 0; - } - .m-row > [class*='m-col-s-'].m-right-s { - margin-right: 0; - } .m-center-s, [class*='m-col-s-'].m-center-s { margin-left: auto; margin-right: auto; @@ -228,35 +199,25 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } - [class*='m-col-m-'] { float: left; } - [class*='m-col-m-'].m-left-m, [class*='m-col-m-'].m-right-m { - padding-top: 0px; - padding-bottom: 0px; + .m-container-inflatable .m-col-m-10 .m-container-inflate.m-left-m { + margin-left: -10%; } + .m-container-inflatable .m-col-m-10 .m-container-inflate.m-right-m { + margin-right: -10%; + } + [class*='m-col-m-'] { float: left; } .m-left-m { + padding-right: 1rem; float: left; } .m-right-m, [class*='m-col-m-'].m-right-m { + padding-left: 1rem; float: right; } - [class*='m-col-m-'].m-left-m { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-m-'].m-right-m { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-m-'].m-left-m { - margin-left: 0; - } - .m-row > [class*='m-col-m-'].m-right-m { - margin-right: 0; - } .m-center-m, [class*='m-col-m-'].m-center-m { margin-left: auto; margin-right: auto; @@ -308,35 +269,25 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } - [class*='m-col-l-'] { float: left; } - [class*='m-col-l-'].m-left-l, [class*='m-col-l-'].m-right-l { - padding-top: 0px; - padding-bottom: 0px; + .m-container-inflatable .m-col-l-10 .m-container-inflate.m-left-l { + margin-left: -10%; + } + .m-container-inflatable .m-col-l-10 .m-container-inflate.m-right-l { + margin-right: -10%; } + [class*='m-col-l-'] { float: left; } .m-left-l { + padding-right: 1rem; float: left; } .m-right-l, [class*='m-col-l-'].m-right-l { + padding-left: 1rem; float: right; } - [class*='m-col-l-'].m-left-l { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-l-'].m-right-l { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-l-'].m-left-l { - margin-left: 0; - } - .m-row > [class*='m-col-l-'].m-right-l { - margin-right: 0; - } .m-center-l, [class*='m-col-l-'].m-center-l { margin-left: auto; margin-right: auto; @@ -1234,11 +1185,70 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid, .m-container-inflatable > .m-row > [class*='m-col-'] section > pre, .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure, -.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure { +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure, +.m-container-inflatable [class*='m-center-'] > .m-note, +.m-container-inflatable [class*='m-center-'] > .m-frame, +.m-container-inflatable [class*='m-center-'] > .m-block, +.m-container-inflatable [class*='m-center-'] > .m-imagegrid, +.m-container-inflatable [class*='m-center-'] > pre, +.m-container-inflatable [class*='m-center-'] > .m-code-figure, +.m-container-inflatable [class*='m-center-'] > .m-console-figure, +.m-container-inflatable [class*='m-left-'] > .m-note, +.m-container-inflatable [class*='m-left-'] > .m-frame, +.m-container-inflatable [class*='m-left-'] > .m-block, +.m-container-inflatable [class*='m-left-'] > .m-imagegrid, +.m-container-inflatable [class*='m-left-'] > pre, +.m-container-inflatable [class*='m-left-'] > .m-code-figure, +.m-container-inflatable [class*='m-left-'] > .m-console-figure, +.m-container-inflatable [class*='m-right-'] > .m-note, +.m-container-inflatable [class*='m-right-'] > .m-frame, +.m-container-inflatable [class*='m-right-'] > .m-block, +.m-container-inflatable [class*='m-right-'] > .m-imagegrid, +.m-container-inflatable [class*='m-right-'] > pre, +.m-container-inflatable [class*='m-right-'] > .m-code-figure, +.m-container-inflatable [class*='m-right-'] > .m-console-figure, +.m-container-inflatable .m-container-inflate > .m-note, +.m-container-inflatable .m-container-inflate > .m-frame, +.m-container-inflatable .m-container-inflate > .m-block, +.m-container-inflatable .m-container-inflate > .m-imagegrid, +.m-container-inflatable .m-container-inflate > pre, +.m-container-inflatable .m-container-inflate > .m-code-figure, +.m-container-inflatable .m-container-inflate > .m-console-figure +{ margin-left: -1rem; margin-right: -1rem; } @media screen and (min-width: 576px) { + .m-container-inflatable .m-center-s > .m-note, + .m-container-inflatable .m-center-s > .m-frame, + .m-container-inflatable .m-center-s > .m-block, + .m-container-inflatable .m-center-s > .m-imagegrid, + .m-container-inflatable .m-center-s > pre, + .m-container-inflatable .m-center-s > .m-code-figure, + .m-container-inflatable .m-center-s > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-s > .m-note, + .m-container-inflatable .m-left-s > .m-frame, + .m-container-inflatable .m-left-s > .m-block, + .m-container-inflatable .m-left-s > .m-imagegrid, + .m-container-inflatable .m-left-s > pre, + .m-container-inflatable .m-left-s > .m-code-figure, + .m-container-inflatable .m-left-s > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-s > .m-note, + .m-container-inflatable .m-right-s > .m-frame, + .m-container-inflatable .m-right-s > .m-block, + .m-container-inflatable .m-right-s > .m-imagegrid, + .m-container-inflatable .m-right-s > pre, + .m-container-inflatable .m-right-s > .m-code-figure, + .m-container-inflatable .m-right-s > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } .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%; @@ -1246,6 +1256,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- } } @media screen and (min-width: 768px) { + .m-container-inflatable .m-center-m > .m-note, + .m-container-inflatable .m-center-m > .m-frame, + .m-container-inflatable .m-center-m > .m-block, + .m-container-inflatable .m-center-m > .m-imagegrid, + .m-container-inflatable .m-center-m > pre, + .m-container-inflatable .m-center-m > .m-code-figure, + .m-container-inflatable .m-center-m > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-m > .m-note, + .m-container-inflatable .m-left-m > .m-frame, + .m-container-inflatable .m-left-m > .m-block, + .m-container-inflatable .m-left-m > .m-imagegrid, + .m-container-inflatable .m-left-m > pre, + .m-container-inflatable .m-left-m > .m-code-figure, + .m-container-inflatable .m-left-m > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-m > .m-note, + .m-container-inflatable .m-right-m > .m-frame, + .m-container-inflatable .m-right-m > .m-block, + .m-container-inflatable .m-right-m > .m-imagegrid, + .m-container-inflatable .m-right-m > pre, + .m-container-inflatable .m-right-m > .m-code-figure, + .m-container-inflatable .m-right-m > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } .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%; @@ -1253,6 +1293,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- } } @media screen and (min-width: 992px) { + .m-container-inflatable .m-center-l > .m-note, + .m-container-inflatable .m-center-l > .m-frame, + .m-container-inflatable .m-center-l > .m-block, + .m-container-inflatable .m-center-l > .m-imagegrid, + .m-container-inflatable .m-center-l > pre, + .m-container-inflatable .m-center-l > .m-code-figure, + .m-container-inflatable .m-center-l > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-l > .m-note, + .m-container-inflatable .m-left-l > .m-frame, + .m-container-inflatable .m-left-l > .m-block, + .m-container-inflatable .m-left-l > .m-imagegrid, + .m-container-inflatable .m-left-l > pre, + .m-container-inflatable .m-left-l > .m-code-figure, + .m-container-inflatable .m-left-l > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-l > .m-note, + .m-container-inflatable .m-right-l > .m-frame, + .m-container-inflatable .m-right-l > .m-block, + .m-container-inflatable .m-right-l > .m-imagegrid, + .m-container-inflatable .m-right-l > pre, + .m-container-inflatable .m-right-l > .m-code-figure, + .m-container-inflatable .m-right-l > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } .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%; @@ -1701,7 +1771,7 @@ body > header > nav ol { body > header > nav ol ol { padding-left: 1.5rem; } -body > header > nav [class*='m-col-'] { +body > header > nav .m-row > [class*='m-col-'] { padding-top: 0; padding-bottom: 0; } @@ -2039,7 +2109,31 @@ article:last-child, article section:last-child { margin-bottom: 0; } .m-container-inflatable section:target section > .m-block, .m-container-inflatable section:target section > pre, .m-container-inflatable section:target section > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child { +.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-center-'] > .m-note, +.m-container-inflatable section:target [class*='m-center-'] > .m-frame, +.m-container-inflatable section:target [class*='m-center-'] > .m-block, +.m-container-inflatable section:target [class*='m-center-'] > pre, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-left-'] > .m-note, +.m-container-inflatable section:target [class*='m-left-'] > .m-frame, +.m-container-inflatable section:target [class*='m-left-'] > .m-block, +.m-container-inflatable section:target [class*='m-left-'] > pre, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-right-'] > .m-note, +.m-container-inflatable section:target [class*='m-right-'] > .m-frame, +.m-container-inflatable section:target [class*='m-right-'] > .m-block, +.m-container-inflatable section:target [class*='m-right-'] > pre, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target .m-container-inflate > .m-note, +.m-container-inflatable section:target .m-container-inflate > .m-frame, +.m-container-inflatable section:target .m-container-inflate > .m-block, +.m-container-inflatable section:target .m-container-inflate > pre, +.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure > pre:first-child { margin-left: -1.0rem; border-left-style: solid; border-left-width: 0.25rem; @@ -2050,50 +2144,223 @@ article:last-child, article section:last-child { margin-bottom: 0; } .m-container-inflatable section:target > figure.m-code-figure::before, .m-container-inflatable section:target > figure.m-console-figure::before, .m-container-inflatable section:target section > figure.m-code-figure::before, -.m-container-inflatable section:target section > figure.m-console-figure::before { +.m-container-inflatable section:target section > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before, +.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure::before, +.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure::before { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0.25rem; } -.m-container-inflatable section:target > pre, -.m-container-inflatable section:target > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target > figure.m-console-figure > pre:first-child, -.m-container-inflatable section:target section > pre, -.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child { - border-color: #405363; +@media screen and (min-width: 576px) { + .m-container-inflatable section:target .m-center-s > .m-note, + .m-container-inflatable section:target .m-center-s > pre, + .m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child { + border-left-width: 0; + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-s > .m-block, + .m-container-inflatable section:target .m-right-s > .m-block { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + } + .m-container-inflatable section:target .m-center-s > .m-frame, + .m-container-inflatable section:target .m-right-s > .m-frame { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-s > .m-block, + .m-container-inflatable section:target .m-right-s > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-s > .m-note, + .m-container-inflatable section:target .m-right-s > pre { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + } +} +@media screen and (min-width: 768px) { + .m-container-inflatable section:target .m-center-m > .m-note, + .m-container-inflatable section:target .m-center-m > pre, + .m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child { + border-left-width: 0; + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-m > .m-block, + .m-container-inflatable section:target .m-right-m > .m-block { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + } + .m-container-inflatable section:target .m-center-m > .m-frame, + .m-container-inflatable section:target .m-right-m > .m-frame { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-m > .m-block, + .m-container-inflatable section:target .m-right-m > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-m > .m-note, + .m-container-inflatable section:target .m-right-m > pre { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + } +} +@media screen and (min-width: 992px) { + .m-container-inflatable section:target .m-center-l > .m-note, + .m-container-inflatable section:target .m-center-l > pre, + .m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child { + border-left-width: 0; + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-l > .m-block, + .m-container-inflatable section:target .m-right-l > .m-block { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + } + .m-container-inflatable section:target .m-center-l > .m-frame, + .m-container-inflatable section:target .m-right-l > .m-frame { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-l > .m-block, + .m-container-inflatable section:target .m-right-l > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-l > .m-note, + .m-container-inflatable section:target .m-right-l > pre { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + } } .m-container-inflatable section:target > figure.m-code-figure::before, .m-container-inflatable section:target > figure.m-console-figure::before, -.m-container-inflatable section:target > .m-note.m-default, .m-container-inflatable section:target section > figure.m-code-figure::before, .m-container-inflatable section:target section > figure.m-console-figure::before, -.m-container-inflatable section:target section > .m-note.m-default { +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before, +.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before, +.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before { border-left-color: #405363; } -.m-container-inflatable section:target > .m-note.m-primary, -.m-container-inflatable section:target section > .m-note.m-primary { - border-left-color: #a5c9ea; +@media screen and (min-width: 576px) { + .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before { + border-color: #282e36; + } + .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before { + border-color: #000000; + } +} +@media screen and (min-width: 768px) { + .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before { + border-color: #282e36; + } + .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before { + border-color: #000000; + } +} +@media screen and (min-width: 992px) { + .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before { + border-color: #282e36; + } + .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before { + border-color: #000000; + } +} +.m-container-inflatable section:target pre, +.m-container-inflatable section:target figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target figure.m-console-figure > pre:first-child { + border-color: #405363; +} +.m-container-inflatable section:target .m-note.m-default { + border-color: #405363; } -.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-primary { + border-color: #a5c9ea; } -.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-success { + border-color: #3bd267; } -.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-warning { + border-color: #c7cf2f; } -.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-danger { + border-color: #cd3431; } -.m-container-inflatable section:target > .m-note.m-dim, -.m-container-inflatable section:target section > .m-note.m-dim { - border-left-color: #747474; +.m-container-inflatable section:target .m-note.m-info { + border-color: #2f83cc; +} +.m-container-inflatable section:target .m-note.m-dim { + border-color: #747474; } .m-code .hll { background-color: #34424d } diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css index 685f52f8..2d9d9652 100644 --- a/css/m-dark.compiled.css +++ b/css/m-dark.compiled.css @@ -41,7 +41,7 @@ body { margin: 0; } clear: both; display: table; } -[class*='m-col-'] { +.m-row > [class*='m-col-'] { position: relative; padding: 1rem; } @@ -53,17 +53,11 @@ body { margin: 0; } [class*='m-show-'] { display: none; } -[class*='m-col-'].m-left-s, [class*='m-col-'].m-right-s, [class*='m-col-'].m-center-s, -[class*='m-col-'].m-left-m, [class*='m-col-'].m-right-m, [class*='m-col-'].m-center-m, -[class*='m-col-'].m-left-l, [class*='m-col-'].m-right-l, [class*='m-col-'].m-center-l { - margin-left: -1rem; - margin-right: -1rem; +.m-container-inflate, :not(.m-row) > [class*='m-col-'] { + margin-bottom: 1rem; } -.m-row > [class*='m-col-'].m-left-s, .m-row > [class*='m-col-'].m-right-s, .m-row > [class*='m-col-'].m-center-s, -.m-row > [class*='m-col-'].m-left-m, .m-row > [class*='m-col-'].m-right-m, .m-row > [class*='m-col-'].m-center-m, -.m-row > [class*='m-col-'].m-left-l, .m-row > [class*='m-col-'].m-right-l .m-row > [class*='m-col-'].m-center-l { - margin-left: 0; - margin-right: 0; +.m-container-inflate:last-child, :not(.m-row) > [class*='m-col-']:last-child { + margin-bottom: 0; } .m-container.m-nopad, [class*='m-col-'].m-nopad, .m-container.m-nopadx, [class*='m-col-'].m-nopadx, @@ -78,35 +72,22 @@ body { margin: 0; } [class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt { padding-top: 0; } -[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb { +[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb, +.m-container-inflate.m-nopadb { padding-bottom: 0; } [class*='m-col-t-'] { float: left; } -[class*='m-col-t-'].m-left-t, [class*='m-col-t-'].m-right-t { - padding-top: 0px; - padding-bottom: 0px; -} .m-left-t { + padding-right: 1rem; float: left; } .m-right-t, [class*='m-col-t-'].m-right-t { + padding-left: 1rem; float: right; } .m-center-t, [class*='m-col-t-'].m-center-t { float: none; } -[class*='m-col-t-'].m-left-t { - margin-left: -1rem; -} -[class*='m-col-t-'].m-right-t { - margin-right: -1rem; -} -.m-row > [class*='m-col-t-'].m-left-t { - margin-left: 0; -} -.m-row > [class*='m-col-t-'].m-right-t { - margin-right: 0; -} .m-center-t, [class*='m-col-t-'].m-center-t { margin-left: auto; margin-right: auto; @@ -148,35 +129,25 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } - [class*='m-col-s-'] { float: left; } - [class*='m-col-s-'].m-left-s, [class*='m-col-s-'].m-right-s { - padding-top: 0px; - padding-bottom: 0px; + .m-container-inflatable .m-col-s-10 .m-container-inflate.m-left-s { + margin-left: -10%; + } + .m-container-inflatable .m-col-s-10 .m-container-inflate.m-right-s { + margin-right: -10%; } + [class*='m-col-s-'] { float: left; } .m-left-s { + padding-right: 1rem; float: left; } .m-right-s, [class*='m-col-s-'].m-right-s { + padding-left: 1rem; float: right; } - [class*='m-col-s-'].m-left-s { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-s-'].m-right-s { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-s-'].m-left-s { - margin-left: 0; - } - .m-row > [class*='m-col-s-'].m-right-s { - margin-right: 0; - } .m-center-s, [class*='m-col-s-'].m-center-s { margin-left: auto; margin-right: auto; @@ -228,35 +199,25 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } - [class*='m-col-m-'] { float: left; } - [class*='m-col-m-'].m-left-m, [class*='m-col-m-'].m-right-m { - padding-top: 0px; - padding-bottom: 0px; + .m-container-inflatable .m-col-m-10 .m-container-inflate.m-left-m { + margin-left: -10%; } + .m-container-inflatable .m-col-m-10 .m-container-inflate.m-right-m { + margin-right: -10%; + } + [class*='m-col-m-'] { float: left; } .m-left-m { + padding-right: 1rem; float: left; } .m-right-m, [class*='m-col-m-'].m-right-m { + padding-left: 1rem; float: right; } - [class*='m-col-m-'].m-left-m { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-m-'].m-right-m { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-m-'].m-left-m { - margin-left: 0; - } - .m-row > [class*='m-col-m-'].m-right-m { - margin-right: 0; - } .m-center-m, [class*='m-col-m-'].m-center-m { margin-left: auto; margin-right: auto; @@ -308,35 +269,25 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } - [class*='m-col-l-'] { float: left; } - [class*='m-col-l-'].m-left-l, [class*='m-col-l-'].m-right-l { - padding-top: 0px; - padding-bottom: 0px; + .m-container-inflatable .m-col-l-10 .m-container-inflate.m-left-l { + margin-left: -10%; } + .m-container-inflatable .m-col-l-10 .m-container-inflate.m-right-l { + margin-right: -10%; + } + [class*='m-col-l-'] { float: left; } .m-left-l { + padding-right: 1rem; float: left; } .m-right-l, [class*='m-col-l-'].m-right-l { + padding-left: 1rem; float: right; } - [class*='m-col-l-'].m-left-l { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-l-'].m-right-l { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-l-'].m-left-l { - margin-left: 0; - } - .m-row > [class*='m-col-l-'].m-right-l { - margin-right: 0; - } .m-center-l, [class*='m-col-l-'].m-center-l { margin-left: auto; margin-right: auto; @@ -1234,11 +1185,70 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid, .m-container-inflatable > .m-row > [class*='m-col-'] section > pre, .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure, -.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure { +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure, +.m-container-inflatable [class*='m-center-'] > .m-note, +.m-container-inflatable [class*='m-center-'] > .m-frame, +.m-container-inflatable [class*='m-center-'] > .m-block, +.m-container-inflatable [class*='m-center-'] > .m-imagegrid, +.m-container-inflatable [class*='m-center-'] > pre, +.m-container-inflatable [class*='m-center-'] > .m-code-figure, +.m-container-inflatable [class*='m-center-'] > .m-console-figure, +.m-container-inflatable [class*='m-left-'] > .m-note, +.m-container-inflatable [class*='m-left-'] > .m-frame, +.m-container-inflatable [class*='m-left-'] > .m-block, +.m-container-inflatable [class*='m-left-'] > .m-imagegrid, +.m-container-inflatable [class*='m-left-'] > pre, +.m-container-inflatable [class*='m-left-'] > .m-code-figure, +.m-container-inflatable [class*='m-left-'] > .m-console-figure, +.m-container-inflatable [class*='m-right-'] > .m-note, +.m-container-inflatable [class*='m-right-'] > .m-frame, +.m-container-inflatable [class*='m-right-'] > .m-block, +.m-container-inflatable [class*='m-right-'] > .m-imagegrid, +.m-container-inflatable [class*='m-right-'] > pre, +.m-container-inflatable [class*='m-right-'] > .m-code-figure, +.m-container-inflatable [class*='m-right-'] > .m-console-figure, +.m-container-inflatable .m-container-inflate > .m-note, +.m-container-inflatable .m-container-inflate > .m-frame, +.m-container-inflatable .m-container-inflate > .m-block, +.m-container-inflatable .m-container-inflate > .m-imagegrid, +.m-container-inflatable .m-container-inflate > pre, +.m-container-inflatable .m-container-inflate > .m-code-figure, +.m-container-inflatable .m-container-inflate > .m-console-figure +{ margin-left: -1rem; margin-right: -1rem; } @media screen and (min-width: 576px) { + .m-container-inflatable .m-center-s > .m-note, + .m-container-inflatable .m-center-s > .m-frame, + .m-container-inflatable .m-center-s > .m-block, + .m-container-inflatable .m-center-s > .m-imagegrid, + .m-container-inflatable .m-center-s > pre, + .m-container-inflatable .m-center-s > .m-code-figure, + .m-container-inflatable .m-center-s > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-s > .m-note, + .m-container-inflatable .m-left-s > .m-frame, + .m-container-inflatable .m-left-s > .m-block, + .m-container-inflatable .m-left-s > .m-imagegrid, + .m-container-inflatable .m-left-s > pre, + .m-container-inflatable .m-left-s > .m-code-figure, + .m-container-inflatable .m-left-s > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-s > .m-note, + .m-container-inflatable .m-right-s > .m-frame, + .m-container-inflatable .m-right-s > .m-block, + .m-container-inflatable .m-right-s > .m-imagegrid, + .m-container-inflatable .m-right-s > pre, + .m-container-inflatable .m-right-s > .m-code-figure, + .m-container-inflatable .m-right-s > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } .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%; @@ -1246,6 +1256,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- } } @media screen and (min-width: 768px) { + .m-container-inflatable .m-center-m > .m-note, + .m-container-inflatable .m-center-m > .m-frame, + .m-container-inflatable .m-center-m > .m-block, + .m-container-inflatable .m-center-m > .m-imagegrid, + .m-container-inflatable .m-center-m > pre, + .m-container-inflatable .m-center-m > .m-code-figure, + .m-container-inflatable .m-center-m > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-m > .m-note, + .m-container-inflatable .m-left-m > .m-frame, + .m-container-inflatable .m-left-m > .m-block, + .m-container-inflatable .m-left-m > .m-imagegrid, + .m-container-inflatable .m-left-m > pre, + .m-container-inflatable .m-left-m > .m-code-figure, + .m-container-inflatable .m-left-m > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-m > .m-note, + .m-container-inflatable .m-right-m > .m-frame, + .m-container-inflatable .m-right-m > .m-block, + .m-container-inflatable .m-right-m > .m-imagegrid, + .m-container-inflatable .m-right-m > pre, + .m-container-inflatable .m-right-m > .m-code-figure, + .m-container-inflatable .m-right-m > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } .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%; @@ -1253,6 +1293,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- } } @media screen and (min-width: 992px) { + .m-container-inflatable .m-center-l > .m-note, + .m-container-inflatable .m-center-l > .m-frame, + .m-container-inflatable .m-center-l > .m-block, + .m-container-inflatable .m-center-l > .m-imagegrid, + .m-container-inflatable .m-center-l > pre, + .m-container-inflatable .m-center-l > .m-code-figure, + .m-container-inflatable .m-center-l > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-l > .m-note, + .m-container-inflatable .m-left-l > .m-frame, + .m-container-inflatable .m-left-l > .m-block, + .m-container-inflatable .m-left-l > .m-imagegrid, + .m-container-inflatable .m-left-l > pre, + .m-container-inflatable .m-left-l > .m-code-figure, + .m-container-inflatable .m-left-l > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-l > .m-note, + .m-container-inflatable .m-right-l > .m-frame, + .m-container-inflatable .m-right-l > .m-block, + .m-container-inflatable .m-right-l > .m-imagegrid, + .m-container-inflatable .m-right-l > pre, + .m-container-inflatable .m-right-l > .m-code-figure, + .m-container-inflatable .m-right-l > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } .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%; @@ -1701,7 +1771,7 @@ body > header > nav ol { body > header > nav ol ol { padding-left: 1.5rem; } -body > header > nav [class*='m-col-'] { +body > header > nav .m-row > [class*='m-col-'] { padding-top: 0; padding-bottom: 0; } @@ -2039,7 +2109,31 @@ article:last-child, article section:last-child { margin-bottom: 0; } .m-container-inflatable section:target section > .m-block, .m-container-inflatable section:target section > pre, .m-container-inflatable section:target section > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child { +.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-center-'] > .m-note, +.m-container-inflatable section:target [class*='m-center-'] > .m-frame, +.m-container-inflatable section:target [class*='m-center-'] > .m-block, +.m-container-inflatable section:target [class*='m-center-'] > pre, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-left-'] > .m-note, +.m-container-inflatable section:target [class*='m-left-'] > .m-frame, +.m-container-inflatable section:target [class*='m-left-'] > .m-block, +.m-container-inflatable section:target [class*='m-left-'] > pre, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-right-'] > .m-note, +.m-container-inflatable section:target [class*='m-right-'] > .m-frame, +.m-container-inflatable section:target [class*='m-right-'] > .m-block, +.m-container-inflatable section:target [class*='m-right-'] > pre, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target .m-container-inflate > .m-note, +.m-container-inflatable section:target .m-container-inflate > .m-frame, +.m-container-inflatable section:target .m-container-inflate > .m-block, +.m-container-inflatable section:target .m-container-inflate > pre, +.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure > pre:first-child { margin-left: -1.0rem; border-left-style: solid; border-left-width: 0.25rem; @@ -2050,50 +2144,223 @@ article:last-child, article section:last-child { margin-bottom: 0; } .m-container-inflatable section:target > figure.m-code-figure::before, .m-container-inflatable section:target > figure.m-console-figure::before, .m-container-inflatable section:target section > figure.m-code-figure::before, -.m-container-inflatable section:target section > figure.m-console-figure::before { +.m-container-inflatable section:target section > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before, +.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure::before, +.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure::before { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0.25rem; } -.m-container-inflatable section:target > pre, -.m-container-inflatable section:target > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target > figure.m-console-figure > pre:first-child, -.m-container-inflatable section:target section > pre, -.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child { - border-color: #405363; +@media screen and (min-width: 576px) { + .m-container-inflatable section:target .m-center-s > .m-note, + .m-container-inflatable section:target .m-center-s > pre, + .m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child { + border-left-width: 0; + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-s > .m-block, + .m-container-inflatable section:target .m-right-s > .m-block { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + } + .m-container-inflatable section:target .m-center-s > .m-frame, + .m-container-inflatable section:target .m-right-s > .m-frame { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-s > .m-block, + .m-container-inflatable section:target .m-right-s > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-s > .m-note, + .m-container-inflatable section:target .m-right-s > pre { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + } +} +@media screen and (min-width: 768px) { + .m-container-inflatable section:target .m-center-m > .m-note, + .m-container-inflatable section:target .m-center-m > pre, + .m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child { + border-left-width: 0; + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-m > .m-block, + .m-container-inflatable section:target .m-right-m > .m-block { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + } + .m-container-inflatable section:target .m-center-m > .m-frame, + .m-container-inflatable section:target .m-right-m > .m-frame { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-m > .m-block, + .m-container-inflatable section:target .m-right-m > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-m > .m-note, + .m-container-inflatable section:target .m-right-m > pre { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + } +} +@media screen and (min-width: 992px) { + .m-container-inflatable section:target .m-center-l > .m-note, + .m-container-inflatable section:target .m-center-l > pre, + .m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child { + border-left-width: 0; + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-l > .m-block, + .m-container-inflatable section:target .m-right-l > .m-block { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + } + .m-container-inflatable section:target .m-center-l > .m-frame, + .m-container-inflatable section:target .m-right-l > .m-frame { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-l > .m-block, + .m-container-inflatable section:target .m-right-l > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-l > .m-note, + .m-container-inflatable section:target .m-right-l > pre { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + } } .m-container-inflatable section:target > figure.m-code-figure::before, .m-container-inflatable section:target > figure.m-console-figure::before, -.m-container-inflatable section:target > .m-note.m-default, .m-container-inflatable section:target section > figure.m-code-figure::before, .m-container-inflatable section:target section > figure.m-console-figure::before, -.m-container-inflatable section:target section > .m-note.m-default { +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before, +.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before, +.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before { border-left-color: #405363; } -.m-container-inflatable section:target > .m-note.m-primary, -.m-container-inflatable section:target section > .m-note.m-primary { - border-left-color: #a5c9ea; +@media screen and (min-width: 576px) { + .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before { + border-color: #282e36; + } + .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before { + border-color: #000000; + } +} +@media screen and (min-width: 768px) { + .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before { + border-color: #282e36; + } + .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before { + border-color: #000000; + } +} +@media screen and (min-width: 992px) { + .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before { + border-color: #282e36; + } + .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before { + border-color: #000000; + } +} +.m-container-inflatable section:target pre, +.m-container-inflatable section:target figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target figure.m-console-figure > pre:first-child { + border-color: #405363; +} +.m-container-inflatable section:target .m-note.m-default { + border-color: #405363; } -.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-primary { + border-color: #a5c9ea; } -.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-success { + border-color: #3bd267; } -.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-warning { + border-color: #c7cf2f; } -.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-danger { + border-color: #cd3431; } -.m-container-inflatable section:target > .m-note.m-dim, -.m-container-inflatable section:target section > .m-note.m-dim { - border-left-color: #747474; +.m-container-inflatable section:target .m-note.m-info { + border-color: #2f83cc; +} +.m-container-inflatable section:target .m-note.m-dim { + border-color: #747474; } .m-code .hll { background-color: #34424d } diff --git a/css/m-grid.css b/css/m-grid.css index 8c20e49f..df2c4294 100644 --- a/css/m-grid.css +++ b/css/m-grid.css @@ -27,7 +27,8 @@ body { margin: 0; } /* 12-column layout. Inspired by Bootstrap and - https://www.w3schools.com/css/css_rwd_grid.asp */ + https://www.w3schools.com/css/css_rwd_grid.asp. The container is padded from + sides, the row inside removes the padding and columns add it back. */ .m-container { width: 100%; margin: auto; @@ -43,7 +44,7 @@ body { margin: 0; } clear: both; display: table; } -[class*='m-col-'] { +.m-row > [class*='m-col-'] { position: relative; padding: 1rem; } @@ -55,19 +56,18 @@ body { margin: 0; } [class*='m-show-'] { display: none; } -[class*='m-col-'].m-left-s, [class*='m-col-'].m-right-s, [class*='m-col-'].m-center-s, -[class*='m-col-'].m-left-m, [class*='m-col-'].m-right-m, [class*='m-col-'].m-center-m, -[class*='m-col-'].m-left-l, [class*='m-col-'].m-right-l, [class*='m-col-'].m-center-l { - margin-left: -1rem; - margin-right: -1rem; + +/* Margin for inflated / floating columns behaves as "padding-after" by default + -- there's only padding on the bottom but not when the column is last. */ +.m-container-inflate, :not(.m-row) > [class*='m-col-'] { + margin-bottom: 1rem; } -.m-row > [class*='m-col-'].m-left-s, .m-row > [class*='m-col-'].m-right-s, .m-row > [class*='m-col-'].m-center-s, -.m-row > [class*='m-col-'].m-left-m, .m-row > [class*='m-col-'].m-right-m, .m-row > [class*='m-col-'].m-center-m, -.m-row > [class*='m-col-'].m-left-l, .m-row > [class*='m-col-'].m-right-l .m-row > [class*='m-col-'].m-center-l { - margin-left: 0; - margin-right: 0; +.m-container-inflate:last-child, :not(.m-row) > [class*='m-col-']:last-child { + margin-bottom: 0; } +/* Padding overrides for container and columns. Works for both columns inside + rows and floating columns. */ .m-container.m-nopad, [class*='m-col-'].m-nopad, .m-container.m-nopadx, [class*='m-col-'].m-nopadx, .m-container.m-nopadl, [class*='m-col-'].m-nopadl { @@ -81,39 +81,25 @@ body { margin: 0; } [class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt { padding-top: 0; } -[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb { +[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb, +.m-container-inflate.m-nopadb { padding-bottom: 0; } /* 12-column layout -- T (portrait phones) */ [class*='m-col-t-'] { float: left; } -[class*='m-col-t-'].m-left-t, [class*='m-col-t-'].m-right-t { - padding-top: 0px; - padding-bottom: 0px; -} - .m-left-t { + padding-right: 1rem; float: left; } .m-right-t, [class*='m-col-t-'].m-right-t { + padding-left: 1rem; float: right; } .m-center-t, [class*='m-col-t-'].m-center-t { float: none; } -[class*='m-col-t-'].m-left-t { - margin-left: -1rem; -} -[class*='m-col-t-'].m-right-t { - margin-right: -1rem; -} -.m-row > [class*='m-col-t-'].m-left-t { - margin-left: 0; -} -.m-row > [class*='m-col-t-'].m-right-t { - margin-right: 0; -} .m-center-t, [class*='m-col-t-'].m-center-t { margin-left: auto; margin-right: auto; @@ -161,38 +147,27 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { + margin-left: -10%; + margin-right: -10%; + } + .m-container-inflatable .m-col-s-10 .m-container-inflate.m-left-s { margin-left: -10%; + } + .m-container-inflatable .m-col-s-10 .m-container-inflate.m-right-s { margin-right: -10%; } [class*='m-col-s-'] { float: left; } - [class*='m-col-s-'].m-left-s, [class*='m-col-s-'].m-right-s { - padding-top: 0px; - padding-bottom: 0px; - } - .m-left-s { + padding-right: 1rem; float: left; } .m-right-s, [class*='m-col-s-'].m-right-s { + padding-left: 1rem; float: right; } - [class*='m-col-s-'].m-left-s { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-s-'].m-right-s { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-s-'].m-left-s { - margin-left: 0; - } - .m-row > [class*='m-col-s-'].m-right-s { - margin-right: 0; - } .m-center-s, [class*='m-col-s-'].m-center-s { margin-left: auto; margin-right: auto; @@ -253,38 +228,27 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { + margin-left: -10%; + margin-right: -10%; + } + .m-container-inflatable .m-col-m-10 .m-container-inflate.m-left-m { margin-left: -10%; + } + .m-container-inflatable .m-col-m-10 .m-container-inflate.m-right-m { margin-right: -10%; } [class*='m-col-m-'] { float: left; } - [class*='m-col-m-'].m-left-m, [class*='m-col-m-'].m-right-m { - padding-top: 0px; - padding-bottom: 0px; - } - .m-left-m { + padding-right: 1rem; float: left; } .m-right-m, [class*='m-col-m-'].m-right-m { + padding-left: 1rem; float: right; } - [class*='m-col-m-'].m-left-m { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-m-'].m-right-m { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-m-'].m-left-m { - margin-left: 0; - } - .m-row > [class*='m-col-m-'].m-right-m { - margin-right: 0; - } .m-center-m, [class*='m-col-m-'].m-center-m { margin-left: auto; margin-right: auto; @@ -345,38 +309,27 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } + .m-container-inflatable .m-col-l-10 .m-container-inflate.m-left-l { + margin-left: -10%; + } + .m-container-inflatable .m-col-l-10 .m-container-inflate.m-right-l { + margin-right: -10%; + } [class*='m-col-l-'] { float: left; } - [class*='m-col-l-'].m-left-l, [class*='m-col-l-'].m-right-l { - padding-top: 0px; - padding-bottom: 0px; - } - .m-left-l { + padding-right: 1rem; float: left; } .m-right-l, [class*='m-col-l-'].m-right-l { + padding-left: 1rem; float: right; } - [class*='m-col-l-'].m-left-l { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-l-'].m-right-l { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-l-'].m-left-l { - margin-left: 0; - } - .m-row > [class*='m-col-l-'].m-right-l { - margin-right: 0; - } .m-center-l, [class*='m-col-l-'].m-center-l { margin-left: auto; margin-right: auto; diff --git a/css/m-layout.css b/css/m-layout.css index 9d10f769..f728341a 100644 --- a/css/m-layout.css +++ b/css/m-layout.css @@ -120,7 +120,7 @@ body > header > nav ol { body > header > nav ol ol { padding-left: 1.5rem; } -body > header > nav [class*='m-col-'] { +body > header > nav .m-row > [class*='m-col-'] { padding-top: 0; padding-bottom: 0; } @@ -479,7 +479,9 @@ article section:target figure.m-code-figure, article section:target figure.m-con article, article > header, article section { margin-bottom: 1rem; } article:last-child, article section:last-child { margin-bottom: 0; } -/* Active sections in inflatable content affect left border of some components */ +/* Active sections in inflatable content affect left border of some components + --- restrict to components directly in active section, its subsections and + floating / inflatable content inside. */ .m-container-inflatable section:target > .m-note, .m-container-inflatable section:target > .m-frame, .m-container-inflatable section:target > .m-block, @@ -491,7 +493,31 @@ article:last-child, article section:last-child { margin-bottom: 0; } .m-container-inflatable section:target section > .m-block, .m-container-inflatable section:target section > pre, .m-container-inflatable section:target section > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child { +.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-center-'] > .m-note, +.m-container-inflatable section:target [class*='m-center-'] > .m-frame, +.m-container-inflatable section:target [class*='m-center-'] > .m-block, +.m-container-inflatable section:target [class*='m-center-'] > pre, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-left-'] > .m-note, +.m-container-inflatable section:target [class*='m-left-'] > .m-frame, +.m-container-inflatable section:target [class*='m-left-'] > .m-block, +.m-container-inflatable section:target [class*='m-left-'] > pre, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-right-'] > .m-note, +.m-container-inflatable section:target [class*='m-right-'] > .m-frame, +.m-container-inflatable section:target [class*='m-right-'] > .m-block, +.m-container-inflatable section:target [class*='m-right-'] > pre, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target .m-container-inflate > .m-note, +.m-container-inflatable section:target .m-container-inflate > .m-frame, +.m-container-inflatable section:target .m-container-inflate > .m-block, +.m-container-inflatable section:target .m-container-inflate > pre, +.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure > pre:first-child { margin-left: -1.0rem; border-left-style: solid; border-left-width: 0.25rem; @@ -502,50 +528,253 @@ article:last-child, article section:last-child { margin-bottom: 0; } .m-container-inflatable section:target > figure.m-code-figure::before, .m-container-inflatable section:target > figure.m-console-figure::before, .m-container-inflatable section:target section > figure.m-code-figure::before, -.m-container-inflatable section:target section > figure.m-console-figure::before { +.m-container-inflatable section:target section > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before, +.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure::before, +.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure::before { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0.25rem; } -.m-container-inflatable section:target > pre, -.m-container-inflatable section:target > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target > figure.m-console-figure > pre:first-child, -.m-container-inflatable section:target section > pre, -.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child { - border-color: var(--line-color); +/* Center/left/right are tied to particular breakpoint so we need to + conditionally revert that. Left-aligned content is touching the left border + both in full size and aligned, so we revert it only for center and right. */ +@media screen and (min-width: 576px) { + .m-container-inflatable section:target .m-center-s > .m-note, + .m-container-inflatable section:target .m-center-s > pre, + .m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child { + /* Centers have -1rem margin on both sides *always* and pre inside figures + as well, don't revert that */ + border-left-width: 0; + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-s > .m-block, + .m-container-inflatable section:target .m-right-s > .m-block { + /* Block keep the same left border width at all times */ + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + } + .m-container-inflatable section:target .m-center-s > .m-frame, + .m-container-inflatable section:target .m-right-s > .m-frame { + /* Frame has a thinner border */ + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-s > .m-block, + .m-container-inflatable section:target .m-right-s > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-s > .m-note, + .m-container-inflatable section:target .m-right-s > pre { + /* Note and pre has no border */ + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before { + /* Reverting thin figure border, keeping -1rem margin */ + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + border-left-width: 0.125rem; + } +} +@media screen and (min-width: 768px) { + .m-container-inflatable section:target .m-center-m > .m-note, + .m-container-inflatable section:target .m-center-m > pre, + .m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child { + /* Centers have -1rem margin on both sides *always* and pre inside figures + as well, don't revert that */ + border-left-width: 0; + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-m > .m-block, + .m-container-inflatable section:target .m-right-m > .m-block { + /* Block keep the same left border width at all times */ + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + } + .m-container-inflatable section:target .m-center-m > .m-frame, + .m-container-inflatable section:target .m-right-m > .m-frame { + /* Frame has a thinner border */ + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-m > .m-block, + .m-container-inflatable section:target .m-right-m > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-m > .m-note, + .m-container-inflatable section:target .m-right-m > pre { + /* Note and pre has no border */ + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before { + /* Reverting thin figure border, keeping -1rem margin */ + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + border-left-width: 0.125rem; + } +} +@media screen and (min-width: 992px) { + .m-container-inflatable section:target .m-center-l > .m-note, + .m-container-inflatable section:target .m-center-l > pre, + .m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child { + /* Centers have -1rem margin on both sides *always* and pre inside figures + as well, don't revert that */ + border-left-width: 0; + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-l > .m-block, + .m-container-inflatable section:target .m-right-l > .m-block { + /* Block keep the same left border width at all times */ + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + } + .m-container-inflatable section:target .m-center-l > .m-frame, + .m-container-inflatable section:target .m-right-l > .m-frame { + /* Frame has a thinner border */ + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-l > .m-block, + .m-container-inflatable section:target .m-right-l > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-l > .m-note, + .m-container-inflatable section:target .m-right-l > pre { + /* Note and pre has no border */ + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before { + /* Reverting thin figure border, keeping -1rem margin */ + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + border-left-width: 0.125rem; + } } + +/* These have different border width/color around so we need to restrict like + above. */ .m-container-inflatable section:target > figure.m-code-figure::before, .m-container-inflatable section:target > figure.m-console-figure::before, -.m-container-inflatable section:target > .m-note.m-default, .m-container-inflatable section:target section > figure.m-code-figure::before, .m-container-inflatable section:target section > figure.m-console-figure::before, -.m-container-inflatable section:target section > .m-note.m-default { +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before, +.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before, +.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before { 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 { - border-left-color: var(--primary-color); +/* Center/left/right are tied to particular breakpoint so we need to + conditionally revert that. Left-aligned content is touching the left border + both in full size and aligned, so we revert it only for center and right. */ +@media screen and (min-width: 576px) { + .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before { + border-color: var(--code-background-color); + } + .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before { + border-color: var(--console-background-color); + } +} +@media screen and (min-width: 768px) { + .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before { + border-color: var(--code-background-color); + } + .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before { + border-color: var(--console-background-color); + } +} +@media screen and (min-width: 992px) { + .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before { + border-color: var(--code-background-color); + } + .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before { + border-color: var(--console-background-color); + } +} + +/* These don't have any border otherwise, so we don't need to restrict the + selectors or border sides like above. */ +.m-container-inflatable section:target pre, +.m-container-inflatable section:target figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target figure.m-console-figure > pre:first-child { + border-color: var(--line-color); +} +.m-container-inflatable section:target .m-note.m-default { + border-color: var(--line-color); +} +.m-container-inflatable section:target .m-note.m-primary { + border-color: var(--primary-color); } -.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-success { + border-color: var(--success-color); } -.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-warning { + border-color: var(--warning-color); } -.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-danger { + border-color: var(--danger-color); } -.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-info { + border-color: var(--info-color); } -.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); +.m-container-inflatable section:target .m-note.m-dim { + border-color: var(--dim-color); } /* kate: indent-width 2; */ diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css index 4629aa15..59d5b0e7 100644 --- a/css/m-light+doxygen.compiled.css +++ b/css/m-light+doxygen.compiled.css @@ -41,7 +41,7 @@ body { margin: 0; } clear: both; display: table; } -[class*='m-col-'] { +.m-row > [class*='m-col-'] { position: relative; padding: 1rem; } @@ -53,17 +53,11 @@ body { margin: 0; } [class*='m-show-'] { display: none; } -[class*='m-col-'].m-left-s, [class*='m-col-'].m-right-s, [class*='m-col-'].m-center-s, -[class*='m-col-'].m-left-m, [class*='m-col-'].m-right-m, [class*='m-col-'].m-center-m, -[class*='m-col-'].m-left-l, [class*='m-col-'].m-right-l, [class*='m-col-'].m-center-l { - margin-left: -1rem; - margin-right: -1rem; +.m-container-inflate, :not(.m-row) > [class*='m-col-'] { + margin-bottom: 1rem; } -.m-row > [class*='m-col-'].m-left-s, .m-row > [class*='m-col-'].m-right-s, .m-row > [class*='m-col-'].m-center-s, -.m-row > [class*='m-col-'].m-left-m, .m-row > [class*='m-col-'].m-right-m, .m-row > [class*='m-col-'].m-center-m, -.m-row > [class*='m-col-'].m-left-l, .m-row > [class*='m-col-'].m-right-l .m-row > [class*='m-col-'].m-center-l { - margin-left: 0; - margin-right: 0; +.m-container-inflate:last-child, :not(.m-row) > [class*='m-col-']:last-child { + margin-bottom: 0; } .m-container.m-nopad, [class*='m-col-'].m-nopad, .m-container.m-nopadx, [class*='m-col-'].m-nopadx, @@ -78,35 +72,22 @@ body { margin: 0; } [class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt { padding-top: 0; } -[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb { +[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb, +.m-container-inflate.m-nopadb { padding-bottom: 0; } [class*='m-col-t-'] { float: left; } -[class*='m-col-t-'].m-left-t, [class*='m-col-t-'].m-right-t { - padding-top: 0px; - padding-bottom: 0px; -} .m-left-t { + padding-right: 1rem; float: left; } .m-right-t, [class*='m-col-t-'].m-right-t { + padding-left: 1rem; float: right; } .m-center-t, [class*='m-col-t-'].m-center-t { float: none; } -[class*='m-col-t-'].m-left-t { - margin-left: -1rem; -} -[class*='m-col-t-'].m-right-t { - margin-right: -1rem; -} -.m-row > [class*='m-col-t-'].m-left-t { - margin-left: 0; -} -.m-row > [class*='m-col-t-'].m-right-t { - margin-right: 0; -} .m-center-t, [class*='m-col-t-'].m-center-t { margin-left: auto; margin-right: auto; @@ -148,35 +129,25 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } - [class*='m-col-s-'] { float: left; } - [class*='m-col-s-'].m-left-s, [class*='m-col-s-'].m-right-s { - padding-top: 0px; - padding-bottom: 0px; + .m-container-inflatable .m-col-s-10 .m-container-inflate.m-left-s { + margin-left: -10%; + } + .m-container-inflatable .m-col-s-10 .m-container-inflate.m-right-s { + margin-right: -10%; } + [class*='m-col-s-'] { float: left; } .m-left-s { + padding-right: 1rem; float: left; } .m-right-s, [class*='m-col-s-'].m-right-s { + padding-left: 1rem; float: right; } - [class*='m-col-s-'].m-left-s { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-s-'].m-right-s { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-s-'].m-left-s { - margin-left: 0; - } - .m-row > [class*='m-col-s-'].m-right-s { - margin-right: 0; - } .m-center-s, [class*='m-col-s-'].m-center-s { margin-left: auto; margin-right: auto; @@ -228,35 +199,25 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } - [class*='m-col-m-'] { float: left; } - [class*='m-col-m-'].m-left-m, [class*='m-col-m-'].m-right-m { - padding-top: 0px; - padding-bottom: 0px; + .m-container-inflatable .m-col-m-10 .m-container-inflate.m-left-m { + margin-left: -10%; } + .m-container-inflatable .m-col-m-10 .m-container-inflate.m-right-m { + margin-right: -10%; + } + [class*='m-col-m-'] { float: left; } .m-left-m { + padding-right: 1rem; float: left; } .m-right-m, [class*='m-col-m-'].m-right-m { + padding-left: 1rem; float: right; } - [class*='m-col-m-'].m-left-m { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-m-'].m-right-m { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-m-'].m-left-m { - margin-left: 0; - } - .m-row > [class*='m-col-m-'].m-right-m { - margin-right: 0; - } .m-center-m, [class*='m-col-m-'].m-center-m { margin-left: auto; margin-right: auto; @@ -308,35 +269,25 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } - [class*='m-col-l-'] { float: left; } - [class*='m-col-l-'].m-left-l, [class*='m-col-l-'].m-right-l { - padding-top: 0px; - padding-bottom: 0px; + .m-container-inflatable .m-col-l-10 .m-container-inflate.m-left-l { + margin-left: -10%; + } + .m-container-inflatable .m-col-l-10 .m-container-inflate.m-right-l { + margin-right: -10%; } + [class*='m-col-l-'] { float: left; } .m-left-l { + padding-right: 1rem; float: left; } .m-right-l, [class*='m-col-l-'].m-right-l { + padding-left: 1rem; float: right; } - [class*='m-col-l-'].m-left-l { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-l-'].m-right-l { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-l-'].m-left-l { - margin-left: 0; - } - .m-row > [class*='m-col-l-'].m-right-l { - margin-right: 0; - } .m-center-l, [class*='m-col-l-'].m-center-l { margin-left: auto; margin-right: auto; @@ -1234,11 +1185,70 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid, .m-container-inflatable > .m-row > [class*='m-col-'] section > pre, .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure, -.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure { +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure, +.m-container-inflatable [class*='m-center-'] > .m-note, +.m-container-inflatable [class*='m-center-'] > .m-frame, +.m-container-inflatable [class*='m-center-'] > .m-block, +.m-container-inflatable [class*='m-center-'] > .m-imagegrid, +.m-container-inflatable [class*='m-center-'] > pre, +.m-container-inflatable [class*='m-center-'] > .m-code-figure, +.m-container-inflatable [class*='m-center-'] > .m-console-figure, +.m-container-inflatable [class*='m-left-'] > .m-note, +.m-container-inflatable [class*='m-left-'] > .m-frame, +.m-container-inflatable [class*='m-left-'] > .m-block, +.m-container-inflatable [class*='m-left-'] > .m-imagegrid, +.m-container-inflatable [class*='m-left-'] > pre, +.m-container-inflatable [class*='m-left-'] > .m-code-figure, +.m-container-inflatable [class*='m-left-'] > .m-console-figure, +.m-container-inflatable [class*='m-right-'] > .m-note, +.m-container-inflatable [class*='m-right-'] > .m-frame, +.m-container-inflatable [class*='m-right-'] > .m-block, +.m-container-inflatable [class*='m-right-'] > .m-imagegrid, +.m-container-inflatable [class*='m-right-'] > pre, +.m-container-inflatable [class*='m-right-'] > .m-code-figure, +.m-container-inflatable [class*='m-right-'] > .m-console-figure, +.m-container-inflatable .m-container-inflate > .m-note, +.m-container-inflatable .m-container-inflate > .m-frame, +.m-container-inflatable .m-container-inflate > .m-block, +.m-container-inflatable .m-container-inflate > .m-imagegrid, +.m-container-inflatable .m-container-inflate > pre, +.m-container-inflatable .m-container-inflate > .m-code-figure, +.m-container-inflatable .m-container-inflate > .m-console-figure +{ margin-left: -1rem; margin-right: -1rem; } @media screen and (min-width: 576px) { + .m-container-inflatable .m-center-s > .m-note, + .m-container-inflatable .m-center-s > .m-frame, + .m-container-inflatable .m-center-s > .m-block, + .m-container-inflatable .m-center-s > .m-imagegrid, + .m-container-inflatable .m-center-s > pre, + .m-container-inflatable .m-center-s > .m-code-figure, + .m-container-inflatable .m-center-s > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-s > .m-note, + .m-container-inflatable .m-left-s > .m-frame, + .m-container-inflatable .m-left-s > .m-block, + .m-container-inflatable .m-left-s > .m-imagegrid, + .m-container-inflatable .m-left-s > pre, + .m-container-inflatable .m-left-s > .m-code-figure, + .m-container-inflatable .m-left-s > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-s > .m-note, + .m-container-inflatable .m-right-s > .m-frame, + .m-container-inflatable .m-right-s > .m-block, + .m-container-inflatable .m-right-s > .m-imagegrid, + .m-container-inflatable .m-right-s > pre, + .m-container-inflatable .m-right-s > .m-code-figure, + .m-container-inflatable .m-right-s > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } .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%; @@ -1246,6 +1256,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- } } @media screen and (min-width: 768px) { + .m-container-inflatable .m-center-m > .m-note, + .m-container-inflatable .m-center-m > .m-frame, + .m-container-inflatable .m-center-m > .m-block, + .m-container-inflatable .m-center-m > .m-imagegrid, + .m-container-inflatable .m-center-m > pre, + .m-container-inflatable .m-center-m > .m-code-figure, + .m-container-inflatable .m-center-m > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-m > .m-note, + .m-container-inflatable .m-left-m > .m-frame, + .m-container-inflatable .m-left-m > .m-block, + .m-container-inflatable .m-left-m > .m-imagegrid, + .m-container-inflatable .m-left-m > pre, + .m-container-inflatable .m-left-m > .m-code-figure, + .m-container-inflatable .m-left-m > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-m > .m-note, + .m-container-inflatable .m-right-m > .m-frame, + .m-container-inflatable .m-right-m > .m-block, + .m-container-inflatable .m-right-m > .m-imagegrid, + .m-container-inflatable .m-right-m > pre, + .m-container-inflatable .m-right-m > .m-code-figure, + .m-container-inflatable .m-right-m > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } .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%; @@ -1253,6 +1293,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- } } @media screen and (min-width: 992px) { + .m-container-inflatable .m-center-l > .m-note, + .m-container-inflatable .m-center-l > .m-frame, + .m-container-inflatable .m-center-l > .m-block, + .m-container-inflatable .m-center-l > .m-imagegrid, + .m-container-inflatable .m-center-l > pre, + .m-container-inflatable .m-center-l > .m-code-figure, + .m-container-inflatable .m-center-l > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-l > .m-note, + .m-container-inflatable .m-left-l > .m-frame, + .m-container-inflatable .m-left-l > .m-block, + .m-container-inflatable .m-left-l > .m-imagegrid, + .m-container-inflatable .m-left-l > pre, + .m-container-inflatable .m-left-l > .m-code-figure, + .m-container-inflatable .m-left-l > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-l > .m-note, + .m-container-inflatable .m-right-l > .m-frame, + .m-container-inflatable .m-right-l > .m-block, + .m-container-inflatable .m-right-l > .m-imagegrid, + .m-container-inflatable .m-right-l > pre, + .m-container-inflatable .m-right-l > .m-code-figure, + .m-container-inflatable .m-right-l > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } .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%; @@ -1701,7 +1771,7 @@ body > header > nav ol { body > header > nav ol ol { padding-left: 1.5rem; } -body > header > nav [class*='m-col-'] { +body > header > nav .m-row > [class*='m-col-'] { padding-top: 0; padding-bottom: 0; } @@ -2039,7 +2109,31 @@ article:last-child, article section:last-child { margin-bottom: 0; } .m-container-inflatable section:target section > .m-block, .m-container-inflatable section:target section > pre, .m-container-inflatable section:target section > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child { +.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-center-'] > .m-note, +.m-container-inflatable section:target [class*='m-center-'] > .m-frame, +.m-container-inflatable section:target [class*='m-center-'] > .m-block, +.m-container-inflatable section:target [class*='m-center-'] > pre, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-left-'] > .m-note, +.m-container-inflatable section:target [class*='m-left-'] > .m-frame, +.m-container-inflatable section:target [class*='m-left-'] > .m-block, +.m-container-inflatable section:target [class*='m-left-'] > pre, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-right-'] > .m-note, +.m-container-inflatable section:target [class*='m-right-'] > .m-frame, +.m-container-inflatable section:target [class*='m-right-'] > .m-block, +.m-container-inflatable section:target [class*='m-right-'] > pre, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target .m-container-inflate > .m-note, +.m-container-inflatable section:target .m-container-inflate > .m-frame, +.m-container-inflatable section:target .m-container-inflate > .m-block, +.m-container-inflatable section:target .m-container-inflate > pre, +.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure > pre:first-child { margin-left: -1.0rem; border-left-style: solid; border-left-width: 0.25rem; @@ -2050,50 +2144,223 @@ article:last-child, article section:last-child { margin-bottom: 0; } .m-container-inflatable section:target > figure.m-code-figure::before, .m-container-inflatable section:target > figure.m-console-figure::before, .m-container-inflatable section:target section > figure.m-code-figure::before, -.m-container-inflatable section:target section > figure.m-console-figure::before { +.m-container-inflatable section:target section > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before, +.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure::before, +.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure::before { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0.25rem; } -.m-container-inflatable section:target > pre, -.m-container-inflatable section:target > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target > figure.m-console-figure > pre:first-child, -.m-container-inflatable section:target section > pre, -.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child { - border-color: #f7e3db; +@media screen and (min-width: 576px) { + .m-container-inflatable section:target .m-center-s > .m-note, + .m-container-inflatable section:target .m-center-s > pre, + .m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child { + border-left-width: 0; + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-s > .m-block, + .m-container-inflatable section:target .m-right-s > .m-block { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + } + .m-container-inflatable section:target .m-center-s > .m-frame, + .m-container-inflatable section:target .m-right-s > .m-frame { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-s > .m-block, + .m-container-inflatable section:target .m-right-s > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-s > .m-note, + .m-container-inflatable section:target .m-right-s > pre { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + } +} +@media screen and (min-width: 768px) { + .m-container-inflatable section:target .m-center-m > .m-note, + .m-container-inflatable section:target .m-center-m > pre, + .m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child { + border-left-width: 0; + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-m > .m-block, + .m-container-inflatable section:target .m-right-m > .m-block { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + } + .m-container-inflatable section:target .m-center-m > .m-frame, + .m-container-inflatable section:target .m-right-m > .m-frame { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-m > .m-block, + .m-container-inflatable section:target .m-right-m > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-m > .m-note, + .m-container-inflatable section:target .m-right-m > pre { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + } +} +@media screen and (min-width: 992px) { + .m-container-inflatable section:target .m-center-l > .m-note, + .m-container-inflatable section:target .m-center-l > pre, + .m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child { + border-left-width: 0; + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-l > .m-block, + .m-container-inflatable section:target .m-right-l > .m-block { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + } + .m-container-inflatable section:target .m-center-l > .m-frame, + .m-container-inflatable section:target .m-right-l > .m-frame { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-l > .m-block, + .m-container-inflatable section:target .m-right-l > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-l > .m-note, + .m-container-inflatable section:target .m-right-l > pre { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + } } .m-container-inflatable section:target > figure.m-code-figure::before, .m-container-inflatable section:target > figure.m-console-figure::before, -.m-container-inflatable section:target > .m-note.m-default, .m-container-inflatable section:target section > figure.m-code-figure::before, .m-container-inflatable section:target section > figure.m-console-figure::before, -.m-container-inflatable section:target section > .m-note.m-default { +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before, +.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before, +.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before { border-left-color: #f7e3db; } -.m-container-inflatable section:target > .m-note.m-primary, -.m-container-inflatable section:target section > .m-note.m-primary { - border-left-color: #cb4b16; +@media screen and (min-width: 576px) { + .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before { + border-color: #fbf0ec; + } + .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before { + border-color: #000000; + } +} +@media screen and (min-width: 768px) { + .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before { + border-color: #fbf0ec; + } + .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before { + border-color: #000000; + } +} +@media screen and (min-width: 992px) { + .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before { + border-color: #fbf0ec; + } + .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before { + border-color: #000000; + } +} +.m-container-inflatable section:target pre, +.m-container-inflatable section:target figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target figure.m-console-figure > pre:first-child { + border-color: #f7e3db; +} +.m-container-inflatable section:target .m-note.m-default { + border-color: #f7e3db; } -.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-primary { + border-color: #cb4b16; } -.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-success { + border-color: #31c25d; } -.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-warning { + border-color: #c7cf2f; } -.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-danger { + border-color: #f60000; } -.m-container-inflatable section:target > .m-note.m-dim, -.m-container-inflatable section:target section > .m-note.m-dim { - border-left-color: #bdbdbd; +.m-container-inflatable section:target .m-note.m-info { + border-color: #2e7dc5; +} +.m-container-inflatable section:target .m-note.m-dim { + border-color: #bdbdbd; } .m-console .hll { background-color: #ffffcc } diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css index 0c1c71d5..5b5e8623 100644 --- a/css/m-light.compiled.css +++ b/css/m-light.compiled.css @@ -41,7 +41,7 @@ body { margin: 0; } clear: both; display: table; } -[class*='m-col-'] { +.m-row > [class*='m-col-'] { position: relative; padding: 1rem; } @@ -53,17 +53,11 @@ body { margin: 0; } [class*='m-show-'] { display: none; } -[class*='m-col-'].m-left-s, [class*='m-col-'].m-right-s, [class*='m-col-'].m-center-s, -[class*='m-col-'].m-left-m, [class*='m-col-'].m-right-m, [class*='m-col-'].m-center-m, -[class*='m-col-'].m-left-l, [class*='m-col-'].m-right-l, [class*='m-col-'].m-center-l { - margin-left: -1rem; - margin-right: -1rem; +.m-container-inflate, :not(.m-row) > [class*='m-col-'] { + margin-bottom: 1rem; } -.m-row > [class*='m-col-'].m-left-s, .m-row > [class*='m-col-'].m-right-s, .m-row > [class*='m-col-'].m-center-s, -.m-row > [class*='m-col-'].m-left-m, .m-row > [class*='m-col-'].m-right-m, .m-row > [class*='m-col-'].m-center-m, -.m-row > [class*='m-col-'].m-left-l, .m-row > [class*='m-col-'].m-right-l .m-row > [class*='m-col-'].m-center-l { - margin-left: 0; - margin-right: 0; +.m-container-inflate:last-child, :not(.m-row) > [class*='m-col-']:last-child { + margin-bottom: 0; } .m-container.m-nopad, [class*='m-col-'].m-nopad, .m-container.m-nopadx, [class*='m-col-'].m-nopadx, @@ -78,35 +72,22 @@ body { margin: 0; } [class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt { padding-top: 0; } -[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb { +[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb, +.m-container-inflate.m-nopadb { padding-bottom: 0; } [class*='m-col-t-'] { float: left; } -[class*='m-col-t-'].m-left-t, [class*='m-col-t-'].m-right-t { - padding-top: 0px; - padding-bottom: 0px; -} .m-left-t { + padding-right: 1rem; float: left; } .m-right-t, [class*='m-col-t-'].m-right-t { + padding-left: 1rem; float: right; } .m-center-t, [class*='m-col-t-'].m-center-t { float: none; } -[class*='m-col-t-'].m-left-t { - margin-left: -1rem; -} -[class*='m-col-t-'].m-right-t { - margin-right: -1rem; -} -.m-row > [class*='m-col-t-'].m-left-t { - margin-left: 0; -} -.m-row > [class*='m-col-t-'].m-right-t { - margin-right: 0; -} .m-center-t, [class*='m-col-t-'].m-center-t { margin-left: auto; margin-right: auto; @@ -148,35 +129,25 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } - [class*='m-col-s-'] { float: left; } - [class*='m-col-s-'].m-left-s, [class*='m-col-s-'].m-right-s { - padding-top: 0px; - padding-bottom: 0px; + .m-container-inflatable .m-col-s-10 .m-container-inflate.m-left-s { + margin-left: -10%; + } + .m-container-inflatable .m-col-s-10 .m-container-inflate.m-right-s { + margin-right: -10%; } + [class*='m-col-s-'] { float: left; } .m-left-s { + padding-right: 1rem; float: left; } .m-right-s, [class*='m-col-s-'].m-right-s { + padding-left: 1rem; float: right; } - [class*='m-col-s-'].m-left-s { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-s-'].m-right-s { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-s-'].m-left-s { - margin-left: 0; - } - .m-row > [class*='m-col-s-'].m-right-s { - margin-right: 0; - } .m-center-s, [class*='m-col-s-'].m-center-s { margin-left: auto; margin-right: auto; @@ -228,35 +199,25 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } - [class*='m-col-m-'] { float: left; } - [class*='m-col-m-'].m-left-m, [class*='m-col-m-'].m-right-m { - padding-top: 0px; - padding-bottom: 0px; + .m-container-inflatable .m-col-m-10 .m-container-inflate.m-left-m { + margin-left: -10%; } + .m-container-inflatable .m-col-m-10 .m-container-inflate.m-right-m { + margin-right: -10%; + } + [class*='m-col-m-'] { float: left; } .m-left-m { + padding-right: 1rem; float: left; } .m-right-m, [class*='m-col-m-'].m-right-m { + padding-left: 1rem; float: right; } - [class*='m-col-m-'].m-left-m { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-m-'].m-right-m { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-m-'].m-left-m { - margin-left: 0; - } - .m-row > [class*='m-col-m-'].m-right-m { - margin-right: 0; - } .m-center-m, [class*='m-col-m-'].m-center-m { margin-left: auto; margin-right: auto; @@ -308,35 +269,25 @@ 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:not([class*='m-left-']):not([class*='m-right-']) { margin-left: -10%; margin-right: -10%; } - [class*='m-col-l-'] { float: left; } - [class*='m-col-l-'].m-left-l, [class*='m-col-l-'].m-right-l { - padding-top: 0px; - padding-bottom: 0px; + .m-container-inflatable .m-col-l-10 .m-container-inflate.m-left-l { + margin-left: -10%; } + .m-container-inflatable .m-col-l-10 .m-container-inflate.m-right-l { + margin-right: -10%; + } + [class*='m-col-l-'] { float: left; } .m-left-l { + padding-right: 1rem; float: left; } .m-right-l, [class*='m-col-l-'].m-right-l { + padding-left: 1rem; float: right; } - [class*='m-col-l-'].m-left-l { - margin-left: -1rem; - margin-right: 0; - } - [class*='m-col-l-'].m-right-l { - margin-left: 0; - margin-right: -1rem; - } - .m-row > [class*='m-col-l-'].m-left-l { - margin-left: 0; - } - .m-row > [class*='m-col-l-'].m-right-l { - margin-right: 0; - } .m-center-l, [class*='m-col-l-'].m-center-l { margin-left: auto; margin-right: auto; @@ -1234,11 +1185,70 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid, .m-container-inflatable > .m-row > [class*='m-col-'] section > pre, .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure, -.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure { +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure, +.m-container-inflatable [class*='m-center-'] > .m-note, +.m-container-inflatable [class*='m-center-'] > .m-frame, +.m-container-inflatable [class*='m-center-'] > .m-block, +.m-container-inflatable [class*='m-center-'] > .m-imagegrid, +.m-container-inflatable [class*='m-center-'] > pre, +.m-container-inflatable [class*='m-center-'] > .m-code-figure, +.m-container-inflatable [class*='m-center-'] > .m-console-figure, +.m-container-inflatable [class*='m-left-'] > .m-note, +.m-container-inflatable [class*='m-left-'] > .m-frame, +.m-container-inflatable [class*='m-left-'] > .m-block, +.m-container-inflatable [class*='m-left-'] > .m-imagegrid, +.m-container-inflatable [class*='m-left-'] > pre, +.m-container-inflatable [class*='m-left-'] > .m-code-figure, +.m-container-inflatable [class*='m-left-'] > .m-console-figure, +.m-container-inflatable [class*='m-right-'] > .m-note, +.m-container-inflatable [class*='m-right-'] > .m-frame, +.m-container-inflatable [class*='m-right-'] > .m-block, +.m-container-inflatable [class*='m-right-'] > .m-imagegrid, +.m-container-inflatable [class*='m-right-'] > pre, +.m-container-inflatable [class*='m-right-'] > .m-code-figure, +.m-container-inflatable [class*='m-right-'] > .m-console-figure, +.m-container-inflatable .m-container-inflate > .m-note, +.m-container-inflatable .m-container-inflate > .m-frame, +.m-container-inflatable .m-container-inflate > .m-block, +.m-container-inflatable .m-container-inflate > .m-imagegrid, +.m-container-inflatable .m-container-inflate > pre, +.m-container-inflatable .m-container-inflate > .m-code-figure, +.m-container-inflatable .m-container-inflate > .m-console-figure +{ margin-left: -1rem; margin-right: -1rem; } @media screen and (min-width: 576px) { + .m-container-inflatable .m-center-s > .m-note, + .m-container-inflatable .m-center-s > .m-frame, + .m-container-inflatable .m-center-s > .m-block, + .m-container-inflatable .m-center-s > .m-imagegrid, + .m-container-inflatable .m-center-s > pre, + .m-container-inflatable .m-center-s > .m-code-figure, + .m-container-inflatable .m-center-s > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-s > .m-note, + .m-container-inflatable .m-left-s > .m-frame, + .m-container-inflatable .m-left-s > .m-block, + .m-container-inflatable .m-left-s > .m-imagegrid, + .m-container-inflatable .m-left-s > pre, + .m-container-inflatable .m-left-s > .m-code-figure, + .m-container-inflatable .m-left-s > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-s > .m-note, + .m-container-inflatable .m-right-s > .m-frame, + .m-container-inflatable .m-right-s > .m-block, + .m-container-inflatable .m-right-s > .m-imagegrid, + .m-container-inflatable .m-right-s > pre, + .m-container-inflatable .m-right-s > .m-code-figure, + .m-container-inflatable .m-right-s > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } .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%; @@ -1246,6 +1256,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- } } @media screen and (min-width: 768px) { + .m-container-inflatable .m-center-m > .m-note, + .m-container-inflatable .m-center-m > .m-frame, + .m-container-inflatable .m-center-m > .m-block, + .m-container-inflatable .m-center-m > .m-imagegrid, + .m-container-inflatable .m-center-m > pre, + .m-container-inflatable .m-center-m > .m-code-figure, + .m-container-inflatable .m-center-m > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-m > .m-note, + .m-container-inflatable .m-left-m > .m-frame, + .m-container-inflatable .m-left-m > .m-block, + .m-container-inflatable .m-left-m > .m-imagegrid, + .m-container-inflatable .m-left-m > pre, + .m-container-inflatable .m-left-m > .m-code-figure, + .m-container-inflatable .m-left-m > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-m > .m-note, + .m-container-inflatable .m-right-m > .m-frame, + .m-container-inflatable .m-right-m > .m-block, + .m-container-inflatable .m-right-m > .m-imagegrid, + .m-container-inflatable .m-right-m > pre, + .m-container-inflatable .m-right-m > .m-code-figure, + .m-container-inflatable .m-right-m > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } .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%; @@ -1253,6 +1293,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m- } } @media screen and (min-width: 992px) { + .m-container-inflatable .m-center-l > .m-note, + .m-container-inflatable .m-center-l > .m-frame, + .m-container-inflatable .m-center-l > .m-block, + .m-container-inflatable .m-center-l > .m-imagegrid, + .m-container-inflatable .m-center-l > pre, + .m-container-inflatable .m-center-l > .m-code-figure, + .m-container-inflatable .m-center-l > .m-console-figure { + margin-left: -1rem; + margin-right: -1rem; + } + .m-container-inflatable .m-left-l > .m-note, + .m-container-inflatable .m-left-l > .m-frame, + .m-container-inflatable .m-left-l > .m-block, + .m-container-inflatable .m-left-l > .m-imagegrid, + .m-container-inflatable .m-left-l > pre, + .m-container-inflatable .m-left-l > .m-code-figure, + .m-container-inflatable .m-left-l > .m-console-figure { + margin-left: -1rem; + margin-right: 0; + } + .m-container-inflatable .m-right-l > .m-note, + .m-container-inflatable .m-right-l > .m-frame, + .m-container-inflatable .m-right-l > .m-block, + .m-container-inflatable .m-right-l > .m-imagegrid, + .m-container-inflatable .m-right-l > pre, + .m-container-inflatable .m-right-l > .m-code-figure, + .m-container-inflatable .m-right-l > .m-console-figure { + margin-left: 0; + margin-right: -1rem; + } .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%; @@ -1701,7 +1771,7 @@ body > header > nav ol { body > header > nav ol ol { padding-left: 1.5rem; } -body > header > nav [class*='m-col-'] { +body > header > nav .m-row > [class*='m-col-'] { padding-top: 0; padding-bottom: 0; } @@ -2039,7 +2109,31 @@ article:last-child, article section:last-child { margin-bottom: 0; } .m-container-inflatable section:target section > .m-block, .m-container-inflatable section:target section > pre, .m-container-inflatable section:target section > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child { +.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-center-'] > .m-note, +.m-container-inflatable section:target [class*='m-center-'] > .m-frame, +.m-container-inflatable section:target [class*='m-center-'] > .m-block, +.m-container-inflatable section:target [class*='m-center-'] > pre, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-left-'] > .m-note, +.m-container-inflatable section:target [class*='m-left-'] > .m-frame, +.m-container-inflatable section:target [class*='m-left-'] > .m-block, +.m-container-inflatable section:target [class*='m-left-'] > pre, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-right-'] > .m-note, +.m-container-inflatable section:target [class*='m-right-'] > .m-frame, +.m-container-inflatable section:target [class*='m-right-'] > .m-block, +.m-container-inflatable section:target [class*='m-right-'] > pre, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure > pre:first-child, +.m-container-inflatable section:target .m-container-inflate > .m-note, +.m-container-inflatable section:target .m-container-inflate > .m-frame, +.m-container-inflatable section:target .m-container-inflate > .m-block, +.m-container-inflatable section:target .m-container-inflate > pre, +.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure > pre:first-child { margin-left: -1.0rem; border-left-style: solid; border-left-width: 0.25rem; @@ -2050,50 +2144,223 @@ article:last-child, article section:last-child { margin-bottom: 0; } .m-container-inflatable section:target > figure.m-code-figure::before, .m-container-inflatable section:target > figure.m-console-figure::before, .m-container-inflatable section:target section > figure.m-code-figure::before, -.m-container-inflatable section:target section > figure.m-console-figure::before { +.m-container-inflatable section:target section > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before, +.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure::before, +.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure::before { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0.25rem; } -.m-container-inflatable section:target > pre, -.m-container-inflatable section:target > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target > figure.m-console-figure > pre:first-child, -.m-container-inflatable section:target section > pre, -.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child, -.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child { - border-color: #f7e3db; +@media screen and (min-width: 576px) { + .m-container-inflatable section:target .m-center-s > .m-note, + .m-container-inflatable section:target .m-center-s > pre, + .m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child { + border-left-width: 0; + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-s > .m-block, + .m-container-inflatable section:target .m-right-s > .m-block { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + } + .m-container-inflatable section:target .m-center-s > .m-frame, + .m-container-inflatable section:target .m-right-s > .m-frame { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-s > .m-block, + .m-container-inflatable section:target .m-right-s > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-s > .m-note, + .m-container-inflatable section:target .m-right-s > pre { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + } +} +@media screen and (min-width: 768px) { + .m-container-inflatable section:target .m-center-m > .m-note, + .m-container-inflatable section:target .m-center-m > pre, + .m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child { + border-left-width: 0; + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-m > .m-block, + .m-container-inflatable section:target .m-right-m > .m-block { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + } + .m-container-inflatable section:target .m-center-m > .m-frame, + .m-container-inflatable section:target .m-right-m > .m-frame { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-m > .m-block, + .m-container-inflatable section:target .m-right-m > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-m > .m-note, + .m-container-inflatable section:target .m-right-m > pre { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + } +} +@media screen and (min-width: 992px) { + .m-container-inflatable section:target .m-center-l > .m-note, + .m-container-inflatable section:target .m-center-l > pre, + .m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child { + border-left-width: 0; + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-l > .m-block, + .m-container-inflatable section:target .m-right-l > .m-block { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + } + .m-container-inflatable section:target .m-center-l > .m-frame, + .m-container-inflatable section:target .m-right-l > .m-frame { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + padding-left: 0.875rem; + } + .m-container-inflatable section:target .m-right-l > .m-block, + .m-container-inflatable section:target .m-right-l > .m-frame { + margin-left: 0; + } + .m-container-inflatable section:target .m-right-l > .m-note, + .m-container-inflatable section:target .m-right-l > pre { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + margin-left: 0; + border-left-width: 0; + padding-left: 1rem; + } + .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before { + border-top-left-radius: 0.2rem; + border-bottom-left-radius: 0.2rem; + border-left-width: 0.125rem; + } } .m-container-inflatable section:target > figure.m-code-figure::before, .m-container-inflatable section:target > figure.m-console-figure::before, -.m-container-inflatable section:target > .m-note.m-default, .m-container-inflatable section:target section > figure.m-code-figure::before, .m-container-inflatable section:target section > figure.m-console-figure::before, -.m-container-inflatable section:target section > .m-note.m-default { +.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before, +.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before, +.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before, +.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before { border-left-color: #f7e3db; } -.m-container-inflatable section:target > .m-note.m-primary, -.m-container-inflatable section:target section > .m-note.m-primary { - border-left-color: #cb4b16; +@media screen and (min-width: 576px) { + .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before { + border-color: #fbf0ec; + } + .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before { + border-color: #000000; + } +} +@media screen and (min-width: 768px) { + .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before { + border-color: #fbf0ec; + } + .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before { + border-color: #000000; + } +} +@media screen and (min-width: 992px) { + .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before { + border-color: #fbf0ec; + } + .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before, + .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before { + border-color: #000000; + } +} +.m-container-inflatable section:target pre, +.m-container-inflatable section:target figure.m-code-figure > pre:first-child, +.m-container-inflatable section:target figure.m-console-figure > pre:first-child { + border-color: #f7e3db; +} +.m-container-inflatable section:target .m-note.m-default { + border-color: #f7e3db; } -.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-primary { + border-color: #cb4b16; } -.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-success { + border-color: #31c25d; } -.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-warning { + border-color: #c7cf2f; } -.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-danger { + border-color: #f60000; } -.m-container-inflatable section:target > .m-note.m-dim, -.m-container-inflatable section:target section > .m-note.m-dim { - border-left-color: #bdbdbd; +.m-container-inflatable section:target .m-note.m-info { + border-color: #2e7dc5; +} +.m-container-inflatable section:target .m-note.m-dim { + border-color: #bdbdbd; } .m-console .hll { background-color: #ffffcc } diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst index 870f2059..06862c6c 100644 --- a/doc/css/components-test.rst +++ b/doc/css/components-test.rst @@ -25,7 +25,7 @@ Test #### -:save_as: css/components/test/index.html +:slug: css/components/test :breadcrumb: {filename}/css.rst CSS {filename}/css/components.rst Components @@ -1193,3 +1193,76 @@ List with components inside

Paragraph after.

+ +`Floating around`_ +================== + +Similar to the `grid test <{filename}/css/grid-test.rst#floating-around>`_, but +with components. + +.. raw:: html + +
+ Should have the background extended all the way to the sides on small + screens. +
+ +
+
+

Should have no spacing on top/sides but on the bottom, extended to the + sides on tiny. Lorem ipsum dolor.

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + elit posuere, consectetur magna congue, sagittis est. Pellentesque + est neque, aliquet nec consectetur in, mattis ac diam. Aliquam + placerat justo ut purus interdum, ac placerat lacus consequat. Ut dictum + enim posuere metus porta, et aliquam ex condimentum. Proin sagittis nisi + leo, ac pellentesque purus bibendum sit amet.

+ +
+
+

Should have spacing on sides but not on the bottom, extended to the + sides on tiny. Pellentesque est neque, aliquet nec consectetur.

+
+
+ +`Floating around, inflated`_ +============================ + +.. raw:: html + +
+
+

Should be extended to both sides, have padding on bottom an on sides + the same as above. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Aenean id elit posuere, consectetur magna congue, sagittis est. + Pellentesque est neque, aliquet nec consectetur in, mattis ac diam. + Aliquam placerat justo ut purus interdum, ac placerat lacus + consequat.

+
+
+ +
+
+

Should be extended to the right, have padding on bottom an on the + right side the same as above. Lorem ipsum dolor.

+
+
+ +
+
+

Should be extended to the left, have padding on bottom an on the + outside the same as above. Lorem ipsum dolor.

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + elit posuere, consectetur magna congue, sagittis est. Pellentesque + est neque, aliquet nec consectetur in, mattis ac diam. Aliquam placerat + justo ut purus interdum, ac placerat lacus consequat. Ut dictum enim + posuere metus porta, et aliquam ex condimentum. Proin sagittis nisi leo, ac + pellentesque purus bibendum sit amet. Aliquam placerat justo ut purus + interdum, ac placerat lacus consequat. Ut dictum enim posuere metus porta, + et aliquam ex condimentum.

diff --git a/doc/css/components.rst b/doc/css/components.rst index acb9273b..4dcb5b6d 100644 --- a/doc/css/components.rst +++ b/doc/css/components.rst @@ -1290,8 +1290,8 @@ element and put the :html:`` as a first child, all other content after.
Impenetrable logic
-`Padding`_ -========== +`Padding and floating`_ +======================= Similarly to `typography elements <{filename}/css/typography.rst#padding>`_; blocks, notes, frames, tables, images, figures, image grids, code and math @@ -1299,6 +1299,17 @@ blocks and code figures have :css:`1rem` padding on the bottom, except when they are the last element, to avoid excessive spacing. The list special casing and ability to disable the padding using :css:`.m-nopadb` applies here as well. +Components that appear directly in a column that's :css:`m-container-inflatable` +or directly inside any nested :html:`
` are outdented to preserve a +straight line of text alignment on the sides. You can spot that on this page +--- look how notes and figures have their background outside. This also makes +narrow layouts better readable, as the component visuals don't cut into +precious screen width. + +All components support the `floating classes <{filename}/css/grid.rst#floating-around>`_ from the grid system, however having floating elements *inside* the +components is not supported. Floating elements also preserve the inflatable +behavior described above. + `Responsive utilities`_ ======================= diff --git a/doc/css/grid-test.rst b/doc/css/grid-test.rst new file mode 100644 index 00000000..4003946c --- /dev/null +++ b/doc/css/grid-test.rst @@ -0,0 +1,87 @@ +.. + This file is part of m.css. + + Copyright © 2017, 2018 Vladimír Vondruš + + Permission is hereby granted, free of charge, to any person obtaining a + copy of this software and associated documentation files (the "Software"), + to deal in the Software without restriction, including without limitation + the rights to use, copy, modify, merge, publish, distribute, sublicense, + and/or sell copies of the Software, and to permit persons to whom the + Software is furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included + in all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL + THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER + DEALINGS IN THE SOFTWARE. +.. + +Test +#### + +:save_as: css/grid/test/index.html +:breadcrumb: {filename}/css.rst CSS + {filename}/css/grid.rst Grid system + +See the `Components test <{filename}/css/components-test.rst#floating-around>`_ +for a similar test but with components. + +Floating around +=============== + +.. raw:: html + +
+

Should have no spacing on top/sides but on the bottom, extended to the + sides on tiny. Lorem ipsum dolor.

+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + elit posuere, consectetur magna congue, sagittis est. Pellentesque + est neque, aliquet nec consectetur in, mattis ac diam. Aliquam + placerat justo ut purus interdum, ac placerat lacus consequat. Ut dictum + enim posuere metus porta, et aliquam ex condimentum. Proin sagittis nisi + leo, ac pellentesque purus bibendum sit amet.

+ +
+

Should have spacing on sides but not on the bottom, extended to the + sides on tiny. Pellentesque est neque, aliquet nec consectetur.

+
+ +Floating around, inflated +========================= + +.. raw:: html + +
+

Should be extended to both sides, have padding on bottom an on sides + the same as above, lines aligned. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id elit posuere, consectetur magna congue, + sagittis est. Pellentesque est neque, aliquet nec consectetur in, mattis + ac diam. Aliquam placerat justo ut purus interdum, ac placerat lacus + consequat.

+
+ +
+

Should be extended to the right, have padding on bottom an on the + right side the same as above, lines aligned. Lorem ipsum dolor.

+
+ +
+

Should be extended to the left, have padding on bottom an on the + outside the same as above, lines aligned. Lorem ipsum dolor.

+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + elit posuere, consectetur magna congue, sagittis est. Pellentesque + est neque, aliquet nec consectetur in, mattis ac diam. Aliquam placerat + justo ut purus interdum, ac placerat lacus consequat. Ut dictum enim + posuere metus porta, et aliquam ex condimentum. Proin sagittis nisi leo, ac + pellentesque purus bibendum sit amet. Aliquam placerat justo ut purus + interdum, ac placerat lacus consequat. Ut dictum enim posuere metus porta, + et aliquam ex condimentum.

diff --git a/doc/css/grid.rst b/doc/css/grid.rst index 916b52d9..148599cb 100644 --- a/doc/css/grid.rst +++ b/doc/css/grid.rst @@ -215,7 +215,7 @@ content based on screen width. Learn by example:
.m-col-l-6 .m-push-l-3
-
.m-col-s-8 .m-push-s-4
first
+
.m-col-s-8 .m-push-s-4
first
.m-col-s-4 .m-pull-s-8
second
@@ -245,21 +245,31 @@ on tiny screens: quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-.. frame:: +.. raw:: html - .. raw:: html +
+
.m-col-s-6 .m-center-s .m-col-m-4 .m-right-m
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat.

-
-
.m-col-s-6 .m-center-s .m-col-m-4 .m-right-m
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat.

+.. container:: m-clearfix-m + + .. + +Left-aligned floating blocks additionally have :css:`1rem` padding on the right +and right-aligned blocks on the left. All of them have implicitly padding on bottom, except if the element is a last child. Add a :css:`.m-nopadb` class to +them to disable bottom padding, if you want to preserve it even for a last +child, add an empty :html:`
` element after. .. note-info:: The floating works on any element, not just those that are :css:`.m-col-*`. + Moreover, if you'll float `components <{filename}/css/components.rst>`_ + such as images or figures without using :css:`.m-col-*`, they will occupy + exactly the width of their contents without being shrunk or scaled. `Grid padding`_ =============== @@ -336,7 +346,7 @@ navigation on different devices. ========================= It's usual that the content area of the page doesn't span the full 12-column -width in order to avoid long unreadable lines. But sometimmes one might want to +width in order to avoid long unreadable lines. But sometimes one might want to use the full available width --- for example to show big pictures or to fit many things next to each other. @@ -356,7 +366,48 @@ put your nested content in elements marked with :css:`.m-container-inflate`. .. raw:: html -
.m-container-inflate
+
+
.m-container-inflate
+
+ +The :css:`.m-container-inflate` block has implicitly a :css:`1rem` padding +after (but not on other sides and also not if it's the last child). Add a +:css:`.m-nopadb` class to it to disable that, if you want to preserve the +padding even for a last child, add an empty :html:`
` element after. + +It's also possible to tuck floating content out of the page flow by combining +:css:`.m-left-*` with :css:`.m-container-inflate`: + +.. code:: html + +
+
+
+
+ .m-container-inflate .m-col-l-6 .m-right-l +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + elit posuere, consectetur magna congue, sagittis est. Pellentesque + est neque, aliquet nec consectetur in, mattis ac diam.

+
+
+
+ +.. raw:: html + +
+
.m-container-inflate .m-col-l-6 m-right-l
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + elit posuere, consectetur magna congue, sagittis est. Pellentesque + est neque, aliquet nec consectetur in, mattis ac diam.

+ +.. note-warning:: + + Similarly to `pushing and pulling`_, there may be corner cases where + inflating of floating elements may not work. To fix that, try specifying + all applicable :css:`.m-col-*-10` breakpoints for the inflatable column and + :css:`.m-right-*` / :css:`.m-left-*` for the floating element explicitly. `Debug CSS`_ ============ diff --git a/doc/css/page-layout-test.rst b/doc/css/page-layout-test.rst index f31621b8..9c6eacd2 100644 --- a/doc/css/page-layout-test.rst +++ b/doc/css/page-layout-test.rst @@ -25,7 +25,7 @@ Test #### -:save_as: css/page-layout/test/index.html +:slug: css/page-layout/test :breadcrumb: {filename}/css.rst CSS {filename}/css/page-layout.rst Page layout @@ -82,6 +82,110 @@ elements should be flattened and nothing should jump when highlighted. Frame will have its left border fattened. +.. code-figure:: + + .. code:: c++ + + /* The code will have a custom border */ + + The figure as well. + +`Floating components`_ +---------------------- + +.. container:: m-col-m-4 m-left-m + + .. note-success:: + + Changed on the left side. + +.. container:: m-col-m-4 m-right-m + + .. note-danger:: + + No change if not fullsize. + +Should behave as expected on the left side, but not on the right (unless the +window size is small). Centered note below should be marked also only when +touching the left side, not when centered. + +.. container:: m-clearfix-l + + .. + +.. container:: m-col-m-4 m-left-m + + .. block-success:: Block + + Changed on the left side. + +.. container:: m-col-m-4 m-right-m + + .. block-danger:: Block + + No change if not fullsize. + +Neither the blocks should do that. + +.. container:: m-clearfix-l + + .. + +.. container:: m-col-m-4 m-center-m + + .. block-danger:: Centered + + No change if not fullsize. + +.. container:: m-col-m-4 m-center-m + + .. frame:: Watch the border + + No change if not fullsize. + +.. container:: m-col-m-8 m-center-m + + .. code:: c++ + + /* Change on the left on small screen sizes. */ + +.. container:: m-col-m-10 m-center-m + + .. console-figure:: + + .. code:: shell-session + + $ code will have a custom border on small screens + + The figure as well. + +`Floating components, inflated`_ +-------------------------------- + +.. container:: m-col-l-4 m-left-l m-container-inflate + + .. note-success:: + + Changed. + +.. container:: m-col-l-4 m-right-l m-container-inflate + + .. note-success:: + + Not changed if not on the left. + +Lorem ipsum. + +.. container:: m-clearfix-l + + .. + +.. container:: m-container-inflate + + .. note-info:: Yes. + + This changes as well. + `Nested components`_ -------------------- diff --git a/doc/css/typography.rst b/doc/css/typography.rst index 129ead06..e6c8e91a 100644 --- a/doc/css/typography.rst +++ b/doc/css/typography.rst @@ -421,4 +421,6 @@ elements have :css:`1rem` padding on the bottom, except when the :html:`
  • ` is last, to achieve consistent spacing for inflated lists. The :css:`1rem` padding on the bottom can be disabled with :css:`.m-nopadb`, -similarly as with `grid layouts <{filename}/css/grid.rst#grid-padding>`_. +similarly as with `grid layouts <{filename}/css/grid.rst#grid-padding>`_. On +the other hand, if you want to preserve it, add an empty :html:`
    ` +element after.