114 lines
1.6 KiB
CSS
114 lines
1.6 KiB
CSS
@import "markdown.css";
|
|
|
|
:root {
|
|
--max-width: 900px;
|
|
--sidebar-width: 20%;
|
|
--shift-icon-filetree: -10px;
|
|
|
|
/* Size of icon */
|
|
--shift-icon-filetree-size: 80%;
|
|
--shift-icon-filetree-height: 2;
|
|
}
|
|
|
|
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: "📁";
|
|
margin-left: var(--shift-icon-filetree);
|
|
font-size: var(--shift-icon-filetree-size);
|
|
line-height: var(--shift-icon-filetree-height);
|
|
}
|
|
|
|
aside li:not(.collapsed).directory::before {
|
|
content: "📂";
|
|
margin-left: var(--shift-icon-filetree);
|
|
font-size: var(--shift-icon-filetree-size);
|
|
line-height: var(--shift-icon-filetree-height);
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|