@ou-imdt/css/src/native/h.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

:root,
:host {
  /*  H1 to H4  */
  --h-margin: 0.5rem 0;
  --h-weight: bold;
  /* Make sure h colors contrast correctly with bg1 */
  --h-color: var(--core1);
  --h-size: var(--font-size);
  --h1-size: 1.8rem;
  --h2-size: 1.6rem;
  --h3-size: 1.4rem;
  --h4-size: 1.2rem;
  --h5-size: 1.1rem;
  --h6-size: 1rem;

  --h-link-decoration: none;
  --h-link-color: var(--h-color);
  --h-link-hover-color: #191C40;
  --h-link-active-color: var(--core1);
}



h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: var(--h-margin);
  line-height: var(--line-height);
  font-weight: var(--h-weight);
}

h1,
.h1 {
  font-size: var(--h1-size);
  color: var(--h1-color, var(--h-color));
}

h2,
.h2 {
  font-size: var(--h2-size);
  color: var(--h2-color, var(--h-color))
}

h3,
.h3 {
  font-size: var(--h3-size);
  color: var(--h3-color, var(--h-color))
}

h4,
.h4 {
  font-size: var(--h4-size);
  color: var(--h4-color, var(--h-color))
}

h5,
.h5 {
  font-size: var(--h5-size);
  color: var(--h5-color, var(--h-color))
}

h6,
.h6 {
  font-size: var(--h6-size);
  color: var(--h6-color, var(--h-color))
}

/* Link Headings */
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a {
  text-decoration: var(--h-link-decoration, none);
  color: var(--h-link-color, var(--h-color));
}

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a:hover {
  color: var(--h-link-hover-color);
}

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a:active {
  color: var(--h-link-active-color);
}