keanulee/demo.html

## demo.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Responsive drawer layout with flexbox</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    body {
      font-family: sans-serif;
      margin: 0;
    }
  </style>
</head>

<body>
  <x-shell>
    <style>
      x-nav {
        display: flex;
        min-height: 100vh;
      }

      x-nav > header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #DDD;
        padding: 8px;
        text-align: center;
        z-index: 2;
      }

      x-nav > button {
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 3;
      }

      x-nav > aside {
        width: 200px;
        background: #EEE;
        padding: 8px;
        z-index: 10;
      }

      x-nav > #scrim {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9;
        background: #000;
        visibility: hidden;
        opacity: 0;
        transition-property: opacity, visibility;
        transition-duration: 0.2s;
      }

      main {
        flex: 1;
        padding: 8px;
      }

      @media (max-width: 767px) {
        x-nav > aside {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          visibility: hidden;
          transform: translate3d(-100%, 0, 0);
          transition-property: transform, visibility;
          transition-duration: 0.2s;
        }

        x-nav.drawer-opened > aside,
        x-nav > button:focus ~ aside {
          visibility: visible;
          transform: translate3d(0, 0, 0);
        }

        x-nav.drawer-opened > #scrim,
        x-nav > button:focus ~ #scrim {
          visibility: visible;
          opacity: 0.5;
        }
      }
    </style>
    <x-nav>
      <header>My Site</header>

      <!-- This button is positioned over <header> - sibling of #scrim and aside for `:focus ~` no-JS fallback. -->
      <button onmousedown="document.querySelector('x-nav').classList.toggle('drawer-opened')">Toggle Drawer</button>

      <div id="scrim" onclick="document.querySelector('x-nav').classList.remove('drawer-opened')"></div>

      <aside>
        Sidebar content
        <ul>
          <li><a href="/page-1.html">Page 1</a></li>
          <li><a href="/page-2.html">Page 2</a></li>
          <li><a href="/page-3.html">Page 3</a></li>
        </ul>
      </aside>

      <main>

        <h1>Hello world!</h1>

        <p>Some sample content. Here's a link to <a href="/page-1.html">Page 1</a>.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ornare dui, et aliquet felis. Fusce rutrum odio vitae massa mattis porttitor. Duis mattis odio velit, vitae elementum nunc aliquam id. In ullamcorper arcu et consequat posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt viverra faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam magna dui, vehicula a placerat at, faucibus in augue. Nam purus turpis, blandit non odio sit amet, posuere auctor lectus. Cras arcu velit, malesuada ac accumsan a, condimentum vitae tellus. Sed eu venenatis leo. Integer dictum nisl mauris, ac lacinia dolor aliquet sed. Maecenas mattis scelerisque mi vel varius. Aenean non finibus eros, sit amet dapibus risus. Cras aliquam luctus felis, at laoreet neque imperdiet tincidunt. Morbi bibendum nibh sem, vel venenatis nulla pulvinar non.</p>

        <p>Nulla consectetur sem quis luctus vestibulum. Pellentesque sed sagittis ex. Suspendisse rutrum lorem quis diam posuere placerat. Integer ornare lectus ut leo euismod lobortis. Maecenas gravida est nunc, sodales tincidunt ante vulputate vel. Phasellus vitae ligula purus. Nam eu odio tristique, sollicitudin nibh ac, interdum leo. Nam condimentum pharetra purus. Fusce in ipsum quis mauris iaculis molestie at ac mi. Duis viverra venenatis eros, a tincidunt massa viverra et. Etiam iaculis a neque sed volutpat. Cras et faucibus erat. Duis vulputate suscipit egestas. Aenean posuere nec massa nec aliquet. Mauris viverra pellentesque sem.</p>

        <p>Nam in viverra tortor. Aliquam condimentum fermentum imperdiet. Aenean in tincidunt diam, volutpat consectetur sem. Aenean dignissim quis odio eget porttitor. Maecenas tincidunt feugiat justo ac tristique. Proin tempus egestas orci, sit amet facilisis lectus. Fusce at mauris commodo, pellentesque dolor nec, laoreet tortor. Ut placerat nisi ornare auctor dignissim. In non tempus mi. Aliquam rutrum condimentum massa in tristique. Cras ultrices venenatis urna, id euismod neque viverra ut. Donec cursus lorem et enim luctus facilisis. Aenean euismod faucibus lacus, sit amet sollicitudin nisi facilisis et. Pellentesque hendrerit maximus volutpat. Morbi non velit condimentum, pretium mauris vitae, tincidunt arcu. Nullam non tellus sed orci molestie consectetur.</p>

        <p>Nam est quam, consequat eu purus sit amet, pretium vestibulum tellus. Vivamus a porttitor leo, non faucibus neque. Aenean id sem volutpat, varius ex at, tempus justo. Praesent id nulla sed lectus dictum imperdiet eu at dolor. Sed aliquam lorem ut nisi varius, non venenatis tellus hendrerit. Mauris malesuada enim leo, quis vehicula lacus faucibus in. Donec eget sollicitudin enim, a tempor nisl. Proin sed aliquet nulla. Fusce a molestie lacus. Morbi maximus quam quis tempus dictum. Phasellus non lorem convallis, semper ligula sit amet, hendrerit justo. Nam nec pharetra nisl, placerat mattis tortor.</p>

        <p>Vestibulum scelerisque mi elit, tristique aliquet eros feugiat eget. Donec scelerisque quam sit amet dui lacinia, a bibendum erat dignissim. Proin dapibus auctor tortor, quis feugiat ex. Curabitur aliquet ex eu purus ullamcorper condimentum. Quisque lobortis, massa eu tincidunt blandit, augue elit sagittis mi, et hendrerit neque ante eget ante. Aenean blandit arcu a sapien convallis placerat eu sed velit. Praesent placerat volutpat massa, vel luctus lectus rhoncus sit amet. In hac habitasse platea dictumst. Sed eu posuere odio, in euismod leo. Cras ut aliquam quam, et pellentesque eros. Cras varius tellus quam, eu fermentum ante iaculis eget. Nunc vel tempor metus.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ornare dui, et aliquet felis. Fusce rutrum odio vitae massa mattis porttitor. Duis mattis odio velit, vitae elementum nunc aliquam id. In ullamcorper arcu et consequat posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt viverra faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam magna dui, vehicula a placerat at, faucibus in augue. Nam purus turpis, blandit non odio sit amet, posuere auctor lectus. Cras arcu velit, malesuada ac accumsan a, condimentum vitae tellus. Sed eu venenatis leo. Integer dictum nisl mauris, ac lacinia dolor aliquet sed. Maecenas mattis scelerisque mi vel varius. Aenean non finibus eros, sit amet dapibus risus. Cras aliquam luctus felis, at laoreet neque imperdiet tincidunt. Morbi bibendum nibh sem, vel venenatis nulla pulvinar non.</p>

        <p>Nulla consectetur sem quis luctus vestibulum. Pellentesque sed sagittis ex. Suspendisse rutrum lorem quis diam posuere placerat. Integer ornare lectus ut leo euismod lobortis. Maecenas gravida est nunc, sodales tincidunt ante vulputate vel. Phasellus vitae ligula purus. Nam eu odio tristique, sollicitudin nibh ac, interdum leo. Nam condimentum pharetra purus. Fusce in ipsum quis mauris iaculis molestie at ac mi. Duis viverra venenatis eros, a tincidunt massa viverra et. Etiam iaculis a neque sed volutpat. Cras et faucibus erat. Duis vulputate suscipit egestas. Aenean posuere nec massa nec aliquet. Mauris viverra pellentesque sem.</p>

        <p>Nam in viverra tortor. Aliquam condimentum fermentum imperdiet. Aenean in tincidunt diam, volutpat consectetur sem. Aenean dignissim quis odio eget porttitor. Maecenas tincidunt feugiat justo ac tristique. Proin tempus egestas orci, sit amet facilisis lectus. Fusce at mauris commodo, pellentesque dolor nec, laoreet tortor. Ut placerat nisi ornare auctor dignissim. In non tempus mi. Aliquam rutrum condimentum massa in tristique. Cras ultrices venenatis urna, id euismod neque viverra ut. Donec cursus lorem et enim luctus facilisis. Aenean euismod faucibus lacus, sit amet sollicitudin nisi facilisis et. Pellentesque hendrerit maximus volutpat. Morbi non velit condimentum, pretium mauris vitae, tincidunt arcu. Nullam non tellus sed orci molestie consectetur.</p>

        <p>Nam est quam, consequat eu purus sit amet, pretium vestibulum tellus. Vivamus a porttitor leo, non faucibus neque. Aenean id sem volutpat, varius ex at, tempus justo. Praesent id nulla sed lectus dictum imperdiet eu at dolor. Sed aliquam lorem ut nisi varius, non venenatis tellus hendrerit. Mauris malesuada enim leo, quis vehicula lacus faucibus in. Donec eget sollicitudin enim, a tempor nisl. Proin sed aliquet nulla. Fusce a molestie lacus. Morbi maximus quam quis tempus dictum. Phasellus non lorem convallis, semper ligula sit amet, hendrerit justo. Nam nec pharetra nisl, placerat mattis tortor.</p>

        <p>Vestibulum scelerisque mi elit, tristique aliquet eros feugiat eget. Donec scelerisque quam sit amet dui lacinia, a bibendum erat dignissim. Proin dapibus auctor tortor, quis feugiat ex. Curabitur aliquet ex eu purus ullamcorper condimentum. Quisque lobortis, massa eu tincidunt blandit, augue elit sagittis mi, et hendrerit neque ante eget ante. Aenean blandit arcu a sapien convallis placerat eu sed velit. Praesent placerat volutpat massa, vel luctus lectus rhoncus sit amet. In hac habitasse platea dictumst. Sed eu posuere odio, in euismod leo. Cras ut aliquam quam, et pellentesque eros. Cras varius tellus quam, eu fermentum ante iaculis eget. Nunc vel tempor metus.</p>

      </main>
    </x-nav>

  </x-shell>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Responsive drawer layout with flexbox</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	body {
	font-family: sans-serif;
	margin: 0;
	}
	</style>
	</head>

	<body>
	<x-shell>
	<style>
	x-nav {
	display: flex;
	min-height: 100vh;
	}

	x-nav > header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #DDD;
	padding: 8px;
	text-align: center;
	z-index: 2;
	}

	x-nav > button {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 3;
	}

	x-nav > aside {
	width: 200px;
	background: #EEE;
	padding: 8px;
	z-index: 10;
	}

	x-nav > #scrim {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9;
	background: #000;
	visibility: hidden;
	opacity: 0;
	transition-property: opacity, visibility;
	transition-duration: 0.2s;
	}

	main {
	flex: 1;
	padding: 8px;
	}

	@media (max-width: 767px) {
	x-nav > aside {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	visibility: hidden;
	transform: translate3d(-100%, 0, 0);
	transition-property: transform, visibility;
	transition-duration: 0.2s;
	}

	x-nav.drawer-opened > aside,
	x-nav > button:focus ~ aside {
	visibility: visible;
	transform: translate3d(0, 0, 0);
	}

	x-nav.drawer-opened > #scrim,
	x-nav > button:focus ~ #scrim {
	visibility: visible;
	opacity: 0.5;
	}
	}
	</style>
	<x-nav>
	<header>My Site</header>

	<!-- This button is positioned over <header> - sibling of #scrim and aside for `:focus ~` no-JS fallback. -->
	<button onmousedown="document.querySelector('x-nav').classList.toggle('drawer-opened')">Toggle Drawer</button>

	<div id="scrim" onclick="document.querySelector('x-nav').classList.remove('drawer-opened')"></div>

	<aside>
	Sidebar content
	<ul>
	<li><a href="/page-1.html">Page 1</a></li>
	<li><a href="/page-2.html">Page 2</a></li>
	<li><a href="/page-3.html">Page 3</a></li>
	</ul>
	</aside>

	<main>

	<h1>Hello world!</h1>

	<p>Some sample content. Here's a link to <a href="/page-1.html">Page 1</a>.</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ornare dui, et aliquet felis. Fusce rutrum odio vitae massa mattis porttitor. Duis mattis odio velit, vitae elementum nunc aliquam id. In ullamcorper arcu et consequat posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt viverra faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam magna dui, vehicula a placerat at, faucibus in augue. Nam purus turpis, blandit non odio sit amet, posuere auctor lectus. Cras arcu velit, malesuada ac accumsan a, condimentum vitae tellus. Sed eu venenatis leo. Integer dictum nisl mauris, ac lacinia dolor aliquet sed. Maecenas mattis scelerisque mi vel varius. Aenean non finibus eros, sit amet dapibus risus. Cras aliquam luctus felis, at laoreet neque imperdiet tincidunt. Morbi bibendum nibh sem, vel venenatis nulla pulvinar non.</p>

	<p>Nulla consectetur sem quis luctus vestibulum. Pellentesque sed sagittis ex. Suspendisse rutrum lorem quis diam posuere placerat. Integer ornare lectus ut leo euismod lobortis. Maecenas gravida est nunc, sodales tincidunt ante vulputate vel. Phasellus vitae ligula purus. Nam eu odio tristique, sollicitudin nibh ac, interdum leo. Nam condimentum pharetra purus. Fusce in ipsum quis mauris iaculis molestie at ac mi. Duis viverra venenatis eros, a tincidunt massa viverra et. Etiam iaculis a neque sed volutpat. Cras et faucibus erat. Duis vulputate suscipit egestas. Aenean posuere nec massa nec aliquet. Mauris viverra pellentesque sem.</p>

	<p>Nam in viverra tortor. Aliquam condimentum fermentum imperdiet. Aenean in tincidunt diam, volutpat consectetur sem. Aenean dignissim quis odio eget porttitor. Maecenas tincidunt feugiat justo ac tristique. Proin tempus egestas orci, sit amet facilisis lectus. Fusce at mauris commodo, pellentesque dolor nec, laoreet tortor. Ut placerat nisi ornare auctor dignissim. In non tempus mi. Aliquam rutrum condimentum massa in tristique. Cras ultrices venenatis urna, id euismod neque viverra ut. Donec cursus lorem et enim luctus facilisis. Aenean euismod faucibus lacus, sit amet sollicitudin nisi facilisis et. Pellentesque hendrerit maximus volutpat. Morbi non velit condimentum, pretium mauris vitae, tincidunt arcu. Nullam non tellus sed orci molestie consectetur.</p>

	<p>Nam est quam, consequat eu purus sit amet, pretium vestibulum tellus. Vivamus a porttitor leo, non faucibus neque. Aenean id sem volutpat, varius ex at, tempus justo. Praesent id nulla sed lectus dictum imperdiet eu at dolor. Sed aliquam lorem ut nisi varius, non venenatis tellus hendrerit. Mauris malesuada enim leo, quis vehicula lacus faucibus in. Donec eget sollicitudin enim, a tempor nisl. Proin sed aliquet nulla. Fusce a molestie lacus. Morbi maximus quam quis tempus dictum. Phasellus non lorem convallis, semper ligula sit amet, hendrerit justo. Nam nec pharetra nisl, placerat mattis tortor.</p>

	<p>Vestibulum scelerisque mi elit, tristique aliquet eros feugiat eget. Donec scelerisque quam sit amet dui lacinia, a bibendum erat dignissim. Proin dapibus auctor tortor, quis feugiat ex. Curabitur aliquet ex eu purus ullamcorper condimentum. Quisque lobortis, massa eu tincidunt blandit, augue elit sagittis mi, et hendrerit neque ante eget ante. Aenean blandit arcu a sapien convallis placerat eu sed velit. Praesent placerat volutpat massa, vel luctus lectus rhoncus sit amet. In hac habitasse platea dictumst. Sed eu posuere odio, in euismod leo. Cras ut aliquam quam, et pellentesque eros. Cras varius tellus quam, eu fermentum ante iaculis eget. Nunc vel tempor metus.</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ornare dui, et aliquet felis. Fusce rutrum odio vitae massa mattis porttitor. Duis mattis odio velit, vitae elementum nunc aliquam id. In ullamcorper arcu et consequat posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt viverra faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam magna dui, vehicula a placerat at, faucibus in augue. Nam purus turpis, blandit non odio sit amet, posuere auctor lectus. Cras arcu velit, malesuada ac accumsan a, condimentum vitae tellus. Sed eu venenatis leo. Integer dictum nisl mauris, ac lacinia dolor aliquet sed. Maecenas mattis scelerisque mi vel varius. Aenean non finibus eros, sit amet dapibus risus. Cras aliquam luctus felis, at laoreet neque imperdiet tincidunt. Morbi bibendum nibh sem, vel venenatis nulla pulvinar non.</p>

	<p>Nulla consectetur sem quis luctus vestibulum. Pellentesque sed sagittis ex. Suspendisse rutrum lorem quis diam posuere placerat. Integer ornare lectus ut leo euismod lobortis. Maecenas gravida est nunc, sodales tincidunt ante vulputate vel. Phasellus vitae ligula purus. Nam eu odio tristique, sollicitudin nibh ac, interdum leo. Nam condimentum pharetra purus. Fusce in ipsum quis mauris iaculis molestie at ac mi. Duis viverra venenatis eros, a tincidunt massa viverra et. Etiam iaculis a neque sed volutpat. Cras et faucibus erat. Duis vulputate suscipit egestas. Aenean posuere nec massa nec aliquet. Mauris viverra pellentesque sem.</p>

	<p>Nam in viverra tortor. Aliquam condimentum fermentum imperdiet. Aenean in tincidunt diam, volutpat consectetur sem. Aenean dignissim quis odio eget porttitor. Maecenas tincidunt feugiat justo ac tristique. Proin tempus egestas orci, sit amet facilisis lectus. Fusce at mauris commodo, pellentesque dolor nec, laoreet tortor. Ut placerat nisi ornare auctor dignissim. In non tempus mi. Aliquam rutrum condimentum massa in tristique. Cras ultrices venenatis urna, id euismod neque viverra ut. Donec cursus lorem et enim luctus facilisis. Aenean euismod faucibus lacus, sit amet sollicitudin nisi facilisis et. Pellentesque hendrerit maximus volutpat. Morbi non velit condimentum, pretium mauris vitae, tincidunt arcu. Nullam non tellus sed orci molestie consectetur.</p>

	<p>Nam est quam, consequat eu purus sit amet, pretium vestibulum tellus. Vivamus a porttitor leo, non faucibus neque. Aenean id sem volutpat, varius ex at, tempus justo. Praesent id nulla sed lectus dictum imperdiet eu at dolor. Sed aliquam lorem ut nisi varius, non venenatis tellus hendrerit. Mauris malesuada enim leo, quis vehicula lacus faucibus in. Donec eget sollicitudin enim, a tempor nisl. Proin sed aliquet nulla. Fusce a molestie lacus. Morbi maximus quam quis tempus dictum. Phasellus non lorem convallis, semper ligula sit amet, hendrerit justo. Nam nec pharetra nisl, placerat mattis tortor.</p>

	<p>Vestibulum scelerisque mi elit, tristique aliquet eros feugiat eget. Donec scelerisque quam sit amet dui lacinia, a bibendum erat dignissim. Proin dapibus auctor tortor, quis feugiat ex. Curabitur aliquet ex eu purus ullamcorper condimentum. Quisque lobortis, massa eu tincidunt blandit, augue elit sagittis mi, et hendrerit neque ante eget ante. Aenean blandit arcu a sapien convallis placerat eu sed velit. Praesent placerat volutpat massa, vel luctus lectus rhoncus sit amet. In hac habitasse platea dictumst. Sed eu posuere odio, in euismod leo. Cras ut aliquam quam, et pellentesque eros. Cras varius tellus quam, eu fermentum ante iaculis eget. Nunc vel tempor metus.</p>

	</main>
	</x-nav>

	</x-shell>
	</body>
	</html>