add markdown-previewer

markdown-previewer/markdownPreviewer.css

@@ -0,0 +1,108 @@
+body {
+  display: flex;
+  flex-direction: column;
+  background-color: #eee8d5;
+  color: #073642;
+  overflow: hidden;
+}
+
+#editorAndPreview {
+  display: flex;
+}
+
+#buttonHeader {
+  height: 3rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+#eraseButton {
+  background-color: #dc322f;
+  color: #fdf6e3;
+}
+
+#reloadButton {
+  background-color: #268bd2;
+  color: #fdf6e3;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+#editor {
+  font: monospace;
+  border: none;
+  outline: none;
+  background-color: #073642;
+  color: #eee8d5;
+}
+
+#editor, #preview {
+  padding: 0px 3rem 0px 3rem;
+}
+
+#preview {
+  overflow: auto;
+}
+
+code {
+  font: monospace;
+  background-color: LightGrey;
+}
+
+blockquote {
+  background: #f9f9f9;
+  border-left: 10px solid #ccc;
+  margin: 1.5em 10px;
+  padding: 0.5em 10px;
+  quotes: "\201C""\201D""\2018""\2019";
+}
+blockquote:before {
+  color: #ccc;
+  content: open-quote;
+  font-size: 4em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+blockquote p {
+  display: inline;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+@media  (orientation: landscape) {
+  #editorAndPreview {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+  #textEditor, #preview {
+    width: 50vw;
+    height: 95vh;
+  }
+  #editor {
+    resize: none;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media  (orientation: portrait) {
+  #buttonHeader {
+    height: 3rem;
+  }
+  #editorAndPreview {
+    flex-direction: column;
+  }
+  #editor {
+    height: 43vh;
+    width: 100vw;
+  }
+  #preview {
+    overflow: scroll;
+    height: 50vh;
+  }
+}