CSS reset

_reset.css

/*
*  CSS reset by thcrt
*  https://gist.github.com/thcrt/2b8a8d492249a945a307397e120a5dd4 | https://theocourt.com
*  Based on Andy Bell's More Modern CSS Reset | https://andy-bell.co.uk/a-more-modern-css-reset/
*/

*, *::before, *::after {
  /* Include border and padding in size calculation 
     See https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#sect1 */
  box-sizing: border-box;

  /* Remove default spacing */
  margin: 0;
  padding: 0;

  /* Always inherit fonts */
  font: inherit;
}

html {
  /* Don't inflate font sizes
     See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;

  /* Make default size a bit bigger */
  font-size: 20px;
}

body {
  /* Don't let content touch the sides of the page */
  padding: 1rem;

  /* Take up available vertical space */
  min-height: 100svh;

  /* Hot take: use flex */
  display: flex;
  flex-direction: column;
  * {
    display: flex;
  }
}

/* Set nice text wrapping and line height */
blockquote, dd, details, figcaption, li, p {
  text-wrap: pretty;
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  line-height: 1.1;
}

/* Add sane emphasis where indicated by element semantics */
h1, h2, h3, h4, h5, h6, b, strong {
  font-weight: bolder;
}
i, em {
  font-style: italic;
}

/* Make figure-like objects easier to work with */
img, picture, figure {
  max-width: 100%;
  display: block;
}

/* Enlarge textarea elements for ease of use
   Exclude cases where rows attribute has been explicitly set */
textarea:not([rows]) {
  min-height: 10em;
}

/* Give some scroll margin to elements that have been anchored to */
:target {
  scroll-margin-block: 3em;
}