import Nav from './nav.svelte'

</script>

<div id='site'>

<header>

<!-- {'#'} is used to silence A11y warning, just for the sake of this demo -->

<a href={'#'}><h1>LOGO</h1></a>

<Nav />

</header>

<main>

<p>

This is the skeleton of a website that contains information about the planets and moons of the Sol System.

</p>

<p>

Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

</p>

<p>

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo.

</p>

</main>

<footer>

<Nav />

</footer>

</div>

<style>

#site {

display: flex;

flex-direction: column;

min-height: calc(100vh - 16px);

margin: 0 auto;

max-width: 55rem;