path: root/src/templates/base.hbs



<!DOCTYPE html>
<html>

<head>
	<style>
		:root {
			--balboa: #195970;
		}

		html,
		body,
		main {
			margin: 0;
			padding: 0;
		}

		body {
			font-size: 1em;
		}

		nav,
		main,
		aside {
			display: flex;
			flex-direction: column;
		}

		nav {
			background-color: var(--balboa);
			box-shadow: 0 0 0.5em black;
			z-index: 2;
		}

		nav a {
			padding: 1em 1em;
			color: white;
			text-align: center;
			text-decoration: none;
		}

		aside {
			flex-grow: 1;
			z-index: 1;
			flex-direction: column;
			height: 100%;
			background-color: var(--balboa);
			padding: 0.5em;
		}

		aside button {
			font-size: 1em;
			display: block;
			background: none;
			border: 0 none;
			cursor: pointer;
			color: white;
		}

		aside button.model::before {
			content: "⤷";
		}

		article {
			flex-grow: 3;
			padding: 0.5em;
		}

		#hidden:target aside {
			display: none;
		}

		#hidden:target a.openMenu {
			display: block;
		}

		a.openMenu {
			display: none;
		}

		#hidden:target a.closeMenu {
			display: none;
		}

		input[type="search"] {
			width: 100%;
		}

		section {
			padding-top: 2em;
		}

		table {
			width: 100%;
			border-collapse: collapse;
		}

		td,
		th {
			padding: 0.5em;
		}

		tr:nth-child(even) {
			background-color: #f2f2f2;
		}

		tr:hover {
			background-color: #ddd;
		}

		th {
			padding-top: 0.25em;
			padding-bottom: 0.25em;
			text-align: left;
			background-color: var(--balboa);
			color: white;
		}

		@media only screen and (min-width: 700px) {

			nav,
			main {
				flex-direction: row;
			}

			aside {
				box-shadow: inset -0.5em 0.5em 0.5em -0.5em black;
			}

			html,
			body,
			main {
				height: 100%;
			}
		}
	</style>
</head>

<body id="hidden">
	<nav>
		<a href="/">Index</a>
		<a href="#">Parts</a>
		<a href="#">Cars</a>
		<a href="#">Suggestions</a>
		<a href="#">About</a>
		<a href="/login">Login</a>
	</nav>

	<main>
		{{~> main}}
	</main>
</body>

</html>