nml/style.css
2024-07-29 18:06:18 +02:00

201 lines
2.7 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

body {
background-color: #1b1b1d;
color: #c5c5c5;
font-family: sans-serif;
max-width: 90ch;
margin: 0 auto;
}
/* Styles */
em {
padding-left: .1em;
padding-right: .1em;
border-radius: 3px;
border: solid 1px #100c1e;
color: #ffb454;
background-color: #191f26;
}
a.inline-code {
padding-left: .1em;
padding-right: .1em;
border-radius: 1px;
background-color: #191f26;
}
/* Navbar */
#navbar {
left: 0;
top: 0;
bottom: 0;
width: max(16vw, 20ch);
overflow-y: auto;
position: absolute;
box-sizing: border-box;
overscroll-behavior-y: contain;
background-color: #161a26;
color: #aaa;
font-size: 0.9em;
font-weight: bold;
}
#navbar a {
color: #ffb454;
text-decoration: none;
font-weight: normal;
}
#navbar li {
display: block;
position: relative;
padding-left: 1em;
margin-left: 0em;
}
#navbar ul {
margin-left: 0em;
padding-left: 0;
}
#navbar summary{
display: block;
cursor: pointer;
}
#navbar summary::marker,
#navbar summary::-webkit-details-marker{
display: none;
}
#navbar summary:focus{
outline: none;
}
#navbar summary:focus-visible{
outline: 1px dotted #000;
}
#navbar summary:before {
content: "+";
color: #ffb454;
float: left;
text-align: center;
width: 1em;
}
#navbar details[open] > summary:before {
content: "";
}
/* Code blocks */
div.code-block-title {
background-color: #20202a;
padding-left: .3em;
}
div.code-block-content {
max-height: 20em;
margin-bottom: 0.2em;
width: auto;
overflow: auto;
background-color: #0f141a;
}
div.code-block-content td {
border: 0;
padding: 0;
}
div.code-block-content pre {
border: 0;
margin: 0;
}
div.code-block-content .code-block-gutter {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
padding-left: .1em;
padding-right: .2em;
text-align: right;
border-right: solid #2a2e3e 1px;
background: #222d3a;
}
div.code-block-content .code-block-line {
padding-left: .1em;
}
/* Media */
.media {
max-width: 85ch;
margin: auto;
text-align: center;
}
.medium {
padding-top: 1em;
display: inline-block;
vertical-align: middle;
margin-left: .5em;
margin-right: .5em;
}
.medium img {
max-width: 100%;
}
div.medium p.medium-refname {
margin: 0;
text-align: center;
font-weight: bold;
color: #d367c1;
}
div.medium p {
padding: 0;
margin-top: 0;
margin-left: 1em;
margin-right: 1em;
text-align: justify;
}
a.medium-ref {
display: inline;
font-weight: bold;
color: #d367c1;
}
a.medium-ref:hover {
background: #334;
}
a.medium-ref img {
display: none;
margin: 1.3em 0 0 0;
}
a:hover.medium-ref img {
max-width: 50%;
margin: auto;
display: inline-block;
position: absolute;
box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.75);
}