@import "markdown.css";

:root {
  --max-width: 900px;
  --sidebar-width: 20%;
}

main {
  max-width: var(--max-width);
  margin-left: var(--sidebar-width);
}

/* Filetree */
aside {
  float: left;
  margin-left: 20px;
  position: absolute;
  width: var(--sidebar-width);
}

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;
}

main img {
  max-width: 100%;
}

button {
  display: none;
}

input[type="text"] {
  outline: none;
}

@media only screen and (max-width: 640px) {
  aside {
    display: none;
  }

  main {
    margin-left: unset;
  }

  button {
    width: 100%;
    display: block;

    position: sticky;
    top: 10px;
    z-index: 1;
  }

  input {
    width: 85vw;
  }
}

@media print {
  aside {
    display: none;
  }

  main {
    margin-left: unset;
  }
}