Integrate new CSS into textComposer component

components/textComposer.vue

@@ -8,9 +8,9 @@
         @change='editorChange($event)'
       ></quill-editor>
     </no-ssr>
-    <div class='compose-tools'>
-      <button @click='editorContent=""' ref='clearButton' class='button is-medium'>Clear</button>
-      <button ref='postButton' class='button is-medium is-primary'>Post</button>
+    <div class='compose-tools buttons'>
+      <button @click='editorContent=""' ref='clearButton' class='button'>Clear</button>
+      <button ref='postButton' class='button is-primary'>Post</button>
     </div>
   </div>
 </template>
@@ -55,54 +55,41 @@ export default {
 </script>
 
 <style>
-.button.is-medium {
-  font-size: 1.5vmax;
+.compose
+{
+  margin-bottom: 1em;
 }
 
-.button.is-medium:not(:first-of-type)
+.compose-tools
 {
-  margin-left: 1vmax;
+  /* override Bulma default for .buttons to align to right */
+  justify-content: flex-end;
 }
 
-.compose {
-  margin-bottom: 2vmax;
+.quill-editor
+{
+  /* make editor window full-width by default */
+  margin-right: -1rem;
+  margin-left: -1rem;
+  margin-bottom: 1em;
 }
 
-.compose-tools {
-  height: 3.4vmax;
-  text-align: right;
+.ql-editor
+{
+  padding-top: 0;
 }
 
-.quill-editor {
-  margin-bottom: 1vmax;
-  margin-left: -2vmax;
-  margin-right: -2vmax;
-
+.ql-container
+{
+  /* reset so doesn’t use px for font size */
+  font-size: 1em;
 }
 
-.ql-editor {
-  font-size: 2vmax;
-}
+/* The editor only has a top and bottom border to mark its boundaries. Otherwise, it is styled exactly like the rest of the content to underscore its purpose. When a post is submitted, the minimal chrome around the editor simply fades away and the content becomes part of the page. */
 
-/* The editor only has a top and bottom border to mark its boundaries. Otherwise,
-   it is styled exactly like the rest of the content to underscore its purpose.
-   When a post is submitted, the minimal chrome around the editor simply fades
-   away and the content becomes part of the page. */
-.ql-container.ql-snow {
-  border-left: none;
+.ql-container.ql-snow
+{
   border-right: none;
-}
-
-.ql-editor p, .ql-snow .ql-editor blockquote, .ql-snow .ql-editor img {
-  margin-bottom: 2vmax;
-}
-
-.ql-snow .ql-editor h1 {
-  font-size: 4vmax;
-  margin-bottom: 1.5vmax;
-}
-
-.ql-editor h2 {
-  margin-bottom: .75em;
+  border-left: none;
 }
 </style>