add some ✨ mixins ✨

noticed some content jump when switching between editors and preview on mobile. not sure what's causing this; but this commit improves (not fixes) the situation.

src/lib/components/code-input.svelte

@@ -10,21 +10,8 @@
 
 <style lang="less">
   textarea {
-    border: 1px solid @color-dark;
+    .container-content();
-    border-radius: @border-r-xl;
-    box-sizing: border-box;
-    font-size: @font-s-md;
-    height: .full-without-padding(@padding-lg-y) [];
-    margin: @padding-lg;
-    padding: @padding-lg;
-    resize: none;
-    width: .full-without-padding(@padding-lg-x) [];
 
-    @media screen and (min-width: @sizes[lg]) {
+    resize: none;
-      font-size: unset;
-      height: .full-without-padding(@padding-xl-y) [];
-      margin: @padding-xl;
-      width: .full-without-padding(@padding-xl-x) [];
-    }
   }
 </style>

src/lib/components/editor.svelte

@@ -21,6 +21,8 @@
 
 <style lang="less">
   div {
+    .container();
+
     grid-area: editor;
 
     &.hidden {

src/lib/components/preview.svelte

@@ -16,11 +16,6 @@
 </script>
 
 <main class:hidden class:mobile data-testid="preview-pane">
-  <h2>markdown:</h2>
-  <code>{markdown}</code>
-  <h2>stylesheet:</h2>
-  <code>{stylesheet}</code>
-  <h2>output:</h2>
   {#await output}
     <p>processing...</p>
   {:then result}
@@ -31,15 +26,14 @@
 </main>
 
 <style lang="less">
-  code {
-    display: block;
-    padding: @padding-md-x 0;
-  }
-
   main {
+    .container();
+
     grid-area: preview;
-    margin: 0;
+
-    padding: @padding-lg;
+    iframe {
+      .container-content();
+    }
 
     &.mobile {
       grid-area: editor;
@@ -49,10 +43,4 @@
       }
     }
   }
-
-  h2 {
-    font-weight: @font-w-semibold;
-    margin: 0;
-    padding: 0;
-  }
 </style>

src/styles.less

@@ -36,3 +36,27 @@
 .full-without-padding(@padding) {
   @result: calc(100% - @padding * 2);
 }
+
+// shared sizing mixins
+.container() {
+  box-sizing: border-box;
+  padding: @padding-lg;
+
+  @media screen and (min-width: @sizes[lg]) {
+    padding: @padding-xl;
+  }
+}
+
+.container-content() {
+  border: 1px solid @color-dark;
+  border-radius: @border-r-xl;
+  box-sizing: border-box;
+  font-size: @font-s-md;
+  height: 100%;
+  padding: @padding-lg;
+  width: 100%;
+
+  @media screen and (min-width: @sizes[lg]) {
+    font-size: unset;
+  }
+}