CSS Global

wip

• reference css reset
• reference css variables
• set base styling like for body, text, h1, h1 mobile,
• show example how to do light and dark mode -> make into own component explanation

This will make use of our variables and be based on the reset.css as defined earlier.

:root {
  font-size: var(--font-size-base);
}

body {
  color: var(--color-neutral-100);
  background-color: var(--color-neutral-900);
  font-family: var(--font-family);
  line-height: var(--font-line-height);
}

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

p, li, details, code, a, pre, img {
  font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--font-line-height-heading);
}

a {
  color: var(--color-accent-100);
}
a:hover, a:focus-within {
  color: var(--color-accent-500);
}

h1 {font-size: var(--text-size-4xl);}
h2 {font-size: var(--text-size-3xl);}
h3 {font-size: var(--text-size-2xl);}
h4 {font-size: var(--text-size-xl);}

@media (min-width: 48rem) {
    h1 {font-size: var(--text-size-5xl);}
    h2 {font-size: var(--text-size-4xl);}
    h3 {font-size: var(--text-size-3xl);}
    h4 {font-size: var(--text-size-2xl);}
}