website/src/styles/_markdown.scss

.markdown {
  > h1 {
    font-size: 2.227em;
  }

  > h2 {
    font-size: 1.802em;
  }

  > h3 {
    font-size: 1.602em;
  }

  > h4, > h5, > h6 {
    font-size: 1.424em;
  }

  > p {
    margin: 0.5em 0;
    line-height: 1.5em;
    hyphens: auto;
    text-align: justify;
    
    > a {
      color: var(--c-primary);
    }
  }

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

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

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

    ul, ol {
      padding-left: 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;
  }

  > :is(pre:has(> code)),
  > pre.astro-code {
    margin: 1em 0.5em;
    padding: 0.5em;
    max-width: 100%;
    border-radius: 0.5em;
    overflow-x: auto;
    border: 1px dashed lightgray;

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