nml/style.css

289 lines
3.7 KiB
CSS
Raw Normal View History

2024-07-25 14:19:49 +02:00
body {
background-color: #1b1b1d;
color: #c5c5c5;
font-family: sans-serif;
margin: 0;
padding: 0;
}
2024-07-25 14:19:49 +02:00
.layout {
display: flex;
}
.content {
max-width: 99ch;
2024-07-25 14:19:49 +02:00
margin: 0 auto;
padding: 0;
width: 100%;
2024-07-25 14:19:49 +02:00
}
2024-07-31 11:56:48 +02:00
/* Layouts */
div.centered {
text-align: center;
}
div.split-container {
display: flex;
width: 100%;
}
div.split-container > div.split {
flex: 1;
flex-shrink: 0;
overflow-x: auto;
margin: 0.5em;
}
2024-07-29 18:06:18 +02:00
/* Styles */
2024-07-25 14:19:49 +02:00
em {
padding-left: .1em;
padding-right: .1em;
border-radius: 3px;
border: solid 1px #100c1e;
color: #ffb454;
background-color: #191f26;
}
2024-07-29 18:06:18 +02:00
a.inline-code {
2024-07-25 14:19:49 +02:00
padding-left: .1em;
padding-right: .1em;
border-radius: 1px;
background-color: #191f26;
}
2024-07-29 18:06:18 +02:00
/* Navbar */
.navbar {
display: none;
2024-07-31 11:56:48 +02:00
left: 0;
top: 0;
bottom: 0;
width: max(calc((100vw - 99ch) / 2 - 15vw), 24ch);
height: 100vh;
position: fixed;
margin-right: 1em;
2024-07-29 18:06:18 +02:00
overflow-y: auto;
2024-07-31 11:56:48 +02:00
box-sizing: border-box;
overscroll-behavior-y: contain;
2024-07-29 18:06:18 +02:00
2024-07-31 11:56:48 +02:00
background-color: #161a26;
2024-07-29 18:06:18 +02:00
color: #aaa;
2024-07-31 11:56:48 +02:00
font-size: 0.9em;
2024-07-29 18:06:18 +02:00
font-weight: bold;
}
@media (min-width: 130ch) {
.navbar {
display: block;
}
.container {
flex-direction: row;
}
}
.navbar a {
2024-07-29 18:06:18 +02:00
color: #ffb454;
text-decoration: none;
font-weight: normal;
}
.navbar li {
2024-07-29 18:06:18 +02:00
display: block;
position: relative;
padding-left: 1em;
margin-left: 0em;
}
.navbar ul {
2024-07-29 18:06:18 +02:00
margin-left: 0em;
padding-left: 0;
}
.navbar summary{
2024-07-29 18:06:18 +02:00
display: block;
cursor: pointer;
}
.navbar summary::marker,
.navbar summary::-webkit-details-marker{
2024-07-29 18:06:18 +02:00
display: none;
}
.navbar summary:focus{
2024-07-29 18:06:18 +02:00
outline: none;
}
.navbar summary:focus-visible{
2024-07-29 18:06:18 +02:00
outline: 1px dotted #000;
}
.navbar summary:before {
2024-07-31 11:56:48 +02:00
content: "+";
color: #ffb454;
float: left;
text-align: center;
width: 1em;
2024-07-29 18:06:18 +02:00
}
.navbar details[open] > summary:before {
2024-07-31 11:56:48 +02:00
content: "";
2024-07-29 18:06:18 +02:00
}
2024-08-13 22:46:10 +02:00
/* Sections */
a.section-link {
text-decoration: none;
}
2024-07-25 14:19:49 +02:00
/* Code blocks */
div.code-block-title {
background-color: #20202a;
padding-left: .3em;
}
div.code-block-content {
2024-07-31 11:56:48 +02:00
max-height: 38em;
2024-07-25 14:19:49 +02:00
margin-bottom: 0.2em;
2024-07-31 11:56:48 +02:00
overflow: scroll;
2024-07-25 14:19:49 +02:00
background-color: #0f141a;
}
div.code-block-content td {
border: 0;
padding: 0;
}
div.code-block-content pre {
border: 0;
margin: 0;
2024-07-31 11:56:48 +02:00
tab-size: 4;
2024-07-25 14:19:49 +02:00
}
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;
}
2024-08-14 15:27:34 +02:00
.medium img, video, audio {
2024-07-25 14:19:49 +02:00
max-width: 100%;
}
div.medium p.medium-refname {
margin: 0;
text-align: center;
font-weight: bold;
2024-07-26 15:06:09 +02:00
color: #d367c1;
2024-07-25 14:19:49 +02:00
}
div.medium p {
padding: 0;
margin-top: 0;
margin-left: 1em;
margin-right: 1em;
text-align: justify;
}
2024-07-26 15:06:09 +02:00
a.medium-ref {
display: inline;
font-weight: bold;
color: #d367c1;
2024-08-14 15:27:34 +02:00
text-decoration: none;
2024-07-26 15:06:09 +02:00
}
a.medium-ref:hover {
background: #334;
}
a.medium-ref img {
display: none;
margin: 1.3em 0 0 0;
}
2024-08-14 15:27:34 +02:00
a.medium-ref video {
display: none;
margin: 1.3em 0 0 0;
}
2024-07-26 15:06:09 +02:00
a:hover.medium-ref img {
2024-08-14 15:27:34 +02:00
max-width: 25%;
left: 37.5%;
display: inline-block;
position: absolute;
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.75);
}
a:hover.medium-ref video {
max-width: 25%;
left: 37.5%;
2024-07-26 15:06:09 +02:00
display: inline-block;
position: absolute;
2024-07-31 11:56:48 +02:00
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.75);
2024-07-26 15:06:09 +02:00
}
2024-08-13 22:46:10 +02:00
/* Blockquote */
blockquote {
margin-left: 0.2em;
padding-left: 0.6em;
border-left: 4px solid #0ff08b;
}
blockquote p::before {
content: '\201C';
}
blockquote p::after {
content: '\201D';
}
.blockquote-author:before {
content: '—';
}
.blockquote-author {
margin-left: 0.2em;
}