Improved styling responsivenes

markdown-previewer/src/App.js

@@ -1,8 +1,7 @@
 import React from "react";
 import { marked } from "marked";
-import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
-import { faFileLines } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPenToSquare, faFileLines } from "@fortawesome/free-solid-svg-icons";
 import "./App.scss";
 
 marked.setOptions({
@@ -24,38 +23,45 @@ class App extends React.Component {
 
   render() {
     return (
-      <div className="App container-fluid vh-100">
+      <div class="container-fluid">
-        <div className="row">
+        <div class="row min-vh-100">
-          <div className="editor-topbar col-md-6 border border-dark border-2">
+          <div class="col-12 col-md-6 bg-red">
-            <h3 className="text-white text-center">
+            <div class="d-flex flex-column h-100">
-              <FontAwesomeIcon icon={faPenToSquare} />
+              <div class="row bg-color-6 text-white">
-              {` Editor`}
+                <h3 className="text-white text-center">
-            </h3>
+                  <FontAwesomeIcon icon={faPenToSquare} />
-          </div>
+                  {` Editor`}
-          <div className="preview-topbar col-md-6 border border-dark border-2">
+                </h3>
-            <h3 className="text-white text-center">
+              </div>
-              <FontAwesomeIcon icon={faFileLines} />
+              <div class="row bg-blue flex-grow-1 text-white">
-              {` Preview`}
+                <textarea
-            </h3>
+                  className="text-justify px-3 py-1 form-control p-0 rounded-0"
-          </div>
+                  style={{ "min-height": 300 }}
-        </div>
+                  id="editor"
-        <div className="row h-100">
+                  value={this.state.markdown}
-          <div className="col-md-6 p-0 border border-dark border-2">
+                  onChange={this.handleMarkdownChange}
-            <textarea
+                ></textarea>{" "}
-              className="text-justify h-100 px-3 py-1 form-control p-0 rounded-0"
+              </div>
-              id="editor"
+            </div>
-              value={this.state.markdown}
-              onChange={this.handleMarkdownChange}
-            ></textarea>
           </div>
-          <div className="col-md-6 p-0 border border-dark border-2">
+          <div class="col-12 col-md-6 bg-red">
-            <div className="" id="preview">
+            <div class="d-flex flex-column h-100">
-              <div
+              <div class="row bg-color-8 text-white">
-                className="text-justify vh-100 px-3 py-1 m-0 overflow-auto markdown-body"
+                <h3 className="text-white text-center">
-                dangerouslySetInnerHTML={{
+                  <FontAwesomeIcon icon={faFileLines} />
-                  __html: marked.parse(this.state.markdown),
+                  {` Preview`}
-                }}
+                </h3>
-              />
+              </div>
+              <div class="row bg-blue flex-grow-1 text-white">
+                <div
+                  className="text-justify px-3 py-1 m-0 overflow-auto markdown-body"
+                  style={{ "min-height": 300 }}
+                  id="preview"
+                  dangerouslySetInnerHTML={{
+                    __html: marked.parse(this.state.markdown),
+                  }}
+                />{" "}
+              </div>
             </div>
           </div>
         </div>

markdown-previewer/src/App.scss

@@ -1,11 +1,3 @@
-@font-face {
-  font-family: "quicksand";
-  /* license: url("https://radii.page/fonts/Quicksand-Regular.txt"); */
-  src: local("quicksand") url("./quicksand.ttf") format("tff");
-}
-
-/*$font-family-base: quicksand, roboto !default;*/
-
 @import "~bootstrap/scss/bootstrap";
 @import "~github-markdown-css/github-markdown.css";
 
@@ -20,18 +12,6 @@ $colors: #73a857, #3f2e7a, #bdbb99, #77b1a9, #fb6964, #9b59b6, #2c3e50, #27ae60,
   .bg-color-#{$i} {
     background-color: $color;
     color: white;
-    &:hover {
-      background-color: darken($color, 10%);
-      color: white;
-    }
-    &:focus {
-      background-color: $color;
-      color: white;
-    }
-    &:focus:hover {
-      background-color: darken($color, 10%);
-      color: white;
-    }
   }
 }
 

markdown-previewer/src/index.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }