Improved styling

editor/package.json

@@ -1,6 +1,9 @@
 {
   "devDependencies": {
     "@editorjs/attaches": "^1.0.1",
+    "clean-webpack-plugin": "^3.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "scss-loader": "0.0.1",
     "webpack": "^4.39.2",
     "webpack-cli": "^3.3.7"
   },
@@ -15,9 +18,8 @@
     "@editorjs/marker": "^1.2.1",
     "@editorjs/table": "^1.2.0",
     "axios": "^0.19.0",
-    "clean-webpack-plugin": "^3.0.0",
+    "bulma": "^0.7.5",
     "css-loader": "^3.2.0",
-    "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^7.3.1",
     "style-loader": "^1.0.0",

editor/src/index.js

@@ -13,7 +13,7 @@ import Image from '@editorjs/image';
 import axios from 'axios';
 import qs from 'querystring'
 
-import './styles.css';
+import './styles.scss';
 
 function addSaver(editor, saveUrl, page, beforeSave) {
     return {

editor/src/styles.css

@@ -1,18 +0,0 @@
-#editor {
-    max-width: 650px;
-    margin: 0 auto;
-}
-
-#save-indicator {
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: lightskyblue;
-    font-weight: bold;
-    color: white;
-    padding: 3px;
-    z-index: 50;
-}
-.hidden {
-    display: none;
-}

editor/src/styles.scss

@@ -0,0 +1,58 @@
+@import "~bulma";
+
+#editor {
+    max-width: 650px;
+    margin: 0 auto;
+}
+
+#save-indicator {
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: lightskyblue;
+    font-weight: bold;
+    color: white;
+    padding: 3px;
+    z-index: 50;
+}
+.hidden {
+    display: none;
+}
+
+.codex-editor .icon {
+    align-items: initial;
+    display: initial;
+    justify-content: initial;
+    height: initial;
+    width: initial;
+}
+
+.codex-editor h1.ce-header {
+    @extend .title;
+    @extend .title.is-1;
+}
+
+.codex-editor h2.ce-header {
+    @extend .title;
+    @extend .is-2;
+}
+
+.codex-editor h3.ce-header {
+    @extend .title;
+    @extend .is-3;
+}
+
+.codex-editor h4.ce-header {
+    @extend .title;
+    @extend .is-4;
+}
+
+.codex-editor h5.ce-header {
+    @extend .title;
+    @extend .is-5;
+}
+
+.codex-editor h6.ce-header {
+    @extend .title;
+    @extend .is-6;
+}

editor/webpack.config.js

@@ -1,6 +1,5 @@
 const path = require('path');
 
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 
 module.exports = {
@@ -16,8 +15,8 @@ module.exports = {
     module: {
         rules: [
             {
-                test: /\.css$/,
+                test: /\.s?css$/,
-                use: ['style-loader', 'css-loader']
+                use: ['style-loader', 'css-loader', 'sass-loader']
             }
         ]
     },