Rewrite all css to scss and refactor html

rpg-docs/client/views/layout/layout.html

@@ -1,5 +1,5 @@
 <template name="layout">
-	<core-drawer-panel responsiveWidth="900px">
+	<core-drawer-panel responsiveWidth="905px">
 		<core-header-panel drawer navigation flex mode="seamed" class="white">
 			<div id="accountSummary">
 				{{#if currentUser}}
@@ -33,7 +33,9 @@
 			<section id="detailSection">
 				<div id="detailScreenFiller">
 					<div id="screenDim" cross-fade></div>
-					<paper-shadow id="globalDetail" z="5" animated hero hero-id="main">
+					<paper-shadow id="globalDetail" class="card" z="5"
+								  animated hero hero-id="main"
+								  layout vertical>
 						{{#if globalDetailTemplate}}
 							{{> UI.dynamic template=globalDetailTemplate data=globalDetailData}}
 						{{/if}}

rpg-docs/client/views/layout/layout.js

@@ -23,9 +23,11 @@ Template.layout.helpers({
 Template.layout.events({
 	"tap #homeNav": function(event, instance){
 		Router.go("/");
+		instance.find("core-drawer-panel").closeDrawer();
 	},
 	"tap #profileLink": function(event, instance){
 		Router.go("profile");
+		instance.find("core-drawer-panel").closeDrawer();
 	},
 	"tap #feedback": function(event, instance) {
 		GlobalUI.showDialog({
@@ -33,8 +35,10 @@ Template.layout.events({
 			template: "feedback",
 			fullOnMobile: true,
 		});
+		instance.find("core-drawer-panel").closeDrawer();
 	},
 	"tap #changeLog": function(event, instance) {
 		Router.go("changeLog");
+		instance.find("core-drawer-panel").closeDrawer();
 	},
 });