Anfang previews
Signed-off-by: Johannes Theiner <j.theiner@live.de>
This commit is contained in:
parent
edf4b975b5
commit
6c2bbc9660
|
|
@ -7,7 +7,7 @@ import java.io.IOException;
|
|||
import java.io.PrintWriter;
|
||||
|
||||
/**
|
||||
* Hello World
|
||||
* Hello World.
|
||||
*
|
||||
* @author Johannes Theiner
|
||||
* @version 0.1
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
|
||||
<servlet-mapping>
|
||||
<servlet-name>helloWorld</servlet-name>
|
||||
<url-pattern>/</url-pattern>
|
||||
<url-pattern>/index</url-pattern>
|
||||
</servlet-mapping>
|
||||
</web-app>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!Doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Amazon light</title>
|
||||
|
||||
<script>
|
||||
function getStylesheet() {
|
||||
var dark = true;
|
||||
if (dark) {
|
||||
document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
|
||||
document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
|
||||
} else {
|
||||
document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
|
||||
document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
|
||||
}
|
||||
}
|
||||
|
||||
getStylesheet();
|
||||
</script>
|
||||
<noscript>
|
||||
<link href="css/m-light.css" rel="stylesheet">
|
||||
</noscript>
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav id="navigation">
|
||||
<div class="">
|
||||
<div class="m-row">
|
||||
<a href="#" id="m-navbar-brand" class="m-col-t-2 m-col-m-none m-left-m">Amazon light</a>
|
||||
<div class="m-button m-default m-col-t-1 m-push-l-10">
|
||||
<a href="login.html"><span class="fas fa-user"> Anmelden/Registrieren</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="m-container">
|
||||
|
||||
<h1 class="m-text-center">Belletristik</h1>
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/7mqsZsE6FaU/900x900" alt="Polizei Auto">
|
||||
<figcaption>Krimis</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/eIVJAkj1uCs/900x900" alt="Glühbirne">
|
||||
<figcaption>Thriller</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/C6CVXJMXwqs/900x900" alt="Rose">
|
||||
<figcaption>Liebesromane</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="m-text-center">Fachbücher</h1>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/2xU7rYxsTiM/900x900" alt="Tastatur">
|
||||
<figcaption>Informatik</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/OApHds2yEGQ/900x900" alt="Münzen">
|
||||
<figcaption>Finanzen</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/Mwuod2cm8g4/900x900" alt="Zeitungen">
|
||||
<figcaption>Medienwissenschaften</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="m-text-center">Kinderbücher</h1>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/EMZxDosijJ4/900x900" alt="2 Kinder beim lesen">
|
||||
<figcaption>Lesen lernen</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/yjXlyrKIz2A/900x900" alt="Farben">
|
||||
<figcaption>Malbücher</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/3y1zF4hIPCg/900x900" alt="Puzzle">
|
||||
<figcaption>Puzzle</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Your Brand</a></h3>
|
||||
<ul>
|
||||
<li><a href="#">Features</a></li>
|
||||
<li><a href="#">Showcase</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Download</a></h3>
|
||||
<ul>
|
||||
<li><a href="#">Packages</a></li>
|
||||
<li><a href="#">Source</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-clearfix-t"></div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Contact</h3>
|
||||
<ul>
|
||||
<li><a href="mailto:you@your.brand">E-mail</a></li>
|
||||
<li><a href="https://github.com/your-brand">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Blog</a></h3>
|
||||
<ul>
|
||||
<li><a href="#">News</a></li>
|
||||
<li><a href="#">Archive</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-l-10 m-push-l-1">
|
||||
<p>Your Brand. Copyright © <a href="mailto:you@your.brand">You</a>,
|
||||
2017. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,30 @@
|
|||
/*
|
||||
This file is part of m.css.
|
||||
|
||||
Copyright © 2017, 2018, 2019 Vladimír Vondruš <mosra@centrum.cz>
|
||||
|
||||
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');
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
This file is part of m.css.
|
||||
|
||||
Copyright © 2017, 2018, 2019 Vladimír Vondruš <mosra@centrum.cz>
|
||||
|
||||
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; }
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
/*
|
||||
This file is part of m.css.
|
||||
|
||||
Copyright © 2017, 2018, 2019 Vladimír Vondruš <mosra@centrum.cz>
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,387 @@
|
|||
/*
|
||||
This file is part of m.css.
|
||||
|
||||
Copyright © 2017, 2018, 2019 Vladimír Vondruš <mosra@centrum.cz>
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,778 @@
|
|||
/*
|
||||
This file is part of m.css.
|
||||
|
||||
Copyright © 2017, 2018, 2019 Vladimír Vondruš <mosra@centrum.cz>
|
||||
|
||||
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 <header>), 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);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,30 @@
|
|||
/*
|
||||
This file is part of m.css.
|
||||
|
||||
Copyright © 2017, 2018, 2019 Vladimír Vondruš <mosra@centrum.cz>
|
||||
|
||||
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');
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
/*
|
||||
This file is part of m.css.
|
||||
|
||||
Copyright © 2017, 2018, 2019 Vladimír Vondruš <mosra@centrum.cz>
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
/*
|
||||
This file is part of m.css.
|
||||
|
||||
Copyright © 2017, 2018, 2019 Vladimír Vondruš <mosra@centrum.cz>
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
@ -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 */
|
||||
|
|
@ -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 */
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<a href="search.html">suche</a>
|
||||
<a href="catalog.html">Katalog</a>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<!Doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Amazon light</title>
|
||||
|
||||
<script>
|
||||
function getStylesheet() {
|
||||
var dark = true;
|
||||
if (dark) {
|
||||
document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
|
||||
document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
|
||||
} else {
|
||||
document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
|
||||
document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
|
||||
}
|
||||
}
|
||||
|
||||
getStylesheet();
|
||||
</script>
|
||||
<noscript>
|
||||
<link href="css/m-light.css" rel="stylesheet">
|
||||
</noscript>
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
|
||||
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav id="navigation">
|
||||
<div class="">
|
||||
<div class="m-row">
|
||||
<a href="#" id="m-navbar-brand" class="m-col-t-2 m-col-m-none m-left-m">Amazon light</a>
|
||||
<div class="m-button m-default m-col-t-1 m-push-l-10">
|
||||
<a href="login.html"><span class="fas fa-user"> Anmelden/Registrieren</span></a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-6 m-push-l-3">
|
||||
<input type="text" style="font-size: 300%">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="m-col-t-1 m-push-l-3">
|
||||
<div class="m-button m-success">
|
||||
<a href="search.html"><span class="fas fa-search">
|
||||
</span></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="m-container">
|
||||
|
||||
|
||||
<div class="m-row m-block m-default">
|
||||
<div class="m-col-t-3">
|
||||
<img src="images/tree.png" alt="Baum" class="m-image">
|
||||
</div>
|
||||
<div class="m-col-t-7">
|
||||
<h3>Baum</h3>
|
||||
<br/>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
|
||||
massa.
|
||||
</div>
|
||||
<div class="m-col-t-2">
|
||||
<h2>2 €</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row m-block m-default">
|
||||
<div class="m-col-t-3">
|
||||
<img src="images/tree.png" alt="Baum" class="m-image">
|
||||
</div>
|
||||
<div class="m-col-t-7">
|
||||
<h3>Baum</h3>
|
||||
<br/>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
|
||||
massa.
|
||||
</div>
|
||||
<div class="m-col-t-2">
|
||||
<h2>2 €</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row m-block m-default">
|
||||
<div class="m-col-t-3">
|
||||
<img src="images/tree.png" alt="Baum" class="m-image">
|
||||
</div>
|
||||
<div class="m-col-t-7">
|
||||
<h3>Baum</h3>
|
||||
<br/>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
|
||||
massa.
|
||||
</div>
|
||||
<div class="m-col-t-2">
|
||||
<h2>2 €</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row m-block m-default">
|
||||
<div class="m-col-t-3">
|
||||
<img src="images/tree.png" alt="Baum" class="m-image">
|
||||
</div>
|
||||
<div class="m-col-t-7">
|
||||
<h3>Baum</h3>
|
||||
<br/>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
|
||||
massa.
|
||||
</div>
|
||||
<div class="m-col-t-2">
|
||||
<h2>2 €</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="m-row m-block m-default">
|
||||
<div class="m-col-t-3">
|
||||
<img src="images/tree.png" alt="Baum" class="m-image">
|
||||
</div>
|
||||
<div class="m-col-t-7">
|
||||
<h3>Baum</h3>
|
||||
<br/>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
|
||||
massa.
|
||||
</div>
|
||||
<div class="m-col-t-2">
|
||||
<h2>2 €</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Your Brand</a></h3>
|
||||
<ul>
|
||||
<li><a href="#">Features</a></li>
|
||||
<li><a href="#">Showcase</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Download</a></h3>
|
||||
<ul>
|
||||
<li><a href="#">Packages</a></li>
|
||||
<li><a href="#">Source</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-clearfix-t"></div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Contact</h3>
|
||||
<ul>
|
||||
<li><a href="mailto:you@your.brand">E-mail</a></li>
|
||||
<li><a href="https://github.com/your-brand">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Blog</a></h3>
|
||||
<ul>
|
||||
<li><a href="#">News</a></li>
|
||||
<li><a href="#">Archive</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-l-10 m-push-l-1">
|
||||
<p>Your Brand. Copyright © <a href="mailto:you@your.brand">You</a>,
|
||||
2017. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue