103 lines
1.2 KiB
CSS
103 lines
1.2 KiB
CSS
@import "markdown.css";
|
|
|
|
:root {
|
|
--max-width: 900px;
|
|
--sidebar-width: 20%;
|
|
}
|
|
|
|
main {
|
|
max-width: var(--max-width);
|
|
padding-inline: calc(var(--sidebar-width) + 10px);
|
|
}
|
|
|
|
/* Filetree */
|
|
aside {
|
|
float: left;
|
|
z-index: 1;
|
|
position: absolute;
|
|
width: var(--sidebar-width);
|
|
padding-inline: 10px;
|
|
}
|
|
|
|
aside ul {
|
|
list-style: none;
|
|
padding-left: 0.6em;
|
|
}
|
|
|
|
aside li {
|
|
position: relative;
|
|
}
|
|
|
|
/* Element */
|
|
aside li:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -0.2em;
|
|
left: -1em;
|
|
height: 1em;
|
|
}
|
|
|
|
aside li.collapsed > ul {
|
|
display: none;
|
|
}
|
|
|
|
aside li.directory::before {
|
|
content: "+";
|
|
}
|
|
|
|
aside li:not(.collapsed).directory::before {
|
|
content: "-";
|
|
}
|
|
|
|
aside li.directory {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Image */
|
|
main img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Collapse filetree */
|
|
button#menu {
|
|
display: none;
|
|
}
|
|
|
|
/* Search field */
|
|
input[type="text"] {
|
|
outline: none;
|
|
}
|
|
|
|
/* breakpoint */
|
|
@media only screen and (max-width: 640px) {
|
|
aside {
|
|
display: none;
|
|
}
|
|
|
|
main {
|
|
margin-left: unset;
|
|
}
|
|
|
|
button#menu {
|
|
width: 100%;
|
|
display: block;
|
|
|
|
position: sticky;
|
|
top: 10px;
|
|
z-index: 1;
|
|
}
|
|
|
|
input {
|
|
width: 85vw;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
aside {
|
|
display: none;
|
|
}
|
|
|
|
main {
|
|
padding-inline: unset;
|
|
}
|
|
}
|