Design changes

src/components/d-appendix.js

@@ -1,29 +1,32 @@
 import { Template } from '../mixins/template';
-import { page } from '../helpers/layout';
+import { body } from '../helpers/layout';
 
 const T = Template('d-appendix', `
 <style>
 
 :host {
+  box-sizing: border-box;
   display: block;
+  width: 100%;
+
   font-size: 13px;
   line-height: 1.7em;
   margin-bottom: 0;
   border-top: 1px solid rgba(0,0,0,0.1);
   color: rgba(0,0,0,0.5);
-  background: rgb(250, 250, 250);
+  background: hsl(180, 5%, 98%);
   padding-top: 36px;
   padding-bottom: 48px;
 }
 
-${page('.l-body')}
+${body('.content')}
 
 </style>
 
-<div class="l-body">
-  <slot></slot>
+<div class='content'>
+<slot></slot>
 </div>
-`);
+`, true);
 
 export class Appendix extends T(HTMLElement) {