1 files changed, 155 insertions, 0 deletions
diff --git a/src/templates/base.hbs b/src/templates/base.hbs
new file mode 100644
index 0000000..df3ba9d
--- /dev/null
+++ b/src/templates/base.hbs
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<style>
+		:root {
+			--balboa: #195970;
+		}
+
+		body {
+			margin: 0;
+			padding: 0;
+			font-size: 1em;
+		}
+
+		.model::before {
+			content: "⤷";
+		}
+
+		.topbar {
+			background-color: var(--balboa);
+			box-shadow: 0 0 0.5em black;
+			position: relative;
+			height: 3em;
+			z-index: 2;
+		}
+
+		.topbar ul {
+			margin: 0;
+			padding: 0;
+			overflow: hidden;
+		}
+
+		.topbar li {
+			float: left;
+			display: block;
+			padding: 14px 14px;
+		}
+
+		.topbar li.right {
+			float: right;
+		}
+
+		.topbar li a {
+			color: white;
+			text-decoration: none;
+		}
+
+		.sidebar {
+			background-color: var(--balboa);
+			box-shadow: inset -0.5em 0 0.5em -0.5em black;
+			z-index: 1;
+			position: fixed;
+			top: 3em;
+			left: 0;
+			width: 20%;
+			height: 100%;
+			transition: 0.25s;
+		}
+
+		.sidebar form {
+			padding: 10px 10px;
+		}
+
+		.sidebar button {
+			font-size: 1em;
+			display: block;
+			background: none;
+			border: 0 none;
+			cursor: pointer;
+			color: white;
+		}
+
+		.model {
+			margin-left: 20px;
+		}
+
+		#hidden:target .sidebar {
+			left: -20%;
+		}
+
+		.menuToggle a.openMenu {
+			display: none;
+		}
+
+		#hidden:target .menuToggle a.closeMenu {
+			display: none;
+		}
+
+		#hidden:target .menuToggle a.openMenu {
+			display: block;
+		}
+
+		#hidden:target section {
+			margin-left: 0;
+		}
+
+		.catalogTable {
+			width: 100%;
+			border-collapse: collapse;
+		}
+
+		.catalogTable td,
+		.catalogTable th {
+			padding: 0.5em;
+		}
+
+		.catalogTable tr:nth-child(even) {
+			background-color: #f2f2f2;
+		}
+
+		.catalogTable tr:hover {
+			background-color: #ddd;
+		}
+
+		.catalogTable th {
+			padding-top: 12px;
+			padding-bottom: 12px;
+			text-align: left;
+			background-color: var(--balboa);
+			color: white;
+		}
+
+		input[type="search"] {
+			width: 100%;
+		}
+
+		section {
+			/* TODO: need to make this not applicable to other templates that don't have sidebar */
+			margin-left: 20%;
+			transition: margin-left 0.25s;
+			padding-top: 2em;
+			padding-left: 2em;
+			padding-right: 2em;
+		}
+	</style>
+</head>
+
+<body id="hidden">
+	<nav class="topbar">
+		<ul>
+			{{~> navItem}}
+			<li><a href="/">Index</a></li>
+			<li><a href="#">Parts</a></li>
+			<li><a href="#">Cars</a></li>
+			<li><a href="#">Suggestions</a></li>
+			<li><a href="#">About</a></li>
+			<li class="right"><a href="/login">Login</a></li>
+		</ul>
+	</nav>
+
+	{{~> body}}
+</body>
+
+</html>