website/styles/_markdown.scss

.markdown {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4, > h5, > h6 {
    font-size: 1.2rem;
  }

  p {
    margin: 0.5em 0;
    hyphens: auto;
    text-align: justify;
    line-height: 1.5em;
  }

  ul, ol {
    padding-left: 1em;

    ul, ol {
      padding-left: 1em;
    }
  }

  li {
    line-height: 1.5em;
  }

  a {
    color: var(--c-primary);
    font-family: var(--serif);
    font-weight: 500;
    font-style: italic;
    text-decoration: unset;

    &:hover {
      text-decoration: underline;
    }
  }

  > h1, > h2, > h3, > h4, > h5, > h6 {
    margin-bottom: 0.5em;
    font-family: var(--serif);
    font-weight: 500;

    &:not(:first-child) {
      margin-top: 1em;
    }
  }


  img:not([class]) {
    max-width: 100%;
    height: auto;
    margin-block: 1em;
  }

  blockquote {
    position: relative;
    margin: 1em 2em;

    &::before {
      content: "";
      display: block;
      position: absolute;
      left: -1em;
      width: 4px;
      height: 100%;
      background-color: var(--c-secondary);
      border-radius: 2px;
    }
  }

  > table {
    margin: 1em auto 1em auto;
    border-collapse: collapse;
    overflow-x: auto;

    th, td {
      padding: 0.2em 0.5em;
      border: 1px solid #dbdbdb;
    }

    th {
      background-color: #f3f3f3;
    }

    p {
      white-space: pre-line;
    }
  }

  code {
    font-family: var(--monospace);
  }

  :not(pre) > code {
    padding-inline: 0.25em;
    background-color: white;
    border-radius: 0.33em;
    border: 1px dashed lightgray;
  }

  .listing {
    position: relative;
    margin: 1em -1em;
    border-width: 0.25em 0;
    border-style: solid;

    @media (min-width: 600px) {
      margin: 1em 0.5em;
      border-width: 0.25rem;
      border-radius: 0.5rem;
    }

    &::before {
      content: attr(data-lang);
      display: block;
      top: 0;
      right: 0;
      position: absolute;
      padding: 0.1em 0.2em 0 0.3em;
      border-radius: 0 0 0 0.5rem;
    }

    pre {
      padding: 0.5em;
      max-width: 100%;
      overflow-x: auto;
      tab-size: 2;

      > code {
        display: block;
        line-height: 1.5em;
      }
    }
  }

  .math-display {
    margin-block: 1em;
    font-size: 1.1em;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .marginnote {
    display: block;
    margin: 1em 1.5em;
    padding-block: 0.5em;
    border-block: 1px dashed gray;
    color: gray;

    @media (min-width: 38em) {
      float: right;
      clear: right;
      max-width: 14rem;
      margin-right: 0;
      text-align: justify;
      hyphens: auto;
    }

    @media (min-width: 80em) {
      margin: 2em -17rem;
    }

    a {
      color: var(--c-primary);
    }
  }

  // TODO: clean this
  .md-icon {
    display: inline-block;
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    margin: 0.1em 0;

    &.big {
      height: 4em;
    }
  }
}