personal-website/assets/css/single.css

main #container {
  display: grid;
  grid-template-columns: auto 15rem;
  column-gap: 2rem;
}

main #metadata {
  margin-bottom: 2rem;
}

main #metadata h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

main #metadata div {
  min-width: 100%;
  display: flex;
  column-gap: 2rem;
}

main #metadata div span {
  display: inline-flex;
  align-items: center;
  column-gap: 0.25rem;
}

main #metadata div #share {
  display: none;
}

main #metadata #share {
  cursor: pointer;
}

main h2,
main h3,
main h4 {
  margin-bottom: 1rem;
}

main p,
main ul,
main ol,
main img,
main figure {
  margin-bottom: 2rem;
}

@media only screen and (max-width: 1024px) {
  main #metadata h1 {
    font-size: 2.5rem;
  }

  main #container {
    display: block;
  }

  main #container #table-of-contents {
    display: none;
  }

  main #metadata div {
    column-gap: 1rem;
  }

  main #metadata div #share {
    display: inline-flex;
  }
}