diff --git a/src/main/java/de/hsel/itech/HelloWorld.java b/src/main/java/de/hsel/itech/HelloWorld.java index a5bc5c3..0d49078 100644 --- a/src/main/java/de/hsel/itech/HelloWorld.java +++ b/src/main/java/de/hsel/itech/HelloWorld.java @@ -7,7 +7,7 @@ import java.io.IOException; import java.io.PrintWriter; /** - * Hello World + * Hello World. * * @author Johannes Theiner * @version 0.1 diff --git a/src/main/webapp/WEB-INF/web.xml b/src/main/webapp/WEB-INF/web.xml index 98aae5f..7f3e851 100644 --- a/src/main/webapp/WEB-INF/web.xml +++ b/src/main/webapp/WEB-INF/web.xml @@ -12,6 +12,6 @@ helloWorld - / + /index \ No newline at end of file diff --git a/src/main/webapp/preview/catalog.html b/src/main/webapp/preview/catalog.html new file mode 100644 index 0000000..b551310 --- /dev/null +++ b/src/main/webapp/preview/catalog.html @@ -0,0 +1,168 @@ + + + + Amazon light + + + + + + + + + + + +
+ +
+ +
+ +
+ +

Belletristik

+
+
+
+ Polizei Auto +
Krimis
+
+
+
+
+ Glühbirne +
Thriller
+
+
+
+
+ Rose +
Liebesromane
+
+
+
+ +

Fachbücher

+ +
+
+
+ Tastatur +
Informatik
+
+
+
+
+ Münzen +
Finanzen
+
+
+
+
+ Zeitungen +
Medienwissenschaften
+
+
+
+ +

Kinderbücher

+ +
+
+
+ 2 Kinder beim lesen +
Lesen lernen
+
+
+
+
+ Farben +
Malbücher
+
+
+
+
+ Puzzle +
Puzzle
+
+
+
+ + +
+ +
+ + + + + + \ No newline at end of file diff --git a/src/main/webapp/preview/css/custom.css b/src/main/webapp/preview/css/custom.css new file mode 100644 index 0000000..e69de29 diff --git a/src/main/webapp/preview/css/m-components.css b/src/main/webapp/preview/css/m-components.css new file mode 100644 index 0000000..b0bfcdd --- /dev/null +++ b/src/main/webapp/preview/css/m-components.css @@ -0,0 +1,1516 @@ +/* + This file is part of m.css. + + Copyright © 2017, 2018, 2019 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. +*/ + +/* Globals */ +html { + font-size: var(--font-size); + background-color: var(--background-color); +} +body { + font-family: var(--font); + font-size: 1rem; + color: var(--color); +} + +/* Block elements */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + font-weight: var(--heading-font-weight); +} +h1 { + margin-bottom: 1rem; +} +h2, h3, h4, h5, h6 { + margin-bottom: 0.5rem; +} +p, ul, ol, dl { + margin-top: 0; +} +ul, ol { + padding-left: 2rem; +} +ul ol, ul ul, ol ol, ol ul { + margin-bottom: 0; +} +main p { + text-indent: var(--paragraph-indent); + text-align: var(--paragraph-align); +} +/* Remove indentation and justification where it doesn't make sense */ +main p.m-noindent, li > p, dd > p, table.m-table td > p { + text-indent: 0; + text-align: left; +} +blockquote { + margin-top: 0; + margin-left: 1rem; + margin-right: 1rem; + padding: 1rem; + border-left-style: solid; + border-left-width: 0.25rem; +} +hr { + width: 75%; + border-width: 0.0625rem; + border-style: solid; +} +blockquote, hr { + border-color: var(--line-color); +} +pre { + font-family: var(--code-font), monospace, monospace; /* https://en.wikipedia.org/wiki/User:Davidgothberg/Test59 */ + font-size: var(--code-font-size); + padding: 0.5rem 1rem; + color: var(--code-color); + background-color: var(--code-background-color); + border-radius: var(--border-radius); + overflow-x: auto; + margin-top: 0; /* stupid defaults */ +} +pre.m-console { + background-color: var(--console-background-color); +} + +/* Inline elements */ +abbr { + cursor: help; + text-decoration: underline dotted; +} +sub, sup { /* https://gist.github.com/unruthless/413930 */ + font-size: 0.75rem; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { top: -0.35rem; } +sub { bottom: -0.2rem; } +a { + color: var(--link-color); +} +a.m-flat { + text-decoration: none; +} +a:hover, a:focus, a:active { + color: var(--link-active-color); +} +a img { border: 0; } /* Why you so special, IE?! */ +svg a { cursor: pointer; } /* And why YOU, CHROME?! */ +mark { + padding: 0.0625rem; + background-color: var(--mark-background-color); + color: var(--mark-color); +} +code { + font-family: var(--code-font), monospace, monospace; + font-size: var(--code-font-size); + padding: 0.125rem; + color: var(--code-color); + background-color: var(--code-background-color); +} +code.m-console { + background-color: var(--console-background-color); +} + +/* Focus outline on link, canvas and input: match the focused header item. */ +*:focus { outline-color: var(--header-link-current-color); } + +/* Utility */ +div.m-scroll { + max-width: 100%; + overflow-x: auto; +} +.m-fullwidth { + width: 100%; +} +.m-spacing-150 { + /* saying 1.5 should be better according to https://stackoverflow.com/a/20818206, + but here I need consistent spacing together with .m-big etc. */ + line-height: 1.5rem; +} +.m-text-center, .m-text-center.m-noindent, table.m-table th.m-text-center, .m-text-center p { + text-align: center; +} +.m-text-left, .m-text-left.m-noindent, table.m-table th.m-text-left, .m-text-right p { + text-align: left; +} +.m-text-right, .m-text-right.m-noindent, table.m-table th.m-text-right, .m-text-right p { + text-align: right; +} +.m-text-top, table.m-table th.m-text-top, table.m-table td.m-text-top { + vertical-align: top; +} +.m-text-middle, table.m-table th.m-text-middle, table.m-table td.m-text-middle { + vertical-align: middle; +} +.m-text-bottom, table.m-table th.m-text-bottom, table.m-table td.m-text-bottom { + vertical-align: bottom; +} +.m-text.m-small { + font-size: 85.4%; +} +.m-text.m-big { + font-size: 117%; +} +.m-text.m-strong { + font-weight: bold; +} +.m-text.m-em { + font-style: italic; +} +h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin { + font-weight: normal; +} + +/* Lists */ +ul.m-unstyled, ol.m-unstyled { + list-style-type: none; + padding-left: 0; +} +ul[class*='m-block-'], ol[class*='m-block-'] { + padding-left: 0; +} +ul[class*='m-block-'] li, ol[class*='m-block-'] li { + display: inline; +} +ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after { + content: " | "; +} +ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after { + content: " • "; +} +@media screen and (min-width: 576px) { + ul.m-block-bar-s, ol.m-block-bar-s, + ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; } + ul.m-block-bar-s li, ol.m-block-bar-s li, + ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; } + ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after, + ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; } +} +@media screen and (min-width: 768px) { + ul.m-block-bar-m, ol.m-block-bar-m, + ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; } + ul.m-block-bar-m li, ol.m-block-bar-m li, + ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; } + ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after, + ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; } +} +@media screen and (min-width: 992px) { + ul.m-block-bar-l, ol.m-block-bar-l, + ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; } + ul.m-block-bar-l li, ol.m-block-bar-l li, + ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; } + ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after, + ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; } +} + +/* Special paragraph styling */ +p.m-poem { + text-indent: 0; + text-align: left; + margin-left: var(--paragraph-indent); +} +p.m-transition { + color: var(--line-color); + text-indent: 0; + text-align: center; + font-size: 2rem; +} + +/* Definition list styling */ +dl.m-diary { + margin-bottom: 1.25rem; +} +dl.m-diary:last-child { + margin-bottom: 0.25rem; +} +dl.m-diary dt { + font-weight: bold; + width: 3.5rem; + float: left; + clear: both; + padding-top: 0.25rem; +} +dl.m-diary dd { + padding-top: 0.25rem; + padding-left: 3.5rem; +} + +/* Note, frame, block */ +.m-note { + border-radius: var(--border-radius); + padding: 1rem; +} +.m-note pre, .m-note code { + background-color: var(--code-note-background-color); +} +.m-frame { + background-color: var(--background-color); + border-style: solid; + border-width: 0.125rem; + border-radius: var(--border-radius); + border-color: var(--line-color); + padding: 0.875rem; +} +.m-block { + border-style: solid; + border-width: 0.0625rem; + border-left-width: 0.25rem; + border-radius: var(--border-radius); + border-color: var(--line-color); + padding: 0.9375rem 0.9375rem 0.9375rem 0.75rem; +} + +/* Badge */ +.m-block.m-badge::after { + content: ' '; + display: block; + clear: both; +} +.m-block.m-badge h3 { + margin-left: 5rem; +} +.m-block.m-badge p { + margin-left: 5rem; + text-indent: 0; +} +.m-block.m-badge img { + width: 4rem; + height: 4rem; + border-radius: 2rem; + float: left; +} + +/* Button */ +div.m-button { + text-align: center; +} +div.m-button a { + display: inline-block; + border-radius: var(--border-radius); + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + text-decoration: none; + font-size: 1.17rem; +} +div.m-button.m-fullwidth a { + display: block; + padding-left: 0.5rem; + padding-right: 0.5rem; +} +div.m-button a .m-big:first-child { + font-size: 1.37rem; + font-weight: bold; +} +div.m-button a .m-small:last-child { + font-size: 0.854rem; +} + +/* Label */ +.m-label { + border-radius: var(--border-radius); + font-size: 75%; + font-weight: normal; + padding: 0.125rem 0.25rem; + vertical-align: 7.5%; +} +.m-label.m-flat { + border-width: 0.0625rem; + border-style: solid; + border-color: var(--dim-color); + padding: 0.0625rem 0.1875rem; +} + +/* Tables */ +table.m-table { + border-collapse: collapse; + margin-left: auto; + margin-right: auto; +} +table.m-table.m-big { + margin-top: 1.75rem; +} +div.m-scroll > table.m-table:last-child { + margin-bottom: 0.0625rem; +} +table.m-table:not(.m-flat) tbody tr:hover { + background-color: var(--line-color); +} +table.m-table th, table.m-table td { + vertical-align: top; + border-style: solid; + border-top-width: 0.0625rem; + border-left-width: 0; + border-right-width: 0; + border-bottom-width: 0; + border-color: var(--line-color); +} +table.m-table caption { + padding-bottom: 0.5rem; +} +table.m-table thead tr:first-child th, table.m-table thead tr:first-child td { + border-top-width: 0.125rem; +} +table.m-table thead th, table.m-table thead td { + border-bottom-width: 0.125rem; + vertical-align: bottom; +} +table.m-table tfoot th, table.m-table tfoot td { + border-top-width: 0.125rem; +} +table.m-table th, table.m-table td { + padding: 0.5rem; +} +table.m-table.m-big th, table.m-table.m-big td { + padding: 0.75rem 1rem; +} +table.m-table th { + text-align: left; +} +table.m-table th.m-thin { + font-weight: normal; +} +table.m-table td.m-default, table.m-table th.m-default, +table.m-table td.m-primary, table.m-table th.m-primary, +table.m-table td.m-success, table.m-table th.m-success, +table.m-table td.m-warning, table.m-table th.m-warning, +table.m-table td.m-danger, table.m-table th.m-danger, +table.m-table td.m-info, table.m-table th.m-info, +table.m-table td.m-dim, table.m-table th.m-dim { + padding-left: 0.4375rem; + padding-right: 0.4375rem; + border-left-width: 0.0625rem; +/* border-right-width: 0.0625rem; causes horizontal scrollbar */ +} +table.m-table.m-big td.m-default, table.m-table.m-big th.m-default, +table.m-table.m-big td.m-primary, table.m-table.m-big th.m-primary, +table.m-table.m-big td.m-success, table.m-table.m-big th.m-success, +table.m-table.m-big td.m-warning, table.m-table.m-big th.m-warning, +table.m-table.m-big td.m-danger, table.m-table.m-big th.m-danger, +table.m-table.m-big td.m-info, table.m-table.m-big th.m-info, +table.m-table.m-big td.m-dim, table.m-table.m-big th.m-dim { + padding-left: 0.9375rem; + padding-right: 0.9375rem; + border-left-width: 0.0625rem; +/* border-right-width: 0.0625rem; causes horizontal scrollbar */ +} + +table.m-table tr.m-default td, table.m-table td.m-default, +table.m-table tr.m-default th, table.m-table th.m-default, +table.m-table tr.m-primary td, table.m-table td.m-primary, +table.m-table tr.m-primary th, table.m-table th.m-primary, +table.m-table tr.m-success td, table.m-table td.m-success, +table.m-table tr.m-success th, table.m-table th.m-success, +table.m-table tr.m-warning td, table.m-table td.m-warning, +table.m-table tr.m-warning th, table.m-table th.m-warning, +table.m-table tr.m-danger td, table.m-table td.m-danger, +table.m-table tr.m-danger th, table.m-table th.m-danger, +table.m-table tr.m-info td, table.m-table td.m-info, +table.m-table tr.m-info th, table.m-table th.m-info, +table.m-table tr.m-dim td, table.m-table td.m-dim, +table.m-table tr.m-dim th, table.m-table th.m-dim { + border-color: var(--background-color); +} + +/* Image. Ensure everything is done for both and . */ +img.m-image, svg.m-image { + display: block; + margin-left: auto; + margin-right: auto; +} +div.m-image { + text-align: center; +} +img.m-image, svg.m-image, div.m-image img, div.m-image svg { + max-width: 100%; + border-radius: var(--border-radius); +} +div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg { + width: 100%; +} + +/* Figure. Ensure everything is done for both and . */ +figure.m-figure { + max-width: 100%; + margin-top: 0; + margin-left: auto; + margin-right: auto; + position: relative; + display: table; +} +figure.m-figure:before { + position: absolute; + content: ' '; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; /* so it doesn't make the contents inactive */ + border-style: solid; + border-width: 0.125rem; + border-radius: var(--border-radius); + border-color: var(--line-color); +} +figure.m-figure.m-flat:before { + border-color: transparent; +} +figure.m-figure > * { + margin-left: 1rem; + margin-right: 1rem; + display: table-caption; + caption-side: bottom; +} +figure.m-figure > *:first-child { + /* otherwise figure with clickable image is centered differently */ + display: inline; +} +figure.m-figure > *:last-child { + /* Need !important so the :last-child margin reset doesn't have higher + priority than this */ + margin-bottom: 1rem !important; +} +figure.m-figure img, figure.m-figure svg { + position: relative; /* so it's above the border */ + margin-left: 0; + margin-right: 0; + margin-bottom: 0; + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + max-width: 100%; +} +figure.m-figure.m-flat img, figure.m-figure.m-flat svg { + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} +figure.m-figure a img, figure.m-figure a svg { + margin-left: -1rem; + margin-right: -1rem; +} +figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * { + /* Using inline for the content would lose the margin on wrapped lines */ + display: block; +} +figure.m-figure.m-fullwidth > *:first-child { + /* otherwise figure with clickable image is centered differently */ + display: inline; +} +figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg { + width: 100%; +} +figure.m-figure.m-fullwidth:after { + /* Specifying bottom margin on the last element works only if it is displayed + as table caption, so I have to hack it here. */ + content: ' '; + display: block; + margin-top: 1rem; + height: 1px; +} + +/* Code figure. Not using
because some generators (Doxygen) have it + impossible to output custom tags. */ +.m-code-figure, .m-console-figure { + margin-top: 0; + margin-left: 0; + margin-right: 0; + position: relative; + padding: 1rem; +} +.m-code-figure:before, .m-console-figure:before { + position: absolute; + content: ' '; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; /* so it doesn't make the contents inactive */ + border-style: solid; + border-width: 0.125rem; + border-radius: var(--border-radius); +} +.m-code-figure:before { + border-color: var(--code-background-color); +} +.m-console-figure:before { + border-color: var(--console-background-color); +} +.m-code-figure.m-flat:before, .m-console-figure.m-flat:before { + border-color: transparent; +} +.m-code-figure > pre:first-child, .m-console-figure > pre:first-child { + position: relative; /* so it's above the border */ + margin: -1rem -1rem 1rem -1rem; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +/* Figure caption */ +figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + font-weight: var(--heading-font-weight); + font-size: 1.17rem; /* taken from webkit defaults for h3 */ +} + +/* Image grid */ +.m-imagegrid > div { + background-color: var(--background-color); /* to avoid section HL shining through */ +} +.m-imagegrid > div > figure { + display: block; + float: left; + position: relative; + margin: 0; +} +.m-imagegrid > div > figure > div, +.m-imagegrid > div > figure > figcaption, +.m-imagegrid > div > figure > a > div, +.m-imagegrid > div > figure > a > figcaption { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-color: var(--background-color); + border-style: solid; + border-width: 0.25rem; + padding: 0.5rem; +} +.m-imagegrid > div > figure:first-child > div, +.m-imagegrid > div > figure:first-child > figcaption, +.m-imagegrid > div > figure:first-child > a > div, +.m-imagegrid > div > figure:first-child > a > figcaption { + border-left-width: 0; +} +.m-imagegrid > div > figure:last-child > div, +.m-imagegrid > div > figure:last-child > figcaption, +.m-imagegrid > div > figure:last-child > a > div, +.m-imagegrid > div > figure:last-child > a > figcaption { + border-right-width: 0; +} +.m-imagegrid > div > figure > figcaption, +.m-imagegrid > div > figure > a > figcaption { + color: transparent; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.75rem; +} +.m-imagegrid > div > figure > div::before, +.m-imagegrid > div > figure > figcaption::before, +.m-imagegrid > div > figure > a > div::before, +.m-imagegrid > div > figure > a > figcaption::before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: bottom; + width: 0; +} +.m-imagegrid > div > figure:hover > figcaption, +.m-imagegrid > div > figure:hover > a > figcaption { + background: linear-gradient(transparent 0%, transparent 75%, rgba(0, 0, 0, 0.85) 100%); + color: #ffffff; +} +.m-imagegrid > div > figure > img, +.m-imagegrid > div > figure > a > img { + width: 100%; + height: 100%; +} +.m-imagegrid > div::after { + display: block; + content: ' '; + clear: both; +} + +@media screen and (max-width: 767px) { + .m-imagegrid > div > figure { + float: none; + width: 100% !important; + } + .m-imagegrid > div > figure > div, + .m-imagegrid > div > figure > figcaption, + .m-imagegrid > div > figure > a > div, + .m-imagegrid > div > figure > a > figcaption { + border-left-width: 0; + border-right-width: 0; + } +} + +/* Inflatable content */ +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-note, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-block, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid, +.m-container-inflatable > .m-row > [class*='m-col-'] > pre, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-code-figure, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-console-figure, +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note, +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame, +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block, +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid, +.m-container-inflatable > .m-row > [class*='m-col-'] section > pre, +.m-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 [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%; + margin-right: -10%; + } +} +@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%; + margin-right: -10%; + } +} +@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%; + margin-right: -10%; + } +} + +/* Code block (uses Pygments CSS classes) */ +pre.m-code span.hll { + margin-left: -1.0rem; + margin-right: -1.0rem; + padding-left: 1.0rem; +} + +/* Inverted code block / inline code */ +.m-code.m-inverted { + color: var(--code-inverted-color); +} +.m-code.m-inverted > span { + opacity: 0.3333; +} +.m-code.m-inverted > span.hll { + color: var(--color); + opacity: 1; + background-color: transparent; + border-color: transparent; +} + +/* Code color swatch */ +.m-code-color { + display: inline-block; + width: 0.75rem; + height: 0.75rem; + vertical-align: -0.05rem; + margin-left: 0.2rem; + margin-right: 0.1rem; + border-radius: 0.1rem; +} + +/* Math block, math figure, inline math, math inside buttons because I am + crazy */ +div.m-math { + overflow-x: auto; + overflow-y: hidden; /* Chrome 62 displays a vertical scrollbar otherwise */ +} +div.m-math svg { + margin-left: auto; + margin-right: auto; + display: block; +} +div.m-button a svg.m-math { fill: var(--button-background-color); } +div.m-button.m-flat a svg.m-math { fill: var(--color); } +div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-math, +div.m-button.m-default a:active svg.m-math { + fill: var(--link-active-color); +} + +/* Plots, graphs. Graphs can be either div.m-graph svg or svg.m-graph, so using + just .m-graph when referencing both a
graph and a
graph. */ +.m-graph { font-size: var(--font-size); } +div.m-plot svg, div.m-graph svg { + max-width: 100%; + margin-left: auto; + margin-right: auto; + display: block; +} +div.m-plot .m-background { fill: var(--plot-background-color); } +/* Font sizes are hardcoded in m.plots, change there first! */ +div.m-plot svg .m-label { font-size: 11px; } +div.m-plot svg .m-title { font-size: 13px; } +div.m-plot svg .m-label, div.m-plot svg .m-title { fill: var(--color); } +div.m-plot svg .m-line { + stroke: var(--color); + stroke-width: 0.8; +} +div.m-plot svg .m-error { + stroke: var(--plot-error-color); + stroke-width: 1.5; +} +div.m-plot svg .m-label.m-dim { fill: var(--dim-color); } +.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse, +.m-graph g.m-node.m-flat polygon { + fill: none; +} +.m-graph g.m-node:not(.m-flat) text { + fill: var(--button-background-color); +} + +/* Rendered math and graphs have no padding around, add it if in a figure, + ensure it's applied only on the immediately first svg inside. Because we + want a background under the padding as well, switch the box sizing to + content box. */ +figure.m-figure > svg.m-math:first-child, +figure.m-figure > svg.m-graph:first-child { + padding: 1rem; + box-sizing: content-box; +} +figure.m-figure:not(.m-flat) > svg.m-math:first-child, +figure.m-figure:not(.m-flat) > svg.m-graph:first-child { + background-color: var(--line-color); +} + +/* Colored block, header links in a colored block, colored text, flat label */ +.m-block.m-default { border-left-color: var(--line-color); } +.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6, +.m-text.m-default, .m-label.m-flat.m-default { + color: var(--default-color); +} +.m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a { + color: var(--link-color); +} +.m-block.m-primary { border-left-color: var(--primary-color); } +.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6, +.m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a, +.m-text.m-primary, .m-label.m-flat.m-primary { + color: var(--primary-color); +} +.m-block.m-success { border-left-color: var(--success-color); } +.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6, +.m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a, +.m-text.m-success, .m-label.m-flat.m-success { + color: var(--success-color); +} +.m-block.m-warning { border-left-color: var(--warning-color); } +.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6, +.m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a, +.m-text.m-warning, .m-label.m-flat.m-warning { + color: var(--warning-color); +} +.m-block.m-danger { border-left-color: var(--danger-color); } +.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6, +.m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a, +.m-text.m-danger, .m-label.m-flat.m-danger { + color: var(--danger-color); +} +.m-block.m-info { border-left-color: var(--info-color); } +.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6, +.m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a, +.m-text.m-info, .m-label.m-flat.m-info { + color: var(--info-color); +} +.m-block.m-dim { border-left-color: var(--dim-color); } +.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim { + color: var(--dim-color); +} +.m-block.m-dim a, .m-text.m-dim a { color: var(--dim-link-color); } +.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active, +.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active { + color: var(--dim-link-active-color); +} +.m-block.m-flat { border-color: transparent; } +.m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5. .m-block.m-flat h6 { + color: var(--default-color); +} + +/* Active link in a block header (gawd, this is verbose as hell). Dim blocks + have the link colors already defined above. */ +.m-block.m-default h3 a:hover, .m-block.m-default h3 a:focus, .m-block.m-default h3 a:active, +.m-block.m-default h4 a:hover, .m-block.m-default h4 a:focus, .m-block.m-default h4 a:active, +.m-block.m-default h5 a:hover, .m-block.m-default h5 a:focus, .m-block.m-default h5 a:active, +.m-block.m-default h6 a:hover, .m-block.m-default h6 a:focus, .m-block.m-default h6 a:active { + color: var(--default-link-active-color); +} +.m-block.m-primary h3 a:hover, .m-block.m-primary h3 a:focus, .m-block.m-primary h3 a:active, +.m-block.m-primary h4 a:hover, .m-block.m-primary h4 a:focus, .m-block.m-primary h4 a:active, +.m-block.m-primary h5 a:hover, .m-block.m-primary h5 a:focus, .m-block.m-primary h5 a:active, +.m-block.m-primary h6 a:hover, .m-block.m-primary h6 a:focus, .m-block.m-primary h6 a:active { + color: var(--primary-link-active-color); +} +.m-block.m-success h3 a:hover, .m-block.m-success h3 a:focus, .m-block.m-success h3 a:active, +.m-block.m-success h4 a:hover, .m-block.m-success h4 a:focus, .m-block.m-success h4 a:active, +.m-block.m-success h5 a:hover, .m-block.m-success h5 a:focus, .m-block.m-success h5 a:active, +.m-block.m-success h6 a:hover, .m-block.m-success h6 a:focus, .m-block.m-success h6 a:active { + color: var(--success-link-active-color); +} +.m-block.m-warning h3 a:hover, .m-block.m-warning h3 a:focus, .m-block.m-warning h3 a:active, +.m-block.m-warning h4 a:hover, .m-block.m-warning h4 a:focus, .m-block.m-warning h4 a:active, +.m-block.m-warning h5 a:hover, .m-block.m-warning h5 a:focus, .m-block.m-warning h5 a:active, +.m-block.m-warning h6 a:hover, .m-block.m-warning h6 a:focus, .m-block.m-warning h6 a:active { + color: var(--warning-link-active-color); +} +.m-block.m-danger h3 a:hover, .m-block.m-danger h3 a:focus, .m-block.m-danger h3 a:active, +.m-block.m-danger h4 a:hover, .m-block.m-danger h4 a:focus, .m-block.m-danger h4 a:active, +.m-block.m-danger h5 a:hover, .m-block.m-danger h5 a:focus, .m-block.m-danger h5 a:active, +.m-block.m-danger h6 a:hover, .m-block.m-danger h6 a:focus, .m-block.m-danger h6 a:active { + color: var(--danger-link-active-color); +} +.m-block.m-info h3 a:hover, .m-block.m-info h3 a:focus, .m-block.m-info h3 a:active, +.m-block.m-info h4 a:hover, .m-block.m-info h4 a:focus, .m-block.m-info h4 a:active, +.m-block.m-info h5 a:hover, .m-block.m-info h5 a:focus, .m-block.m-info h5 a:active, +.m-block.m-info h6 a:hover, .m-block.m-info h6 a:focus, .m-block.m-info h6 a:active { + color: var(--info-link-active-color); +} + +/* Colored button, non-flat label */ +div.m-button a, .m-label { color: var(--button-background-color); } +div.m-button.m-flat a { color: var(--color); } +div.m-button.m-flat a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active { + color: var(--link-active-color); +} +div.m-button.m-default a, .m-label:not(.m-flat).m-default { background-color: var(--default-color); } +div.m-button.m-primary a, .m-label:not(.m-flat).m-primary { background-color: var(--primary-color); } +div.m-button.m-success a, .m-label:not(.m-flat).m-success { background-color: var(--success-color); } +div.m-button.m-warning a, .m-label:not(.m-flat).m-warning { background-color: var(--warning-color); } +div.m-button.m-danger a, .m-label:not(.m-flat).m-danger { background-color: var(--danger-color); } +div.m-button.m-info a, .m-label:not(.m-flat).m-info { background-color: var(--info-color); } +div.m-button.m-dim a, .m-label:not(.m-flat).m-dim { background-color: var(--dim-color); } +div.m-button.m-default a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active { + background-color: var(--default-link-active-color); +} +div.m-button.m-primary a:hover, div.m-button.m-primary a:focus, div.m-button.m-primary a:active { + background-color: var(--primary-link-active-color); +} +div.m-button.m-success a:hover, div.m-button.m-success a:focus, div.m-button.m-success a:active { + background-color: var(--success-link-active-color); +} +div.m-button.m-warning a:hover, div.m-button.m-warning a:focus, div.m-button.m-warning a:active { + background-color: var(--warning-link-active-color); +} +div.m-button.m-danger a:hover, div.m-button.m-danger a:focus, div.m-button.m-danger a:active { + background-color: var(--danger-link-active-color); +} +div.m-button.m-info a:hover, div.m-button.m-info a:focus, div.m-button.m-info a:active { + background-color: var(--info-link-active-color); +} +div.m-button.m-dim a:hover, div.m-button.m-dim a:focus, div.m-button.m-dim a:active { + /* Using a dedicated color here because we want the button dim by default, + not highlighted as other links */ + background-color: var(--dim-button-active-color); +} + +/* Colored note, table coloring */ +.m-note.m-default { background-color: var(--default-filled-background-color); } +.m-note.m-default, +table.m-table tr.m-default td, table.m-table td.m-default, +table.m-table tr.m-default th, table.m-table th.m-default { + /* No background for default table to keep the row hover */ + color: var(--default-filled-color); +} +.m-note.m-default a:hover, +table.m-table tr.m-default td a:hover, table.m-table td.m-default a:hover, +table.m-table tr.m-default th a:hover, table.m-table th.m-default a:hover, +.m-note.m-default a:focus, +table.m-table tr.m-default td a:focus, table.m-table td.m-default a:focus, +table.m-table tr.m-default th a:focus, table.m-table th.m-default a:focus, +.m-note.m-default a:active, +table.m-table tr.m-default td a:active, table.m-table td.m-default a:active, +table.m-table tr.m-default th a:active, table.m-table th.m-default a:active { + color: var(--default-filled-link-active-color); +} +.m-note.m-primary a, +table.m-table tr.m-primary td a, table.m-table td.m-primary a, +table.m-table tr.m-primary th a, table.m-table th.m-primary a { + color: var(--default-filled-link-color); +} +.m-note.m-primary, +table.m-table tr.m-primary td, table.m-table td.m-primary, +table.m-table tr.m-primary th, table.m-table th.m-primary { + background-color: var(--primary-filled-background-color); + color: var(--primary-filled-color); +} +.m-note.m-primary a, +table.m-table tr.m-primary td a, table.m-table td.m-primary a, +table.m-table tr.m-primary th a, table.m-table th.m-primary a { + color: var(--primary-filled-link-color); +} +.m-note.m-primary a:hover, +table.m-table tr.m-primary td a:hover, table.m-table td.m-primary a:hover, +table.m-table tr.m-primary th a:hover, table.m-table th.m-primary a:hover, +.m-note.m-primary a:focus, +table.m-table tr.m-primary td a:focus, table.m-table td.m-primary a:focus, +table.m-table tr.m-primary th a:focus, table.m-table th.m-primary a:focus, +.m-note.m-primary a:active, +table.m-table tr.m-primary td a:active, table.m-table td.m-primary a:active, +table.m-table tr.m-primary th a:active, table.m-table th.m-primary a:active { + color: var(--primary-filled-link-active-color); +} +.m-note.m-success, +table.m-table tr.m-success td, table.m-table td.m-success, +table.m-table tr.m-success th, table.m-table th.m-success { + background-color: var(--success-filled-background-color); + color: var(--success-filled-color); +} +.m-note.m-success a, +table.m-table tr.m-success td a, table.m-table td.m-success a, +table.m-table tr.m-success th a, table.m-table th.m-success a { + color: var(--success-filled-link-color); +} +.m-note.m-success a:hover, +table.m-table tr.m-success td a:hover, table.m-table td.m-success a:hover, +table.m-table tr.m-success th a:hover, table.m-table th.m-success a:hover, +.m-note.m-success a:focus, +table.m-table tr.m-success td a:focus, table.m-table td.m-success a:focus, +table.m-table tr.m-success th a:focus, table.m-table th.m-success a:focus, +.m-note.m-success a:active, +table.m-table tr.m-success td a:active, table.m-table td.m-success a:active, +table.m-table tr.m-success th a:active, table.m-table th.m-success a:active { + color: var(--success-filled-link-active-color); +} +.m-note.m-warning, table.m-table tr.m-warning td, table.m-table td.m-warning, + table.m-table tr.m-warning th, table.m-table th.m-warning { + background-color: var(--warning-filled-background-color); + color: var(--warning-filled-color); +} +.m-note.m-warning a, table.m-table tr.m-warning td a, table.m-table td.m-warning a, + table.m-table tr.m-warning th a, table.m-table th.m-warning a { + color: var(--warning-filled-link-color); +} +.m-note.m-warning a:hover, +table.m-table tr.m-warning td a:hover, table.m-table td.m-warning a:hover, +table.m-table tr.m-warning th a:hover, table.m-table th.m-warning a:hover, +.m-note.m-warning a:focus, +table.m-table tr.m-warning td a:focus, table.m-table td.m-warning a:focus, +table.m-table tr.m-warning th a:focus, table.m-table th.m-warning a:focus, +.m-note.m-warning a:active, +table.m-table tr.m-warning td a:active, table.m-table td.m-warning a:active, +table.m-table tr.m-warning th a:active, table.m-table th.m-warning a:active { + color: var(--warning-filled-link-active-color); +} +.m-note.m-danger, +table.m-table tr.m-danger td, table.m-table td.m-danger, +table.m-table tr.m-danger th, table.m-table th.m-danger { + background-color: var(--danger-filled-background-color); + color: var(--danger-filled-color); +} +.m-note.m-danger a, +table.m-table tr.m-danger td a, table.m-table td.m-danger a, +table.m-table tr.m-danger th a, table.m-table th.m-danger a { + color: var(--danger-filled-link-color); +} +.m-note.m-danger a:hover, +table.m-table tr.m-danger td a:hover, table.m-table td.m-danger a:hover, +table.m-table tr.m-danger th a:hover, table.m-table th.m-danger a:hover, +.m-note.m-danger a:focus, +table.m-table tr.m-danger td a:focus, table.m-table td.m-danger a:focus, +table.m-table tr.m-danger th a:focus, table.m-table th.m-danger a:focus, +.m-note.m-danger a:active, +table.m-table tr.m-danger td a:active, table.m-table td.m-danger a:active, +table.m-table tr.m-danger th a:active, table.m-table th.m-danger a:active { + color: var(--danger-filled-link-active-color); +} +.m-note.m-info, +table.m-table tr.m-info td, table.m-table td.m-info, +table.m-table tr.m-info th, table.m-table th.m-info { + background-color: var(--info-filled-background-color); + color: var(--info-filled-color); +} +.m-note.m-info a, +table.m-table tr.m-info td a, table.m-table td.m-info a, +table.m-table tr.m-info th a, table.m-table th.m-info a { + color: var(--info-filled-link-color); +} +.m-note.m-info a:hover, +table.m-table tr.m-info td a:hover, table.m-table td.m-info a:hover, +table.m-table tr.m-info th a:hover, table.m-table th.m-info a:hover, +.m-note.m-info a:focus, +table.m-table tr.m-info td a:focus, table.m-table td.m-info a:focus, +table.m-table tr.m-info th a:focus, table.m-table th.m-info a:focus, +.m-note.m-info a:active, +table.m-table tr.m-info td a:active, table.m-table td.m-info a:active, +table.m-table tr.m-info th a:active, table.m-table th.m-info a:active { + color: var(--info-filled-link-active-color); +} +.m-note.m-dim, +table.m-table tr.m-dim td, table.m-table td.m-dim, +table.m-table tr.m-dim th, table.m-table th.m-dim { + background-color: var(--dim-filled-background-color); + color: var(--dim-filled-color); +} +.m-note.m-dim a, +table.m-table tr.m-dim td a, table.m-table td.m-dim a, +table.m-table tr.m-dim th a, table.m-table th.m-dim a { + color: var(--dim-filled-link-color); +} +.m-note.m-dim a:hover, +table.m-table tr.m-dim td a:hover, table.m-table td.m-dim a:hover, +table.m-table tr.m-dim th a:hover, table.m-table th.m-dim a:hover, +.m-note.m-dim a:focus, +table.m-table tr.m-dim td a:focus, table.m-table td.m-dim a:focus, +table.m-table tr.m-dim th a:focus, table.m-table th.m-dim a:focus, +.m-note.m-dim a:active, +table.m-table tr.m-dim td a:active, table.m-table td.m-dim a:active, +table.m-table tr.m-dim th a:active, table.m-table th.m-dim a:active { + color: var(--dim-filled-link-active-color); +} + +/* Colored figure */ +figure.m-figure.m-default:before { border-color: var(--default-filled-background-color); } +figure.m-figure.m-default figcaption { color: var(--default-color); } +figure.m-figure.m-primary:before { border-color: var(--primary-filled-background-color); } +figure.m-figure.m-primary figcaption { color: var(--primary-color); } +figure.m-figure.m-success:before { border-color: var(--success-filled-background-color); } +figure.m-figure.m-success figcaption { color: var(--success-color); } +figure.m-figure.m-warning:before { border-color: var(--warning-filled-background-color); } +figure.m-figure.m-warning figcaption { color: var(--warning-color); } +figure.m-figure.m-danger:before { border-color: var(--danger-filled-background-color); } +figure.m-figure.m-danger figcaption { color: var(--danger-color); } +figure.m-figure.m-info:before { border-color: var(--info-filled-background-color); } +figure.m-figure.m-info figcaption { color: var(--info-color); } +figure.m-figure.m-dim:before { border-color: var(--dim-filled-background-color); } +figure.m-figure.m-dim { color: var(--dim-color); } +figure.m-figure.m-dim a { color: var(--dim-link-color); } +figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-dim a:active { + color: var(--dim-link-active-color); +} + +/* Colored math block, inline math, colored math parts, plots and + global-colored graphs. Should be before local graph coloring, so the latter + can override this. Applies to either div.m-math svg or svg.m.math + (div.m-graph svg or svg.m-graph), so using just .m-math (.m-graph). Besides + that, using svg anywhere would make it a higher priority, breaking the + colors. See the math/graph plugin test pages for a visual verification. */ +.m-math { fill: var(--color); } +.m-math.m-default, .m-math g.m-default, .m-math rect.m-default, +div.m-plot svg .m-bar.m-default, +.m-graph g.m-edge polygon, +.m-graph g.m-node:not(.m-flat) ellipse, +.m-graph g.m-node:not(.m-flat) polygon, +.m-graph g.m-edge text, +.m-graph g.m-node.m-flat text, +.m-graph.m-default g.m-edge polygon, +.m-graph.m-default g.m-node:not(.m-flat) ellipse, +.m-graph.m-default g.m-node:not(.m-flat) polygon, +.m-graph.m-default g.m-edge text, +.m-graph.m-default g.m-node.m-flat text { + fill: var(--default-color); +} +.m-graph g.m-edge polygon, +.m-graph g.m-edge path, +.m-graph g.m-node ellipse, +.m-graph g.m-node polygon, +.m-graph g.m-node polyline, +.m-graph.m-default g.m-edge polygon, +.m-graph.m-default g.m-edge path, +.m-graph.m-default g.m-node ellipse, +.m-graph.m-default g.m-node polygon, +.m-graph.m-default g.m-node polyline { + stroke: var(--default-color); +} +.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary, +div.m-plot svg .m-bar.m-primary, +.m-graph.m-primary g.m-edge polygon, +.m-graph.m-primary g.m-node:not(.m-flat) ellipse, +.m-graph.m-primary g.m-node:not(.m-flat) polygon, +.m-graph.m-primary g.m-edge text, +.m-graph.m-primary g.m-node.m-flat text { + fill: var(--primary-color); +} +.m-graph.m-primary g.m-edge polygon, +.m-graph.m-primary g.m-edge path, +.m-graph.m-primary g.m-node ellipse, +.m-graph.m-primary g.m-node polygon, +.m-graph.m-primary g.m-node polyline { + stroke: var(--primary-color); +} +.m-math.m-success, .m-math g.m-success, .m-math rect.m-success, +div.m-plot svg .m-bar.m-success, +.m-graph.m-success g.m-edge polygon, +.m-graph.m-success g.m-node:not(.m-flat) ellipse, +.m-graph.m-success g.m-node:not(.m-flat) polygon, +.m-graph.m-success g.m-edge text, +.m-graph.m-success g.m-node.m-flat text { + fill: var(--success-color); +} +.m-graph.m-success g.m-edge polygon, +.m-graph.m-success g.m-edge path, +.m-graph.m-success g.m-node ellipse, +.m-graph.m-success g.m-node polygon, +.m-graph.m-success g.m-node polyline { + stroke: var(--success-color); +} +.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning, +div.m-plot svg .m-bar.m-warning, +.m-graph.m-warning g.m-edge polygon, +.m-graph.m-warning g.m-node:not(.m-flat) ellipse, +.m-graph.m-warning g.m-node:not(.m-flat) polygon, +.m-graph.m-warning g.m-edge text, +.m-graph.m-warning g.m-node.m-flat text { + fill: var(--warning-color); +} +.m-graph.m-warning g.m-edge polygon, +.m-graph.m-warning g.m-edge path, +.m-graph.m-warning g.m-node ellipse, +.m-graph.m-warning g.m-node polygon, +.m-graph.m-warning g.m-node polyline { + stroke: var(--warning-color); +} +.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger, +div.m-plot svg .m-bar.m-danger, +.m-graph.m-danger g.m-edge polygon, +.m-graph.m-danger g.m-node:not(.m-flat) ellipse, +.m-graph.m-danger g.m-node:not(.m-flat) polygon, +.m-graph.m-danger g.m-edge text, +.m-graph.m-danger g.m-node.m-flat text { + fill: var(--danger-color); +} +.m-graph.m-danger g.m-edge polygon, +.m-graph.m-danger g.m-edge path, +.m-graph.m-danger g.m-node ellipse, +.m-graph.m-danger g.m-node polygon, +.m-graph.m-danger g.m-node polyline { + stroke: var(--danger-color); +} +.m-math.m-info, .m-math g.m-info, .m-math rect.m-info, +div.m-plot svg .m-bar.m-info, +.m-graph.m-info g.m-edge polygon, +.m-graph.m-info g.m-node:not(.m-flat) ellipse, +.m-graph.m-info g.m-node:not(.m-flat) polygon, +.m-graph.m-info g.m-edge text, +.m-graph.m-info g.m-node.m-flat text { + fill: var(--info-color); +} +.m-graph.m-info g.m-edge polygon, +.m-graph.m-info g.m-edge path, +.m-graph.m-info g.m-node ellipse, +.m-graph.m-info g.m-node polygon, +.m-graph.m-info g.m-node polyline { + stroke: var(--info-color); +} +.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim, +div.m-plot svg .m-bar.m-dim, +.m-graph.m-dim g.m-edge polygon, +.m-graph.m-dim g.m-node:not(.m-flat) ellipse, +.m-graph.m-dim g.m-node:not(.m-flat) polygon, +.m-graph.m-dim g.m-edge text, +.m-graph.m-dim g.m-node.m-flat text { + fill: var(--dim-color); +} +.m-graph.m-dim g.m-edge polygon, +.m-graph.m-dim g.m-edge path, +.m-graph.m-dim g.m-node ellipse, +.m-graph.m-dim g.m-node polygon, +.m-graph.m-dim g.m-node polyline { + stroke: var(--dim-color); +} + +/* Local-colored graphs. Later so it overrides global coloring. Applies to + either div.m-graph svg or svg.m-graph, so using just .m-graph. This is not + needed for math, for some reason the overrides work correctly. */ +.m-graph g.m-edge.m-default polygon, +.m-graph g.m-node.m-default:not(.m-flat) ellipse, +.m-graph g.m-node.m-default:not(.m-flat) polygon, +.m-graph g.m-edge.m-default text, +.m-graph g.m-node.m-default.m-flat text { + fill: var(--default-color); +} +.m-graph g.m-edge.m-default polygon, +.m-graph g.m-edge.m-default path, +.m-graph g.m-node.m-default ellipse, +.m-graph g.m-node.m-default polygon, +.m-graph g.m-node.m-default polyline { + stroke: var(--default-color); +} +.m-graph g.m-edge.m-primary polygon, +.m-graph g.m-node.m-primary:not(.m-flat) ellipse, +.m-graph g.m-node.m-primary:not(.m-flat) polygon, +.m-graph g.m-edge.m-primary text, +.m-graph g.m-node.m-primary.m-flat text { + fill: var(--primary-color); +} +.m-graph g.m-edge.m-primary polygon, +.m-graph g.m-edge.m-primary path, +.m-graph g.m-node.m-primary ellipse, +.m-graph g.m-node.m-primary polygon, +.m-graph g.m-node.m-primary polyline { + stroke: var(--primary-color); +} +.m-graph g.m-edge.m-success polygon, +.m-graph g.m-node.m-success:not(.m-flat) ellipse, +.m-graph g.m-node.m-success:not(.m-flat) polygon, +.m-graph g.m-edge.m-success text, +.m-graph g.m-node.m-success.m-flat text { + fill: var(--success-color); +} +.m-graph g.m-edge.m-success polygon, +.m-graph g.m-edge.m-success path, +.m-graph g.m-node.m-success ellipse, +.m-graph g.m-node.m-success polygon, +.m-graph g.m-node.m-success polyline { + stroke: var(--success-color); +} +.m-graph g.m-edge.m-warning polygon, +.m-graph g.m-node.m-warning:not(.m-flat) ellipse, +.m-graph g.m-node.m-warning:not(.m-flat) polygon, +.m-graph g.m-edge.m-warning text, +.m-graph g.m-node.m-warning.m-flat text { + fill: var(--warning-color); +} +.m-graph g.m-edge.m-warning polygon, +.m-graph g.m-edge.m-warning path, +.m-graph g.m-node.m-warning ellipse, +.m-graph g.m-node.m-warning polygon, +.m-graph g.m-node.m-warning polyline { + stroke: var(--warning-color); +} +.m-graph g.m-edge.m-danger polygon, +.m-graph g.m-node.m-danger:not(.m-flat) ellipse, +.m-graph g.m-node.m-danger:not(.m-flat) polygon, +.m-graph g.m-edge.m-danger text, +.m-graph g.m-node.m-danger.m-flat text { + fill: var(--danger-color); +} +.m-graph g.m-edge.m-danger polygon, +.m-graph g.m-edge.m-danger path, +.m-graph g.m-node.m-danger ellipse, +.m-graph g.m-node.m-danger polygon, +.m-graph g.m-node.m-danger polyline { + stroke: var(--danger-color); +} +.m-graph g.m-edge.m-info polygon, +.m-graph g.m-node.m-info:not(.m-flat) ellipse, +.m-graph g.m-node.m-info:not(.m-flat) polygon, +.m-graph g.m-edge.m-info text, +.m-graph g.m-node.m-info.m-flat text { + fill: var(--info-color); +} +.m-graph g.m-edge.m-info polygon, +.m-graph g.m-edge.m-info path, +.m-graph g.m-node.m-info ellipse, +.m-graph g.m-node.m-info polygon, +.m-graph g.m-node.m-info polyline { + stroke: var(--info-color); +} +.m-graph g.m-edge.m-dim polygon, +.m-graph g.m-node.m-dim:not(.m-flat) ellipse, +.m-graph g.m-node.m-dim:not(.m-flat) polygon, +.m-graph g.m-edge.m-dim text, +.m-graph g.m-node.m-dim.m-flat text { + fill: var(--dim-color); +} +.m-graph g.m-edge.m-dim polygon, +.m-graph g.m-edge.m-dim path, +.m-graph g.m-node.m-dim ellipse, +.m-graph g.m-node.m-dim polygon, +.m-graph g.m-node.m-dim polyline { + stroke: var(--dim-color); +} + +/* Spacing after every block element, but not after the last and not when + m-nopadb is specified. It's div.m-math and div.m-graph instead of .m-math and + .m-graph because math / graph figures are handled already with + figure.m-figure. */ +p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note, +.m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image, +img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math, +div.m-graph, div.m-plot { + margin-bottom: 1rem; +} +p:last-child, p.m-nopadb, ul:last-child, ul.m-nopadb, +ol:last-child, ol.m-nopadb, dl:last-child, dl.m-nopadb, +blockquote:last-child, blockquote.m-nopadb, pre:last-child, pre.m-nopadb, +.m-code-figure:last-child, .m-code-figure.m-nopadb, +.m-console-figure:last-child, .m-console-figure.m-nopadb, +hr:last-child, hr.m-nopadb, .m-note:last-child, .m-note.m-nopadb, +.m-frame:last-child, .m-frame.m-nopadb, .m-block:last-child, .m-block.m-nopadb, +div.m-button:last-child, div.m-button.m-nopadb, +div.m-scroll:last-child, div.m-scroll.m-nopadb, +table.m-table:last-child, table.m-table.m-nopadb, +img.m-image:last-child, img.m-image.m-nopadb, +svg.m-image:last-child, svg.m-image.m-nopadb, +div.m-image:last-child, div.m-image.m-nopadb, +figure.m-figure:last-child, figure.m-figure.m-nopadb, +.m-imagegrid:last-child, .m-imagegrid.m-nopadb, +div.m-math:last-child, div.m-math.m-nopadb, +div.m-graph:last-child, div.m-graph.m-nopadb, +div.m-plot:last-child, div.m-plot.m-nopadb { + margin-bottom: 0; +} + +/* List items usually have just inline elements and are kept compact. If (sane) + block elements are inside list items, they have spacing even as last, but + not if the list item is the last. Also not if m-nopadb is specified. */ +li > p:last-child, li > blockquote:last-child, li > pre:last-child, +li > .m-code-figure:last-child, li > .m-console-figure:last-child, +li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child, +li > div.m-button:last-child, li > div.m-scroll:last-child, li > table.m-table:last-child, +li > img.m-image:last-child, li > svg.m-image:last-child, li > div.m-image:last-child, +li > figure.m-figure:last-child, li > div.m-math:last-child, +li > div.m-graph:last-child, li > div.m-plot:last-child { + margin-bottom: 1rem; +} +li:last-child > p:last-child, li:last-child > p.m-nopadb, +li:last-child > blockquote:last-child, li:last-child > blockquote.m-nopadb, +li:last-child > pre:last-child, li:last-child > pre.m-nopadb, +li:last-child > .m-code-figure:last-child, li:last-child > .m-code-figure.m-nopadb, +li:last-child > .m-console-figure:last-child, li:last-child > .m-console-figure.m-nopadb, +li:last-child > .m-note:last-child, li:last-child > .m-note.m-nopadb, +li:last-child > .m-frame:last-child, li:last-child > .m-frame.m-nopadb, +li:last-child > .m-block:last-child, li:last-child > .m-block.m-nopadb, +li:last-child > div.m-button:last-child, li:last-child > div.m-button.m-nopadb, +li:last-child > div.m-scroll:last-child, li:last-child > div.m-scroll.m-nopadb, +li:last-child > table.m-table:last-child, li:last-child > table.m-table.m-nopadb, +li:last-child > img.m-image:last-child, li:last-child > img.m-image.m-nopadb, +li:last-child > svg.m-image:last-child, li:last-child > svg.m-image.m-nopadb, +li:last-child > div.m-image:last-child, li:last-child > div.m-image.m-nopadb, +li:last-child > figure.m-figure:last-child, li:last-child > figure.m-figure.m-nopadb, +li:last-child > div.m-math:last-child, li:last-child > div.m-math.m-nopadb, +li:last-child > div.m-graph:last-child, li:last-child > div.m-graph.m-nopadb, +li:last-child > div.m-plot:last-child, li:last-child > div.m-plot.m-nopadb { + margin-bottom: 0; +} diff --git a/src/main/webapp/preview/css/m-dark.compiled.css b/src/main/webapp/preview/css/m-dark.compiled.css new file mode 100644 index 0000000..27a1fc5 --- /dev/null +++ b/src/main/webapp/preview/css/m-dark.compiled.css @@ -0,0 +1,2503 @@ +/* Generated using `./postprocess.py m-dark.css`. Do not edit. */ + +/* + This file is part of m.css. + + Copyright © 2017, 2018, 2019 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. +*/ + +*, ::before, ::after { box-sizing: border-box; } +body { margin: 0; } +.m-container { + width: 100%; + margin: auto; + padding-left: 1rem; + padding-right: 1rem; +} +.m-row { + margin-left: -1rem; + margin-right: -1rem; +} +.m-row:after { + content: ' '; + clear: both; + display: table; +} +.m-row > [class*='m-col-'] { + position: relative; + padding: 1rem; +} +[class*='m-clearfix-']::after { + display: block; + content: ' '; + clear: both; +} +[class*='m-show-'] { + display: none; +} +.m-container-inflate, :not(.m-row) > [class*='m-col-'] { + margin-bottom: 1rem; +} +.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, +.m-container.m-nopadl, [class*='m-col-'].m-nopadl { + padding-left: 0; +} +.m-container.m-nopad, [class*='m-col-'].m-nopad, +.m-container.m-nopadx, [class*='m-col-'].m-nopadx, +.m-container.m-nopadr, [class*='m-col-'].m-nopadr { + padding-right: 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, +.m-container-inflate.m-nopadb { + padding-bottom: 0; +} +[class*='m-col-t-'] { float: left; } +.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; +} +.m-center-t, [class*='m-col-t-'].m-center-t { + margin-left: auto; + margin-right: auto; + float: none; +} +.m-col-t-1 { width: calc(1 * 100% / 12); } +.m-col-t-2 { width: calc(2 * 100% / 12); } +.m-col-t-3 { width: calc(3 * 100% / 12); } +.m-col-t-4 { width: calc(4 * 100% / 12); } +.m-col-t-5 { width: calc(5 * 100% / 12); } +.m-col-t-6 { width: calc(6 * 100% / 12); } +.m-col-t-7 { width: calc(7 * 100% / 12); } +.m-col-t-8 { width: calc(8 * 100% / 12); } +.m-col-t-9 { width: calc(9 * 100% / 12); } +.m-col-t-10 { width: calc(10 * 100% / 12); } +.m-col-t-11 { width: calc(11 * 100% / 12); } +.m-col-t-12 { width: calc(12 * 100% / 12); } +.m-push-t-1 { left: calc(1 * 100% / 12); } +.m-push-t-2 { left: calc(2 * 100% / 12); } +.m-push-t-3 { left: calc(3 * 100% / 12); } +.m-push-t-4 { left: calc(4 * 100% / 12); } +.m-push-t-5 { left: calc(5 * 100% / 12); } +.m-push-t-6 { left: calc(6 * 100% / 12); } +.m-push-t-7 { left: calc(7 * 100% / 12); } +.m-push-t-8 { left: calc(8 * 100% / 12); } +.m-push-t-9 { left: calc(9 * 100% / 12); } +.m-push-t-10 { left: calc(10 * 100% / 12); } +.m-push-t-11 { left: calc(11 * 100% / 12); } +.m-pull-t-1 { right: calc(1 * 100% / 12); } +.m-pull-t-2 { right: calc(2 * 100% / 12); } +.m-pull-t-3 { right: calc(3 * 100% / 12); } +.m-pull-t-4 { right: calc(4 * 100% / 12); } +.m-pull-t-5 { right: calc(5 * 100% / 12); } +.m-pull-t-6 { right: calc(6 * 100% / 12); } +.m-pull-t-7 { right: calc(7 * 100% / 12); } +.m-pull-t-8 { right: calc(8 * 100% / 12); } +.m-pull-t-9 { right: calc(9 * 100% / 12); } +.m-pull-t-10 { right: calc(10 * 100% / 12); } +.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: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; } + .m-left-s { + padding-right: 1rem; + float: left; + } + .m-right-s, [class*='m-col-s-'].m-right-s { + padding-left: 1rem; + float: right; + } + .m-center-s, [class*='m-col-s-'].m-center-s { + margin-left: auto; + margin-right: auto; + float: none; + } + .m-col-s-1 { width: calc(1 * 100% / 12); } + .m-col-s-2 { width: calc(2 * 100% / 12); } + .m-col-s-3 { width: calc(3 * 100% / 12); } + .m-col-s-4 { width: calc(4 * 100% / 12); } + .m-col-s-5 { width: calc(5 * 100% / 12); } + .m-col-s-6 { width: calc(6 * 100% / 12); } + .m-col-s-7 { width: calc(7 * 100% / 12); } + .m-col-s-8 { width: calc(8 * 100% / 12); } + .m-col-s-9 { width: calc(9 * 100% / 12); } + .m-col-s-10 { width: calc(10 * 100% / 12); } + .m-col-s-11 { width: calc(11 * 100% / 12); } + .m-col-s-12 { width: calc(12 * 100% / 12); } + .m-push-s-0 { left: calc(0 * 100% / 12); } + .m-push-s-1 { left: calc(1 * 100% / 12); } + .m-push-s-2 { left: calc(2 * 100% / 12); } + .m-push-s-3 { left: calc(3 * 100% / 12); } + .m-push-s-4 { left: calc(4 * 100% / 12); } + .m-push-s-5 { left: calc(5 * 100% / 12); } + .m-push-s-6 { left: calc(6 * 100% / 12); } + .m-push-s-7 { left: calc(7 * 100% / 12); } + .m-push-s-8 { left: calc(8 * 100% / 12); } + .m-push-s-9 { left: calc(9 * 100% / 12); } + .m-push-s-10 { left: calc(10 * 100% / 12); } + .m-push-s-11 { left: calc(11 * 100% / 12); } + .m-pull-s-0 { right: calc(0 * 100% / 12); } + .m-pull-s-1 { right: calc(1 * 100% / 12); } + .m-pull-s-2 { right: calc(2 * 100% / 12); } + .m-pull-s-3 { right: calc(3 * 100% / 12); } + .m-pull-s-4 { right: calc(4 * 100% / 12); } + .m-pull-s-5 { right: calc(5 * 100% / 12); } + .m-pull-s-6 { right: calc(6 * 100% / 12); } + .m-pull-s-7 { right: calc(7 * 100% / 12); } + .m-pull-s-8 { right: calc(8 * 100% / 12); } + .m-pull-s-9 { right: calc(9 * 100% / 12); } + .m-pull-s-10 { right: calc(10 * 100% / 12); } + .m-pull-s-11 { right: calc(11 * 100% / 12); } + .m-clearfix-t::after { display: none; } + .m-hide-s { display: none; } + .m-show-s { display: block; } + .m-col-s-none { + width: auto; + float: none; + } +} +@media screen and (min-width: 768px) { + .m-container { width: 750px; } + .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; } + .m-left-m { + padding-right: 1rem; + float: left; + } + .m-right-m, [class*='m-col-m-'].m-right-m { + padding-left: 1rem; + float: right; + } + .m-center-m, [class*='m-col-m-'].m-center-m { + margin-left: auto; + margin-right: auto; + float: none; + } + .m-col-m-1 { width: calc(1 * 100% / 12); } + .m-col-m-2 { width: calc(2 * 100% / 12); } + .m-col-m-3 { width: calc(3 * 100% / 12); } + .m-col-m-4 { width: calc(4 * 100% / 12); } + .m-col-m-5 { width: calc(5 * 100% / 12); } + .m-col-m-6 { width: calc(6 * 100% / 12); } + .m-col-m-7 { width: calc(7 * 100% / 12); } + .m-col-m-8 { width: calc(8 * 100% / 12); } + .m-col-m-9 { width: calc(9 * 100% / 12); } + .m-col-m-10 { width: calc(10 * 100% / 12); } + .m-col-m-11 { width: calc(11 * 100% / 12); } + .m-col-m-12 { width: calc(12 * 100% / 12); } + .m-push-m-0 { left: calc(0 * 100% / 12); } + .m-push-m-1 { left: calc(1 * 100% / 12); } + .m-push-m-2 { left: calc(2 * 100% / 12); } + .m-push-m-3 { left: calc(3 * 100% / 12); } + .m-push-m-4 { left: calc(4 * 100% / 12); } + .m-push-m-5 { left: calc(5 * 100% / 12); } + .m-push-m-6 { left: calc(6 * 100% / 12); } + .m-push-m-7 { left: calc(7 * 100% / 12); } + .m-push-m-8 { left: calc(8 * 100% / 12); } + .m-push-m-9 { left: calc(9 * 100% / 12); } + .m-push-m-10 { left: calc(10 * 100% / 12); } + .m-push-m-11 { left: calc(11 * 100% / 12); } + .m-pull-m-0 { right: calc(0 * 100% / 12); } + .m-pull-m-1 { right: calc(1 * 100% / 12); } + .m-pull-m-2 { right: calc(2 * 100% / 12); } + .m-pull-m-3 { right: calc(3 * 100% / 12); } + .m-pull-m-4 { right: calc(4 * 100% / 12); } + .m-pull-m-5 { right: calc(5 * 100% / 12); } + .m-pull-m-6 { right: calc(6 * 100% / 12); } + .m-pull-m-7 { right: calc(7 * 100% / 12); } + .m-pull-m-8 { right: calc(8 * 100% / 12); } + .m-pull-m-9 { right: calc(9 * 100% / 12); } + .m-pull-m-10 { right: calc(10 * 100% / 12); } + .m-pull-m-11 { right: calc(11 * 100% / 12); } + .m-clearfix-s::after { display: none; } + .m-hide-m { display: none; } + .m-show-m { display: block; } + .m-col-m-none { + width: auto; + float: none; + } +} +@media screen and (min-width: 992px) { + .m-container { width: 960px; } + .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; } + .m-left-l { + padding-right: 1rem; + float: left; + } + .m-right-l, [class*='m-col-l-'].m-right-l { + padding-left: 1rem; + float: right; + } + .m-center-l, [class*='m-col-l-'].m-center-l { + margin-left: auto; + margin-right: auto; + float: none; + } + .m-col-l-1 { width: calc(1 * 100% / 12); } + .m-col-l-2 { width: calc(2 * 100% / 12); } + .m-col-l-3 { width: calc(3 * 100% / 12); } + .m-col-l-4 { width: calc(4 * 100% / 12); } + .m-col-l-5 { width: calc(5 * 100% / 12); } + .m-col-l-6 { width: calc(6 * 100% / 12); } + .m-col-l-7 { width: calc(7 * 100% / 12); } + .m-col-l-8 { width: calc(8 * 100% / 12); } + .m-col-l-9 { width: calc(9 * 100% / 12); } + .m-col-l-10 { width: calc(10 * 100% / 12); } + .m-col-l-11 { width: calc(11 * 100% / 12); } + .m-col-l-12 { width: calc(12 * 100% / 12); } + .m-push-l-0 { left: calc(0 * 100% / 12); } + .m-push-l-1 { left: calc(1 * 100% / 12); } + .m-push-l-2 { left: calc(2 * 100% / 12); } + .m-push-l-3 { left: calc(3 * 100% / 12); } + .m-push-l-4 { left: calc(4 * 100% / 12); } + .m-push-l-5 { left: calc(5 * 100% / 12); } + .m-push-l-6 { left: calc(6 * 100% / 12); } + .m-push-l-7 { left: calc(7 * 100% / 12); } + .m-push-l-8 { left: calc(8 * 100% / 12); } + .m-push-l-9 { left: calc(9 * 100% / 12); } + .m-push-l-10 { left: calc(10 * 100% / 12); } + .m-push-l-11 { left: calc(11 * 100% / 12); } + .m-pull-l-0 { right: calc(0 * 100% / 12); } + .m-pull-l-1 { right: calc(1 * 100% / 12); } + .m-pull-l-2 { right: calc(2 * 100% / 12); } + .m-pull-l-3 { right: calc(3 * 100% / 12); } + .m-pull-l-4 { right: calc(4 * 100% / 12); } + .m-pull-l-5 { right: calc(5 * 100% / 12); } + .m-pull-l-6 { right: calc(6 * 100% / 12); } + .m-pull-l-7 { right: calc(7 * 100% / 12); } + .m-pull-l-8 { right: calc(8 * 100% / 12); } + .m-pull-l-9 { right: calc(9 * 100% / 12); } + .m-pull-l-10 { right: calc(10 * 100% / 12); } + .m-pull-l-11 { right: calc(11 * 100% / 12); } + .m-clearfix-m::after { display: none; } + .m-hide-l { display: none; } + .m-show-l { display: block; } + .m-col-l-none { + width: auto; + float: none; + } +} + +html { + font-size: 16px; + background-color: #2f363f; +} +body { + font-family: 'Source Sans Pro', sans-serif; + font-size: 1rem; + color: #dcdcdc; +} +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + font-weight: 600; +} +h1 { + margin-bottom: 1rem; +} +h2, h3, h4, h5, h6 { + margin-bottom: 0.5rem; +} +p, ul, ol, dl { + margin-top: 0; +} +ul, ol { + padding-left: 2rem; +} +ul ol, ul ul, ol ol, ol ul { + margin-bottom: 0; +} +main p { + text-indent: 1.5rem; + text-align: justify; +} +main p.m-noindent, li > p, dd > p, table.m-table td > p { + text-indent: 0; + text-align: left; +} +blockquote { + margin-top: 0; + margin-left: 1rem; + margin-right: 1rem; + padding: 1rem; + border-left-style: solid; + border-left-width: 0.25rem; +} +hr { + width: 75%; + border-width: 0.0625rem; + border-style: solid; +} +blockquote, hr { + border-color: #405363; +} +pre { + font-family: 'Source Code Pro', monospace, monospace, monospace; + font-size: 0.9em; + padding: 0.5rem 1rem; + color: #e6e6e6; + background-color: #282e36; + border-radius: 0.2rem; + overflow-x: auto; + margin-top: 0; +} +pre.m-console { + background-color: #000000; +} +abbr { + cursor: help; + text-decoration: underline dotted; +} +sub, sup { + font-size: 0.75rem; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { top: -0.35rem; } +sub { bottom: -0.2rem; } +a { + color: #5b9dd9; +} +a.m-flat { + text-decoration: none; +} +a:hover, a:focus, a:active { + color: #a5c9ea; +} +a img { border: 0; } +svg a { cursor: pointer; } +mark { + padding: 0.0625rem; + background-color: #c7cf2f; + color: #2f83cc; +} +code { + font-family: 'Source Code Pro', monospace, monospace, monospace; + font-size: 0.9em; + padding: 0.125rem; + color: #e6e6e6; + background-color: #282e36; +} +code.m-console { + background-color: #000000; +} +*:focus { outline-color: #5b9dd9; } +div.m-scroll { + max-width: 100%; + overflow-x: auto; +} +.m-fullwidth { + width: 100%; +} +.m-spacing-150 { + line-height: 1.5rem; +} +.m-text-center, .m-text-center.m-noindent, table.m-table th.m-text-center, .m-text-center p { + text-align: center; +} +.m-text-left, .m-text-left.m-noindent, table.m-table th.m-text-left, .m-text-right p { + text-align: left; +} +.m-text-right, .m-text-right.m-noindent, table.m-table th.m-text-right, .m-text-right p { + text-align: right; +} +.m-text-top, table.m-table th.m-text-top, table.m-table td.m-text-top { + vertical-align: top; +} +.m-text-middle, table.m-table th.m-text-middle, table.m-table td.m-text-middle { + vertical-align: middle; +} +.m-text-bottom, table.m-table th.m-text-bottom, table.m-table td.m-text-bottom { + vertical-align: bottom; +} +.m-text.m-small { + font-size: 85.4%; +} +.m-text.m-big { + font-size: 117%; +} +.m-text.m-strong { + font-weight: bold; +} +.m-text.m-em { + font-style: italic; +} +h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin { + font-weight: normal; +} +ul.m-unstyled, ol.m-unstyled { + list-style-type: none; + padding-left: 0; +} +ul[class*='m-block-'], ol[class*='m-block-'] { + padding-left: 0; +} +ul[class*='m-block-'] li, ol[class*='m-block-'] li { + display: inline; +} +ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after { + content: " | "; +} +ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after { + content: " • "; +} +@media screen and (min-width: 576px) { + ul.m-block-bar-s, ol.m-block-bar-s, + ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; } + ul.m-block-bar-s li, ol.m-block-bar-s li, + ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; } + ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after, + ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; } +} +@media screen and (min-width: 768px) { + ul.m-block-bar-m, ol.m-block-bar-m, + ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; } + ul.m-block-bar-m li, ol.m-block-bar-m li, + ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; } + ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after, + ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; } +} +@media screen and (min-width: 992px) { + ul.m-block-bar-l, ol.m-block-bar-l, + ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; } + ul.m-block-bar-l li, ol.m-block-bar-l li, + ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; } + ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after, + ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; } +} +p.m-poem { + text-indent: 0; + text-align: left; + margin-left: 1.5rem; +} +p.m-transition { + color: #405363; + text-indent: 0; + text-align: center; + font-size: 2rem; +} +dl.m-diary { + margin-bottom: 1.25rem; +} +dl.m-diary:last-child { + margin-bottom: 0.25rem; +} +dl.m-diary dt { + font-weight: bold; + width: 3.5rem; + float: left; + clear: both; + padding-top: 0.25rem; +} +dl.m-diary dd { + padding-top: 0.25rem; + padding-left: 3.5rem; +} +.m-note { + border-radius: 0.2rem; + padding: 1rem; +} +.m-note pre, .m-note code { + background-color: rgba(34, 39, 46, 0.5); +} +.m-frame { + background-color: #2f363f; + border-style: solid; + border-width: 0.125rem; + border-radius: 0.2rem; + border-color: #405363; + padding: 0.875rem; +} +.m-block { + border-style: solid; + border-width: 0.0625rem; + border-left-width: 0.25rem; + border-radius: 0.2rem; + border-color: #405363; + padding: 0.9375rem 0.9375rem 0.9375rem 0.75rem; +} +.m-block.m-badge::after { + content: ' '; + display: block; + clear: both; +} +.m-block.m-badge h3 { + margin-left: 5rem; +} +.m-block.m-badge p { + margin-left: 5rem; + text-indent: 0; +} +.m-block.m-badge img { + width: 4rem; + height: 4rem; + border-radius: 2rem; + float: left; +} +div.m-button { + text-align: center; +} +div.m-button a { + display: inline-block; + border-radius: 0.2rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + text-decoration: none; + font-size: 1.17rem; +} +div.m-button.m-fullwidth a { + display: block; + padding-left: 0.5rem; + padding-right: 0.5rem; +} +div.m-button a .m-big:first-child { + font-size: 1.37rem; + font-weight: bold; +} +div.m-button a .m-small:last-child { + font-size: 0.854rem; +} +.m-label { + border-radius: 0.2rem; + font-size: 75%; + font-weight: normal; + padding: 0.125rem 0.25rem; + vertical-align: 7.5%; +} +.m-label.m-flat { + border-width: 0.0625rem; + border-style: solid; + border-color: #747474; + padding: 0.0625rem 0.1875rem; +} +table.m-table { + border-collapse: collapse; + margin-left: auto; + margin-right: auto; +} +table.m-table.m-big { + margin-top: 1.75rem; +} +div.m-scroll > table.m-table:last-child { + margin-bottom: 0.0625rem; +} +table.m-table:not(.m-flat) tbody tr:hover { + background-color: #405363; +} +table.m-table th, table.m-table td { + vertical-align: top; + border-style: solid; + border-top-width: 0.0625rem; + border-left-width: 0; + border-right-width: 0; + border-bottom-width: 0; + border-color: #405363; +} +table.m-table caption { + padding-bottom: 0.5rem; +} +table.m-table thead tr:first-child th, table.m-table thead tr:first-child td { + border-top-width: 0.125rem; +} +table.m-table thead th, table.m-table thead td { + border-bottom-width: 0.125rem; + vertical-align: bottom; +} +table.m-table tfoot th, table.m-table tfoot td { + border-top-width: 0.125rem; +} +table.m-table th, table.m-table td { + padding: 0.5rem; +} +table.m-table.m-big th, table.m-table.m-big td { + padding: 0.75rem 1rem; +} +table.m-table th { + text-align: left; +} +table.m-table th.m-thin { + font-weight: normal; +} +table.m-table td.m-default, table.m-table th.m-default, +table.m-table td.m-primary, table.m-table th.m-primary, +table.m-table td.m-success, table.m-table th.m-success, +table.m-table td.m-warning, table.m-table th.m-warning, +table.m-table td.m-danger, table.m-table th.m-danger, +table.m-table td.m-info, table.m-table th.m-info, +table.m-table td.m-dim, table.m-table th.m-dim { + padding-left: 0.4375rem; + padding-right: 0.4375rem; + border-left-width: 0.0625rem; +} +table.m-table.m-big td.m-default, table.m-table.m-big th.m-default, +table.m-table.m-big td.m-primary, table.m-table.m-big th.m-primary, +table.m-table.m-big td.m-success, table.m-table.m-big th.m-success, +table.m-table.m-big td.m-warning, table.m-table.m-big th.m-warning, +table.m-table.m-big td.m-danger, table.m-table.m-big th.m-danger, +table.m-table.m-big td.m-info, table.m-table.m-big th.m-info, +table.m-table.m-big td.m-dim, table.m-table.m-big th.m-dim { + padding-left: 0.9375rem; + padding-right: 0.9375rem; + border-left-width: 0.0625rem; +} +table.m-table tr.m-default td, table.m-table td.m-default, +table.m-table tr.m-default th, table.m-table th.m-default, +table.m-table tr.m-primary td, table.m-table td.m-primary, +table.m-table tr.m-primary th, table.m-table th.m-primary, +table.m-table tr.m-success td, table.m-table td.m-success, +table.m-table tr.m-success th, table.m-table th.m-success, +table.m-table tr.m-warning td, table.m-table td.m-warning, +table.m-table tr.m-warning th, table.m-table th.m-warning, +table.m-table tr.m-danger td, table.m-table td.m-danger, +table.m-table tr.m-danger th, table.m-table th.m-danger, +table.m-table tr.m-info td, table.m-table td.m-info, +table.m-table tr.m-info th, table.m-table th.m-info, +table.m-table tr.m-dim td, table.m-table td.m-dim, +table.m-table tr.m-dim th, table.m-table th.m-dim { + border-color: #2f363f; +} +img.m-image, svg.m-image { + display: block; + margin-left: auto; + margin-right: auto; +} +div.m-image { + text-align: center; +} +img.m-image, svg.m-image, div.m-image img, div.m-image svg { + max-width: 100%; + border-radius: 0.2rem; +} +div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg { + width: 100%; +} +figure.m-figure { + max-width: 100%; + margin-top: 0; + margin-left: auto; + margin-right: auto; + position: relative; + display: table; +} +figure.m-figure:before { + position: absolute; + content: ' '; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + border-style: solid; + border-width: 0.125rem; + border-radius: 0.2rem; + border-color: #405363; +} +figure.m-figure.m-flat:before { + border-color: transparent; +} +figure.m-figure > * { + margin-left: 1rem; + margin-right: 1rem; + display: table-caption; + caption-side: bottom; +} +figure.m-figure > *:first-child { + display: inline; +} +figure.m-figure > *:last-child { + margin-bottom: 1rem !important; +} +figure.m-figure img, figure.m-figure svg { + position: relative; + margin-left: 0; + margin-right: 0; + margin-bottom: 0; + border-top-left-radius: 0.2rem; + border-top-right-radius: 0.2rem; + max-width: 100%; +} +figure.m-figure.m-flat img, figure.m-figure.m-flat svg { + border-bottom-left-radius: 0.2rem; + border-bottom-right-radius: 0.2rem; +} +figure.m-figure a img, figure.m-figure a svg { + margin-left: -1rem; + margin-right: -1rem; +} +figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * { + display: block; +} +figure.m-figure.m-fullwidth > *:first-child { + display: inline; +} +figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg { + width: 100%; +} +figure.m-figure.m-fullwidth:after { + content: ' '; + display: block; + margin-top: 1rem; + height: 1px; +} +.m-code-figure, .m-console-figure { + margin-top: 0; + margin-left: 0; + margin-right: 0; + position: relative; + padding: 1rem; +} +.m-code-figure:before, .m-console-figure:before { + position: absolute; + content: ' '; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + border-style: solid; + border-width: 0.125rem; + border-radius: 0.2rem; +} +.m-code-figure:before { + border-color: #282e36; +} +.m-console-figure:before { + border-color: #000000; +} +.m-code-figure.m-flat:before, .m-console-figure.m-flat:before { + border-color: transparent; +} +.m-code-figure > pre:first-child, .m-console-figure > pre:first-child { + position: relative; + margin: -1rem -1rem 1rem -1rem; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + font-weight: 600; + font-size: 1.17rem; +} +.m-imagegrid > div { + background-color: #2f363f; +} +.m-imagegrid > div > figure { + display: block; + float: left; + position: relative; + margin: 0; +} +.m-imagegrid > div > figure > div, +.m-imagegrid > div > figure > figcaption, +.m-imagegrid > div > figure > a > div, +.m-imagegrid > div > figure > a > figcaption { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-color: #2f363f; + border-style: solid; + border-width: 0.25rem; + padding: 0.5rem; +} +.m-imagegrid > div > figure:first-child > div, +.m-imagegrid > div > figure:first-child > figcaption, +.m-imagegrid > div > figure:first-child > a > div, +.m-imagegrid > div > figure:first-child > a > figcaption { + border-left-width: 0; +} +.m-imagegrid > div > figure:last-child > div, +.m-imagegrid > div > figure:last-child > figcaption, +.m-imagegrid > div > figure:last-child > a > div, +.m-imagegrid > div > figure:last-child > a > figcaption { + border-right-width: 0; +} +.m-imagegrid > div > figure > figcaption, +.m-imagegrid > div > figure > a > figcaption { + color: transparent; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.75rem; +} +.m-imagegrid > div > figure > div::before, +.m-imagegrid > div > figure > figcaption::before, +.m-imagegrid > div > figure > a > div::before, +.m-imagegrid > div > figure > a > figcaption::before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: bottom; + width: 0; +} +.m-imagegrid > div > figure:hover > figcaption, +.m-imagegrid > div > figure:hover > a > figcaption { + background: linear-gradient(transparent 0%, transparent 75%, rgba(0, 0, 0, 0.85) 100%); + color: #ffffff; +} +.m-imagegrid > div > figure > img, +.m-imagegrid > div > figure > a > img { + width: 100%; + height: 100%; +} +.m-imagegrid > div::after { + display: block; + content: ' '; + clear: both; +} +@media screen and (max-width: 767px) { + .m-imagegrid > div > figure { + float: none; + width: 100% !important; + } + .m-imagegrid > div > figure > div, + .m-imagegrid > div > figure > figcaption, + .m-imagegrid > div > figure > a > div, + .m-imagegrid > div > figure > a > figcaption { + border-left-width: 0; + border-right-width: 0; + } +} +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-note, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-block, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid, +.m-container-inflatable > .m-row > [class*='m-col-'] > pre, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-code-figure, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-console-figure, +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note, +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame, +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block, +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid, +.m-container-inflatable > .m-row > [class*='m-col-'] section > pre, +.m-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 [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%; + margin-right: -10%; + } +} +@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%; + margin-right: -10%; + } +} +@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%; + margin-right: -10%; + } +} +pre.m-code span.hll { + margin-left: -1.0rem; + margin-right: -1.0rem; + padding-left: 1.0rem; +} +.m-code.m-inverted { + color: rgba(230, 230, 230, 0.33); +} +.m-code.m-inverted > span { + opacity: 0.3333; +} +.m-code.m-inverted > span.hll { + color: #dcdcdc; + opacity: 1; + background-color: transparent; + border-color: transparent; +} +.m-code-color { + display: inline-block; + width: 0.75rem; + height: 0.75rem; + vertical-align: -0.05rem; + margin-left: 0.2rem; + margin-right: 0.1rem; + border-radius: 0.1rem; +} +div.m-math { + overflow-x: auto; + overflow-y: hidden; +} +div.m-math svg { + margin-left: auto; + margin-right: auto; + display: block; +} +div.m-button a svg.m-math { fill: #22272e; } +div.m-button.m-flat a svg.m-math { fill: #dcdcdc; } +div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-math, +div.m-button.m-default a:active svg.m-math { + fill: #a5c9ea; +} +.m-graph { font-size: 16px; } +div.m-plot svg, div.m-graph svg { + max-width: 100%; + margin-left: auto; + margin-right: auto; + display: block; +} +div.m-plot .m-background { fill: #34424d; } +div.m-plot svg .m-label { font-size: 11px; } +div.m-plot svg .m-title { font-size: 13px; } +div.m-plot svg .m-label, div.m-plot svg .m-title { fill: #dcdcdc; } +div.m-plot svg .m-line { + stroke: #dcdcdc; + stroke-width: 0.8; +} +div.m-plot svg .m-error { + stroke: #ffffff; + stroke-width: 1.5; +} +div.m-plot svg .m-label.m-dim { fill: #747474; } +.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse, +.m-graph g.m-node.m-flat polygon { + fill: none; +} +.m-graph g.m-node:not(.m-flat) text { + fill: #22272e; +} +figure.m-figure > svg.m-math:first-child, +figure.m-figure > svg.m-graph:first-child { + padding: 1rem; + box-sizing: content-box; +} +figure.m-figure:not(.m-flat) > svg.m-math:first-child, +figure.m-figure:not(.m-flat) > svg.m-graph:first-child { + background-color: #405363; +} +.m-block.m-default { border-left-color: #405363; } +.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6, +.m-text.m-default, .m-label.m-flat.m-default { + color: #dcdcdc; +} +.m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a { + color: #5b9dd9; +} +.m-block.m-primary { border-left-color: #a5c9ea; } +.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6, +.m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a, +.m-text.m-primary, .m-label.m-flat.m-primary { + color: #a5c9ea; +} +.m-block.m-success { border-left-color: #3bd267; } +.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6, +.m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a, +.m-text.m-success, .m-label.m-flat.m-success { + color: #3bd267; +} +.m-block.m-warning { border-left-color: #c7cf2f; } +.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6, +.m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a, +.m-text.m-warning, .m-label.m-flat.m-warning { + color: #c7cf2f; +} +.m-block.m-danger { border-left-color: #cd3431; } +.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6, +.m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a, +.m-text.m-danger, .m-label.m-flat.m-danger { + color: #cd3431; +} +.m-block.m-info { border-left-color: #2f83cc; } +.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6, +.m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a, +.m-text.m-info, .m-label.m-flat.m-info { + color: #2f83cc; +} +.m-block.m-dim { border-left-color: #747474; } +.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim { + color: #747474; +} +.m-block.m-dim a, .m-text.m-dim a { color: #acacac; } +.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active, +.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active { + color: #747474; +} +.m-block.m-flat { border-color: transparent; } +.m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5. .m-block.m-flat h6 { + color: #dcdcdc; +} +.m-block.m-default h3 a:hover, .m-block.m-default h3 a:focus, .m-block.m-default h3 a:active, +.m-block.m-default h4 a:hover, .m-block.m-default h4 a:focus, .m-block.m-default h4 a:active, +.m-block.m-default h5 a:hover, .m-block.m-default h5 a:focus, .m-block.m-default h5 a:active, +.m-block.m-default h6 a:hover, .m-block.m-default h6 a:focus, .m-block.m-default h6 a:active { + color: #a5c9ea; +} +.m-block.m-primary h3 a:hover, .m-block.m-primary h3 a:focus, .m-block.m-primary h3 a:active, +.m-block.m-primary h4 a:hover, .m-block.m-primary h4 a:focus, .m-block.m-primary h4 a:active, +.m-block.m-primary h5 a:hover, .m-block.m-primary h5 a:focus, .m-block.m-primary h5 a:active, +.m-block.m-primary h6 a:hover, .m-block.m-primary h6 a:focus, .m-block.m-primary h6 a:active { + color: #dcdcdc; +} +.m-block.m-success h3 a:hover, .m-block.m-success h3 a:focus, .m-block.m-success h3 a:active, +.m-block.m-success h4 a:hover, .m-block.m-success h4 a:focus, .m-block.m-success h4 a:active, +.m-block.m-success h5 a:hover, .m-block.m-success h5 a:focus, .m-block.m-success h5 a:active, +.m-block.m-success h6 a:hover, .m-block.m-success h6 a:focus, .m-block.m-success h6 a:active { + color: #acecbe; +} +.m-block.m-warning h3 a:hover, .m-block.m-warning h3 a:focus, .m-block.m-warning h3 a:active, +.m-block.m-warning h4 a:hover, .m-block.m-warning h4 a:focus, .m-block.m-warning h4 a:active, +.m-block.m-warning h5 a:hover, .m-block.m-warning h5 a:focus, .m-block.m-warning h5 a:active, +.m-block.m-warning h6 a:hover, .m-block.m-warning h6 a:focus, .m-block.m-warning h6 a:active { + color: #e9ecae; +} +.m-block.m-danger h3 a:hover, .m-block.m-danger h3 a:focus, .m-block.m-danger h3 a:active, +.m-block.m-danger h4 a:hover, .m-block.m-danger h4 a:focus, .m-block.m-danger h4 a:active, +.m-block.m-danger h5 a:hover, .m-block.m-danger h5 a:focus, .m-block.m-danger h5 a:active, +.m-block.m-danger h6 a:hover, .m-block.m-danger h6 a:focus, .m-block.m-danger h6 a:active { + color: #ff9391; +} +.m-block.m-info h3 a:hover, .m-block.m-info h3 a:focus, .m-block.m-info h3 a:active, +.m-block.m-info h4 a:hover, .m-block.m-info h4 a:focus, .m-block.m-info h4 a:active, +.m-block.m-info h5 a:hover, .m-block.m-info h5 a:focus, .m-block.m-info h5 a:active, +.m-block.m-info h6 a:hover, .m-block.m-info h6 a:focus, .m-block.m-info h6 a:active { + color: #5297d7; +} +div.m-button a, .m-label { color: #22272e; } +div.m-button.m-flat a { color: #dcdcdc; } +div.m-button.m-flat a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active { + color: #a5c9ea; +} +div.m-button.m-default a, .m-label:not(.m-flat).m-default { background-color: #dcdcdc; } +div.m-button.m-primary a, .m-label:not(.m-flat).m-primary { background-color: #a5c9ea; } +div.m-button.m-success a, .m-label:not(.m-flat).m-success { background-color: #3bd267; } +div.m-button.m-warning a, .m-label:not(.m-flat).m-warning { background-color: #c7cf2f; } +div.m-button.m-danger a, .m-label:not(.m-flat).m-danger { background-color: #cd3431; } +div.m-button.m-info a, .m-label:not(.m-flat).m-info { background-color: #2f83cc; } +div.m-button.m-dim a, .m-label:not(.m-flat).m-dim { background-color: #747474; } +div.m-button.m-default a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active { + background-color: #a5c9ea; +} +div.m-button.m-primary a:hover, div.m-button.m-primary a:focus, div.m-button.m-primary a:active { + background-color: #dcdcdc; +} +div.m-button.m-success a:hover, div.m-button.m-success a:focus, div.m-button.m-success a:active { + background-color: #acecbe; +} +div.m-button.m-warning a:hover, div.m-button.m-warning a:focus, div.m-button.m-warning a:active { + background-color: #e9ecae; +} +div.m-button.m-danger a:hover, div.m-button.m-danger a:focus, div.m-button.m-danger a:active { + background-color: #ff9391; +} +div.m-button.m-info a:hover, div.m-button.m-info a:focus, div.m-button.m-info a:active { + background-color: #5297d7; +} +div.m-button.m-dim a:hover, div.m-button.m-dim a:focus, div.m-button.m-dim a:active { + background-color: #acacac; +} +.m-note.m-default { background-color: #34424d; } +.m-note.m-default, +table.m-table tr.m-default td, table.m-table td.m-default, +table.m-table tr.m-default th, table.m-table th.m-default { + color: #dcdcdc; +} +.m-note.m-default a:hover, +table.m-table tr.m-default td a:hover, table.m-table td.m-default a:hover, +table.m-table tr.m-default th a:hover, table.m-table th.m-default a:hover, +.m-note.m-default a:focus, +table.m-table tr.m-default td a:focus, table.m-table td.m-default a:focus, +table.m-table tr.m-default th a:focus, table.m-table th.m-default a:focus, +.m-note.m-default a:active, +table.m-table tr.m-default td a:active, table.m-table td.m-default a:active, +table.m-table tr.m-default th a:active, table.m-table th.m-default a:active { + color: #a5c9ea; +} +.m-note.m-primary a, +table.m-table tr.m-primary td a, table.m-table td.m-primary a, +table.m-table tr.m-primary th a, table.m-table th.m-primary a { + color: #5b9dd9; +} +.m-note.m-primary, +table.m-table tr.m-primary td, table.m-table td.m-primary, +table.m-table tr.m-primary th, table.m-table th.m-primary { + background-color: #a5c2db; + color: #2f363f; +} +.m-note.m-primary a, +table.m-table tr.m-primary td a, table.m-table td.m-primary a, +table.m-table tr.m-primary th a, table.m-table th.m-primary a { + color: #2a75b6; +} +.m-note.m-primary a:hover, +table.m-table tr.m-primary td a:hover, table.m-table td.m-primary a:hover, +table.m-table tr.m-primary th a:hover, table.m-table th.m-primary a:hover, +.m-note.m-primary a:focus, +table.m-table tr.m-primary td a:focus, table.m-table td.m-primary a:focus, +table.m-table tr.m-primary th a:focus, table.m-table th.m-primary a:focus, +.m-note.m-primary a:active, +table.m-table tr.m-primary td a:active, table.m-table td.m-primary a:active, +table.m-table tr.m-primary th a:active, table.m-table th.m-primary a:active { + color: #2f363f; +} +.m-note.m-success, +table.m-table tr.m-success td, table.m-table td.m-success, +table.m-table tr.m-success th, table.m-table th.m-success { + background-color: #2a703f; + color: #acecbe; +} +.m-note.m-success a, +table.m-table tr.m-success td a, table.m-table td.m-success a, +table.m-table tr.m-success th a, table.m-table th.m-success a { + color: #3bd267; +} +.m-note.m-success a:hover, +table.m-table tr.m-success td a:hover, table.m-table td.m-success a:hover, +table.m-table tr.m-success th a:hover, table.m-table th.m-success a:hover, +.m-note.m-success a:focus, +table.m-table tr.m-success td a:focus, table.m-table td.m-success a:focus, +table.m-table tr.m-success th a:focus, table.m-table th.m-success a:focus, +.m-note.m-success a:active, +table.m-table tr.m-success td a:active, table.m-table td.m-success a:active, +table.m-table tr.m-success th a:active, table.m-table th.m-success a:active { + color: #acecbe; +} +.m-note.m-warning, table.m-table tr.m-warning td, table.m-table td.m-warning, + table.m-table tr.m-warning th, table.m-table th.m-warning { + background-color: #6d702a; + color: #e9ecae; +} +.m-note.m-warning a, table.m-table tr.m-warning td a, table.m-table td.m-warning a, + table.m-table tr.m-warning th a, table.m-table th.m-warning a { + color: #b8bf2b; +} +.m-note.m-warning a:hover, +table.m-table tr.m-warning td a:hover, table.m-table td.m-warning a:hover, +table.m-table tr.m-warning th a:hover, table.m-table th.m-warning a:hover, +.m-note.m-warning a:focus, +table.m-table tr.m-warning td a:focus, table.m-table td.m-warning a:focus, +table.m-table tr.m-warning th a:focus, table.m-table th.m-warning a:focus, +.m-note.m-warning a:active, +table.m-table tr.m-warning td a:active, table.m-table td.m-warning a:active, +table.m-table tr.m-warning th a:active, table.m-table th.m-warning a:active { + color: #e9ecae; +} +.m-note.m-danger, +table.m-table tr.m-danger td, table.m-table td.m-danger, +table.m-table tr.m-danger th, table.m-table th.m-danger { + background-color: #702b2a; + color: #ff9391; +} +.m-note.m-danger a, +table.m-table tr.m-danger td a, table.m-table td.m-danger a, +table.m-table tr.m-danger th a, table.m-table th.m-danger a { + color: #d85c59; +} +.m-note.m-danger a:hover, +table.m-table tr.m-danger td a:hover, table.m-table td.m-danger a:hover, +table.m-table tr.m-danger th a:hover, table.m-table th.m-danger a:hover, +.m-note.m-danger a:focus, +table.m-table tr.m-danger td a:focus, table.m-table td.m-danger a:focus, +table.m-table tr.m-danger th a:focus, table.m-table th.m-danger a:focus, +.m-note.m-danger a:active, +table.m-table tr.m-danger td a:active, table.m-table td.m-danger a:active, +table.m-table tr.m-danger th a:active, table.m-table th.m-danger a:active { + color: #ff9391; +} +.m-note.m-info, +table.m-table tr.m-info td, table.m-table td.m-info, +table.m-table tr.m-info th, table.m-table th.m-info { + background-color: #2a4f70; + color: #a5caeb; +} +.m-note.m-info a, +table.m-table tr.m-info td a, table.m-table td.m-info a, +table.m-table tr.m-info th a, table.m-table th.m-info a { + color: #5297d7; +} +.m-note.m-info a:hover, +table.m-table tr.m-info td a:hover, table.m-table td.m-info a:hover, +table.m-table tr.m-info th a:hover, table.m-table th.m-info a:hover, +.m-note.m-info a:focus, +table.m-table tr.m-info td a:focus, table.m-table td.m-info a:focus, +table.m-table tr.m-info th a:focus, table.m-table th.m-info a:focus, +.m-note.m-info a:active, +table.m-table tr.m-info td a:active, table.m-table td.m-info a:active, +table.m-table tr.m-info th a:active, table.m-table th.m-info a:active { + color: #a5caeb; +} +.m-note.m-dim, +table.m-table tr.m-dim td, table.m-table td.m-dim, +table.m-table tr.m-dim th, table.m-table th.m-dim { + background-color: #2d3236; + color: #747474; +} +.m-note.m-dim a, +table.m-table tr.m-dim td a, table.m-table td.m-dim a, +table.m-table tr.m-dim th a, table.m-table th.m-dim a { + color: #acacac; +} +.m-note.m-dim a:hover, +table.m-table tr.m-dim td a:hover, table.m-table td.m-dim a:hover, +table.m-table tr.m-dim th a:hover, table.m-table th.m-dim a:hover, +.m-note.m-dim a:focus, +table.m-table tr.m-dim td a:focus, table.m-table td.m-dim a:focus, +table.m-table tr.m-dim th a:focus, table.m-table th.m-dim a:focus, +.m-note.m-dim a:active, +table.m-table tr.m-dim td a:active, table.m-table td.m-dim a:active, +table.m-table tr.m-dim th a:active, table.m-table th.m-dim a:active { + color: #747474; +} +figure.m-figure.m-default:before { border-color: #34424d; } +figure.m-figure.m-default figcaption { color: #dcdcdc; } +figure.m-figure.m-primary:before { border-color: #a5c2db; } +figure.m-figure.m-primary figcaption { color: #a5c9ea; } +figure.m-figure.m-success:before { border-color: #2a703f; } +figure.m-figure.m-success figcaption { color: #3bd267; } +figure.m-figure.m-warning:before { border-color: #6d702a; } +figure.m-figure.m-warning figcaption { color: #c7cf2f; } +figure.m-figure.m-danger:before { border-color: #702b2a; } +figure.m-figure.m-danger figcaption { color: #cd3431; } +figure.m-figure.m-info:before { border-color: #2a4f70; } +figure.m-figure.m-info figcaption { color: #2f83cc; } +figure.m-figure.m-dim:before { border-color: #2d3236; } +figure.m-figure.m-dim { color: #747474; } +figure.m-figure.m-dim a { color: #acacac; } +figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-dim a:active { + color: #747474; +} +.m-math { fill: #dcdcdc; } +.m-math.m-default, .m-math g.m-default, .m-math rect.m-default, +div.m-plot svg .m-bar.m-default, +.m-graph g.m-edge polygon, +.m-graph g.m-node:not(.m-flat) ellipse, +.m-graph g.m-node:not(.m-flat) polygon, +.m-graph g.m-edge text, +.m-graph g.m-node.m-flat text, +.m-graph.m-default g.m-edge polygon, +.m-graph.m-default g.m-node:not(.m-flat) ellipse, +.m-graph.m-default g.m-node:not(.m-flat) polygon, +.m-graph.m-default g.m-edge text, +.m-graph.m-default g.m-node.m-flat text { + fill: #dcdcdc; +} +.m-graph g.m-edge polygon, +.m-graph g.m-edge path, +.m-graph g.m-node ellipse, +.m-graph g.m-node polygon, +.m-graph g.m-node polyline, +.m-graph.m-default g.m-edge polygon, +.m-graph.m-default g.m-edge path, +.m-graph.m-default g.m-node ellipse, +.m-graph.m-default g.m-node polygon, +.m-graph.m-default g.m-node polyline { + stroke: #dcdcdc; +} +.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary, +div.m-plot svg .m-bar.m-primary, +.m-graph.m-primary g.m-edge polygon, +.m-graph.m-primary g.m-node:not(.m-flat) ellipse, +.m-graph.m-primary g.m-node:not(.m-flat) polygon, +.m-graph.m-primary g.m-edge text, +.m-graph.m-primary g.m-node.m-flat text { + fill: #a5c9ea; +} +.m-graph.m-primary g.m-edge polygon, +.m-graph.m-primary g.m-edge path, +.m-graph.m-primary g.m-node ellipse, +.m-graph.m-primary g.m-node polygon, +.m-graph.m-primary g.m-node polyline { + stroke: #a5c9ea; +} +.m-math.m-success, .m-math g.m-success, .m-math rect.m-success, +div.m-plot svg .m-bar.m-success, +.m-graph.m-success g.m-edge polygon, +.m-graph.m-success g.m-node:not(.m-flat) ellipse, +.m-graph.m-success g.m-node:not(.m-flat) polygon, +.m-graph.m-success g.m-edge text, +.m-graph.m-success g.m-node.m-flat text { + fill: #3bd267; +} +.m-graph.m-success g.m-edge polygon, +.m-graph.m-success g.m-edge path, +.m-graph.m-success g.m-node ellipse, +.m-graph.m-success g.m-node polygon, +.m-graph.m-success g.m-node polyline { + stroke: #3bd267; +} +.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning, +div.m-plot svg .m-bar.m-warning, +.m-graph.m-warning g.m-edge polygon, +.m-graph.m-warning g.m-node:not(.m-flat) ellipse, +.m-graph.m-warning g.m-node:not(.m-flat) polygon, +.m-graph.m-warning g.m-edge text, +.m-graph.m-warning g.m-node.m-flat text { + fill: #c7cf2f; +} +.m-graph.m-warning g.m-edge polygon, +.m-graph.m-warning g.m-edge path, +.m-graph.m-warning g.m-node ellipse, +.m-graph.m-warning g.m-node polygon, +.m-graph.m-warning g.m-node polyline { + stroke: #c7cf2f; +} +.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger, +div.m-plot svg .m-bar.m-danger, +.m-graph.m-danger g.m-edge polygon, +.m-graph.m-danger g.m-node:not(.m-flat) ellipse, +.m-graph.m-danger g.m-node:not(.m-flat) polygon, +.m-graph.m-danger g.m-edge text, +.m-graph.m-danger g.m-node.m-flat text { + fill: #cd3431; +} +.m-graph.m-danger g.m-edge polygon, +.m-graph.m-danger g.m-edge path, +.m-graph.m-danger g.m-node ellipse, +.m-graph.m-danger g.m-node polygon, +.m-graph.m-danger g.m-node polyline { + stroke: #cd3431; +} +.m-math.m-info, .m-math g.m-info, .m-math rect.m-info, +div.m-plot svg .m-bar.m-info, +.m-graph.m-info g.m-edge polygon, +.m-graph.m-info g.m-node:not(.m-flat) ellipse, +.m-graph.m-info g.m-node:not(.m-flat) polygon, +.m-graph.m-info g.m-edge text, +.m-graph.m-info g.m-node.m-flat text { + fill: #2f83cc; +} +.m-graph.m-info g.m-edge polygon, +.m-graph.m-info g.m-edge path, +.m-graph.m-info g.m-node ellipse, +.m-graph.m-info g.m-node polygon, +.m-graph.m-info g.m-node polyline { + stroke: #2f83cc; +} +.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim, +div.m-plot svg .m-bar.m-dim, +.m-graph.m-dim g.m-edge polygon, +.m-graph.m-dim g.m-node:not(.m-flat) ellipse, +.m-graph.m-dim g.m-node:not(.m-flat) polygon, +.m-graph.m-dim g.m-edge text, +.m-graph.m-dim g.m-node.m-flat text { + fill: #747474; +} +.m-graph.m-dim g.m-edge polygon, +.m-graph.m-dim g.m-edge path, +.m-graph.m-dim g.m-node ellipse, +.m-graph.m-dim g.m-node polygon, +.m-graph.m-dim g.m-node polyline { + stroke: #747474; +} +.m-graph g.m-edge.m-default polygon, +.m-graph g.m-node.m-default:not(.m-flat) ellipse, +.m-graph g.m-node.m-default:not(.m-flat) polygon, +.m-graph g.m-edge.m-default text, +.m-graph g.m-node.m-default.m-flat text { + fill: #dcdcdc; +} +.m-graph g.m-edge.m-default polygon, +.m-graph g.m-edge.m-default path, +.m-graph g.m-node.m-default ellipse, +.m-graph g.m-node.m-default polygon, +.m-graph g.m-node.m-default polyline { + stroke: #dcdcdc; +} +.m-graph g.m-edge.m-primary polygon, +.m-graph g.m-node.m-primary:not(.m-flat) ellipse, +.m-graph g.m-node.m-primary:not(.m-flat) polygon, +.m-graph g.m-edge.m-primary text, +.m-graph g.m-node.m-primary.m-flat text { + fill: #a5c9ea; +} +.m-graph g.m-edge.m-primary polygon, +.m-graph g.m-edge.m-primary path, +.m-graph g.m-node.m-primary ellipse, +.m-graph g.m-node.m-primary polygon, +.m-graph g.m-node.m-primary polyline { + stroke: #a5c9ea; +} +.m-graph g.m-edge.m-success polygon, +.m-graph g.m-node.m-success:not(.m-flat) ellipse, +.m-graph g.m-node.m-success:not(.m-flat) polygon, +.m-graph g.m-edge.m-success text, +.m-graph g.m-node.m-success.m-flat text { + fill: #3bd267; +} +.m-graph g.m-edge.m-success polygon, +.m-graph g.m-edge.m-success path, +.m-graph g.m-node.m-success ellipse, +.m-graph g.m-node.m-success polygon, +.m-graph g.m-node.m-success polyline { + stroke: #3bd267; +} +.m-graph g.m-edge.m-warning polygon, +.m-graph g.m-node.m-warning:not(.m-flat) ellipse, +.m-graph g.m-node.m-warning:not(.m-flat) polygon, +.m-graph g.m-edge.m-warning text, +.m-graph g.m-node.m-warning.m-flat text { + fill: #c7cf2f; +} +.m-graph g.m-edge.m-warning polygon, +.m-graph g.m-edge.m-warning path, +.m-graph g.m-node.m-warning ellipse, +.m-graph g.m-node.m-warning polygon, +.m-graph g.m-node.m-warning polyline { + stroke: #c7cf2f; +} +.m-graph g.m-edge.m-danger polygon, +.m-graph g.m-node.m-danger:not(.m-flat) ellipse, +.m-graph g.m-node.m-danger:not(.m-flat) polygon, +.m-graph g.m-edge.m-danger text, +.m-graph g.m-node.m-danger.m-flat text { + fill: #cd3431; +} +.m-graph g.m-edge.m-danger polygon, +.m-graph g.m-edge.m-danger path, +.m-graph g.m-node.m-danger ellipse, +.m-graph g.m-node.m-danger polygon, +.m-graph g.m-node.m-danger polyline { + stroke: #cd3431; +} +.m-graph g.m-edge.m-info polygon, +.m-graph g.m-node.m-info:not(.m-flat) ellipse, +.m-graph g.m-node.m-info:not(.m-flat) polygon, +.m-graph g.m-edge.m-info text, +.m-graph g.m-node.m-info.m-flat text { + fill: #2f83cc; +} +.m-graph g.m-edge.m-info polygon, +.m-graph g.m-edge.m-info path, +.m-graph g.m-node.m-info ellipse, +.m-graph g.m-node.m-info polygon, +.m-graph g.m-node.m-info polyline { + stroke: #2f83cc; +} +.m-graph g.m-edge.m-dim polygon, +.m-graph g.m-node.m-dim:not(.m-flat) ellipse, +.m-graph g.m-node.m-dim:not(.m-flat) polygon, +.m-graph g.m-edge.m-dim text, +.m-graph g.m-node.m-dim.m-flat text { + fill: #747474; +} +.m-graph g.m-edge.m-dim polygon, +.m-graph g.m-edge.m-dim path, +.m-graph g.m-node.m-dim ellipse, +.m-graph g.m-node.m-dim polygon, +.m-graph g.m-node.m-dim polyline { + stroke: #747474; +} +p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note, +.m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image, +img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math, +div.m-graph, div.m-plot { + margin-bottom: 1rem; +} +p:last-child, p.m-nopadb, ul:last-child, ul.m-nopadb, +ol:last-child, ol.m-nopadb, dl:last-child, dl.m-nopadb, +blockquote:last-child, blockquote.m-nopadb, pre:last-child, pre.m-nopadb, +.m-code-figure:last-child, .m-code-figure.m-nopadb, +.m-console-figure:last-child, .m-console-figure.m-nopadb, +hr:last-child, hr.m-nopadb, .m-note:last-child, .m-note.m-nopadb, +.m-frame:last-child, .m-frame.m-nopadb, .m-block:last-child, .m-block.m-nopadb, +div.m-button:last-child, div.m-button.m-nopadb, +div.m-scroll:last-child, div.m-scroll.m-nopadb, +table.m-table:last-child, table.m-table.m-nopadb, +img.m-image:last-child, img.m-image.m-nopadb, +svg.m-image:last-child, svg.m-image.m-nopadb, +div.m-image:last-child, div.m-image.m-nopadb, +figure.m-figure:last-child, figure.m-figure.m-nopadb, +.m-imagegrid:last-child, .m-imagegrid.m-nopadb, +div.m-math:last-child, div.m-math.m-nopadb, +div.m-graph:last-child, div.m-graph.m-nopadb, +div.m-plot:last-child, div.m-plot.m-nopadb { + margin-bottom: 0; +} +li > p:last-child, li > blockquote:last-child, li > pre:last-child, +li > .m-code-figure:last-child, li > .m-console-figure:last-child, +li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child, +li > div.m-button:last-child, li > div.m-scroll:last-child, li > table.m-table:last-child, +li > img.m-image:last-child, li > svg.m-image:last-child, li > div.m-image:last-child, +li > figure.m-figure:last-child, li > div.m-math:last-child, +li > div.m-graph:last-child, li > div.m-plot:last-child { + margin-bottom: 1rem; +} +li:last-child > p:last-child, li:last-child > p.m-nopadb, +li:last-child > blockquote:last-child, li:last-child > blockquote.m-nopadb, +li:last-child > pre:last-child, li:last-child > pre.m-nopadb, +li:last-child > .m-code-figure:last-child, li:last-child > .m-code-figure.m-nopadb, +li:last-child > .m-console-figure:last-child, li:last-child > .m-console-figure.m-nopadb, +li:last-child > .m-note:last-child, li:last-child > .m-note.m-nopadb, +li:last-child > .m-frame:last-child, li:last-child > .m-frame.m-nopadb, +li:last-child > .m-block:last-child, li:last-child > .m-block.m-nopadb, +li:last-child > div.m-button:last-child, li:last-child > div.m-button.m-nopadb, +li:last-child > div.m-scroll:last-child, li:last-child > div.m-scroll.m-nopadb, +li:last-child > table.m-table:last-child, li:last-child > table.m-table.m-nopadb, +li:last-child > img.m-image:last-child, li:last-child > img.m-image.m-nopadb, +li:last-child > svg.m-image:last-child, li:last-child > svg.m-image.m-nopadb, +li:last-child > div.m-image:last-child, li:last-child > div.m-image.m-nopadb, +li:last-child > figure.m-figure:last-child, li:last-child > figure.m-figure.m-nopadb, +li:last-child > div.m-math:last-child, li:last-child > div.m-math.m-nopadb, +li:last-child > div.m-graph:last-child, li:last-child > div.m-graph.m-nopadb, +li:last-child > div.m-plot:last-child, li:last-child > div.m-plot.m-nopadb { + margin-bottom: 0; +} + +body > header > nav { + width: 100%; + background-color: #22272e; + min-height: 3rem; +} +body > header > nav.m-navbar-landing, +body > header > nav.m-navbar-cover { + background-color: transparent; + position: relative; +} +body > header > nav.m-navbar-landing { + opacity: 0.8; +} +body > header > nav.m-navbar-cover { + background-color: rgba(34, 39, 46, 0.25); + opacity: 1; +} +body > header > nav.m-navbar-landing:hover, +body > header > nav.m-navbar-cover:hover { + background-color: rgba(34, 39, 46, 0.75); + opacity: 1; +} +body> header > nav.m-navbar-landing:target, +body> header > nav.m-navbar-cover:target { + background-color: #22272e; + opacity: 1; +} +body > header > nav.m-navbar-landing #m-navbar-brand.m-navbar-brand-hidden { + visibility: hidden; +} +body > header > nav.m-navbar-landing:target #m-navbar-brand.m-navbar-brand-hidden { + visibility: visible; +} +body > header > nav { + margin-left: auto; + margin-right: auto; + color: #ffffff; +} +body > header > nav a { + text-decoration: none; + text-transform: none; + display: inline-block; + vertical-align: middle; + line-height: 2.75rem; + color: #ffffff; +} +body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide { + font-weight: 600; + font-size: 1.125rem; + padding-left: 1rem; + padding-right: 1rem; +} +body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a { + text-transform: uppercase; +} +body > header > nav #m-navbar-brand a { + padding-left: 0; + padding-right: 0; +} +body > header > nav #m-navbar-brand .m-thin { + font-weight: normal; +} +body > header > nav #m-navbar-brand .m-breadcrumb { + color: #747474; +} +body > header > nav a#m-navbar-show:before, body > header > nav a#m-navbar-hide:before { + content:'\2630'; +} +body > header > nav #m-navbar-collapse { + padding-bottom: 1rem; +} +body > header > nav #m-navbar-collapse li { + border-style: solid; + border-color: transparent; + border-width: 0 0 0 0.25rem; + margin-left: -1rem; +} +body > header > nav #m-navbar-collapse li a { + border-style: solid; + border-color: transparent; + line-height: 1.5rem; + margin-left: -0.25rem; + padding-left: 0.75rem; + border-width: 0 0 0 0.25rem; + width: 100%; +} +body > header > nav #m-navbar-collapse li a#m-navbar-current { + color: #5b9dd9; + border-color: #5b9dd9; +} +body > header > nav ol { + list-style-type: none; + margin: 0; +} +body > header > nav ol ol { + padding-left: 1.5rem; +} +body > header > nav .m-row > [class*='m-col-'] { + padding-top: 0; + padding-bottom: 0; +} +body > header > nav a:hover, body > header > nav a:focus, body > header > nav a:active { + color: #a5c9ea; +} +body > header > nav #m-navbar-collapse li:hover { + border-color: #a5c9ea; +} +body > header > nav #m-navbar-collapse li a:hover, +body > header > nav #m-navbar-collapse li a:focus, +body > header > nav #m-navbar-collapse li a:active { + border-color: #a5c9ea; + background-color: #292f37; +} +body > header > nav.m-navbar-landing #m-navbar-collapse li a:hover, +body > header > nav.m-navbar-cover #m-navbar-collapse li a:hover, +body > header > nav.m-navbar-landing #m-navbar-collapse li a:focus, +body > header > nav.m-navbar-cover #m-navbar-collapse li a:focus, +body > header > nav.m-navbar-landing #m-navbar-collapse li a:active, +body > header > nav.m-navbar-cover #m-navbar-collapse li a:active { + background-color: rgba(41, 47, 55, 0.5); +} +body > header > nav #m-navbar-hide { + display: none; +} +body > header > nav:target #m-navbar-collapse { + display: block; +} +body > header > nav:target #m-navbar-show { + display: none; +} +body > header > nav:target #m-navbar-hide { + display: inline-block; +} +@media screen and (min-width: 768px) { + body > header > nav #m-navbar-show, body > header > nav #m-navbar-hide, + body > header > nav:target #m-navbar-show, body > header > nav:target #m-navbar-hide { + display: none; + } + body > header > nav #m-navbar-collapse li a { + line-height: 2.75rem; + } + body > header > nav a, body > header > nav #m-navbar-collapse li a { + margin-left: 0; + padding-left: 1rem; + padding-right: 1rem; + white-space: nowrap; + } + body > header > nav #m-navbar-collapse { + padding-bottom: 0; + } + body > header > nav #m-navbar-collapse li ol { + background-color: #22272e; + } + body > header > nav #m-navbar-collapse ol ol li { + margin-left: 0; + padding-left: 0; + border-left-width: 0; + } + body > header > nav #m-navbar-collapse ol ol li a { + padding-left: 0.75rem; + } + body > header > nav #m-navbar-collapse > .m-row > ol > li { + margin-left: 0; + border-left-width: 0; + } + body > header > nav #m-navbar-collapse > .m-row > ol > li > a { + border-width: 0 0 0.25rem 0; + } + body > header > nav #m-navbar-collapse ol { + padding-left: 0; + padding-right: 0; + } + body > header > nav #m-navbar-collapse > .m-row > ol, body > header > nav #m-navbar-collapse > .m-row > ol > li { + float: left; + } + body > header > nav #m-navbar-collapse ol ol { + z-index: 99999; + position: absolute; + visibility: hidden; + } + body > header > nav #m-navbar-collapse li:hover ol { + visibility: visible; + } +} +body > footer { + width: 100%; +} +body > footer > nav { + padding-top: 1rem; + padding-bottom: 1rem; + font-size: 0.85rem; + text-align: center; + color: #c5c5c5; + background-color: #444e5c; +} +body > footer > nav h3, body > footer > nav h3 a { + text-transform: uppercase; + font-weight: normal; +} +body > footer > nav ul { + list-style-type: none; + padding: 0; + margin: 0; +} +body > footer > nav a { + text-decoration: none; + text-transform: none; + color: #ffffff; +} +body > footer > nav a:hover, body > footer > nav a:focus, body > footer > nav a:active { + color: #a5c9ea; +} +body > main { + padding-top: 1rem; + padding-bottom: 1rem; +} +article h1 { + font-size: 1.75rem; +} +article h1 .m-breadcrumb { + color: #747474; + font-weight: normal; +} +article h1 .m-breadcrumb a { + color: #a5c9ea; +} +article h1 .m-breadcrumb a:hover, article h1 a:focus, article h1 a:active { + color: #dcdcdc; +} +article > header h1 { + font-size: 2rem; + margin-bottom: 0.5rem; +} +article h1 a, article > header h1, article > header h1 a, +article section > h2, article section > h2 a, +article section > h3, article section > h3 a, +article section > h4, article section > h4 a, +article section > h5, article section > h5 a, +article section > h6, article section > h6 a { + color: #a5c9ea; +} +article h1 a:hover, article > header h1 a:hover, article > header h1 a:focus, article > header h1 a:active, +article section > h2 a:hover, article section > h2 a:focus, article section > h2 a:active, +article section > h3 a:hover, article section > h3 a:focus, article section > h3 a:active, +article section > h4 a:hover, article section > h4 a:focus, article section > h4 a:active, +article section > h5 a:hover, article section > h5 a:focus, article section > h5 a:active, +article section > h6 a:hover, article section > h6 a:focus, article section > h6 a:active { + color: #dcdcdc; +} +article > header .m-date { + display: block; + width: 2.5rem; + float: left; + text-align: center; + line-height: 95%; + font-size: 0.75rem; + font-weight: normal; + white-space: nowrap; + border-right-style: solid; + border-right-width: 0.125rem; + border-color: #a5c9ea; + padding-right: 0.75rem; + margin-top: -0.1rem; + margin-right: 0.75rem; + margin-bottom: 0.25rem; +} +article > header .m-date-day { + display: block; + font-weight: bold; + padding-top: 0.2rem; + padding-bottom: 0.15rem; + font-size: 1.25rem; +} +article > header p { + color: #f0f0f0; + font-size: 1.125rem; +} +article > header h1::after { + content: " "; + clear: both; + display: table; +} +article > footer { + color: #c5c5c5; +} +article > footer p { + font-style: italic; + font-size: 0.85rem; + text-indent: 0; +} +article section:target { + margin-left: -1.0rem; + border-left-style: solid; + border-left-width: 0.25rem; + padding-left: 0.75rem; + border-color: #a5c9ea; +} +article h1 a, article > header h1 a, article section > h2 a, article section > h3 a, +article section > h4 a, article section > h5 a, article section > h6 a { + text-decoration: none; +} +#m-landing-image, #m-cover-image, article#m-jumbo > header #m-jumbo-image { + background-size: cover; + background-color: #0f1217; + background-position: center center; + background-repeat: no-repeat; + margin-top: -4rem; + padding-top: 5rem; +} +#m-landing-image { + color: #ffffff; +} +#m-cover-image { + height: 30rem; + margin-bottom: -26rem; +} +#m-landing-cover h1 { + font-size: 2.8rem; + margin-top: -0.5rem; + padding-left: 1.5rem; + padding-bottom: 1rem; + text-transform: lowercase; +} +#m-landing-cover { + padding-bottom: 10rem; + margin-bottom: -6rem; +} +article#m-jumbo { + margin-top: -1rem; +} +#m-landing-cover, #m-cover-image > div, article#m-jumbo > header #m-jumbo-cover { + background: linear-gradient(transparent 0%, transparent 50%, #2f363f 100%); + width: 100%; + height: 100%; +} +article#m-jumbo > header h1, article#m-jumbo > header h2 { + text-align: center; + font-weight: bold; +} +article#m-jumbo > header a { + text-decoration: none; +} +article#m-jumbo > header #m-jumbo-cover { + padding-bottom: 5rem; +} +article#m-jumbo > header #m-jumbo-image { + font-size: 2.5vmin; + margin-bottom: -3rem; +} +article#m-jumbo > header h1 { + font-size: 10vmin; +} +article#m-jumbo > header h2 { + font-size: 3vmin; +} +@media screen and (max-height: 640px) , screen and (max-width: 640px) { + article#m-jumbo > header h1 { + font-size: 3rem; + } + article#m-jumbo > header #m-jumbo-image, article#m-jumbo > header h2 { + font-size: 1rem; + } +} +article#m-jumbo > header, article#m-jumbo > header h1, article#m-jumbo > header a { + color: #ffffff; +} +article#m-jumbo > header a:hover, article#m-jumbo > header a:focus, article#m-jumbo > header a:active { + color: #f0f0f0; +} +article#m-jumbo.m-inverted > header, article#m-jumbo.m-inverted > header h1, article#m-jumbo.m-inverted > header a { + color: #000000; +} +article#m-jumbo.m-inverted > header a:hover, article#m-jumbo.m-inverted > header a:focus, article#m-jumbo.m-inverted > header a:active { + color: #0f0f0f; +} +.m-landing-news h3 a { + color: #dcdcdc; + text-decoration: none; + text-transform: uppercase; +} +.m-landing-news h3 a:hover, .m-landing-news h3 a:hover, .m-landing-news h3 a:focus, .m-landing-news h3 a:active { + color: #a5c9ea; +} +.m-landing-news time { + display: inline-block; + margin-left: 1rem; + float: right; +} +.m-article-pagination { + text-align: center; + padding: 1rem; +} +nav.m-navpanel { + text-align: center; +} +nav.m-navpanel h3 { + text-transform: uppercase; + font-weight: normal; +} +nav.m-navpanel ol { + text-transform: lowercase; +} +nav.m-navpanel ol, nav.m-navpanel ul { + list-style-type: none; + padding: 0; +} +nav.m-navpanel a { + color: #ffffff; + text-decoration: none; +} +nav.m-navpanel a:hover, nav.m-navpanel a:focus, nav.m-navpanel a:active { + color: #a5c9ea; +} +ul.m-tagcloud li { display: inline; } +ul.m-tagcloud li.m-tag-1 { font-size: 0.75rem; } +ul.m-tagcloud li.m-tag-2 { font-size: 0.825rem; } +ul.m-tagcloud li.m-tag-3 { font-size: 1rem; } +ul.m-tagcloud li.m-tag-4 { font-size: 1.25rem; } +ul.m-tagcloud li.m-tag-5 { font-size: 1.5rem; } +article section:target figure.m-code-figure, article section:target figure.m-console-figure { + z-index: 1; +} +article, article > header, article section { margin-bottom: 1rem; } +article:last-child, article section:last-child { margin-bottom: 0; } +.m-container-inflatable section:target > .m-note, +.m-container-inflatable section:target > .m-frame, +.m-container-inflatable section:target > .m-block, +.m-container-inflatable section:target > pre, +.m-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 > .m-note, +.m-container-inflatable section:target section > .m-frame, +.m-container-inflatable section:target section > .m-block, +.m-container-inflatable section:target section > pre, +.m-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 [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; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + padding-left: 0.75rem; +} +.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 [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; +} +@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 section > figure.m-code-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-inflatable > figure.m-code-figure::before, +.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before { + border-left-color: #405363; +} +@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-primary { + border-color: #a5c9ea; +} +.m-container-inflatable section:target .m-note.m-success { + border-color: #3bd267; +} +.m-container-inflatable section:target .m-note.m-warning { + border-color: #c7cf2f; +} +.m-container-inflatable section:target .m-note.m-danger { + border-color: #cd3431; +} +.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 } +.m-code .c { color: #a5c9ea } +.m-code .k { color: #ffffff; font-weight: bold } +.m-code .n { color: #dcdcdc } +.m-code .o { color: #aaaaaa } +.m-code .p { color: #aaaaaa } +.m-code .ch { color: #a5c9ea } +.m-code .cm { color: #a5c9ea } +.m-code .cp { color: #3bd267 } +.m-code .cpf { color: #c7cf2f } +.m-code .c1 { color: #a5c9ea } +.m-code .cs { color: #a5c9ea } +.m-code .gd { color: #cd3431 } +.m-code .ge { color: #e6e6e6; font-style: italic } +.m-code .gh { color: #ffffff; font-weight: bold } +.m-code .gi { color: #3bd267 } +.m-code .gs { color: #e6e6e6; font-weight: bold } +.m-code .gu { color: #5b9dd9 } +.m-code .kc { color: #ffffff; font-weight: bold } +.m-code .kd { color: #ffffff; font-weight: bold } +.m-code .kn { color: #ffffff; font-weight: bold } +.m-code .kp { color: #ffffff; font-weight: bold } +.m-code .kr { color: #ffffff; font-weight: bold } +.m-code .kt { color: #ffffff; font-weight: bold } +.m-code .m { color: #c7cf2f } +.m-code .s { color: #e07f7c } +.m-code .na { color: #dcdcdc; font-weight: bold } +.m-code .nb { color: #ffffff; font-weight: bold } +.m-code .nc { color: #dcdcdc; font-weight: bold } +.m-code .no { color: #dcdcdc } +.m-code .nd { color: #dcdcdc } +.m-code .ni { color: #dcdcdc } +.m-code .ne { color: #dcdcdc } +.m-code .nf { color: #dcdcdc } +.m-code .nl { color: #dcdcdc } +.m-code .nn { color: #dcdcdc } +.m-code .nx { color: #dcdcdc } +.m-code .py { color: #dcdcdc } +.m-code .nt { color: #dcdcdc; font-weight: bold } +.m-code .nv { color: #c7cf2f } +.m-code .ow { color: #dcdcdc; font-weight: bold } +.m-code .mb { color: #c7cf2f } +.m-code .mf { color: #c7cf2f } +.m-code .mh { color: #c7cf2f } +.m-code .mi { color: #c7cf2f } +.m-code .mo { color: #c7cf2f } +.m-code .sa { color: #e07f7c } +.m-code .sb { color: #e07f7c } +.m-code .sc { color: #e07cdc } +.m-code .dl { color: #e07f7c } +.m-code .sd { color: #e07f7c } +.m-code .s2 { color: #e07f7c } +.m-code .se { color: #e07f7c } +.m-code .sh { color: #e07f7c } +.m-code .si { color: #e07f7c } +.m-code .sx { color: #e07f7c } +.m-code .sr { color: #e07f7c } +.m-code .s1 { color: #e07f7c } +.m-code .ss { color: #e07f7c } +.m-code .bp { color: #ffffff; font-weight: bold } +.m-code .fm { color: #dcdcdc } +.m-code .vc { color: #c7cf2f } +.m-code .vg { color: #c7cf2f } +.m-code .vi { color: #c7cf2f } +.m-code .vm { color: #c7cf2f } +.m-code .il { color: #c7cf2f } + +.m-console .hll { background-color: #ffffcc } +.m-console .g-AnsiBlack { color: #000000 } +.m-console .g-AnsiBlue { color: #3f3fd1 } +.m-console .g-AnsiBrightBlack { color: #686868; font-weight: bold } +.m-console .g-AnsiBrightBlue { color: #5454ff; font-weight: bold } +.m-console .g-AnsiBrightCyan { color: #54ffff; font-weight: bold } +.m-console .g-AnsiBrightDefault { color: #ffffff; font-weight: bold } +.m-console .g-AnsiBrightGreen { color: #54ff54; font-weight: bold } +.m-console .g-AnsiBrightMagenta { color: #ff54ff; font-weight: bold } +.m-console .g-AnsiBrightRed { color: #ff5454; font-weight: bold } +.m-console .g-AnsiBrightWhite { color: #ffffff; font-weight: bold } +.m-console .g-AnsiBrightYellow { color: #ffff54; font-weight: bold } +.m-console .g-AnsiCyan { color: #18b2b2 } +.m-console .g-AnsiDefault { color: #b2b2b2 } +.m-console .g-AnsiGreen { color: #18b218 } +.m-console .g-AnsiMagenta { color: #b218b2 } +.m-console .g-AnsiRed { color: #b21818 } +.m-console .g-AnsiWhite { color: #b2b2b2 } +.m-console .g-AnsiYellow { color: #b26818 } +.m-console .go { color: #b2b2b2 } +.m-console .gp { color: #54ffff; font-weight: bold } +.m-console .w { color: #b2b2b2 } diff --git a/src/main/webapp/preview/css/m-dark.css b/src/main/webapp/preview/css/m-dark.css new file mode 100644 index 0000000..dacd03d --- /dev/null +++ b/src/main/webapp/preview/css/m-dark.css @@ -0,0 +1,30 @@ +/* + This file is part of m.css. + + Copyright © 2017, 2018, 2019 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. +*/ + +@import url('m-theme-dark.css'); +@import url('m-grid.css'); +@import url('m-components.css'); +@import url('m-layout.css'); +@import url('pygments-dark.css'); +@import url('pygments-console.css'); diff --git a/src/main/webapp/preview/css/m-debug.css b/src/main/webapp/preview/css/m-debug.css new file mode 100644 index 0000000..385c5f6 --- /dev/null +++ b/src/main/webapp/preview/css/m-debug.css @@ -0,0 +1,71 @@ +/* + This file is part of m.css. + + Copyright © 2017, 2018, 2019 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. +*/ + +/* Grid container should always contain rows */ +.m-container > * { + background-color: #ff0000; +} +.m-container > .m-row { + background-color: transparent; +} +/* Grid row should always contain columns or a clearfix */ +.m-row > * { + background-color: #ff0000; +} +.m-row > [class*='m-col-'], .m-row > [class*='m-clearfix-'] { + background-color: transparent; +} + +/* Grid container can't contain another container */ +.m-container .m-container, + +/* Grid column can't contain a column directly (unless it has some alignment in + the same level) */ +[class*='m-col-'] > [class*='m-col-t-']:not(.m-left-t):not(.m-right-t):not(.m-center-t), +[class*='m-col-'] > [class*='m-col-s-']:not(.m-left-t):not(.m-right-t):not(.m-center-t):not(.m-left-s):not(.m-right-s):not(.m-center-s), +[class*='m-col-'] > [class*='m-col-m-']:not(.m-left-t):not(.m-right-t):not(.m-center-t):not(.m-left-s):not(.m-right-s):not(.m-center-s):not(.m-left-m):not(.m-right-m):not(.m-center-m), +[class*='m-col-'] > [class*='m-col-l-']:not([class*='m-left-'):not([class*='m-right-'):not([class*='m-center-']), + +/* m-center and m-fullwidth together is most probably a mistake */ +.m-center.m-fullwidth, + +/* m-scroll can't be applied to tables, as it doesn't go well with m-fullwidth */ +table.m-scroll, table.m-scroll *, + +/* Grid column can't be also m-note, m-block or m-frame ... as the margin would + break things */ +[class*='m-col-'].m-note, [class*='m-col-'].m-block, [class*='m-col-'].m-frame, +[class*='m-col-'].m-image, [class*='m-col-'].m-imagegrid, pre[class*='m-col-'], +[class*='m-col-'].m-code, [class*='m-col-'].m-figure, [class*='m-col-'].m-code-figure, + +/* It's ugly to have something styled as two different things so it's illegal */ +.m-block.m-note, .m-block.m-text, .m-note.m-frame, .m-note.m-text, .m-frame.m-text, + +/* It's ugly to have notes, blocks, frames or colored text in (colored) notes + so it's illegal */ +.m-note .m-note, .m-note .m-block, .m-note .m-frame, .m-note .m-text, + +/* Links shouldn't contain links */ +a a + { background-color: #ff0000; } diff --git a/src/main/webapp/preview/css/m-doxygen.css b/src/main/webapp/preview/css/m-doxygen.css new file mode 100644 index 0000000..ef82b1c --- /dev/null +++ b/src/main/webapp/preview/css/m-doxygen.css @@ -0,0 +1,325 @@ +/* + This file is part of m.css. + + Copyright © 2017, 2018, 2019 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. +*/ + +a.m-dox, a.m-dox-self, a.m-dox-external, +ul.m-dox li.m-dox-expansible > a:first-child, ul.m-dox li.m-dox-collapsible > a:first-child, +.m-code.m-inverted.m-dox-include > a { + text-decoration: none; +} +a.m-dox, a.m-dox-self { + font-weight: bold; +} +/* Make it possible to override the above */ +.m-thin a.m-dox, .m-thin a.m-dox-self { + font-weight: normal; +} +ul.m-dox li.m-dox-expansible > a:first-child, +ul.m-dox li.m-dox-collapsible > a:first-child, +ul.m-dox li.m-dox-expansible > a:first-child:hover, +ul.m-dox li.m-dox-expansible > a:first-child:focus, +ul.m-dox li.m-dox-expansible > a:first-child:active, +ul.m-dox li.m-dox-collapsible > a:first-child:hover, +ul.m-dox li.m-dox-collapsible > a:first-child:focus, +ul.m-dox li.m-dox-collapsible > a:first-child:active { + color: var(--color); +} +a.m-dox-self, +ul.m-dox li.m-dox-expansible > a:first-child:before, +ul.m-dox li.m-dox-collapsible > a:first-child:before { + color: var(--article-heading-color); +} +a.m-dox-self:hover, a.m-dox-self:focus, a.m-dox-self:active, +ul.m-dox li.m-dox-expansible > a:first-child:hover::before, +ul.m-dox li.m-dox-expansible > a:first-child:focus::before, +ul.m-dox li.m-dox-expansible > a:first-child:active::before, +ul.m-dox li.m-dox-collapsible > a:first-child:hover::before, +ul.m-dox li.m-dox-collapsible > a:first-child:focus::before, +ul.m-dox li.m-dox-collapsible > a:first-child:active::before { + color: var(--article-heading-active-color); +} +h3 a.m-dox-external { + font-weight: normal; +} +span.m-dox-wrap-bumper { + margin-right: -1rem; +} +span.m-dox-wrap { + padding-left: 1rem; + display: inline-block; + vertical-align: text-top; + white-space: pre-line; + max-width: 100%; /* otherwise horizontal scrollbars, wtf */ +} +dl.m-dox dd { + margin-bottom: 0.5rem; +} +ul.m-dox { + list-style: none; + margin-left: 1.0375rem; + padding-left: 0.9rem; + border-left-color: var(--line-color); + border-left-width: 0.0625rem; + border-left-style: solid; +} +ul.m-dox li { + text-indent: -1rem; + padding-left: 1rem; +} +ul.m-dox li.m-dox-expansible > ul { + display: none; +} +ul.m-dox li.m-dox-expansible, ul.m-dox li.m-dox-collapsible { + padding-left: 0.6rem; +} +ul.m-dox li.m-dox-expansible > ul.m-dox, ul.m-dox li.m-dox-collapsible > ul.m-dox { + margin-left: 0.5rem; +} +ul.m-dox li.m-dox-expansible > a:first-child:before, ul.m-dox li.m-dox-collapsible > a:first-child:before { + background-color: var(--background-color); + display: inline-block; + width: 0.4rem; + font-weight: bold; +} +ul.m-dox li.m-dox-expansible > a:first-child:before { content: '⊕'; } +ul.m-dox li.m-dox-collapsible > a:first-child:before { content: '⊖'; } + +h1 .m-dox-template, h1 .m-dox-include { + font-size: 1.3rem; + font-weight: normal; +} +/* If there's no template, the include is shown after in a slightly more packed + layout */ +h1 .m-dox-include:last-child { + margin-bottom: -0.5rem; +} +h3 .m-dox-template, h3 .m-dox-include { + font-size: 1rem; + font-weight: normal; +} +.m-dox-template, dl.m-dox dd, ul.m-dox li > span.m-dox { + color: var(--dim-color); +} +dl.m-dox dd svg.m-math, ul.m-dox li > span.m-dox svg.m-math { + fill: var(--dim-color); +} +.m-dox-template a, dl.m-dox dd a, ul.m-dox li > span.m-dox a { + color: var(--dim-link-color); +} +.m-dox-template a:hover, .m-dox-template a:focus, .m-dox-template a:active, +dl.m-dox dd a:hover, dl.m-dox dd a:focus, dl.m-dox dd a:active, +ul.m-dox li > span.m-dox a:hover, ul.m-dox li > span.m-dox a:focus, ul.m-dox li > span.m-dox a:active { + color: var(--dim-link-active-color); +} +/* So the link gets highlighted on hover */ +.m-code.m-inverted.m-dox-include > a:link, +.m-code.m-inverted.m-dox-include > a:visited { + opacity: 0.6666; /* Same as .m-code.m-inverted > span */ +} +.m-code.m-inverted.m-dox-include > a:hover, +.m-code.m-inverted.m-dox-include > a:focus, +.m-code.m-inverted.m-dox-include > a:active { + opacity: 1; +} + +article section.m-dox-details > div { + margin-top: 0; + margin-left: 0; + margin-right: 0; + position: relative; + padding: 1rem; +} +article section.m-dox-details > div::before { + position: absolute; + content: ' '; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; /* so it doesn't make the contents inactive */ + border-style: solid; + border-width: 0.125rem; + border-radius: var(--border-radius); + border-color: var(--code-background-color); +} +article section.m-dox-details > div > h3:first-child { + position: relative; /* so it's above the border */ + margin: -1rem -1rem 1rem -1rem; + padding: 0.5rem 1rem; + background-color: var(--code-background-color); + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +article section.m-dox-details:target { + border-color: transparent; /* to preserve rounded corners */ +} +article section.m-dox-details:target > div { + z-index: 1; /* so the selection border isn't above figure border */ +} + +.m-container-inflatable > .m-row > [class*='m-col-'] section.m-dox-details > div { + margin-left: -1rem; + margin-right: -1rem; +} + +.m-container-inflatable section.m-dox-details:target > div > h3:first-child, +.m-container-inflatable section.m-dox-details:target section > div > h3:first-child { + margin-left: -1.0rem; + border-left-style: solid; + border-left-color: var(--article-heading-active-color); + border-left-width: 0.25rem; + padding-left: 0.75rem; +} +.m-container-inflatable section.m-dox-details:target > div::before, +.m-container-inflatable section-dox-details:target section > div.m::before { + border-left-width: 0.25rem; + border-left-color: var(--article-heading-color); +} + +a.m-dox-search-icon { + padding-left: 1rem; + padding-right: 1rem; +} +a.m-dox-search-icon svg { + fill: var(--header-link-color); +} +body > header > nav #m-navbar-collapse a.m-dox-search-icon svg { + vertical-align: -5%; +} +a.m-dox-search-icon:focus svg, a.m-dox-search-icon:hover svg, a.m-dox-search-icon:active svg { + fill: var(--header-link-active-color); +} +.m-dox-search { + display: none; + z-index: 10; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-color: var(--header-background-color-landing); +} +.m-dox-search:target { + display: block; +} +.m-dox-search > a { + display: block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +.m-dox-search-header { + margin-top: 2.5rem; + padding: 0.5rem 1rem; + height: 2rem; +} +.m-dox-search-header > div:first-child { + float: right; +} +.m-dox-search-content { + background-color: var(--header-background-color); + border-radius: var(--border-radius); + padding: 1rem; +} +.m-dox-search input { + width: 100%; + height: 3rem; + font-size: 1.2rem; + border-width: 0; + color: var(--color); + background-color: var(--default-filled-background-color); + border-radius: var(--border-radius); + margin-bottom: 1rem; + padding: 0 1rem; /* putting it on all sides cuts text off in FF */ +} +.m-dox-search #search-notfound { + display: none; +} +.m-dox-search ul#search-results { + list-style-type: none; + padding-left: 0; + /* Size breakdown: + 2.5 margin of .m-dox-search-header from top + 2 height of .m-dox-search-header + 1 padding around .m-dox-search-header (twice 0.5rem) + 1 padding of .m-dox-search-content from top + 3 height of the input field + 1 margin under input + 1 padding of .m-dox-search-content from bottom + 1 margin under .m-dox-search-content + ------ + 12.5 total */ + max-height: calc(100vh - 12.5rem); + overflow-y: auto; + display: none; +} +.m-dox-search ul#search-results li a { + display: block; + padding-left: 1rem; + padding-right: 1rem; + text-decoration: none; + width: 100%; + line-height: 1.5rem; + color: var(--color); +} +.m-dox-search ul#search-results li a > div { + white-space: nowrap; + overflow: hidden; +} +.m-dox-search ul#search-results li a > div:not(.m-dox-search-alias) { + /* This is here in order to cut the text off at the left side. Besides this + there's special patching needed for punctuation characters, see search.js + for details. */ + direction: rtl; +} +.m-dox-search ul#search-results li a .m-label { + float: right; + line-height: 1rem; + margin-top: 0.1rem; + margin-left: 0.25rem; +} +.m-dox-search ul#search-results li a .m-label.m-flat { + margin-right: -0.75rem; +} +.m-dox-search ul#search-results li#search-current a { + background-color: var(--default-filled-background-color); +} +.m-dox-search ul#search-results li#search-current.m-dox-search-copied a { + background-color: var(--success-filled-background-color); +} +.m-dox-search-typed { + color: var(--link-color); +} + +/* WELL THANK YOU WEBKIT! FOR SURE I WANTED ALL THAT SHIT HERE! */ +.m-dox-search input[type="search"] { -webkit-appearance: textfield; } +.m-dox-search input[type="search"]::-webkit-search-decoration, +.m-dox-search input[type="search"]::-webkit-search-cancel-button, +.m-dox-search input[type="search"]::-webkit-search-results-button, +.m-dox-search input[type="search"]::-webkit-search-results-decoration { + display: none; +} diff --git a/src/main/webapp/preview/css/m-grid.css b/src/main/webapp/preview/css/m-grid.css new file mode 100644 index 0000000..56b80be --- /dev/null +++ b/src/main/webapp/preview/css/m-grid.css @@ -0,0 +1,387 @@ +/* + This file is part of m.css. + + Copyright © 2017, 2018, 2019 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. +*/ + +/* Important basics */ +*, ::before, ::after { box-sizing: border-box; } +body { margin: 0; } + +/* 12-column layout. Inspired by Bootstrap and + 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; + padding-left: 1rem; + padding-right: 1rem; +} +.m-row { + margin-left: -1rem; + margin-right: -1rem; +} +.m-row:after { /* avoid rows floating around each other */ + content: ' '; + clear: both; + display: table; +} +.m-row > [class*='m-col-'] { + position: relative; + padding: 1rem; +} +[class*='m-clearfix-']::after { + display: block; + content: ' '; + clear: both; +} +[class*='m-show-'] { + display: none; +} + +/* 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-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 { + padding-left: 0; +} +.m-container.m-nopad, [class*='m-col-'].m-nopad, +.m-container.m-nopadx, [class*='m-col-'].m-nopadx, +.m-container.m-nopadr, [class*='m-col-'].m-nopadr { + padding-right: 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, +.m-container-inflate.m-nopadb { + padding-bottom: 0; +} + +/* 12-column layout -- T (portrait phones) */ +[class*='m-col-t-'] { float: left; } + +.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; +} +.m-center-t, [class*='m-col-t-'].m-center-t { + margin-left: auto; + margin-right: auto; + float: none; +} + +.m-col-t-1 { width: calc(1 * 100% / 12); } +.m-col-t-2 { width: calc(2 * 100% / 12); } +.m-col-t-3 { width: calc(3 * 100% / 12); } +.m-col-t-4 { width: calc(4 * 100% / 12); } +.m-col-t-5 { width: calc(5 * 100% / 12); } +.m-col-t-6 { width: calc(6 * 100% / 12); } +.m-col-t-7 { width: calc(7 * 100% / 12); } +.m-col-t-8 { width: calc(8 * 100% / 12); } +.m-col-t-9 { width: calc(9 * 100% / 12); } +.m-col-t-10 { width: calc(10 * 100% / 12); } +.m-col-t-11 { width: calc(11 * 100% / 12); } +.m-col-t-12 { width: calc(12 * 100% / 12); } + +.m-push-t-1 { left: calc(1 * 100% / 12); } +.m-push-t-2 { left: calc(2 * 100% / 12); } +.m-push-t-3 { left: calc(3 * 100% / 12); } +.m-push-t-4 { left: calc(4 * 100% / 12); } +.m-push-t-5 { left: calc(5 * 100% / 12); } +.m-push-t-6 { left: calc(6 * 100% / 12); } +.m-push-t-7 { left: calc(7 * 100% / 12); } +.m-push-t-8 { left: calc(8 * 100% / 12); } +.m-push-t-9 { left: calc(9 * 100% / 12); } +.m-push-t-10 { left: calc(10 * 100% / 12); } +.m-push-t-11 { left: calc(11 * 100% / 12); } + +.m-pull-t-1 { right: calc(1 * 100% / 12); } +.m-pull-t-2 { right: calc(2 * 100% / 12); } +.m-pull-t-3 { right: calc(3 * 100% / 12); } +.m-pull-t-4 { right: calc(4 * 100% / 12); } +.m-pull-t-5 { right: calc(5 * 100% / 12); } +.m-pull-t-6 { right: calc(6 * 100% / 12); } +.m-pull-t-7 { right: calc(7 * 100% / 12); } +.m-pull-t-8 { right: calc(8 * 100% / 12); } +.m-pull-t-9 { right: calc(9 * 100% / 12); } +.m-pull-t-10 { right: calc(10 * 100% / 12); } +.m-pull-t-11 { right: calc(11 * 100% / 12); } + +/* 12-column layout -- S, 576px and up (landscape phones) */ +@media screen and (min-width: 576px) { + .m-container { width: 560px; } + + .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; } + + .m-left-s { + padding-right: 1rem; + float: left; + } + .m-right-s, [class*='m-col-s-'].m-right-s { + padding-left: 1rem; + float: right; + } + .m-center-s, [class*='m-col-s-'].m-center-s { + margin-left: auto; + margin-right: auto; + float: none; + } + + .m-col-s-1 { width: calc(1 * 100% / 12); } + .m-col-s-2 { width: calc(2 * 100% / 12); } + .m-col-s-3 { width: calc(3 * 100% / 12); } + .m-col-s-4 { width: calc(4 * 100% / 12); } + .m-col-s-5 { width: calc(5 * 100% / 12); } + .m-col-s-6 { width: calc(6 * 100% / 12); } + .m-col-s-7 { width: calc(7 * 100% / 12); } + .m-col-s-8 { width: calc(8 * 100% / 12); } + .m-col-s-9 { width: calc(9 * 100% / 12); } + .m-col-s-10 { width: calc(10 * 100% / 12); } + .m-col-s-11 { width: calc(11 * 100% / 12); } + .m-col-s-12 { width: calc(12 * 100% / 12); } + + .m-push-s-0 { left: calc(0 * 100% / 12); } + .m-push-s-1 { left: calc(1 * 100% / 12); } + .m-push-s-2 { left: calc(2 * 100% / 12); } + .m-push-s-3 { left: calc(3 * 100% / 12); } + .m-push-s-4 { left: calc(4 * 100% / 12); } + .m-push-s-5 { left: calc(5 * 100% / 12); } + .m-push-s-6 { left: calc(6 * 100% / 12); } + .m-push-s-7 { left: calc(7 * 100% / 12); } + .m-push-s-8 { left: calc(8 * 100% / 12); } + .m-push-s-9 { left: calc(9 * 100% / 12); } + .m-push-s-10 { left: calc(10 * 100% / 12); } + .m-push-s-11 { left: calc(11 * 100% / 12); } + + .m-pull-s-0 { right: calc(0 * 100% / 12); } + .m-pull-s-1 { right: calc(1 * 100% / 12); } + .m-pull-s-2 { right: calc(2 * 100% / 12); } + .m-pull-s-3 { right: calc(3 * 100% / 12); } + .m-pull-s-4 { right: calc(4 * 100% / 12); } + .m-pull-s-5 { right: calc(5 * 100% / 12); } + .m-pull-s-6 { right: calc(6 * 100% / 12); } + .m-pull-s-7 { right: calc(7 * 100% / 12); } + .m-pull-s-8 { right: calc(8 * 100% / 12); } + .m-pull-s-9 { right: calc(9 * 100% / 12); } + .m-pull-s-10 { right: calc(10 * 100% / 12); } + .m-pull-s-11 { right: calc(11 * 100% / 12); } + + .m-clearfix-t::after { display: none; } + + .m-hide-s { display: none; } + .m-show-s { display: block; } + + .m-col-s-none { + width: auto; + float: none; + } +} + +/* 12-column layout -- M, 768px and up (tablets, small desktops) */ +@media screen and (min-width: 768px) { + .m-container { width: 750px; } + + .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; } + + .m-left-m { + padding-right: 1rem; + float: left; + } + .m-right-m, [class*='m-col-m-'].m-right-m { + padding-left: 1rem; + float: right; + } + .m-center-m, [class*='m-col-m-'].m-center-m { + margin-left: auto; + margin-right: auto; + float: none; + } + + .m-col-m-1 { width: calc(1 * 100% / 12); } + .m-col-m-2 { width: calc(2 * 100% / 12); } + .m-col-m-3 { width: calc(3 * 100% / 12); } + .m-col-m-4 { width: calc(4 * 100% / 12); } + .m-col-m-5 { width: calc(5 * 100% / 12); } + .m-col-m-6 { width: calc(6 * 100% / 12); } + .m-col-m-7 { width: calc(7 * 100% / 12); } + .m-col-m-8 { width: calc(8 * 100% / 12); } + .m-col-m-9 { width: calc(9 * 100% / 12); } + .m-col-m-10 { width: calc(10 * 100% / 12); } + .m-col-m-11 { width: calc(11 * 100% / 12); } + .m-col-m-12 { width: calc(12 * 100% / 12); } + + .m-push-m-0 { left: calc(0 * 100% / 12); } + .m-push-m-1 { left: calc(1 * 100% / 12); } + .m-push-m-2 { left: calc(2 * 100% / 12); } + .m-push-m-3 { left: calc(3 * 100% / 12); } + .m-push-m-4 { left: calc(4 * 100% / 12); } + .m-push-m-5 { left: calc(5 * 100% / 12); } + .m-push-m-6 { left: calc(6 * 100% / 12); } + .m-push-m-7 { left: calc(7 * 100% / 12); } + .m-push-m-8 { left: calc(8 * 100% / 12); } + .m-push-m-9 { left: calc(9 * 100% / 12); } + .m-push-m-10 { left: calc(10 * 100% / 12); } + .m-push-m-11 { left: calc(11 * 100% / 12); } + + .m-pull-m-0 { right: calc(0 * 100% / 12); } + .m-pull-m-1 { right: calc(1 * 100% / 12); } + .m-pull-m-2 { right: calc(2 * 100% / 12); } + .m-pull-m-3 { right: calc(3 * 100% / 12); } + .m-pull-m-4 { right: calc(4 * 100% / 12); } + .m-pull-m-5 { right: calc(5 * 100% / 12); } + .m-pull-m-6 { right: calc(6 * 100% / 12); } + .m-pull-m-7 { right: calc(7 * 100% / 12); } + .m-pull-m-8 { right: calc(8 * 100% / 12); } + .m-pull-m-9 { right: calc(9 * 100% / 12); } + .m-pull-m-10 { right: calc(10 * 100% / 12); } + .m-pull-m-11 { right: calc(11 * 100% / 12); } + + .m-clearfix-s::after { display: none; } + + .m-hide-m { display: none; } + .m-show-m { display: block; } + + .m-col-m-none { + width: auto; + float: none; + } +} + +/* 12-column layout -- L, 992px and up (desktops, very large tablets) */ +@media screen and (min-width: 992px) { + .m-container { width: 960px; } + + .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; } + + .m-left-l { + padding-right: 1rem; + float: left; + } + .m-right-l, [class*='m-col-l-'].m-right-l { + padding-left: 1rem; + float: right; + } + .m-center-l, [class*='m-col-l-'].m-center-l { + margin-left: auto; + margin-right: auto; + float: none; + } + + .m-col-l-1 { width: calc(1 * 100% / 12); } + .m-col-l-2 { width: calc(2 * 100% / 12); } + .m-col-l-3 { width: calc(3 * 100% / 12); } + .m-col-l-4 { width: calc(4 * 100% / 12); } + .m-col-l-5 { width: calc(5 * 100% / 12); } + .m-col-l-6 { width: calc(6 * 100% / 12); } + .m-col-l-7 { width: calc(7 * 100% / 12); } + .m-col-l-8 { width: calc(8 * 100% / 12); } + .m-col-l-9 { width: calc(9 * 100% / 12); } + .m-col-l-10 { width: calc(10 * 100% / 12); } + .m-col-l-11 { width: calc(11 * 100% / 12); } + .m-col-l-12 { width: calc(12 * 100% / 12); } + + .m-push-l-0 { left: calc(0 * 100% / 12); } + .m-push-l-1 { left: calc(1 * 100% / 12); } + .m-push-l-2 { left: calc(2 * 100% / 12); } + .m-push-l-3 { left: calc(3 * 100% / 12); } + .m-push-l-4 { left: calc(4 * 100% / 12); } + .m-push-l-5 { left: calc(5 * 100% / 12); } + .m-push-l-6 { left: calc(6 * 100% / 12); } + .m-push-l-7 { left: calc(7 * 100% / 12); } + .m-push-l-8 { left: calc(8 * 100% / 12); } + .m-push-l-9 { left: calc(9 * 100% / 12); } + .m-push-l-10 { left: calc(10 * 100% / 12); } + .m-push-l-11 { left: calc(11 * 100% / 12); } + + .m-pull-l-0 { right: calc(0 * 100% / 12); } + .m-pull-l-1 { right: calc(1 * 100% / 12); } + .m-pull-l-2 { right: calc(2 * 100% / 12); } + .m-pull-l-3 { right: calc(3 * 100% / 12); } + .m-pull-l-4 { right: calc(4 * 100% / 12); } + .m-pull-l-5 { right: calc(5 * 100% / 12); } + .m-pull-l-6 { right: calc(6 * 100% / 12); } + .m-pull-l-7 { right: calc(7 * 100% / 12); } + .m-pull-l-8 { right: calc(8 * 100% / 12); } + .m-pull-l-9 { right: calc(9 * 100% / 12); } + .m-pull-l-10 { right: calc(10 * 100% / 12); } + .m-pull-l-11 { right: calc(11 * 100% / 12); } + + .m-clearfix-m::after { display: none; } + + .m-hide-l { display: none; } + .m-show-l { display: block; } + + .m-col-l-none { + width: auto; + float: none; + } +} diff --git a/src/main/webapp/preview/css/m-layout.css b/src/main/webapp/preview/css/m-layout.css new file mode 100644 index 0000000..ff8acaf --- /dev/null +++ b/src/main/webapp/preview/css/m-layout.css @@ -0,0 +1,778 @@ +/* + This file is part of m.css. + + Copyright © 2017, 2018, 2019 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. +*/ + +/* Header navigation */ +body > header > nav { + width: 100%; + background-color: var(--header-background-color); + min-height: 3rem; +} +body > header > nav.m-navbar-landing, +body > header > nav.m-navbar-cover { + background-color: transparent; + position: relative; +} +body > header > nav.m-navbar-landing { + opacity: 0.8; +} +body > header > nav.m-navbar-cover { + background-color: var(--header-background-color-jumbo); + opacity: 1; +} +body > header > nav.m-navbar-landing:hover, +body > header > nav.m-navbar-cover:hover { + background-color: var(--header-background-color-landing); + opacity: 1; +} +body> header > nav.m-navbar-landing:target, +body> header > nav.m-navbar-cover:target { + background-color: var(--header-background-color); + opacity: 1; +} +body > header > nav.m-navbar-landing #m-navbar-brand.m-navbar-brand-hidden { + visibility: hidden; +} +body > header > nav.m-navbar-landing:target #m-navbar-brand.m-navbar-brand-hidden { + visibility: visible; +} +body > header > nav { + margin-left: auto; + margin-right: auto; + color: var(--header-color); +} +body > header > nav a { + text-decoration: var(--link-decoration-nav); + text-transform: var(--nav-menu-case); + display: inline-block; + vertical-align: middle; + line-height: 2.75rem; + color: var(--header-link-color); +} +body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide { + font-weight: var(--heading-font-weight); + font-size: 1.125rem; + padding-left: 1rem; + padding-right: 1rem; +} +body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a { + text-transform: var(--nav-brand-case); +} +body > header > nav #m-navbar-brand a { + padding-left: 0; + padding-right: 0; +} +body > header > nav #m-navbar-brand .m-thin { + font-weight: normal; +} +body > header > nav #m-navbar-brand .m-breadcrumb { + color: var(--dim-color); +} +body > header > nav a#m-navbar-show:before, body > header > nav a#m-navbar-hide:before { + content:'\2630'; +} +body > header > nav #m-navbar-collapse { + padding-bottom: 1rem; +} +body > header > nav #m-navbar-collapse li { + border-style: solid; + border-color: transparent; + border-width: 0 0 0 0.25rem; + margin-left: -1rem; +} +body > header > nav #m-navbar-collapse li a { + border-style: solid; + border-color: transparent; + line-height: 1.5rem; + margin-left: -0.25rem; + padding-left: 0.75rem; + border-width: 0 0 0 0.25rem; + width: 100%; +} +body > header > nav #m-navbar-collapse li a#m-navbar-current { + color: var(--header-link-current-color); + border-color: var(--header-link-current-color); +} +body > header > nav ol { + list-style-type: none; + margin: 0; +} +body > header > nav ol ol { + padding-left: 1.5rem; +} +body > header > nav .m-row > [class*='m-col-'] { + padding-top: 0; + padding-bottom: 0; +} +body > header > nav a:hover, body > header > nav a:focus, body > header > nav a:active { + color: var(--header-link-active-color); +} +body > header > nav #m-navbar-collapse li:hover { + border-color: var(--header-link-active-color); +} +body > header > nav #m-navbar-collapse li a:hover, +body > header > nav #m-navbar-collapse li a:focus, +body > header > nav #m-navbar-collapse li a:active { + border-color: var(--header-link-active-color); + background-color: var(--header-link-active-background-color); +} +body > header > nav.m-navbar-landing #m-navbar-collapse li a:hover, +body > header > nav.m-navbar-cover #m-navbar-collapse li a:hover, +body > header > nav.m-navbar-landing #m-navbar-collapse li a:focus, +body > header > nav.m-navbar-cover #m-navbar-collapse li a:focus, +body > header > nav.m-navbar-landing #m-navbar-collapse li a:active, +body > header > nav.m-navbar-cover #m-navbar-collapse li a:active { + background-color: var(--header-link-active-background-color-semi); +} + +/* Header navigation -- collapsible part */ +body > header > nav #m-navbar-hide { + display: none; +} +body > header > nav:target #m-navbar-collapse { + display: block; +} +body > header > nav:target #m-navbar-show { + display: none; +} +body > header > nav:target #m-navbar-hide { + display: inline-block; +} + +/* Header navigation -- 768px and up (tablets, desktops) */ +@media screen and (min-width: 768px) { + body > header > nav #m-navbar-show, body > header > nav #m-navbar-hide, + body > header > nav:target #m-navbar-show, body > header > nav:target #m-navbar-hide { + display: none; + } + body > header > nav #m-navbar-collapse li a { + line-height: 2.75rem; + } + body > header > nav a, body > header > nav #m-navbar-collapse li a { + margin-left: 0; + padding-left: 1rem; + padding-right: 1rem; + white-space: nowrap; + } + body > header > nav #m-navbar-collapse { + padding-bottom: 0; + } + body > header > nav #m-navbar-collapse li ol { + background-color: var(--header-background-color); + } + body > header > nav #m-navbar-collapse ol ol li { + margin-left: 0; + padding-left: 0; + border-left-width: 0; + } + body > header > nav #m-navbar-collapse ol ol li a { + padding-left: 0.75rem; + } + body > header > nav #m-navbar-collapse > .m-row > ol > li { + margin-left: 0; + border-left-width: 0; + } + body > header > nav #m-navbar-collapse > .m-row > ol > li > a { + border-width: var(--header-border-width); + } + body > header > nav #m-navbar-collapse ol { + padding-left: 0; + padding-right: 0; + } + body > header > nav #m-navbar-collapse > .m-row > ol, body > header > nav #m-navbar-collapse > .m-row > ol > li { + float: left; + } + body > header > nav #m-navbar-collapse ol ol { + z-index: 99999; + position: absolute; + visibility: hidden; + } + body > header > nav #m-navbar-collapse li:hover ol { + visibility: visible; + } +} + +/* Footer navigation */ +body > footer { + width: 100%; +} +body > footer > nav { + padding-top: 1rem; + padding-bottom: 1rem; + font-size: var(--footer-font-size); + text-align: center; + color: var(--footer-color); + background-color: var(--footer-background-color); +} +body > footer > nav h3, body > footer > nav h3 a { + text-transform: var(--nav-heading-case); + font-weight: normal; +} +body > footer > nav ul { + list-style-type: none; + padding: 0; + margin: 0; +} +body > footer > nav a { + text-decoration: var(--link-decoration-nav); + text-transform: var(--nav-menu-case); + color: var(--footer-link-color); +} +body > footer > nav a:hover, body > footer > nav a:focus, body > footer > nav a:active { + color: var(--footer-link-active-color); +} + +/* Main content */ +body > main { + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Page heading (not in
), breadcrumb naviation on pages */ +article h1 { + font-size: 1.75rem; +} +article h1 .m-breadcrumb { + color: var(--dim-color); + font-weight: normal; +} +article h1 .m-breadcrumb a { + color: var(--article-heading-color); +} +article h1 .m-breadcrumb a:hover, article h1 a:focus, article h1 a:active { + color: var(--article-heading-active-color); +} + +/* Article elements */ +article > header h1 { + font-size: 2rem; + margin-bottom: 0.5rem; +} +article h1 a, article > header h1, article > header h1 a, +article section > h2, article section > h2 a, +article section > h3, article section > h3 a, +article section > h4, article section > h4 a, +article section > h5, article section > h5 a, +article section > h6, article section > h6 a { + color: var(--article-heading-color); +} +article h1 a:hover, article > header h1 a:hover, article > header h1 a:focus, article > header h1 a:active, +article section > h2 a:hover, article section > h2 a:focus, article section > h2 a:active, +article section > h3 a:hover, article section > h3 a:focus, article section > h3 a:active, +article section > h4 a:hover, article section > h4 a:focus, article section > h4 a:active, +article section > h5 a:hover, article section > h5 a:focus, article section > h5 a:active, +article section > h6 a:hover, article section > h6 a:focus, article section > h6 a:active { + color: var(--article-heading-active-color); +} +article > header .m-date { + display: block; + width: 2.5rem; + float: left; + text-align: center; + line-height: 95%; + font-size: 0.75rem; + font-weight: normal; + white-space: nowrap; + border-right-style: solid; + border-right-width: 0.125rem; + border-color: var(--article-heading-color); + padding-right: 0.75rem; + margin-top: -0.1rem; + margin-right: 0.75rem; + margin-bottom: 0.25rem; +} +article > header .m-date-day { + display: block; + font-weight: bold; + padding-top: 0.2rem; + padding-bottom: 0.15rem; + font-size: 1.25rem; +} +article > header p { + color: var(--article-header-color); + font-size: 1.125rem; +} +article > header h1::after { + content: " "; + clear: both; + display: table; +} +article > footer { + color: var(--article-footer-color); +} +article > footer p { + font-style: italic; + font-size: 0.85rem; + text-indent: 0; +} + +/* Article -- dynamic section headers */ +article section:target { + margin-left: -1.0rem; + border-left-style: solid; + border-left-width: 0.25rem; + padding-left: 0.75rem; + border-color: var(--article-heading-color); +} +article h1 a, article > header h1 a, article section > h2 a, article section > h3 a, +article section > h4 a, article section > h5 a, article section > h6 a { + text-decoration: var(--link-decoration-heading); +} + +/* Landing page, jumbo article */ +#m-landing-image, #m-cover-image, article#m-jumbo > header #m-jumbo-image { + background-size: cover; + background-color: var(--cover-image-background-color); + background-position: center center; + background-repeat: no-repeat; + margin-top: -4rem; + padding-top: 5rem; +} +#m-landing-image { + color: #ffffff; +} +#m-cover-image { + height: 30rem; + margin-bottom: -26rem; +} +#m-landing-cover h1 { + font-size: 2.8rem; + margin-top: -0.5rem; + padding-left: var(--paragraph-indent); + padding-bottom: 1rem; + text-transform: var(--landing-header-case); +} +#m-landing-cover { + padding-bottom: 10rem; + margin-bottom: -6rem; +} +article#m-jumbo { + margin-top: -1rem; +} +#m-landing-cover, #m-cover-image > div, article#m-jumbo > header #m-jumbo-cover { + background: linear-gradient(transparent 0%, transparent 50%, var(--background-color) 100%); + width: 100%; + height: 100%; +} +article#m-jumbo > header h1, article#m-jumbo > header h2 { + text-align: center; + font-weight: bold; +} +article#m-jumbo > header a { + text-decoration: none; +} +article#m-jumbo > header #m-jumbo-cover { + padding-bottom: 5rem; +} +article#m-jumbo > header #m-jumbo-image { + font-size: 2.5vmin; + margin-bottom: -3rem; +} +article#m-jumbo > header h1 { + font-size: 10vmin; +} +article#m-jumbo > header h2 { + font-size: 3vmin; +} +/* 2.5vmin equals to 16px (= 1 rem) on 640px, use that as the lower limit */ +@media screen and (max-height: 640px) , screen and (max-width: 640px) { + article#m-jumbo > header h1 { + font-size: 3rem; + } + article#m-jumbo > header #m-jumbo-image, article#m-jumbo > header h2 { + font-size: 1rem; + } +} + +article#m-jumbo > header, article#m-jumbo > header h1, article#m-jumbo > header a { + color: #ffffff; +} +article#m-jumbo > header a:hover, article#m-jumbo > header a:focus, article#m-jumbo > header a:active { + color: #f0f0f0; +} + +article#m-jumbo.m-inverted > header, article#m-jumbo.m-inverted > header h1, article#m-jumbo.m-inverted > header a { + color: #000000; +} +article#m-jumbo.m-inverted > header a:hover, article#m-jumbo.m-inverted > header a:focus, article#m-jumbo.m-inverted > header a:active { + color: #0f0f0f; +} + +/* News list on landing pages */ +.m-landing-news h3 a { + color: var(--color); + text-decoration: none; + text-transform: var(--nav-heading-case); +} +.m-landing-news h3 a:hover, .m-landing-news h3 a:hover, .m-landing-news h3 a:focus, .m-landing-news h3 a:active { + color: var(--article-heading-color); +} +.m-landing-news time { + display: inline-block; + margin-left: 1rem; + float: right; +} + +/* Article pagination */ +.m-article-pagination { + text-align: center; + padding: 1rem; +} + +/* Right navigation panel */ +nav.m-navpanel { + text-align: center; +} +nav.m-navpanel h3 { + text-transform: var(--nav-heading-case); + font-weight: normal; +} +nav.m-navpanel ol { + text-transform: var(--nav-categories-case); +} +nav.m-navpanel ol, nav.m-navpanel ul { + list-style-type: none; + padding: 0; +} +nav.m-navpanel a { + color: var(--navpanel-link-color); + text-decoration: var(--link-decoration-nav); +} +nav.m-navpanel a:hover, nav.m-navpanel a:focus, nav.m-navpanel a:active { + color: var(--navpanel-link-active-color); +} + +/* Tag cloud */ +ul.m-tagcloud li { display: inline; } +ul.m-tagcloud li.m-tag-1 { font-size: 0.75rem; } +ul.m-tagcloud li.m-tag-2 { font-size: 0.825rem; } +ul.m-tagcloud li.m-tag-3 { font-size: 1rem; } +ul.m-tagcloud li.m-tag-4 { font-size: 1.25rem; } +ul.m-tagcloud li.m-tag-5 { font-size: 1.5rem; } + +/* Avoid selection border being above figure border */ +article section:target figure.m-code-figure, article section:target figure.m-console-figure { + z-index: 1; +} + +/* Spacing after every block element, but not after the last */ +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 + --- 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, +.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 > .m-note, +.m-container-inflatable section:target section > .m-frame, +.m-container-inflatable section:target section > .m-block, +.m-container-inflatable section:target section > pre, +.m-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 [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; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + padding-left: 0.75rem; +} +.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 [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; +} +/* 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 section > figure.m-code-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-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); +} +/* 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 { + border-color: var(--success-color); +} +.m-container-inflatable section:target .m-note.m-warning { + border-color: var(--warning-color); +} +.m-container-inflatable section:target .m-note.m-danger { + border-color: var(--danger-color); +} +.m-container-inflatable section:target .m-note.m-info { + border-color: var(--info-color); +} +.m-container-inflatable section:target .m-note.m-dim { + border-color: var(--dim-color); +} diff --git a/src/main/webapp/preview/css/m-light.compiled.css b/src/main/webapp/preview/css/m-light.compiled.css new file mode 100644 index 0000000..58a05a3 --- /dev/null +++ b/src/main/webapp/preview/css/m-light.compiled.css @@ -0,0 +1,2436 @@ +/* Generated using `./postprocess.py m-light.css`. Do not edit. */ + +/* + This file is part of m.css. + + Copyright © 2017, 2018, 2019 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. +*/ + +*, ::before, ::after { box-sizing: border-box; } +body { margin: 0; } +.m-container { + width: 100%; + margin: auto; + padding-left: 1rem; + padding-right: 1rem; +} +.m-row { + margin-left: -1rem; + margin-right: -1rem; +} +.m-row:after { + content: ' '; + clear: both; + display: table; +} +.m-row > [class*='m-col-'] { + position: relative; + padding: 1rem; +} +[class*='m-clearfix-']::after { + display: block; + content: ' '; + clear: both; +} +[class*='m-show-'] { + display: none; +} +.m-container-inflate, :not(.m-row) > [class*='m-col-'] { + margin-bottom: 1rem; +} +.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, +.m-container.m-nopadl, [class*='m-col-'].m-nopadl { + padding-left: 0; +} +.m-container.m-nopad, [class*='m-col-'].m-nopad, +.m-container.m-nopadx, [class*='m-col-'].m-nopadx, +.m-container.m-nopadr, [class*='m-col-'].m-nopadr { + padding-right: 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, +.m-container-inflate.m-nopadb { + padding-bottom: 0; +} +[class*='m-col-t-'] { float: left; } +.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; +} +.m-center-t, [class*='m-col-t-'].m-center-t { + margin-left: auto; + margin-right: auto; + float: none; +} +.m-col-t-1 { width: calc(1 * 100% / 12); } +.m-col-t-2 { width: calc(2 * 100% / 12); } +.m-col-t-3 { width: calc(3 * 100% / 12); } +.m-col-t-4 { width: calc(4 * 100% / 12); } +.m-col-t-5 { width: calc(5 * 100% / 12); } +.m-col-t-6 { width: calc(6 * 100% / 12); } +.m-col-t-7 { width: calc(7 * 100% / 12); } +.m-col-t-8 { width: calc(8 * 100% / 12); } +.m-col-t-9 { width: calc(9 * 100% / 12); } +.m-col-t-10 { width: calc(10 * 100% / 12); } +.m-col-t-11 { width: calc(11 * 100% / 12); } +.m-col-t-12 { width: calc(12 * 100% / 12); } +.m-push-t-1 { left: calc(1 * 100% / 12); } +.m-push-t-2 { left: calc(2 * 100% / 12); } +.m-push-t-3 { left: calc(3 * 100% / 12); } +.m-push-t-4 { left: calc(4 * 100% / 12); } +.m-push-t-5 { left: calc(5 * 100% / 12); } +.m-push-t-6 { left: calc(6 * 100% / 12); } +.m-push-t-7 { left: calc(7 * 100% / 12); } +.m-push-t-8 { left: calc(8 * 100% / 12); } +.m-push-t-9 { left: calc(9 * 100% / 12); } +.m-push-t-10 { left: calc(10 * 100% / 12); } +.m-push-t-11 { left: calc(11 * 100% / 12); } +.m-pull-t-1 { right: calc(1 * 100% / 12); } +.m-pull-t-2 { right: calc(2 * 100% / 12); } +.m-pull-t-3 { right: calc(3 * 100% / 12); } +.m-pull-t-4 { right: calc(4 * 100% / 12); } +.m-pull-t-5 { right: calc(5 * 100% / 12); } +.m-pull-t-6 { right: calc(6 * 100% / 12); } +.m-pull-t-7 { right: calc(7 * 100% / 12); } +.m-pull-t-8 { right: calc(8 * 100% / 12); } +.m-pull-t-9 { right: calc(9 * 100% / 12); } +.m-pull-t-10 { right: calc(10 * 100% / 12); } +.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: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; } + .m-left-s { + padding-right: 1rem; + float: left; + } + .m-right-s, [class*='m-col-s-'].m-right-s { + padding-left: 1rem; + float: right; + } + .m-center-s, [class*='m-col-s-'].m-center-s { + margin-left: auto; + margin-right: auto; + float: none; + } + .m-col-s-1 { width: calc(1 * 100% / 12); } + .m-col-s-2 { width: calc(2 * 100% / 12); } + .m-col-s-3 { width: calc(3 * 100% / 12); } + .m-col-s-4 { width: calc(4 * 100% / 12); } + .m-col-s-5 { width: calc(5 * 100% / 12); } + .m-col-s-6 { width: calc(6 * 100% / 12); } + .m-col-s-7 { width: calc(7 * 100% / 12); } + .m-col-s-8 { width: calc(8 * 100% / 12); } + .m-col-s-9 { width: calc(9 * 100% / 12); } + .m-col-s-10 { width: calc(10 * 100% / 12); } + .m-col-s-11 { width: calc(11 * 100% / 12); } + .m-col-s-12 { width: calc(12 * 100% / 12); } + .m-push-s-0 { left: calc(0 * 100% / 12); } + .m-push-s-1 { left: calc(1 * 100% / 12); } + .m-push-s-2 { left: calc(2 * 100% / 12); } + .m-push-s-3 { left: calc(3 * 100% / 12); } + .m-push-s-4 { left: calc(4 * 100% / 12); } + .m-push-s-5 { left: calc(5 * 100% / 12); } + .m-push-s-6 { left: calc(6 * 100% / 12); } + .m-push-s-7 { left: calc(7 * 100% / 12); } + .m-push-s-8 { left: calc(8 * 100% / 12); } + .m-push-s-9 { left: calc(9 * 100% / 12); } + .m-push-s-10 { left: calc(10 * 100% / 12); } + .m-push-s-11 { left: calc(11 * 100% / 12); } + .m-pull-s-0 { right: calc(0 * 100% / 12); } + .m-pull-s-1 { right: calc(1 * 100% / 12); } + .m-pull-s-2 { right: calc(2 * 100% / 12); } + .m-pull-s-3 { right: calc(3 * 100% / 12); } + .m-pull-s-4 { right: calc(4 * 100% / 12); } + .m-pull-s-5 { right: calc(5 * 100% / 12); } + .m-pull-s-6 { right: calc(6 * 100% / 12); } + .m-pull-s-7 { right: calc(7 * 100% / 12); } + .m-pull-s-8 { right: calc(8 * 100% / 12); } + .m-pull-s-9 { right: calc(9 * 100% / 12); } + .m-pull-s-10 { right: calc(10 * 100% / 12); } + .m-pull-s-11 { right: calc(11 * 100% / 12); } + .m-clearfix-t::after { display: none; } + .m-hide-s { display: none; } + .m-show-s { display: block; } + .m-col-s-none { + width: auto; + float: none; + } +} +@media screen and (min-width: 768px) { + .m-container { width: 750px; } + .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; } + .m-left-m { + padding-right: 1rem; + float: left; + } + .m-right-m, [class*='m-col-m-'].m-right-m { + padding-left: 1rem; + float: right; + } + .m-center-m, [class*='m-col-m-'].m-center-m { + margin-left: auto; + margin-right: auto; + float: none; + } + .m-col-m-1 { width: calc(1 * 100% / 12); } + .m-col-m-2 { width: calc(2 * 100% / 12); } + .m-col-m-3 { width: calc(3 * 100% / 12); } + .m-col-m-4 { width: calc(4 * 100% / 12); } + .m-col-m-5 { width: calc(5 * 100% / 12); } + .m-col-m-6 { width: calc(6 * 100% / 12); } + .m-col-m-7 { width: calc(7 * 100% / 12); } + .m-col-m-8 { width: calc(8 * 100% / 12); } + .m-col-m-9 { width: calc(9 * 100% / 12); } + .m-col-m-10 { width: calc(10 * 100% / 12); } + .m-col-m-11 { width: calc(11 * 100% / 12); } + .m-col-m-12 { width: calc(12 * 100% / 12); } + .m-push-m-0 { left: calc(0 * 100% / 12); } + .m-push-m-1 { left: calc(1 * 100% / 12); } + .m-push-m-2 { left: calc(2 * 100% / 12); } + .m-push-m-3 { left: calc(3 * 100% / 12); } + .m-push-m-4 { left: calc(4 * 100% / 12); } + .m-push-m-5 { left: calc(5 * 100% / 12); } + .m-push-m-6 { left: calc(6 * 100% / 12); } + .m-push-m-7 { left: calc(7 * 100% / 12); } + .m-push-m-8 { left: calc(8 * 100% / 12); } + .m-push-m-9 { left: calc(9 * 100% / 12); } + .m-push-m-10 { left: calc(10 * 100% / 12); } + .m-push-m-11 { left: calc(11 * 100% / 12); } + .m-pull-m-0 { right: calc(0 * 100% / 12); } + .m-pull-m-1 { right: calc(1 * 100% / 12); } + .m-pull-m-2 { right: calc(2 * 100% / 12); } + .m-pull-m-3 { right: calc(3 * 100% / 12); } + .m-pull-m-4 { right: calc(4 * 100% / 12); } + .m-pull-m-5 { right: calc(5 * 100% / 12); } + .m-pull-m-6 { right: calc(6 * 100% / 12); } + .m-pull-m-7 { right: calc(7 * 100% / 12); } + .m-pull-m-8 { right: calc(8 * 100% / 12); } + .m-pull-m-9 { right: calc(9 * 100% / 12); } + .m-pull-m-10 { right: calc(10 * 100% / 12); } + .m-pull-m-11 { right: calc(11 * 100% / 12); } + .m-clearfix-s::after { display: none; } + .m-hide-m { display: none; } + .m-show-m { display: block; } + .m-col-m-none { + width: auto; + float: none; + } +} +@media screen and (min-width: 992px) { + .m-container { width: 960px; } + .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; } + .m-left-l { + padding-right: 1rem; + float: left; + } + .m-right-l, [class*='m-col-l-'].m-right-l { + padding-left: 1rem; + float: right; + } + .m-center-l, [class*='m-col-l-'].m-center-l { + margin-left: auto; + margin-right: auto; + float: none; + } + .m-col-l-1 { width: calc(1 * 100% / 12); } + .m-col-l-2 { width: calc(2 * 100% / 12); } + .m-col-l-3 { width: calc(3 * 100% / 12); } + .m-col-l-4 { width: calc(4 * 100% / 12); } + .m-col-l-5 { width: calc(5 * 100% / 12); } + .m-col-l-6 { width: calc(6 * 100% / 12); } + .m-col-l-7 { width: calc(7 * 100% / 12); } + .m-col-l-8 { width: calc(8 * 100% / 12); } + .m-col-l-9 { width: calc(9 * 100% / 12); } + .m-col-l-10 { width: calc(10 * 100% / 12); } + .m-col-l-11 { width: calc(11 * 100% / 12); } + .m-col-l-12 { width: calc(12 * 100% / 12); } + .m-push-l-0 { left: calc(0 * 100% / 12); } + .m-push-l-1 { left: calc(1 * 100% / 12); } + .m-push-l-2 { left: calc(2 * 100% / 12); } + .m-push-l-3 { left: calc(3 * 100% / 12); } + .m-push-l-4 { left: calc(4 * 100% / 12); } + .m-push-l-5 { left: calc(5 * 100% / 12); } + .m-push-l-6 { left: calc(6 * 100% / 12); } + .m-push-l-7 { left: calc(7 * 100% / 12); } + .m-push-l-8 { left: calc(8 * 100% / 12); } + .m-push-l-9 { left: calc(9 * 100% / 12); } + .m-push-l-10 { left: calc(10 * 100% / 12); } + .m-push-l-11 { left: calc(11 * 100% / 12); } + .m-pull-l-0 { right: calc(0 * 100% / 12); } + .m-pull-l-1 { right: calc(1 * 100% / 12); } + .m-pull-l-2 { right: calc(2 * 100% / 12); } + .m-pull-l-3 { right: calc(3 * 100% / 12); } + .m-pull-l-4 { right: calc(4 * 100% / 12); } + .m-pull-l-5 { right: calc(5 * 100% / 12); } + .m-pull-l-6 { right: calc(6 * 100% / 12); } + .m-pull-l-7 { right: calc(7 * 100% / 12); } + .m-pull-l-8 { right: calc(8 * 100% / 12); } + .m-pull-l-9 { right: calc(9 * 100% / 12); } + .m-pull-l-10 { right: calc(10 * 100% / 12); } + .m-pull-l-11 { right: calc(11 * 100% / 12); } + .m-clearfix-m::after { display: none; } + .m-hide-l { display: none; } + .m-show-l { display: block; } + .m-col-l-none { + width: auto; + float: none; + } +} + +html { + font-size: 14px; + background-color: #ffffff; +} +body { + font-family: 'Libre Baskerville', serif; + font-size: 1rem; + color: #000000; +} +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + font-weight: normal; +} +h1 { + margin-bottom: 1rem; +} +h2, h3, h4, h5, h6 { + margin-bottom: 0.5rem; +} +p, ul, ol, dl { + margin-top: 0; +} +ul, ol { + padding-left: 2rem; +} +ul ol, ul ul, ol ol, ol ul { + margin-bottom: 0; +} +main p { + text-indent: 1.5rem; + text-align: justify; +} +main p.m-noindent, li > p, dd > p, table.m-table td > p { + text-indent: 0; + text-align: left; +} +blockquote { + margin-top: 0; + margin-left: 1rem; + margin-right: 1rem; + padding: 1rem; + border-left-style: solid; + border-left-width: 0.25rem; +} +hr { + width: 75%; + border-width: 0.0625rem; + border-style: solid; +} +blockquote, hr { + border-color: #f7e3db; +} +pre { + font-family: 'Source Code Pro', monospace, monospace, monospace; + font-size: 1em; + padding: 0.5rem 1rem; + color: #5b5b5b; + background-color: #fbf0ec; + border-radius: 0.2rem; + overflow-x: auto; + margin-top: 0; +} +pre.m-console { + background-color: #000000; +} +abbr { + cursor: help; + text-decoration: underline dotted; +} +sub, sup { + font-size: 0.75rem; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { top: -0.35rem; } +sub { bottom: -0.2rem; } +a { + color: #ea7944; +} +a.m-flat { + text-decoration: none; +} +a:hover, a:focus, a:active { + color: #cb4b16; +} +a img { border: 0; } +svg a { cursor: pointer; } +mark { + padding: 0.0625rem; + background-color: #e6e69c; + color: #4c93d3; +} +code { + font-family: 'Source Code Pro', monospace, monospace, monospace; + font-size: 1em; + padding: 0.125rem; + color: #5b5b5b; + background-color: #fbf0ec; +} +code.m-console { + background-color: #000000; +} +*:focus { outline-color: #ea7944; } +div.m-scroll { + max-width: 100%; + overflow-x: auto; +} +.m-fullwidth { + width: 100%; +} +.m-spacing-150 { + line-height: 1.5rem; +} +.m-text-center, .m-text-center.m-noindent, table.m-table th.m-text-center, .m-text-center p { + text-align: center; +} +.m-text-left, .m-text-left.m-noindent, table.m-table th.m-text-left, .m-text-right p { + text-align: left; +} +.m-text-right, .m-text-right.m-noindent, table.m-table th.m-text-right, .m-text-right p { + text-align: right; +} +.m-text-top, table.m-table th.m-text-top, table.m-table td.m-text-top { + vertical-align: top; +} +.m-text-middle, table.m-table th.m-text-middle, table.m-table td.m-text-middle { + vertical-align: middle; +} +.m-text-bottom, table.m-table th.m-text-bottom, table.m-table td.m-text-bottom { + vertical-align: bottom; +} +.m-text.m-small { + font-size: 85.4%; +} +.m-text.m-big { + font-size: 117%; +} +.m-text.m-strong { + font-weight: bold; +} +.m-text.m-em { + font-style: italic; +} +h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin { + font-weight: normal; +} +ul.m-unstyled, ol.m-unstyled { + list-style-type: none; + padding-left: 0; +} +ul[class*='m-block-'], ol[class*='m-block-'] { + padding-left: 0; +} +ul[class*='m-block-'] li, ol[class*='m-block-'] li { + display: inline; +} +ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after { + content: " | "; +} +ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after { + content: " • "; +} +@media screen and (min-width: 576px) { + ul.m-block-bar-s, ol.m-block-bar-s, + ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; } + ul.m-block-bar-s li, ol.m-block-bar-s li, + ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; } + ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after, + ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; } +} +@media screen and (min-width: 768px) { + ul.m-block-bar-m, ol.m-block-bar-m, + ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; } + ul.m-block-bar-m li, ol.m-block-bar-m li, + ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; } + ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after, + ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; } +} +@media screen and (min-width: 992px) { + ul.m-block-bar-l, ol.m-block-bar-l, + ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; } + ul.m-block-bar-l li, ol.m-block-bar-l li, + ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; } + ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after, + ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; } +} +p.m-poem { + text-indent: 0; + text-align: left; + margin-left: 1.5rem; +} +p.m-transition { + color: #f7e3db; + text-indent: 0; + text-align: center; + font-size: 2rem; +} +dl.m-diary { + margin-bottom: 1.25rem; +} +dl.m-diary:last-child { + margin-bottom: 0.25rem; +} +dl.m-diary dt { + font-weight: bold; + width: 3.5rem; + float: left; + clear: both; + padding-top: 0.25rem; +} +dl.m-diary dd { + padding-top: 0.25rem; + padding-left: 3.5rem; +} +.m-note { + border-radius: 0.2rem; + padding: 1rem; +} +.m-note pre, .m-note code { + background-color: rgba(251, 240, 236, 0.5); +} +.m-frame { + background-color: #ffffff; + border-style: solid; + border-width: 0.125rem; + border-radius: 0.2rem; + border-color: #f7e3db; + padding: 0.875rem; +} +.m-block { + border-style: solid; + border-width: 0.0625rem; + border-left-width: 0.25rem; + border-radius: 0.2rem; + border-color: #f7e3db; + padding: 0.9375rem 0.9375rem 0.9375rem 0.75rem; +} +.m-block.m-badge::after { + content: ' '; + display: block; + clear: both; +} +.m-block.m-badge h3 { + margin-left: 5rem; +} +.m-block.m-badge p { + margin-left: 5rem; + text-indent: 0; +} +.m-block.m-badge img { + width: 4rem; + height: 4rem; + border-radius: 2rem; + float: left; +} +div.m-button { + text-align: center; +} +div.m-button a { + display: inline-block; + border-radius: 0.2rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + text-decoration: none; + font-size: 1.17rem; +} +div.m-button.m-fullwidth a { + display: block; + padding-left: 0.5rem; + padding-right: 0.5rem; +} +div.m-button a .m-big:first-child { + font-size: 1.37rem; + font-weight: bold; +} +div.m-button a .m-small:last-child { + font-size: 0.854rem; +} +.m-label { + border-radius: 0.2rem; + font-size: 75%; + font-weight: normal; + padding: 0.125rem 0.25rem; + vertical-align: 7.5%; +} +.m-label.m-flat { + border-width: 0.0625rem; + border-style: solid; + border-color: #bdbdbd; + padding: 0.0625rem 0.1875rem; +} +table.m-table { + border-collapse: collapse; + margin-left: auto; + margin-right: auto; +} +table.m-table.m-big { + margin-top: 1.75rem; +} +div.m-scroll > table.m-table:last-child { + margin-bottom: 0.0625rem; +} +table.m-table:not(.m-flat) tbody tr:hover { + background-color: #f7e3db; +} +table.m-table th, table.m-table td { + vertical-align: top; + border-style: solid; + border-top-width: 0.0625rem; + border-left-width: 0; + border-right-width: 0; + border-bottom-width: 0; + border-color: #f7e3db; +} +table.m-table caption { + padding-bottom: 0.5rem; +} +table.m-table thead tr:first-child th, table.m-table thead tr:first-child td { + border-top-width: 0.125rem; +} +table.m-table thead th, table.m-table thead td { + border-bottom-width: 0.125rem; + vertical-align: bottom; +} +table.m-table tfoot th, table.m-table tfoot td { + border-top-width: 0.125rem; +} +table.m-table th, table.m-table td { + padding: 0.5rem; +} +table.m-table.m-big th, table.m-table.m-big td { + padding: 0.75rem 1rem; +} +table.m-table th { + text-align: left; +} +table.m-table th.m-thin { + font-weight: normal; +} +table.m-table td.m-default, table.m-table th.m-default, +table.m-table td.m-primary, table.m-table th.m-primary, +table.m-table td.m-success, table.m-table th.m-success, +table.m-table td.m-warning, table.m-table th.m-warning, +table.m-table td.m-danger, table.m-table th.m-danger, +table.m-table td.m-info, table.m-table th.m-info, +table.m-table td.m-dim, table.m-table th.m-dim { + padding-left: 0.4375rem; + padding-right: 0.4375rem; + border-left-width: 0.0625rem; +} +table.m-table.m-big td.m-default, table.m-table.m-big th.m-default, +table.m-table.m-big td.m-primary, table.m-table.m-big th.m-primary, +table.m-table.m-big td.m-success, table.m-table.m-big th.m-success, +table.m-table.m-big td.m-warning, table.m-table.m-big th.m-warning, +table.m-table.m-big td.m-danger, table.m-table.m-big th.m-danger, +table.m-table.m-big td.m-info, table.m-table.m-big th.m-info, +table.m-table.m-big td.m-dim, table.m-table.m-big th.m-dim { + padding-left: 0.9375rem; + padding-right: 0.9375rem; + border-left-width: 0.0625rem; +} +table.m-table tr.m-default td, table.m-table td.m-default, +table.m-table tr.m-default th, table.m-table th.m-default, +table.m-table tr.m-primary td, table.m-table td.m-primary, +table.m-table tr.m-primary th, table.m-table th.m-primary, +table.m-table tr.m-success td, table.m-table td.m-success, +table.m-table tr.m-success th, table.m-table th.m-success, +table.m-table tr.m-warning td, table.m-table td.m-warning, +table.m-table tr.m-warning th, table.m-table th.m-warning, +table.m-table tr.m-danger td, table.m-table td.m-danger, +table.m-table tr.m-danger th, table.m-table th.m-danger, +table.m-table tr.m-info td, table.m-table td.m-info, +table.m-table tr.m-info th, table.m-table th.m-info, +table.m-table tr.m-dim td, table.m-table td.m-dim, +table.m-table tr.m-dim th, table.m-table th.m-dim { + border-color: #ffffff; +} +img.m-image, svg.m-image { + display: block; + margin-left: auto; + margin-right: auto; +} +div.m-image { + text-align: center; +} +img.m-image, svg.m-image, div.m-image img, div.m-image svg { + max-width: 100%; + border-radius: 0.2rem; +} +div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg { + width: 100%; +} +figure.m-figure { + max-width: 100%; + margin-top: 0; + margin-left: auto; + margin-right: auto; + position: relative; + display: table; +} +figure.m-figure:before { + position: absolute; + content: ' '; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + border-style: solid; + border-width: 0.125rem; + border-radius: 0.2rem; + border-color: #f7e3db; +} +figure.m-figure.m-flat:before { + border-color: transparent; +} +figure.m-figure > * { + margin-left: 1rem; + margin-right: 1rem; + display: table-caption; + caption-side: bottom; +} +figure.m-figure > *:first-child { + display: inline; +} +figure.m-figure > *:last-child { + margin-bottom: 1rem !important; +} +figure.m-figure img, figure.m-figure svg { + position: relative; + margin-left: 0; + margin-right: 0; + margin-bottom: 0; + border-top-left-radius: 0.2rem; + border-top-right-radius: 0.2rem; + max-width: 100%; +} +figure.m-figure.m-flat img, figure.m-figure.m-flat svg { + border-bottom-left-radius: 0.2rem; + border-bottom-right-radius: 0.2rem; +} +figure.m-figure a img, figure.m-figure a svg { + margin-left: -1rem; + margin-right: -1rem; +} +figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * { + display: block; +} +figure.m-figure.m-fullwidth > *:first-child { + display: inline; +} +figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg { + width: 100%; +} +figure.m-figure.m-fullwidth:after { + content: ' '; + display: block; + margin-top: 1rem; + height: 1px; +} +.m-code-figure, .m-console-figure { + margin-top: 0; + margin-left: 0; + margin-right: 0; + position: relative; + padding: 1rem; +} +.m-code-figure:before, .m-console-figure:before { + position: absolute; + content: ' '; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + border-style: solid; + border-width: 0.125rem; + border-radius: 0.2rem; +} +.m-code-figure:before { + border-color: #fbf0ec; +} +.m-console-figure:before { + border-color: #000000; +} +.m-code-figure.m-flat:before, .m-console-figure.m-flat:before { + border-color: transparent; +} +.m-code-figure > pre:first-child, .m-console-figure > pre:first-child { + position: relative; + margin: -1rem -1rem 1rem -1rem; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + font-weight: normal; + font-size: 1.17rem; +} +.m-imagegrid > div { + background-color: #ffffff; +} +.m-imagegrid > div > figure { + display: block; + float: left; + position: relative; + margin: 0; +} +.m-imagegrid > div > figure > div, +.m-imagegrid > div > figure > figcaption, +.m-imagegrid > div > figure > a > div, +.m-imagegrid > div > figure > a > figcaption { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-color: #ffffff; + border-style: solid; + border-width: 0.25rem; + padding: 0.5rem; +} +.m-imagegrid > div > figure:first-child > div, +.m-imagegrid > div > figure:first-child > figcaption, +.m-imagegrid > div > figure:first-child > a > div, +.m-imagegrid > div > figure:first-child > a > figcaption { + border-left-width: 0; +} +.m-imagegrid > div > figure:last-child > div, +.m-imagegrid > div > figure:last-child > figcaption, +.m-imagegrid > div > figure:last-child > a > div, +.m-imagegrid > div > figure:last-child > a > figcaption { + border-right-width: 0; +} +.m-imagegrid > div > figure > figcaption, +.m-imagegrid > div > figure > a > figcaption { + color: transparent; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.75rem; +} +.m-imagegrid > div > figure > div::before, +.m-imagegrid > div > figure > figcaption::before, +.m-imagegrid > div > figure > a > div::before, +.m-imagegrid > div > figure > a > figcaption::before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: bottom; + width: 0; +} +.m-imagegrid > div > figure:hover > figcaption, +.m-imagegrid > div > figure:hover > a > figcaption { + background: linear-gradient(transparent 0%, transparent 75%, rgba(0, 0, 0, 0.85) 100%); + color: #ffffff; +} +.m-imagegrid > div > figure > img, +.m-imagegrid > div > figure > a > img { + width: 100%; + height: 100%; +} +.m-imagegrid > div::after { + display: block; + content: ' '; + clear: both; +} +@media screen and (max-width: 767px) { + .m-imagegrid > div > figure { + float: none; + width: 100% !important; + } + .m-imagegrid > div > figure > div, + .m-imagegrid > div > figure > figcaption, + .m-imagegrid > div > figure > a > div, + .m-imagegrid > div > figure > a > figcaption { + border-left-width: 0; + border-right-width: 0; + } +} +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-note, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-block, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid, +.m-container-inflatable > .m-row > [class*='m-col-'] > pre, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-code-figure, +.m-container-inflatable > .m-row > [class*='m-col-'] > .m-console-figure, +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note, +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame, +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block, +.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid, +.m-container-inflatable > .m-row > [class*='m-col-'] section > pre, +.m-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 [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%; + margin-right: -10%; + } +} +@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%; + margin-right: -10%; + } +} +@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%; + margin-right: -10%; + } +} +pre.m-code span.hll { + margin-left: -1.0rem; + margin-right: -1.0rem; + padding-left: 1.0rem; +} +.m-code.m-inverted { + color: rgba(91, 91, 91, 0.33); +} +.m-code.m-inverted > span { + opacity: 0.3333; +} +.m-code.m-inverted > span.hll { + color: #000000; + opacity: 1; + background-color: transparent; + border-color: transparent; +} +.m-code-color { + display: inline-block; + width: 0.75rem; + height: 0.75rem; + vertical-align: -0.05rem; + margin-left: 0.2rem; + margin-right: 0.1rem; + border-radius: 0.1rem; +} +div.m-math { + overflow-x: auto; + overflow-y: hidden; +} +div.m-math svg { + margin-left: auto; + margin-right: auto; + display: block; +} +div.m-button a svg.m-math { fill: #ffffff; } +div.m-button.m-flat a svg.m-math { fill: #000000; } +div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-math, +div.m-button.m-default a:active svg.m-math { + fill: #cb4b16; +} +.m-graph { font-size: 14px; } +div.m-plot svg, div.m-graph svg { + max-width: 100%; + margin-left: auto; + margin-right: auto; + display: block; +} +div.m-plot .m-background { fill: #fbf0ec; } +div.m-plot svg .m-label { font-size: 11px; } +div.m-plot svg .m-title { font-size: 13px; } +div.m-plot svg .m-label, div.m-plot svg .m-title { fill: #000000; } +div.m-plot svg .m-line { + stroke: #000000; + stroke-width: 0.8; +} +div.m-plot svg .m-error { + stroke: #000000; + stroke-width: 1.5; +} +div.m-plot svg .m-label.m-dim { fill: #bdbdbd; } +.m-graph g.m-edge path, .m-graph g.m-node.m-flat ellipse, +.m-graph g.m-node.m-flat polygon { + fill: none; +} +.m-graph g.m-node:not(.m-flat) text { + fill: #ffffff; +} +figure.m-figure > svg.m-math:first-child, +figure.m-figure > svg.m-graph:first-child { + padding: 1rem; + box-sizing: content-box; +} +figure.m-figure:not(.m-flat) > svg.m-math:first-child, +figure.m-figure:not(.m-flat) > svg.m-graph:first-child { + background-color: #f7e3db; +} +.m-block.m-default { border-left-color: #f7e3db; } +.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6, +.m-text.m-default, .m-label.m-flat.m-default { + color: #000000; +} +.m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a { + color: #ea7944; +} +.m-block.m-primary { border-left-color: #cb4b16; } +.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6, +.m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a, +.m-text.m-primary, .m-label.m-flat.m-primary { + color: #cb4b16; +} +.m-block.m-success { border-left-color: #31c25d; } +.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6, +.m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a, +.m-text.m-success, .m-label.m-flat.m-success { + color: #31c25d; +} +.m-block.m-warning { border-left-color: #c7cf2f; } +.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6, +.m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a, +.m-text.m-warning, .m-label.m-flat.m-warning { + color: #c7cf2f; +} +.m-block.m-danger { border-left-color: #f60000; } +.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6, +.m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a, +.m-text.m-danger, .m-label.m-flat.m-danger { + color: #f60000; +} +.m-block.m-info { border-left-color: #2e7dc5; } +.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6, +.m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a, +.m-text.m-info, .m-label.m-flat.m-info { + color: #2e7dc5; +} +.m-block.m-dim { border-left-color: #bdbdbd; } +.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim { + color: #bdbdbd; +} +.m-block.m-dim a, .m-text.m-dim a { color: #c0c0c0; } +.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active, +.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active { + color: #949494; +} +.m-block.m-flat { border-color: transparent; } +.m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5. .m-block.m-flat h6 { + color: #000000; +} +.m-block.m-default h3 a:hover, .m-block.m-default h3 a:focus, .m-block.m-default h3 a:active, +.m-block.m-default h4 a:hover, .m-block.m-default h4 a:focus, .m-block.m-default h4 a:active, +.m-block.m-default h5 a:hover, .m-block.m-default h5 a:focus, .m-block.m-default h5 a:active, +.m-block.m-default h6 a:hover, .m-block.m-default h6 a:focus, .m-block.m-default h6 a:active { + color: #cb4b16; +} +.m-block.m-primary h3 a:hover, .m-block.m-primary h3 a:focus, .m-block.m-primary h3 a:active, +.m-block.m-primary h4 a:hover, .m-block.m-primary h4 a:focus, .m-block.m-primary h4 a:active, +.m-block.m-primary h5 a:hover, .m-block.m-primary h5 a:focus, .m-block.m-primary h5 a:active, +.m-block.m-primary h6 a:hover, .m-block.m-primary h6 a:focus, .m-block.m-primary h6 a:active { + color: #000000; +} +.m-block.m-success h3 a:hover, .m-block.m-success h3 a:focus, .m-block.m-success h3 a:active, +.m-block.m-success h4 a:hover, .m-block.m-success h4 a:focus, .m-block.m-success h4 a:active, +.m-block.m-success h5 a:hover, .m-block.m-success h5 a:focus, .m-block.m-success h5 a:active, +.m-block.m-success h6 a:hover, .m-block.m-success h6 a:focus, .m-block.m-success h6 a:active { + color: #dcf6e3; +} +.m-block.m-warning h3 a:hover, .m-block.m-warning h3 a:focus, .m-block.m-warning h3 a:active, +.m-block.m-warning h4 a:hover, .m-block.m-warning h4 a:focus, .m-block.m-warning h4 a:active, +.m-block.m-warning h5 a:hover, .m-block.m-warning h5 a:focus, .m-block.m-warning h5 a:active, +.m-block.m-warning h6 a:hover, .m-block.m-warning h6 a:focus, .m-block.m-warning h6 a:active { + color: #f6f6dc; +} +.m-block.m-danger h3 a:hover, .m-block.m-danger h3 a:focus, .m-block.m-danger h3 a:active, +.m-block.m-danger h4 a:hover, .m-block.m-danger h4 a:focus, .m-block.m-danger h4 a:active, +.m-block.m-danger h5 a:hover, .m-block.m-danger h5 a:focus, .m-block.m-danger h5 a:active, +.m-block.m-danger h6 a:hover, .m-block.m-danger h6 a:focus, .m-block.m-danger h6 a:active { + color: #f6dddc; +} +.m-block.m-info h3 a:hover, .m-block.m-info h3 a:focus, .m-block.m-info h3 a:active, +.m-block.m-info h4 a:hover, .m-block.m-info h4 a:focus, .m-block.m-info h4 a:active, +.m-block.m-info h5 a:hover, .m-block.m-info h5 a:focus, .m-block.m-info h5 a:active, +.m-block.m-info h6 a:hover, .m-block.m-info h6 a:focus, .m-block.m-info h6 a:active { + color: #c6ddf2; +} +div.m-button a, .m-label { color: #ffffff; } +div.m-button.m-flat a { color: #000000; } +div.m-button.m-flat a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active { + color: #cb4b16; +} +div.m-button.m-default a, .m-label:not(.m-flat).m-default { background-color: #000000; } +div.m-button.m-primary a, .m-label:not(.m-flat).m-primary { background-color: #cb4b16; } +div.m-button.m-success a, .m-label:not(.m-flat).m-success { background-color: #31c25d; } +div.m-button.m-warning a, .m-label:not(.m-flat).m-warning { background-color: #c7cf2f; } +div.m-button.m-danger a, .m-label:not(.m-flat).m-danger { background-color: #f60000; } +div.m-button.m-info a, .m-label:not(.m-flat).m-info { background-color: #2e7dc5; } +div.m-button.m-dim a, .m-label:not(.m-flat).m-dim { background-color: #bdbdbd; } +div.m-button.m-default a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active { + background-color: #cb4b16; +} +div.m-button.m-primary a:hover, div.m-button.m-primary a:focus, div.m-button.m-primary a:active { + background-color: #000000; +} +div.m-button.m-success a:hover, div.m-button.m-success a:focus, div.m-button.m-success a:active { + background-color: #dcf6e3; +} +div.m-button.m-warning a:hover, div.m-button.m-warning a:focus, div.m-button.m-warning a:active { + background-color: #f6f6dc; +} +div.m-button.m-danger a:hover, div.m-button.m-danger a:focus, div.m-button.m-danger a:active { + background-color: #f6dddc; +} +div.m-button.m-info a:hover, div.m-button.m-info a:focus, div.m-button.m-info a:active { + background-color: #c6ddf2; +} +div.m-button.m-dim a:hover, div.m-button.m-dim a:focus, div.m-button.m-dim a:active { + background-color: #c0c0c0; +} +.m-note.m-default { background-color: #fbf0ec; } +.m-note.m-default, +table.m-table tr.m-default td, table.m-table td.m-default, +table.m-table tr.m-default th, table.m-table th.m-default { + color: #000000; +} +.m-note.m-default a:hover, +table.m-table tr.m-default td a:hover, table.m-table td.m-default a:hover, +table.m-table tr.m-default th a:hover, table.m-table th.m-default a:hover, +.m-note.m-default a:focus, +table.m-table tr.m-default td a:focus, table.m-table td.m-default a:focus, +table.m-table tr.m-default th a:focus, table.m-table th.m-default a:focus, +.m-note.m-default a:active, +table.m-table tr.m-default td a:active, table.m-table td.m-default a:active, +table.m-table tr.m-default th a:active, table.m-table th.m-default a:active { + color: #cb4b16; +} +.m-note.m-primary a, +table.m-table tr.m-primary td a, table.m-table td.m-primary a, +table.m-table tr.m-primary th a, table.m-table th.m-primary a { + color: #ea7944; +} +.m-note.m-primary, +table.m-table tr.m-primary td, table.m-table td.m-primary, +table.m-table tr.m-primary th, table.m-table th.m-primary { + background-color: #ef9069; + color: #fbe4d9; +} +.m-note.m-primary a, +table.m-table tr.m-primary td a, table.m-table td.m-primary a, +table.m-table tr.m-primary th a, table.m-table th.m-primary a { + color: #782f0d; +} +.m-note.m-primary a:hover, +table.m-table tr.m-primary td a:hover, table.m-table td.m-primary a:hover, +table.m-table tr.m-primary th a:hover, table.m-table th.m-primary a:hover, +.m-note.m-primary a:focus, +table.m-table tr.m-primary td a:focus, table.m-table td.m-primary a:focus, +table.m-table tr.m-primary th a:focus, table.m-table th.m-primary a:focus, +.m-note.m-primary a:active, +table.m-table tr.m-primary td a:active, table.m-table td.m-primary a:active, +table.m-table tr.m-primary th a:active, table.m-table th.m-primary a:active { + color: #2f1205; +} +.m-note.m-success, +table.m-table tr.m-success td, table.m-table td.m-success, +table.m-table tr.m-success th, table.m-table th.m-success { + background-color: #4dd376; + color: #f4fcf6; +} +.m-note.m-success a, +table.m-table tr.m-success td a, table.m-table td.m-success a, +table.m-table tr.m-success th a, table.m-table th.m-success a { + color: #c5f2d1; +} +.m-note.m-success a:hover, +table.m-table tr.m-success td a:hover, table.m-table td.m-success a:hover, +table.m-table tr.m-success th a:hover, table.m-table th.m-success a:hover, +.m-note.m-success a:focus, +table.m-table tr.m-success td a:focus, table.m-table td.m-success a:focus, +table.m-table tr.m-success th a:focus, table.m-table th.m-success a:focus, +.m-note.m-success a:active, +table.m-table tr.m-success td a:active, table.m-table td.m-success a:active, +table.m-table tr.m-success th a:active, table.m-table th.m-success a:active { + color: #dcf6e3; +} +.m-note.m-warning, table.m-table tr.m-warning td, table.m-table td.m-warning, + table.m-table tr.m-warning th, table.m-table th.m-warning { + background-color: #d1d34d; + color: #fcfcf4; +} +.m-note.m-warning a, table.m-table tr.m-warning td a, table.m-table td.m-warning a, + table.m-table tr.m-warning th a, table.m-table th.m-warning a { + color: #f0f1c7; +} +.m-note.m-warning a:hover, +table.m-table tr.m-warning td a:hover, table.m-table td.m-warning a:hover, +table.m-table tr.m-warning th a:hover, table.m-table th.m-warning a:hover, +.m-note.m-warning a:focus, +table.m-table tr.m-warning td a:focus, table.m-table td.m-warning a:focus, +table.m-table tr.m-warning th a:focus, table.m-table th.m-warning a:focus, +.m-note.m-warning a:active, +table.m-table tr.m-warning td a:active, table.m-table td.m-warning a:active, +table.m-table tr.m-warning th a:active, table.m-table th.m-warning a:active { + color: #f6f6dc; +} +.m-note.m-danger, +table.m-table tr.m-danger td, table.m-table td.m-danger, +table.m-table tr.m-danger th, table.m-table th.m-danger { + background-color: #e23e3e; + color: #fdf3f3; +} +.m-note.m-danger a, +table.m-table tr.m-danger td a, table.m-table td.m-danger a, +table.m-table tr.m-danger th a, table.m-table th.m-danger a { + color: #f2c7c6; +} +.m-note.m-danger a:hover, +table.m-table tr.m-danger td a:hover, table.m-table td.m-danger a:hover, +table.m-table tr.m-danger th a:hover, table.m-table th.m-danger a:hover, +.m-note.m-danger a:focus, +table.m-table tr.m-danger td a:focus, table.m-table td.m-danger a:focus, +table.m-table tr.m-danger th a:focus, table.m-table th.m-danger a:focus, +.m-note.m-danger a:active, +table.m-table tr.m-danger td a:active, table.m-table td.m-danger a:active, +table.m-table tr.m-danger th a:active, table.m-table th.m-danger a:active { + color: #f6dddc; +} +.m-note.m-info, +table.m-table tr.m-info td, table.m-table td.m-info, +table.m-table tr.m-info th, table.m-table th.m-info { + background-color: #4c93d3; + color: #f4f8fc; +} +.m-note.m-info a, +table.m-table tr.m-info td a, table.m-table td.m-info a, +table.m-table tr.m-info th a, table.m-table th.m-info a { + color: #c6ddf2; +} +.m-note.m-info a:hover, +table.m-table tr.m-info td a:hover, table.m-table td.m-info a:hover, +table.m-table tr.m-info th a:hover, table.m-table th.m-info a:hover, +.m-note.m-info a:focus, +table.m-table tr.m-info td a:focus, table.m-table td.m-info a:focus, +table.m-table tr.m-info th a:focus, table.m-table th.m-info a:focus, +.m-note.m-info a:active, +table.m-table tr.m-info td a:active, table.m-table td.m-info a:active, +table.m-table tr.m-info th a:active, table.m-table th.m-info a:active { + color: #dbeaf7; +} +.m-note.m-dim, +table.m-table tr.m-dim td, table.m-table td.m-dim, +table.m-table tr.m-dim th, table.m-table th.m-dim { + background-color: #f1f1f1; + color: #7c7c7c; +} +.m-note.m-dim a, +table.m-table tr.m-dim td a, table.m-table td.m-dim a, +table.m-table tr.m-dim th a, table.m-table th.m-dim a { + color: #c0c0c0; +} +.m-note.m-dim a:hover, +table.m-table tr.m-dim td a:hover, table.m-table td.m-dim a:hover, +table.m-table tr.m-dim th a:hover, table.m-table th.m-dim a:hover, +.m-note.m-dim a:focus, +table.m-table tr.m-dim td a:focus, table.m-table td.m-dim a:focus, +table.m-table tr.m-dim th a:focus, table.m-table th.m-dim a:focus, +.m-note.m-dim a:active, +table.m-table tr.m-dim td a:active, table.m-table td.m-dim a:active, +table.m-table tr.m-dim th a:active, table.m-table th.m-dim a:active { + color: #949494; +} +figure.m-figure.m-default:before { border-color: #fbf0ec; } +figure.m-figure.m-default figcaption { color: #000000; } +figure.m-figure.m-primary:before { border-color: #ef9069; } +figure.m-figure.m-primary figcaption { color: #cb4b16; } +figure.m-figure.m-success:before { border-color: #4dd376; } +figure.m-figure.m-success figcaption { color: #31c25d; } +figure.m-figure.m-warning:before { border-color: #d1d34d; } +figure.m-figure.m-warning figcaption { color: #c7cf2f; } +figure.m-figure.m-danger:before { border-color: #e23e3e; } +figure.m-figure.m-danger figcaption { color: #f60000; } +figure.m-figure.m-info:before { border-color: #4c93d3; } +figure.m-figure.m-info figcaption { color: #2e7dc5; } +figure.m-figure.m-dim:before { border-color: #f1f1f1; } +figure.m-figure.m-dim { color: #bdbdbd; } +figure.m-figure.m-dim a { color: #c0c0c0; } +figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-dim a:active { + color: #949494; +} +.m-math { fill: #000000; } +.m-math.m-default, .m-math g.m-default, .m-math rect.m-default, +div.m-plot svg .m-bar.m-default, +.m-graph g.m-edge polygon, +.m-graph g.m-node:not(.m-flat) ellipse, +.m-graph g.m-node:not(.m-flat) polygon, +.m-graph g.m-edge text, +.m-graph g.m-node.m-flat text, +.m-graph.m-default g.m-edge polygon, +.m-graph.m-default g.m-node:not(.m-flat) ellipse, +.m-graph.m-default g.m-node:not(.m-flat) polygon, +.m-graph.m-default g.m-edge text, +.m-graph.m-default g.m-node.m-flat text { + fill: #000000; +} +.m-graph g.m-edge polygon, +.m-graph g.m-edge path, +.m-graph g.m-node ellipse, +.m-graph g.m-node polygon, +.m-graph g.m-node polyline, +.m-graph.m-default g.m-edge polygon, +.m-graph.m-default g.m-edge path, +.m-graph.m-default g.m-node ellipse, +.m-graph.m-default g.m-node polygon, +.m-graph.m-default g.m-node polyline { + stroke: #000000; +} +.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary, +div.m-plot svg .m-bar.m-primary, +.m-graph.m-primary g.m-edge polygon, +.m-graph.m-primary g.m-node:not(.m-flat) ellipse, +.m-graph.m-primary g.m-node:not(.m-flat) polygon, +.m-graph.m-primary g.m-edge text, +.m-graph.m-primary g.m-node.m-flat text { + fill: #cb4b16; +} +.m-graph.m-primary g.m-edge polygon, +.m-graph.m-primary g.m-edge path, +.m-graph.m-primary g.m-node ellipse, +.m-graph.m-primary g.m-node polygon, +.m-graph.m-primary g.m-node polyline { + stroke: #cb4b16; +} +.m-math.m-success, .m-math g.m-success, .m-math rect.m-success, +div.m-plot svg .m-bar.m-success, +.m-graph.m-success g.m-edge polygon, +.m-graph.m-success g.m-node:not(.m-flat) ellipse, +.m-graph.m-success g.m-node:not(.m-flat) polygon, +.m-graph.m-success g.m-edge text, +.m-graph.m-success g.m-node.m-flat text { + fill: #31c25d; +} +.m-graph.m-success g.m-edge polygon, +.m-graph.m-success g.m-edge path, +.m-graph.m-success g.m-node ellipse, +.m-graph.m-success g.m-node polygon, +.m-graph.m-success g.m-node polyline { + stroke: #31c25d; +} +.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning, +div.m-plot svg .m-bar.m-warning, +.m-graph.m-warning g.m-edge polygon, +.m-graph.m-warning g.m-node:not(.m-flat) ellipse, +.m-graph.m-warning g.m-node:not(.m-flat) polygon, +.m-graph.m-warning g.m-edge text, +.m-graph.m-warning g.m-node.m-flat text { + fill: #c7cf2f; +} +.m-graph.m-warning g.m-edge polygon, +.m-graph.m-warning g.m-edge path, +.m-graph.m-warning g.m-node ellipse, +.m-graph.m-warning g.m-node polygon, +.m-graph.m-warning g.m-node polyline { + stroke: #c7cf2f; +} +.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger, +div.m-plot svg .m-bar.m-danger, +.m-graph.m-danger g.m-edge polygon, +.m-graph.m-danger g.m-node:not(.m-flat) ellipse, +.m-graph.m-danger g.m-node:not(.m-flat) polygon, +.m-graph.m-danger g.m-edge text, +.m-graph.m-danger g.m-node.m-flat text { + fill: #f60000; +} +.m-graph.m-danger g.m-edge polygon, +.m-graph.m-danger g.m-edge path, +.m-graph.m-danger g.m-node ellipse, +.m-graph.m-danger g.m-node polygon, +.m-graph.m-danger g.m-node polyline { + stroke: #f60000; +} +.m-math.m-info, .m-math g.m-info, .m-math rect.m-info, +div.m-plot svg .m-bar.m-info, +.m-graph.m-info g.m-edge polygon, +.m-graph.m-info g.m-node:not(.m-flat) ellipse, +.m-graph.m-info g.m-node:not(.m-flat) polygon, +.m-graph.m-info g.m-edge text, +.m-graph.m-info g.m-node.m-flat text { + fill: #2e7dc5; +} +.m-graph.m-info g.m-edge polygon, +.m-graph.m-info g.m-edge path, +.m-graph.m-info g.m-node ellipse, +.m-graph.m-info g.m-node polygon, +.m-graph.m-info g.m-node polyline { + stroke: #2e7dc5; +} +.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim, +div.m-plot svg .m-bar.m-dim, +.m-graph.m-dim g.m-edge polygon, +.m-graph.m-dim g.m-node:not(.m-flat) ellipse, +.m-graph.m-dim g.m-node:not(.m-flat) polygon, +.m-graph.m-dim g.m-edge text, +.m-graph.m-dim g.m-node.m-flat text { + fill: #bdbdbd; +} +.m-graph.m-dim g.m-edge polygon, +.m-graph.m-dim g.m-edge path, +.m-graph.m-dim g.m-node ellipse, +.m-graph.m-dim g.m-node polygon, +.m-graph.m-dim g.m-node polyline { + stroke: #bdbdbd; +} +.m-graph g.m-edge.m-default polygon, +.m-graph g.m-node.m-default:not(.m-flat) ellipse, +.m-graph g.m-node.m-default:not(.m-flat) polygon, +.m-graph g.m-edge.m-default text, +.m-graph g.m-node.m-default.m-flat text { + fill: #000000; +} +.m-graph g.m-edge.m-default polygon, +.m-graph g.m-edge.m-default path, +.m-graph g.m-node.m-default ellipse, +.m-graph g.m-node.m-default polygon, +.m-graph g.m-node.m-default polyline { + stroke: #000000; +} +.m-graph g.m-edge.m-primary polygon, +.m-graph g.m-node.m-primary:not(.m-flat) ellipse, +.m-graph g.m-node.m-primary:not(.m-flat) polygon, +.m-graph g.m-edge.m-primary text, +.m-graph g.m-node.m-primary.m-flat text { + fill: #cb4b16; +} +.m-graph g.m-edge.m-primary polygon, +.m-graph g.m-edge.m-primary path, +.m-graph g.m-node.m-primary ellipse, +.m-graph g.m-node.m-primary polygon, +.m-graph g.m-node.m-primary polyline { + stroke: #cb4b16; +} +.m-graph g.m-edge.m-success polygon, +.m-graph g.m-node.m-success:not(.m-flat) ellipse, +.m-graph g.m-node.m-success:not(.m-flat) polygon, +.m-graph g.m-edge.m-success text, +.m-graph g.m-node.m-success.m-flat text { + fill: #31c25d; +} +.m-graph g.m-edge.m-success polygon, +.m-graph g.m-edge.m-success path, +.m-graph g.m-node.m-success ellipse, +.m-graph g.m-node.m-success polygon, +.m-graph g.m-node.m-success polyline { + stroke: #31c25d; +} +.m-graph g.m-edge.m-warning polygon, +.m-graph g.m-node.m-warning:not(.m-flat) ellipse, +.m-graph g.m-node.m-warning:not(.m-flat) polygon, +.m-graph g.m-edge.m-warning text, +.m-graph g.m-node.m-warning.m-flat text { + fill: #c7cf2f; +} +.m-graph g.m-edge.m-warning polygon, +.m-graph g.m-edge.m-warning path, +.m-graph g.m-node.m-warning ellipse, +.m-graph g.m-node.m-warning polygon, +.m-graph g.m-node.m-warning polyline { + stroke: #c7cf2f; +} +.m-graph g.m-edge.m-danger polygon, +.m-graph g.m-node.m-danger:not(.m-flat) ellipse, +.m-graph g.m-node.m-danger:not(.m-flat) polygon, +.m-graph g.m-edge.m-danger text, +.m-graph g.m-node.m-danger.m-flat text { + fill: #f60000; +} +.m-graph g.m-edge.m-danger polygon, +.m-graph g.m-edge.m-danger path, +.m-graph g.m-node.m-danger ellipse, +.m-graph g.m-node.m-danger polygon, +.m-graph g.m-node.m-danger polyline { + stroke: #f60000; +} +.m-graph g.m-edge.m-info polygon, +.m-graph g.m-node.m-info:not(.m-flat) ellipse, +.m-graph g.m-node.m-info:not(.m-flat) polygon, +.m-graph g.m-edge.m-info text, +.m-graph g.m-node.m-info.m-flat text { + fill: #2e7dc5; +} +.m-graph g.m-edge.m-info polygon, +.m-graph g.m-edge.m-info path, +.m-graph g.m-node.m-info ellipse, +.m-graph g.m-node.m-info polygon, +.m-graph g.m-node.m-info polyline { + stroke: #2e7dc5; +} +.m-graph g.m-edge.m-dim polygon, +.m-graph g.m-node.m-dim:not(.m-flat) ellipse, +.m-graph g.m-node.m-dim:not(.m-flat) polygon, +.m-graph g.m-edge.m-dim text, +.m-graph g.m-node.m-dim.m-flat text { + fill: #bdbdbd; +} +.m-graph g.m-edge.m-dim polygon, +.m-graph g.m-edge.m-dim path, +.m-graph g.m-node.m-dim ellipse, +.m-graph g.m-node.m-dim polygon, +.m-graph g.m-node.m-dim polyline { + stroke: #bdbdbd; +} +p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note, +.m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image, +img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math, +div.m-graph, div.m-plot { + margin-bottom: 1rem; +} +p:last-child, p.m-nopadb, ul:last-child, ul.m-nopadb, +ol:last-child, ol.m-nopadb, dl:last-child, dl.m-nopadb, +blockquote:last-child, blockquote.m-nopadb, pre:last-child, pre.m-nopadb, +.m-code-figure:last-child, .m-code-figure.m-nopadb, +.m-console-figure:last-child, .m-console-figure.m-nopadb, +hr:last-child, hr.m-nopadb, .m-note:last-child, .m-note.m-nopadb, +.m-frame:last-child, .m-frame.m-nopadb, .m-block:last-child, .m-block.m-nopadb, +div.m-button:last-child, div.m-button.m-nopadb, +div.m-scroll:last-child, div.m-scroll.m-nopadb, +table.m-table:last-child, table.m-table.m-nopadb, +img.m-image:last-child, img.m-image.m-nopadb, +svg.m-image:last-child, svg.m-image.m-nopadb, +div.m-image:last-child, div.m-image.m-nopadb, +figure.m-figure:last-child, figure.m-figure.m-nopadb, +.m-imagegrid:last-child, .m-imagegrid.m-nopadb, +div.m-math:last-child, div.m-math.m-nopadb, +div.m-graph:last-child, div.m-graph.m-nopadb, +div.m-plot:last-child, div.m-plot.m-nopadb { + margin-bottom: 0; +} +li > p:last-child, li > blockquote:last-child, li > pre:last-child, +li > .m-code-figure:last-child, li > .m-console-figure:last-child, +li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child, +li > div.m-button:last-child, li > div.m-scroll:last-child, li > table.m-table:last-child, +li > img.m-image:last-child, li > svg.m-image:last-child, li > div.m-image:last-child, +li > figure.m-figure:last-child, li > div.m-math:last-child, +li > div.m-graph:last-child, li > div.m-plot:last-child { + margin-bottom: 1rem; +} +li:last-child > p:last-child, li:last-child > p.m-nopadb, +li:last-child > blockquote:last-child, li:last-child > blockquote.m-nopadb, +li:last-child > pre:last-child, li:last-child > pre.m-nopadb, +li:last-child > .m-code-figure:last-child, li:last-child > .m-code-figure.m-nopadb, +li:last-child > .m-console-figure:last-child, li:last-child > .m-console-figure.m-nopadb, +li:last-child > .m-note:last-child, li:last-child > .m-note.m-nopadb, +li:last-child > .m-frame:last-child, li:last-child > .m-frame.m-nopadb, +li:last-child > .m-block:last-child, li:last-child > .m-block.m-nopadb, +li:last-child > div.m-button:last-child, li:last-child > div.m-button.m-nopadb, +li:last-child > div.m-scroll:last-child, li:last-child > div.m-scroll.m-nopadb, +li:last-child > table.m-table:last-child, li:last-child > table.m-table.m-nopadb, +li:last-child > img.m-image:last-child, li:last-child > img.m-image.m-nopadb, +li:last-child > svg.m-image:last-child, li:last-child > svg.m-image.m-nopadb, +li:last-child > div.m-image:last-child, li:last-child > div.m-image.m-nopadb, +li:last-child > figure.m-figure:last-child, li:last-child > figure.m-figure.m-nopadb, +li:last-child > div.m-math:last-child, li:last-child > div.m-math.m-nopadb, +li:last-child > div.m-graph:last-child, li:last-child > div.m-graph.m-nopadb, +li:last-child > div.m-plot:last-child, li:last-child > div.m-plot.m-nopadb { + margin-bottom: 0; +} + +body > header > nav { + width: 100%; + background-color: #ffffff; + min-height: 3rem; +} +body > header > nav.m-navbar-landing, +body > header > nav.m-navbar-cover { + background-color: transparent; + position: relative; +} +body > header > nav.m-navbar-landing { + opacity: 0.8; +} +body > header > nav.m-navbar-cover { + background-color: rgba(255, 255, 255, 0.25); + opacity: 1; +} +body > header > nav.m-navbar-landing:hover, +body > header > nav.m-navbar-cover:hover { + background-color: rgba(255, 255, 255, 0.75); + opacity: 1; +} +body> header > nav.m-navbar-landing:target, +body> header > nav.m-navbar-cover:target { + background-color: #ffffff; + opacity: 1; +} +body > header > nav.m-navbar-landing #m-navbar-brand.m-navbar-brand-hidden { + visibility: hidden; +} +body > header > nav.m-navbar-landing:target #m-navbar-brand.m-navbar-brand-hidden { + visibility: visible; +} +body > header > nav { + margin-left: auto; + margin-right: auto; + color: #000000; +} +body > header > nav a { + text-decoration: none; + text-transform: lowercase; + display: inline-block; + vertical-align: middle; + line-height: 2.75rem; + color: #000000; +} +body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide { + font-weight: normal; + font-size: 1.125rem; + padding-left: 1rem; + padding-right: 1rem; +} +body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a { + text-transform: lowercase; +} +body > header > nav #m-navbar-brand a { + padding-left: 0; + padding-right: 0; +} +body > header > nav #m-navbar-brand .m-thin { + font-weight: normal; +} +body > header > nav #m-navbar-brand .m-breadcrumb { + color: #bdbdbd; +} +body > header > nav a#m-navbar-show:before, body > header > nav a#m-navbar-hide:before { + content:'\2630'; +} +body > header > nav #m-navbar-collapse { + padding-bottom: 1rem; +} +body > header > nav #m-navbar-collapse li { + border-style: solid; + border-color: transparent; + border-width: 0 0 0 0.25rem; + margin-left: -1rem; +} +body > header > nav #m-navbar-collapse li a { + border-style: solid; + border-color: transparent; + line-height: 1.5rem; + margin-left: -0.25rem; + padding-left: 0.75rem; + border-width: 0 0 0 0.25rem; + width: 100%; +} +body > header > nav #m-navbar-collapse li a#m-navbar-current { + color: #ea7944; + border-color: #ea7944; +} +body > header > nav ol { + list-style-type: none; + margin: 0; +} +body > header > nav ol ol { + padding-left: 1.5rem; +} +body > header > nav .m-row > [class*='m-col-'] { + padding-top: 0; + padding-bottom: 0; +} +body > header > nav a:hover, body > header > nav a:focus, body > header > nav a:active { + color: #cb4b16; +} +body > header > nav #m-navbar-collapse li:hover { + border-color: #cb4b16; +} +body > header > nav #m-navbar-collapse li a:hover, +body > header > nav #m-navbar-collapse li a:focus, +body > header > nav #m-navbar-collapse li a:active { + border-color: #cb4b16; + background-color: rgba(255, 255, 255, 0.5); +} +body > header > nav.m-navbar-landing #m-navbar-collapse li a:hover, +body > header > nav.m-navbar-cover #m-navbar-collapse li a:hover, +body > header > nav.m-navbar-landing #m-navbar-collapse li a:focus, +body > header > nav.m-navbar-cover #m-navbar-collapse li a:focus, +body > header > nav.m-navbar-landing #m-navbar-collapse li a:active, +body > header > nav.m-navbar-cover #m-navbar-collapse li a:active { + background-color: var(--header-link-active-background-color-semi); +} +body > header > nav #m-navbar-hide { + display: none; +} +body > header > nav:target #m-navbar-collapse { + display: block; +} +body > header > nav:target #m-navbar-show { + display: none; +} +body > header > nav:target #m-navbar-hide { + display: inline-block; +} +@media screen and (min-width: 768px) { + body > header > nav #m-navbar-show, body > header > nav #m-navbar-hide, + body > header > nav:target #m-navbar-show, body > header > nav:target #m-navbar-hide { + display: none; + } + body > header > nav #m-navbar-collapse li a { + line-height: 2.75rem; + } + body > header > nav a, body > header > nav #m-navbar-collapse li a { + margin-left: 0; + padding-left: 1rem; + padding-right: 1rem; + white-space: nowrap; + } + body > header > nav #m-navbar-collapse { + padding-bottom: 0; + } + body > header > nav #m-navbar-collapse li ol { + background-color: #ffffff; + } + body > header > nav #m-navbar-collapse ol ol li { + margin-left: 0; + padding-left: 0; + border-left-width: 0; + } + body > header > nav #m-navbar-collapse ol ol li a { + padding-left: 0.75rem; + } + body > header > nav #m-navbar-collapse > .m-row > ol > li { + margin-left: 0; + border-left-width: 0; + } + body > header > nav #m-navbar-collapse > .m-row > ol > li > a { + border-width: 0.25rem 0 0 0; + } + body > header > nav #m-navbar-collapse ol { + padding-left: 0; + padding-right: 0; + } + body > header > nav #m-navbar-collapse > .m-row > ol, body > header > nav #m-navbar-collapse > .m-row > ol > li { + float: left; + } + body > header > nav #m-navbar-collapse ol ol { + z-index: 99999; + position: absolute; + visibility: hidden; + } + body > header > nav #m-navbar-collapse li:hover ol { + visibility: visible; + } +} +body > footer { + width: 100%; +} +body > footer > nav { + padding-top: 1rem; + padding-bottom: 1rem; + font-size: 0.85rem; + text-align: center; + color: #7c7c7c; + background-color: #eeeeee; +} +body > footer > nav h3, body > footer > nav h3 a { + text-transform: uppercase; + font-weight: normal; +} +body > footer > nav ul { + list-style-type: none; + padding: 0; + margin: 0; +} +body > footer > nav a { + text-decoration: none; + text-transform: lowercase; + color: #191919; +} +body > footer > nav a:hover, body > footer > nav a:focus, body > footer > nav a:active { + color: #494949; +} +body > main { + padding-top: 1rem; + padding-bottom: 1rem; +} +article h1 { + font-size: 1.75rem; +} +article h1 .m-breadcrumb { + color: #bdbdbd; + font-weight: normal; +} +article h1 .m-breadcrumb a { + color: #cb4b16; +} +article h1 .m-breadcrumb a:hover, article h1 a:focus, article h1 a:active { + color: #802f0e; +} +article > header h1 { + font-size: 2rem; + margin-bottom: 0.5rem; +} +article h1 a, article > header h1, article > header h1 a, +article section > h2, article section > h2 a, +article section > h3, article section > h3 a, +article section > h4, article section > h4 a, +article section > h5, article section > h5 a, +article section > h6, article section > h6 a { + color: #cb4b16; +} +article h1 a:hover, article > header h1 a:hover, article > header h1 a:focus, article > header h1 a:active, +article section > h2 a:hover, article section > h2 a:focus, article section > h2 a:active, +article section > h3 a:hover, article section > h3 a:focus, article section > h3 a:active, +article section > h4 a:hover, article section > h4 a:focus, article section > h4 a:active, +article section > h5 a:hover, article section > h5 a:focus, article section > h5 a:active, +article section > h6 a:hover, article section > h6 a:focus, article section > h6 a:active { + color: #802f0e; +} +article > header .m-date { + display: block; + width: 2.5rem; + float: left; + text-align: center; + line-height: 95%; + font-size: 0.75rem; + font-weight: normal; + white-space: nowrap; + border-right-style: solid; + border-right-width: 0.125rem; + border-color: #cb4b16; + padding-right: 0.75rem; + margin-top: -0.1rem; + margin-right: 0.75rem; + margin-bottom: 0.25rem; +} +article > header .m-date-day { + display: block; + font-weight: bold; + padding-top: 0.2rem; + padding-bottom: 0.15rem; + font-size: 1.25rem; +} +article > header p { + color: #7a7a7a; + font-size: 1.125rem; +} +article > header h1::after { + content: " "; + clear: both; + display: table; +} +article > footer { + color: #969696; +} +article > footer p { + font-style: italic; + font-size: 0.85rem; + text-indent: 0; +} +article section:target { + margin-left: -1.0rem; + border-left-style: solid; + border-left-width: 0.25rem; + padding-left: 0.75rem; + border-color: #cb4b16; +} +article h1 a, article > header h1 a, article section > h2 a, article section > h3 a, +article section > h4 a, article section > h5 a, article section > h6 a { + text-decoration: none; +} +#m-landing-image, #m-cover-image, article#m-jumbo > header #m-jumbo-image { + background-size: cover; + background-color: #666666; + background-position: center center; + background-repeat: no-repeat; + margin-top: -4rem; + padding-top: 5rem; +} +#m-landing-image { + color: #ffffff; +} +#m-cover-image { + height: 30rem; + margin-bottom: -26rem; +} +#m-landing-cover h1 { + font-size: 2.8rem; + margin-top: -0.5rem; + padding-left: 1.5rem; + padding-bottom: 1rem; + text-transform: lowercase; +} +#m-landing-cover { + padding-bottom: 10rem; + margin-bottom: -6rem; +} +article#m-jumbo { + margin-top: -1rem; +} +#m-landing-cover, #m-cover-image > div, article#m-jumbo > header #m-jumbo-cover { + background: linear-gradient(transparent 0%, transparent 50%, #ffffff 100%); + width: 100%; + height: 100%; +} +article#m-jumbo > header h1, article#m-jumbo > header h2 { + text-align: center; + font-weight: bold; +} +article#m-jumbo > header a { + text-decoration: none; +} +article#m-jumbo > header #m-jumbo-cover { + padding-bottom: 5rem; +} +article#m-jumbo > header #m-jumbo-image { + font-size: 2.5vmin; + margin-bottom: -3rem; +} +article#m-jumbo > header h1 { + font-size: 10vmin; +} +article#m-jumbo > header h2 { + font-size: 3vmin; +} +@media screen and (max-height: 640px) , screen and (max-width: 640px) { + article#m-jumbo > header h1 { + font-size: 3rem; + } + article#m-jumbo > header #m-jumbo-image, article#m-jumbo > header h2 { + font-size: 1rem; + } +} +article#m-jumbo > header, article#m-jumbo > header h1, article#m-jumbo > header a { + color: #ffffff; +} +article#m-jumbo > header a:hover, article#m-jumbo > header a:focus, article#m-jumbo > header a:active { + color: #f0f0f0; +} +article#m-jumbo.m-inverted > header, article#m-jumbo.m-inverted > header h1, article#m-jumbo.m-inverted > header a { + color: #000000; +} +article#m-jumbo.m-inverted > header a:hover, article#m-jumbo.m-inverted > header a:focus, article#m-jumbo.m-inverted > header a:active { + color: #0f0f0f; +} +.m-landing-news h3 a { + color: #000000; + text-decoration: none; + text-transform: uppercase; +} +.m-landing-news h3 a:hover, .m-landing-news h3 a:hover, .m-landing-news h3 a:focus, .m-landing-news h3 a:active { + color: #cb4b16; +} +.m-landing-news time { + display: inline-block; + margin-left: 1rem; + float: right; +} +.m-article-pagination { + text-align: center; + padding: 1rem; +} +nav.m-navpanel { + text-align: center; +} +nav.m-navpanel h3 { + text-transform: uppercase; + font-weight: normal; +} +nav.m-navpanel ol { + text-transform: lowercase; +} +nav.m-navpanel ol, nav.m-navpanel ul { + list-style-type: none; + padding: 0; +} +nav.m-navpanel a { + color: #292929; + text-decoration: none; +} +nav.m-navpanel a:hover, nav.m-navpanel a:focus, nav.m-navpanel a:active { + color: #cb4b16; +} +ul.m-tagcloud li { display: inline; } +ul.m-tagcloud li.m-tag-1 { font-size: 0.75rem; } +ul.m-tagcloud li.m-tag-2 { font-size: 0.825rem; } +ul.m-tagcloud li.m-tag-3 { font-size: 1rem; } +ul.m-tagcloud li.m-tag-4 { font-size: 1.25rem; } +ul.m-tagcloud li.m-tag-5 { font-size: 1.5rem; } +article section:target figure.m-code-figure, article section:target figure.m-console-figure { + z-index: 1; +} +article, article > header, article section { margin-bottom: 1rem; } +article:last-child, article section:last-child { margin-bottom: 0; } +.m-container-inflatable section:target > .m-note, +.m-container-inflatable section:target > .m-frame, +.m-container-inflatable section:target > .m-block, +.m-container-inflatable section:target > pre, +.m-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 > .m-note, +.m-container-inflatable section:target section > .m-frame, +.m-container-inflatable section:target section > .m-block, +.m-container-inflatable section:target section > pre, +.m-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 [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; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + padding-left: 0.75rem; +} +.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 [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; +} +@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 section > figure.m-code-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-inflatable > figure.m-code-figure::before, +.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before { + border-left-color: #f7e3db; +} +@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-primary { + border-color: #cb4b16; +} +.m-container-inflatable section:target .m-note.m-success { + border-color: #31c25d; +} +.m-container-inflatable section:target .m-note.m-warning { + border-color: #c7cf2f; +} +.m-container-inflatable section:target .m-note.m-danger { + border-color: #f60000; +} +.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 } +.m-console .g-AnsiBlack { color: #000000 } +.m-console .g-AnsiBlue { color: #3f3fd1 } +.m-console .g-AnsiBrightBlack { color: #686868; font-weight: bold } +.m-console .g-AnsiBrightBlue { color: #5454ff; font-weight: bold } +.m-console .g-AnsiBrightCyan { color: #54ffff; font-weight: bold } +.m-console .g-AnsiBrightDefault { color: #ffffff; font-weight: bold } +.m-console .g-AnsiBrightGreen { color: #54ff54; font-weight: bold } +.m-console .g-AnsiBrightMagenta { color: #ff54ff; font-weight: bold } +.m-console .g-AnsiBrightRed { color: #ff5454; font-weight: bold } +.m-console .g-AnsiBrightWhite { color: #ffffff; font-weight: bold } +.m-console .g-AnsiBrightYellow { color: #ffff54; font-weight: bold } +.m-console .g-AnsiCyan { color: #18b2b2 } +.m-console .g-AnsiDefault { color: #b2b2b2 } +.m-console .g-AnsiGreen { color: #18b218 } +.m-console .g-AnsiMagenta { color: #b218b2 } +.m-console .g-AnsiRed { color: #b21818 } +.m-console .g-AnsiWhite { color: #b2b2b2 } +.m-console .g-AnsiYellow { color: #b26818 } +.m-console .go { color: #b2b2b2 } +.m-console .gp { color: #54ffff; font-weight: bold } +.m-console .w { color: #b2b2b2 } diff --git a/src/main/webapp/preview/css/m-light.css b/src/main/webapp/preview/css/m-light.css new file mode 100644 index 0000000..4c83f9c --- /dev/null +++ b/src/main/webapp/preview/css/m-light.css @@ -0,0 +1,30 @@ +/* + This file is part of m.css. + + Copyright © 2017, 2018, 2019 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. +*/ + +@import url('m-theme-light.css'); +@import url('m-grid.css'); +@import url('m-components.css'); +@import url('m-layout.css'); +/* TODO: pygments-light.css */ +@import url('pygments-console.css'); diff --git a/src/main/webapp/preview/css/m-theme-dark.css b/src/main/webapp/preview/css/m-theme-dark.css new file mode 100644 index 0000000..3e4ce6a --- /dev/null +++ b/src/main/webapp/preview/css/m-theme-dark.css @@ -0,0 +1,150 @@ +/* + This file is part of m.css. + + Copyright © 2017, 2018, 2019 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. +*/ + +:root { + /* Text properties */ + --font: 'Source Sans Pro', sans-serif; + --code-font: 'Source Code Pro', monospace; + --font-size: 16px; + --code-font-size: 0.9em; /* *not* rem, so it follows surrounding font size */ + --paragraph-indent: 1.5rem; + --paragraph-align: justify; + --link-decoration: underline; + --link-decoration-nav: none; + --link-decoration-heading: none; + --nav-brand-case: uppercase; + --nav-menu-case: none; + --nav-heading-case: uppercase; + --nav-categories-case: lowercase; + --landing-header-case: lowercase; + --heading-font-weight: 600; + + /* Shapes */ + --border-radius: 0.2rem; + + /* Basics */ + --background-color: #2f363f; + --color: #dcdcdc; + --line-color: #405363; + --link-color: #5b9dd9; + --link-active-color: #a5c9ea; + --mark-color: #2f83cc; + --mark-background-color: #c7cf2f; + --code-color: #e6e6e6; + --code-inverted-color: rgba(230, 230, 230, 0.33); + /* This is simply color-picked --code-note-background-color on top of + --background-color */ + --code-background-color: #282e36; + --code-note-background-color: rgba(34, 39, 46, 0.5); + --console-background-color: #000000; + --button-background-color: #22272e; + + /* Header */ + --header-border-width: 0 0 0.25rem 0; + --header-color: #ffffff; + --header-background-color: #22272e; + --header-background-color-landing: rgba(34, 39, 46, 0.75); + --header-background-color-jumbo: rgba(34, 39, 46, 0.25); + --header-link-color: #ffffff; + --header-link-active-color: #a5c9ea; + --header-link-current-color: #5b9dd9; + --header-link-active-background-color: #292f37; + --header-link-active-background-color-semi: rgba(41, 47, 55, 0.5); + + /* Footer */ + --footer-font-size: 0.85rem; + --footer-color: #c5c5c5; + --footer-background-color: #444e5c; + --footer-link-color: #ffffff; + --footer-link-active-color: #a5c9ea; + + /* Cover image */ + --cover-image-background-color: #0f1217; + + /* Article */ + --article-header-color: #f0f0f0; + --article-footer-color: #c5c5c5; + --article-heading-color: #a5c9ea; + --article-heading-active-color: #dcdcdc; + + /* Right navigation panel */ + --navpanel-link-color: #ffffff; + --navpanel-link-active-color: #a5c9ea; + + /* Plots */ + --plot-background-color: #34424d; + --plot-error-color: #ffffff; + + /* Colored components */ + --default-color: #dcdcdc; + --default-link-active-color: #a5c9ea; + --default-filled-color: #dcdcdc; + --default-filled-background-color: #34424d; + --default-filled-link-color: #5b9dd9; + --default-filled-link-active-color: #a5c9ea; + + --primary-color: #a5c9ea; + --primary-link-active-color: #dcdcdc; + --primary-filled-color: #2f363f; + --primary-filled-background-color: #a5c2db; + --primary-filled-link-color: #2a75b6; + --primary-filled-link-active-color: #2f363f; + + --success-color: #3bd267; + --success-link-active-color: #acecbe; + --success-filled-color: #acecbe; + --success-filled-background-color: #2a703f; + --success-filled-link-color: #3bd267; + --success-filled-link-active-color: #acecbe; + + --warning-color: #c7cf2f; + --warning-link-active-color: #e9ecae; + --warning-filled-color: #e9ecae; + --warning-filled-background-color: #6d702a; + --warning-filled-link-color: #b8bf2b; + --warning-filled-link-active-color: #e9ecae; + + --danger-color: #cd3431; + --danger-link-active-color: #ff9391; + --danger-filled-color: #ff9391; + --danger-filled-background-color: #702b2a; + --danger-filled-link-color: #d85c59; + --danger-filled-link-active-color: #ff9391; + + --info-color: #2f83cc; + --info-link-active-color: #5297d7; + --info-filled-color: #a5caeb; + --info-filled-background-color: #2a4f70; + --info-filled-link-color: #5297d7; + --info-filled-link-active-color: #a5caeb; + + --dim-color: #747474; + --dim-link-color: #acacac; + --dim-link-active-color: #747474; + --dim-filled-color: #747474; + --dim-filled-background-color: #2d3236; + --dim-filled-link-color: #acacac; + --dim-filled-link-active-color: #747474; + --dim-button-active-color: #acacac; +} diff --git a/src/main/webapp/preview/css/m-theme-light.css b/src/main/webapp/preview/css/m-theme-light.css new file mode 100644 index 0000000..6f2c293 --- /dev/null +++ b/src/main/webapp/preview/css/m-theme-light.css @@ -0,0 +1,148 @@ +/* + This file is part of m.css. + + Copyright © 2017, 2018, 2019 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. +*/ + +:root { + /* Text properties */ + --font: 'Libre Baskerville', serif; + --code-font: 'Source Code Pro', monospace; + --font-size: 14px; + --code-font-size: 1em; /* *not* rem, so it follows surrounding font size */ + --paragraph-indent: 1.5rem; + --paragraph-align: justify; + --link-decoration: underline; + --link-decoration-nav: none; + --link-decoration-heading: none; + --nav-brand-case: lowercase; + --nav-menu-case: lowercase; + --nav-heading-case: uppercase; + --nav-categories-case: lowercase; + --landing-header-case: lowercase; + --heading-font-weight: normal; + + /* Shapes */ + --border-radius: 0.2rem; + + /* Basics */ + --background-color: #ffffff; + --color: #000000; + --line-color: #f7e3db; + --link-color: #ea7944; + --link-active-color: #cb4b16; + --mark-color: #4c93d3; + --mark-background-color: #e6e69c; + --code-color: #5b5b5b; + --code-inverted-color: rgba(91, 91, 91, 0.33); + --code-background-color: #fbf0ec; + --code-note-background-color: rgba(251, 240, 236, 0.5); + --console-background-color: #000000; + --button-background-color: #ffffff; + + /* Header */ + --header-border-width: 0.25rem 0 0 0; + --header-color: #000000; + --header-background-color: #ffffff; + --header-background-color-landing: rgba(255, 255, 255, 0.75); + --header-background-color-jumbo: rgba(255, 255, 255, 0.25); + --header-link-color: #000000; + --header-link-active-color: #cb4b16; + --header-link-current-color: #ea7944; + --header-link-active-background-color: #ffffff; + --header-link-active-background-color: rgba(255, 255, 255, 0.5); + + /* Footer */ + --footer-font-size: 0.85rem; + --footer-color: #7c7c7c; + --footer-background-color: #eeeeee; + --footer-link-color: #191919; + --footer-link-active-color: #494949; + + /* Cover image */ + --cover-image-background-color: #666666; + + /* Article */ + --article-header-color: #7a7a7a; + --article-footer-color: #969696; + --article-heading-color: #cb4b16; + --article-heading-active-color: #802f0e; + + /* Right navigation panel */ + --navpanel-link-color: #292929; + --navpanel-link-active-color: #cb4b16; + + /* Plots */ + --plot-background-color: #fbf0ec; + --plot-error-color: #000000; + + /* Colored components */ + --default-color: #000000; + --default-link-active-color: #cb4b16; + --default-filled-color: #000000; + --default-filled-background-color: #fbf0ec; + --default-filled-link-color: #ea7944; + --default-filled-link-active-color: #cb4b16; + + --primary-color: #cb4b16; + --primary-link-active-color: #000000; + --primary-filled-color: #fbe4d9; + --primary-filled-background-color: #ef9069; + --primary-filled-link-color: #782f0d; + --primary-filled-link-active-color: #2f1205; + + --success-color: #31c25d; + --success-link-active-color: #dcf6e3; + --success-filled-color: #f4fcf6; + --success-filled-background-color: #4dd376; + --success-filled-link-color: #c5f2d1; + --success-filled-link-active-color: #dcf6e3; + + --warning-color: #c7cf2f; + --warning-link-active-color: #f6f6dc; + --warning-filled-color: #fcfcf4; + --warning-filled-background-color: #d1d34d; + --warning-filled-link-color: #f0f1c7; + --warning-filled-link-active-color: #f6f6dc; + + --danger-color: #f60000; + --danger-link-active-color: #f6dddc; + --danger-filled-color: #fdf3f3; + --danger-filled-background-color: #e23e3e; + --danger-filled-link-color: #f2c7c6; + --danger-filled-link-active-color: #f6dddc; + + --info-color: #2e7dc5; + --info-link-active-color: #c6ddf2; + --info-filled-color: #f4f8fc; + --info-filled-background-color: #4c93d3; + --info-filled-link-color: #c6ddf2; + --info-filled-link-active-color: #dbeaf7; + + --dim-color: #bdbdbd; + --dim-link-color: #c0c0c0; + --dim-link-active-color: #949494; + --dim-filled-color: #7c7c7c; + --dim-filled-background-color: #f1f1f1; + --dim-filled-link-color: #c0c0c0; + --dim-filled-link-active-color: #949494; + --dim-button-active-color: #c0c0c0; +} diff --git a/src/main/webapp/preview/css/pygments-console.css b/src/main/webapp/preview/css/pygments-console.css new file mode 100644 index 0000000..06895f1 --- /dev/null +++ b/src/main/webapp/preview/css/pygments-console.css @@ -0,0 +1,22 @@ +.m-console .hll { background-color: #ffffcc } +.m-console .g-AnsiBlack { color: #000000 } /* Generic.AnsiBlack */ +.m-console .g-AnsiBlue { color: #3f3fd1 } /* Generic.AnsiBlue */ +.m-console .g-AnsiBrightBlack { color: #686868; font-weight: bold } /* Generic.AnsiBrightBlack */ +.m-console .g-AnsiBrightBlue { color: #5454ff; font-weight: bold } /* Generic.AnsiBrightBlue */ +.m-console .g-AnsiBrightCyan { color: #54ffff; font-weight: bold } /* Generic.AnsiBrightCyan */ +.m-console .g-AnsiBrightDefault { color: #ffffff; font-weight: bold } /* Generic.AnsiBrightDefault */ +.m-console .g-AnsiBrightGreen { color: #54ff54; font-weight: bold } /* Generic.AnsiBrightGreen */ +.m-console .g-AnsiBrightMagenta { color: #ff54ff; font-weight: bold } /* Generic.AnsiBrightMagenta */ +.m-console .g-AnsiBrightRed { color: #ff5454; font-weight: bold } /* Generic.AnsiBrightRed */ +.m-console .g-AnsiBrightWhite { color: #ffffff; font-weight: bold } /* Generic.AnsiBrightWhite */ +.m-console .g-AnsiBrightYellow { color: #ffff54; font-weight: bold } /* Generic.AnsiBrightYellow */ +.m-console .g-AnsiCyan { color: #18b2b2 } /* Generic.AnsiCyan */ +.m-console .g-AnsiDefault { color: #b2b2b2 } /* Generic.AnsiDefault */ +.m-console .g-AnsiGreen { color: #18b218 } /* Generic.AnsiGreen */ +.m-console .g-AnsiMagenta { color: #b218b2 } /* Generic.AnsiMagenta */ +.m-console .g-AnsiRed { color: #b21818 } /* Generic.AnsiRed */ +.m-console .g-AnsiWhite { color: #b2b2b2 } /* Generic.AnsiWhite */ +.m-console .g-AnsiYellow { color: #b26818 } /* Generic.AnsiYellow */ +.m-console .go { color: #b2b2b2 } /* Generic.Output */ +.m-console .gp { color: #54ffff; font-weight: bold } /* Generic.Prompt */ +.m-console .w { color: #b2b2b2 } /* Text.Whitespace */ diff --git a/src/main/webapp/preview/css/pygments-dark.css b/src/main/webapp/preview/css/pygments-dark.css new file mode 100644 index 0000000..f4f0bca --- /dev/null +++ b/src/main/webapp/preview/css/pygments-dark.css @@ -0,0 +1,66 @@ +.m-code .hll { background-color: #34424d } +.m-code .c { color: #a5c9ea } /* Comment */ +.m-code .k { color: #ffffff; font-weight: bold } /* Keyword */ +.m-code .n { color: #dcdcdc } /* Name */ +.m-code .o { color: #aaaaaa } /* Operator */ +.m-code .p { color: #aaaaaa } /* Punctuation */ +.m-code .ch { color: #a5c9ea } /* Comment.Hashbang */ +.m-code .cm { color: #a5c9ea } /* Comment.Multiline */ +.m-code .cp { color: #3bd267 } /* Comment.Preproc */ +.m-code .cpf { color: #c7cf2f } /* Comment.PreprocFile */ +.m-code .c1 { color: #a5c9ea } /* Comment.Single */ +.m-code .cs { color: #a5c9ea } /* Comment.Special */ +.m-code .gd { color: #cd3431 } /* Generic.Deleted */ +.m-code .ge { color: #e6e6e6; font-style: italic } /* Generic.Emph */ +.m-code .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */ +.m-code .gi { color: #3bd267 } /* Generic.Inserted */ +.m-code .gs { color: #e6e6e6; font-weight: bold } /* Generic.Strong */ +.m-code .gu { color: #5b9dd9 } /* Generic.Subheading */ +.m-code .kc { color: #ffffff; font-weight: bold } /* Keyword.Constant */ +.m-code .kd { color: #ffffff; font-weight: bold } /* Keyword.Declaration */ +.m-code .kn { color: #ffffff; font-weight: bold } /* Keyword.Namespace */ +.m-code .kp { color: #ffffff; font-weight: bold } /* Keyword.Pseudo */ +.m-code .kr { color: #ffffff; font-weight: bold } /* Keyword.Reserved */ +.m-code .kt { color: #ffffff; font-weight: bold } /* Keyword.Type */ +.m-code .m { color: #c7cf2f } /* Literal.Number */ +.m-code .s { color: #e07f7c } /* Literal.String */ +.m-code .na { color: #dcdcdc; font-weight: bold } /* Name.Attribute */ +.m-code .nb { color: #ffffff; font-weight: bold } /* Name.Builtin */ +.m-code .nc { color: #dcdcdc; font-weight: bold } /* Name.Class */ +.m-code .no { color: #dcdcdc } /* Name.Constant */ +.m-code .nd { color: #dcdcdc } /* Name.Decorator */ +.m-code .ni { color: #dcdcdc } /* Name.Entity */ +.m-code .ne { color: #dcdcdc } /* Name.Exception */ +.m-code .nf { color: #dcdcdc } /* Name.Function */ +.m-code .nl { color: #dcdcdc } /* Name.Label */ +.m-code .nn { color: #dcdcdc } /* Name.Namespace */ +.m-code .nx { color: #dcdcdc } /* Name.Other */ +.m-code .py { color: #dcdcdc } /* Name.Property */ +.m-code .nt { color: #dcdcdc; font-weight: bold } /* Name.Tag */ +.m-code .nv { color: #c7cf2f } /* Name.Variable */ +.m-code .ow { color: #dcdcdc; font-weight: bold } /* Operator.Word */ +.m-code .mb { color: #c7cf2f } /* Literal.Number.Bin */ +.m-code .mf { color: #c7cf2f } /* Literal.Number.Float */ +.m-code .mh { color: #c7cf2f } /* Literal.Number.Hex */ +.m-code .mi { color: #c7cf2f } /* Literal.Number.Integer */ +.m-code .mo { color: #c7cf2f } /* Literal.Number.Oct */ +.m-code .sa { color: #e07f7c } /* Literal.String.Affix */ +.m-code .sb { color: #e07f7c } /* Literal.String.Backtick */ +.m-code .sc { color: #e07cdc } /* Literal.String.Char */ +.m-code .dl { color: #e07f7c } /* Literal.String.Delimiter */ +.m-code .sd { color: #e07f7c } /* Literal.String.Doc */ +.m-code .s2 { color: #e07f7c } /* Literal.String.Double */ +.m-code .se { color: #e07f7c } /* Literal.String.Escape */ +.m-code .sh { color: #e07f7c } /* Literal.String.Heredoc */ +.m-code .si { color: #e07f7c } /* Literal.String.Interpol */ +.m-code .sx { color: #e07f7c } /* Literal.String.Other */ +.m-code .sr { color: #e07f7c } /* Literal.String.Regex */ +.m-code .s1 { color: #e07f7c } /* Literal.String.Single */ +.m-code .ss { color: #e07f7c } /* Literal.String.Symbol */ +.m-code .bp { color: #ffffff; font-weight: bold } /* Name.Builtin.Pseudo */ +.m-code .fm { color: #dcdcdc } /* Name.Function.Magic */ +.m-code .vc { color: #c7cf2f } /* Name.Variable.Class */ +.m-code .vg { color: #c7cf2f } /* Name.Variable.Global */ +.m-code .vi { color: #c7cf2f } /* Name.Variable.Instance */ +.m-code .vm { color: #c7cf2f } /* Name.Variable.Magic */ +.m-code .il { color: #c7cf2f } /* Literal.Number.Integer.Long */ diff --git a/src/main/webapp/preview/index.html b/src/main/webapp/preview/index.html new file mode 100644 index 0000000..e9bfbe0 --- /dev/null +++ b/src/main/webapp/preview/index.html @@ -0,0 +1,2 @@ +suche +Katalog \ No newline at end of file diff --git a/src/main/webapp/preview/search.html b/src/main/webapp/preview/search.html new file mode 100644 index 0000000..72eb282 --- /dev/null +++ b/src/main/webapp/preview/search.html @@ -0,0 +1,198 @@ + + + + Amazon light + + + + + + + + + + +
+ +
+ +
+ +
+ + +
+
+ Baum +
+
+

Baum

+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean + massa. +
+
+

2 €

+
+
+ +
+
+ Baum +
+
+

Baum

+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean + massa. +
+
+

2 €

+
+
+ +
+
+ Baum +
+
+

Baum

+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean + massa. +
+
+

2 €

+
+
+ +
+
+ Baum +
+
+

Baum

+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean + massa. +
+
+

2 €

+
+
+ + +
+
+ Baum +
+
+

Baum

+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean + massa. +
+
+

2 €

+
+
+ + +
+ +
+ + + + + + \ No newline at end of file