updated preview to account for underlay

src/App.scss

@@ -31,9 +31,11 @@ h4 {
   margin: auto;
   min-height: 100vh;
   max-width: 980px;
+  align-content: flex-start;
+}
+.underlay {
   background-color: rgba(0,0,0,0.15);
   background-color: var(--underlay, rgba(0,0,0,0.15));
-  align-content: flex-start;
 }
 
 .text-center {

src/App.vue

@@ -78,7 +78,7 @@
     </nav>
     <div
       id="content"
-      class="container"
+      class="container underlay"
     >
       <div class="sidebar-flexer mobile-hidden">
         <div class="sidebar-bounds">

src/components/style_switcher/preview.vue

@@ -1,4 +1,6 @@
 <template>
+  <div class="preview-container">
+    <div class="underlay underlay-preview"/>
     <div class="panel dummy">
       <div class="panel-heading">
         <div class="title">
@@ -98,4 +100,18 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
+
+<style lang="scss">
+.preview-container {
+  position: relative;
+}
+.underlay-preview {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 10px;
+  right: 10px;
+}
+</style>

src/components/style_switcher/style_switcher.vue

@@ -116,9 +116,7 @@
       </div>
     </div>
 
-    <div class="preview-container">
     <preview :style="previewRules" />
-    </div>
 
     <keep-alive>
       <tab-switcher key="style-tweak">