Hedgedoc/Reveal.js Slide Template: Quadrant layout

hedgedoc-slide-quadrant.md

Lorem ipsum dolor sit amet

Lorem

• dolor sit amet
• consectetur adipiscing
• sed do eiusmod tempor

Ipsum

• Lorem ipsum dolor sit amet
• Ut enim ad minim veniam
• Duis aute irure dolor in reprehenderit

Dolor

• Ea commodo consequat
• Duis aute irure dolor
• Ut labore et dolore magna aliqua

Amet

• Sed ut perspiciatis unde omnis
• At vero eos et accusamus
• Et harum quidem rerum facilis est

revealjs-slide-quadrant.css

/**
 * Reveal.js slide template: Quadrant with cells containing <ul class="in-quadrant">
 */
section.quadrant > div {
  display: grid;
  max-height: 80vh;
  grid-template-areas:
    "header header"
    "quadrant1 quadrant2"
    "quadrant3 quadrant4"
    "footer footer";
  grid-template-rows: auto 1fr 1fr 10vh;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0px;
}

/* place all non-quadrant elements into the header cell */
section.quadrant > div > :not(.in-quadrant) {
  grid-area: header;
  padding: 10px;
}

/* quadrant styling */
section.quadrant .in-quadrant {
  list-style-position: inside;
  font-size: 2vh !important;
  padding: 10px;
  margin: 0px;
  border: 1px solid #000;
}

section.quadrant > div > .in-quadrant[data-quadrant="1"] {
  grid-area: quadrant1;
  background-color: #A9BCD0; 
}

section.quadrant > div > .in-quadrant[data-quadrant="2"] {
  grid-area: quadrant2;
  background-color: #87CEEB; 
}

section.quadrant > div > .in-quadrant[data-quadrant="3"] {
  grid-area: quadrant3;
  background-color: #00BFFF;
}

section.quadrant > div > .in-quadrant[data-quadrant="4"] {
  grid-area: quadrant4;
  background-color: #1E90FF;
}

Looks like this: