Fullscreen More Info

Semantic fullscreen "more info" content toggle.

by the_voder

HTML

<details>
	<summary>More Info</summary>
	<div class="underlay"></div>
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada felis et justo rutrum vulputate. Donec porttitor malesuada mauris, ut ultricies augue semper vitae. Nulla bibendum id neque ut tempor. In a luctus leo. Ut hendrerit dolor non lectus condimentum venenatis. Integer vel dapibus enim. Sed bibendum elit neque, non porttitor justo rutrum in.</p>
	</div>
</details>

CSS

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 10px;
}

details>div {
  position: fixed;
  box-sizing: border-box;
  width: 80vw;
  left: 10vw;
  background-color: #fff;
  padding: 20px;
}

details>.underlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  margin: 0;
  top: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
  transition: all 2s;
}

summary {
  padding: 10px;
  outline: none;
}