1 files changed, 73 insertions, 75 deletions
diff --git a/src/templates/base.hbs b/src/templates/base.hbs
index df3ba9d..d80124b 100644
--- a/src/templates/base.hbs
+++ b/src/templates/base.hbs
@@ -7,62 +7,47 @@
 			--balboa: #195970;
 		}
 
-		body {
+		html,
+		body,
+		main {
 			margin: 0;
 			padding: 0;
+		}
+
+		body {
 			font-size: 1em;
 		}
 
-		.model::before {
-			content: "⤷";
+		nav,
+		main,
+		aside {
+			display: flex;
+			flex-direction: column;
 		}
 
-		.topbar {
+		nav {
 			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 {
+		nav a {
+			padding: 1em 1em;
 			color: white;
+			text-align: center;
 			text-decoration: none;
 		}
 
-		.sidebar {
-			background-color: var(--balboa);
-			box-shadow: inset -0.5em 0 0.5em -0.5em black;
+		aside {
+			flex-grow: 1;
 			z-index: 1;
-			position: fixed;
-			top: 3em;
-			left: 0;
-			width: 20%;
+			flex-direction: column;
 			height: 100%;
-			transition: 0.25s;
-		}
-
-		.sidebar form {
-			padding: 10px 10px;
+			background-color: var(--balboa);
+			padding: 0.5em;
 		}
 
-		.sidebar button {
+		aside button {
 			font-size: 1em;
 			display: block;
 			background: none;
@@ -71,85 +56,98 @@
 			color: white;
 		}
 
-		.model {
-			margin-left: 20px;
+		aside button.model::before {
+			content: "⤷";
 		}
 
-		#hidden:target .sidebar {
-			left: -20%;
+		article {
+			flex-grow: 3;
+			padding: 0.5em;
 		}
 
-		.menuToggle a.openMenu {
+		#hidden:target aside {
 			display: none;
 		}
 
-		#hidden:target .menuToggle a.closeMenu {
+		#hidden:target a.openMenu {
+			display: block;
+		}
+
+		a.openMenu {
 			display: none;
 		}
 
-		#hidden:target .menuToggle a.openMenu {
-			display: block;
+		#hidden:target a.closeMenu {
+			display: none;
 		}
 
-		#hidden:target section {
-			margin-left: 0;
+		input[type="search"] {
+			width: 100%;
 		}
 
-		.catalogTable {
+		section {
+			padding-top: 2em;
+		}
+
+		table {
 			width: 100%;
 			border-collapse: collapse;
 		}
 
-		.catalogTable td,
-		.catalogTable th {
+		td,
+		th {
 			padding: 0.5em;
 		}
 
-		.catalogTable tr:nth-child(even) {
+		tr:nth-child(even) {
 			background-color: #f2f2f2;
 		}
 
-		.catalogTable tr:hover {
+		tr:hover {
 			background-color: #ddd;
 		}
 
-		.catalogTable th {
-			padding-top: 12px;
-			padding-bottom: 12px;
+		th {
+			padding-top: 0.25em;
+			padding-bottom: 0.25em;
 			text-align: left;
 			background-color: var(--balboa);
 			color: white;
 		}
 
-		input[type="search"] {
-			width: 100%;
-		}
+		@media only screen and (min-width: 700px) {
 
-		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;
+			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 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>
+		<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>
 
-	{{~> body}}
+	<main>
+		{{~> main}}
+	</main>
 </body>
 
 </html>