add basic style to demo

src/components/Demo.vue

@@ -1,11 +1,15 @@
 <template>
-  <div>
-    <component :is="mainFile" v-if="mainFile" />
-    <div v-for="(file, index) in files" :key="index">
-      <p>
-        {{ file.name }}
-      </p>
-      <pre :class="`language-${file.highlight}`"><code :class="`language-${file.highlight}`" v-html="$options.filters.highlight(file.content, file.highlight)"></code></pre>
+  <div class="demo">
+    <div class="demo__preview" v-if="mainFile">
+      <component :is="mainFile" />
+    </div>
+    <div class="demo__source">
+      <div v-for="(file, index) in files" :key="index">
+        <p>
+          {{ file.name }}
+        </p>
+        <pre :class="`language-${file.highlight}`"><code :class="`language-${file.highlight}`" v-html="$options.filters.highlight(file.content, file.highlight)"></code></pre>
+      </div>
     </div>
   </div>
 </template>
@@ -59,3 +63,5 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" src="./style.scss" scoped />

src/components/style.scss

@@ -0,0 +1,15 @@
+.demo {
+  background-color: $colorWhite;
+  border-radius: 0.5rem;
+  border: 2px solid $colorBlack;
+  
+  &__preview {
+    padding: 1rem;
+  }
+  
+  &__source {
+    padding: 1rem;
+    background-color: $colorBlack;
+    color: $colorWhite;
+  }
+}

src/layouts/Default.vue

@@ -17,9 +17,9 @@ query {
 }
 </static-query>
 
-<style>
+<style lang="scss">
 body {
-  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+  font-family: 'Inter', -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
   margin:0;
   padding:0;
   line-height: 1.5;
@@ -43,4 +43,8 @@ body {
 .nav__link {
   margin-left: 20px;
 }
+
+*:focus {
+  outline: none;
+}
 </style>

src/variables.scss

@@ -0,0 +1,2 @@
+$colorWhite: #FFF;
+$colorBlack: #000;