theophile/example/css/example.css

A templating module that transforms a web page into a (Powerpoint-like) presentation

@import url("https://fonts.googleapis.com/css2?family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,400;0,700;1,400;1,700&display=swap");
:root {
  --hue: -80;
  --sat: 100%;
  --lum: 20%;
}

html {
  height: 100%;
  font-family: "Unna", serif;
  font-family: "Cormorant Infant", serif;
  font-size: 22px;
}

body {
  height: 100%;
  margin: 0;
  background-color: hsl(var(--hue), var(--sat), var(--lum));
  color: white;
}

#app {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
#app > * {
  padding: 1em;
}
#app > header, #app > footer {
  background-color: hsl(var(--hue), var(--sat), 10%);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
  margin: 0;
}

.container {
  width: 1200px;
  margin: 0 auto;
}