@import "markdown.css";

:root {
  --max-width: 900px;
  --sidebar-width: 20%;
  --sidebar-padding: 10px;
  --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) + var(--sidebar-padding));
}

/* Filetree */
aside {
  float: left;
  z-index: 1;
  position: absolute;
  width: var(--sidebar-width);
  padding-inline: var(--sidebar-padding);
}

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

aside a {
  text-decoration: none;
}

/* 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: 740px) {
  aside {
    display: none;
    width: unset;
  }

  main {
    padding-inline: 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;
  }
}