Plaan — № 7

index.html

<header role="banner" class="sr-only">
	<h1>Plan de salle du «&nbsp;Cercle des poètes disparus&nbsp;»</h1>
</header>
<main role="main" style="--rows:4; --cols:7;">
	<ul role="presentation" class="no-list no-margin" id="shadow">
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
		<li role="presentation"></li>
	</ul>
	<ul class="no-list no-margin" id="plan">
		<li style="--x:1; --y:2; --span:2;">M. Keating</li>
		<li style="--x:7; --y:4;">Neil Perry</li>
		<li style="--x:2; --y:4;">Todd Anderson</li>
		<li style="--x:5; --y:4;">Knox Overstreet</li>
		<li style="--x:4; --y:4;">Charlie Dalton</li>
		<li style="--x:3; --y:3;">Richard Cameron</li>
		<li style="--x:2; --y:2;">Steven Meeks</li>
		<li style="--x:5; --y:3;">Gerard Pitts</li>
		<li style="--x:2; --y:3;">Hopkins</li>
		<li style="--x:5; --y:1;">Stick</li>
	</ul>
</main>
<aside role="complementary">
</aside>

plaan-7.markdown

Plaan — № 7

A Pen by ffoodd on CodePen.

License.

style.css

[role="main"] {
  display: grid;
  gap: 1rem;
  grid-template: repeat(var(--rows, 4), 1fr) / repeat(var(--cols, 7), 1fr);
  height: 100vh;
  margin: 0;
  padding: 1rem;
  width: 100vw;
}

[id="plan"] {
	display: contents;
}

[id="plan"] [style] {
	grid-area: var(--y, 2) / var(--x, 2) / span var(--span, 1) / auto;
}

[id="shadow"] {
  display: contents;
}

[id="shadow"] [role="presentation"] {
	background: hsla(var(--muted-light), .25);
	border-radius: .25rem;
}

@supports not (grid-template-rows: subgrid) {
  [id="shadow"] [role="presentation"] {
    display: inline-block;
	}

  [id="shadow"] [role="presentation"]:first-child {
		grid-area: 1 / 1;
		width: 0;
	}

	[id="shadow"] [role="presentation"]:last-child {
		grid-area: var(--rows) / 1;
		width: 0;
  }
}

@supports (grid-template-rows: subgrid) {
  [id="shadow"] {
    display: grid;
    gap: 1rem;
    grid-area: 1 / 2 / span var(--rows) / span calc(var(--cols) - 1);
    grid-template-columns: repeat(calc(var(--cols) - 1), 1fr);
    grid-template-rows: subgrid;
  }
}

@media screen and (orientation: landscape) {
  li {
    height: 100%;
    margin: auto;
    width: 7rem;
		writing-mode: vertical-lr;
		writing-mode: sideways-lr;
  }
}

@media screen and (orientation: portrait) {
  main {
    writing-mode: vertical-rl;
  }

  li {
    writing-mode: horizontal-tb;
  }
}

styles

<link href="https://ffoodd.github.io/sseeeedd/css/styles.min.css" rel="stylesheet" />
<link href="https://ffoodd.github.io/sseeeedd/css/print.min.css" rel="stylesheet" />