Added editing function for pages (using tinymce).

Added editing pages for footer, banner, aside.
Added page overview.
Added public page.
Added settings page.
Added generator for embed pseudocodes.

themes/default/default.css

@@ -0,0 +1,187 @@
+/**
+ * Default theme for the backend of md:cms.
+ */
+
+/****************************
+ * Load fonts
+ */
+
+@font-face {
+    font-family: sourceSansPro;
+    src: local('Source-Sans-Pro'), local('Source Sans Pro'),
+        url(./fonts/SourceSansPro-Regular.woff2) format('woff2'),
+        url(./fonts/SourceSansPro-Regular.ttf) format('truetype');
+}
+
+/****************************
+ * General
+ */
+
+html { margin: 0; padding: 0; }
+body { margin: 0; padding: 0; font-family: sourceSansPro; font-size: 1.15em; line-height: 1.5; }
+
+* { box-sizing: border-box; z-index: 1; }
+a { color: inherit; text-decoration: none; }
+
+a.buttonLike { display: inline-block; }
+
+a.buttonLike,
+select,
+button,
+textarea,
+input   { padding: .6em .8em; background: #FAFAFA; border: 1px solid #CFD8DC; font-family: roboto; font-size: inherit; 
+          border-radius: .3em; transition: background .1s, box-shadow .1s; box-sizing: border-box; }
+button  { padding: .6em; }
+select  { padding: .3em .8em; }
+textarea { line-height: 1.4em; }
+
+a.buttonLike:hover,
+select:hover,
+button:hover,
+textarea:hover,
+input:hover { background: #FFF; box-shadow: 1px 1px 3px #CFD8DC; }
+
+a.buttonLike:focus,
+select:focus,
+button:focus,
+textarea:focus,
+input:focus { background: #FFF; box-shadow: 1px 1px 3px #607D8B; }
+
+input[type="range"] { background: inherit; border: 0; }
+.mceEditor { min-height: calc(80vh - 10em); }
+.mce-container, .mcePanel { box-sizing: border-box !important; }
+
+table { width: 100%; border-collapse: collapse; }
+th    { text-align: left; }
+
+.noPadding { padding: 0 0 0 0 !important; }
+.invisible { display: none !important; }
+
+input.h1Input     { display: block; width: 100%; font-size: 1.5em; border-radius: 0; }
+#inputSection > * { display: block; width: 100%; }
+
+aside     { width: 300px; margin-right: 3em; }
+aside > * { display: block; padding: 1em; border: 1px solid #D6D6D6; }
+
+/****************************
+ * Main Structuring Elements
+ */
+
+/************
+ * Main Header
+ * Displays current position and offers access
+ */
+
+#mainHeader     { display: table; width: 100%; padding: 0 5vw; border-bottom: 1px solid #D6D6D6; }
+#mainHeader > * { display: table-cell; padding: .5rem 0; color: #666; vertical-align: middle; }
+#mainHeader h1  { color: #333; }
+
+/************
+ * Banner
+ */
+
+body > header:nth-child(2)   { margin: 0; padding: 0; }
+body > header:nth-child(2) p { margin: 0; padding: 0; }
+body > header:nth-child(2) img { width: 100vw; height: 20vh; object-fit: cover; margin-bottom: -.4em; }
+
+/************
+ * Main wrapper
+ * Contains the navigation and the main part.
+ */
+
+div#mainWrapper { display: block; padding-left: 5vw; padding-right: 5vw; }
+
+@media screen and (min-width: 75em) {
+    div#mainWrapper     { display: table; width: 100%; }
+    div#mainWrapper > * { display: table-cell; vertical-align: top; }
+}
+
+/************
+ * Main navigation
+ */
+
+body > nav              { display: block; background: #212121; color: #EEE;
+                          border: 1px solid #D6D6D6; border-width: 0; padding: 0 5vw; }
+body > nav ul           { list-style: none; margin: 0; padding: 0 0; }
+body > nav li           { position: relative; }
+body > nav > ul         { display: block; border-bottom: 1px solid #D6D6D6; }
+body > nav > ul > li    { display: inline-block; }
+body > nav > ul > li ul { position: absolute; left: 0; top: 100%;
+                          background: #424242; color: #EEE; z-index: 2; animation: fade-in .4s; }
+body > nav > ul > li ul ul { left: 100%; top: 0; background: #666; color: #EEE; }
+
+body > nav li ul         { display: none; }
+body > nav li:hover > ul { display: block; animation: fade-in .4s; }
+
+body > nav > ul > li a       { display: block; padding: .6em .8em; transition: background .4s, color .4s; }
+body > nav > ul > li a:hover { background: #000; color: #FFF; }
+
+/************
+ * Main part of the page.
+ */
+
+main { padding: .5em 5em 3em 0; text-align: justify; }
+
+/************
+ * Main footer.
+ */
+
+body > footer { margin: 1em 5vw 2em 5vw; padding: 1em 0; background: #FFF; color: #666;
+                border-top: 1px solid #AAA; }
+
+/************
+ * Editing Static Pages
+ */
+
+#staticPageOptions > *              { display: block; padding: .5em 1rem; }
+#staticPageOptions > .labelLine     { display: table; width: 100%; }
+#staticPageOptions .helpToolTip     { width: 2em; text-align: center; }
+#staticPageOptions > .labelLine > * { display: table-cell; }
+#staticPageOptions label            { font-weight: bold; }
+#staticPageOptions select           { display: block; width: 100%; }
+#staticPageOptions button           { display: block; width: 100%; background: #0277BD; color: #FFF; transition: background .4s; }
+#staticPageOptions button:hover     { background: #039BE5; }
+
+#embedGenerator { margin-bottom: 1em; border-bottom: 1px solid #D6D6D6; }
+
+#pageTools > * { padding: 0 1rem; }
+
+/************
+ * Login Page
+ */
+
+#loginPage body     { position: absolute; left: 50%;
+                      width: 400px; max-width: 100%; transform: translate(-50%); }
+#loginPage form > * { display: block; width: 100%; }
+
+#errorMsg           { display: block; padding: .8em; text-align: center;
+                      background: #E53935; color: #FFF; box-shadow: 1px 1px 3px #757575; }
+
+/************
+ * Error page.
+ */
+
+#errorPage body     { position: absolute; left: 50%; top: 50%;
+                      width: 400px; max-width: 100%; transform: translate(-50%, -50%); }
+#errorPage body > * { display: block; padding: 2em; background: #212121; color: #FFF;
+                      font-weight: bold; text-align: center; border-radius: .5em; }
+
+/************
+ * Larger screens.
+ */
+@media screen and (min-width: 95em) {
+    #mainHeader,
+    body > nav,
+    div#mainWrapper,
+    body > footer { margin: 0 0; padding-left: 15rem; padding-right: 15rem; }
+}
+
+/****************************
+ * Animations
+ */
+
+@keyframes fade-in {
+    from { opacity: 0.4; }
+    to   { opacity: 1.0; }
+}
+