Move minifying and bundling JS and CSS to compile.php, add header

Close #17

public/assets/css/csvxml.css

@@ -1,11 +1,13 @@
-@import 'editMenu.css';
+/*
+ * @import 'editMenu.css';
 @import 'dialogue.css';
+ */
 :root {
     --color-bg-normal: #FFF;
     --color-bg-raised: #EEE;
     --color-bg-raised2: #FAFAFA;
     --color-fg-normal: #000;
-    --color-fg-less:   #212121;
+    --color-fg-less: #212121;
     --color-borders: #D6D6D6;
     --color-borders-dark: #646464;
 
@@ -48,12 +50,14 @@
 
 * { box-sizing: border-box; z-index: 1; }
 
-body { margin: 2em; background: var(--color-bg-normal); color: var(--color-fg-normal);
+body { margin: 0; background: var(--color-bg-normal); color: var(--color-fg-normal);
        font-family: sourceSansPro, Arial, Helvetica, Times; font-size: 1.2em; line-height: 1.5em; }
 
 a { text-decoration: none; color: inherit; }
 
-h1     { display: block; max-width: 600px; margin: 0 auto 1.5em auto; line-height: 1.2em; }
+h1     { display: block; width: 100%; text-align: center; margin: 0 auto 1.5em auto;
+    padding: 1em 0;
+    font-size: 2.5em; line-height: 1.2em; }
 h1 > * { display: inline-block; vertical-align: middle; color: var(--color-fg-less); }
 h1 img { height: 2em; margin-right: .5em; border-radius: .1em; opacity: .7; transition: opacity .4s; }
 h1 img:hover { opacity: 1; }
@@ -121,7 +125,7 @@ ul.fieldList { display: block; margin: .5em 0; padding: 0 0; list-style: none; }
 ul.fieldList > li { display: inline-block; margin: .1em; padding: .3em;
     border: 1px solid var(--color-borders); background: var(--color-bg-raised2);
     color: var(--color-fg-normal);
-    cursor: pointer; transition: background .4s, border .4s, box-shadow .4s;; }
+    cursor: pointer; transition: background .4s, border .4s, box-shadow .4s; }
 ul.fieldList > li:hover { background: var(--color-bg-normal); border-color: var(--color-fg-less); }
 ul.fieldList > li.requiredField:before { display: inline-block; content: " \002612  "; margin-right: .5em; }
 ul.fieldList > li.humanTLToggled { border-color: var(--color-accent-hover); background: var(--color-accent-hover); box-shadow: 0 8px 6px -6px black; }
@@ -155,7 +159,67 @@ ul.fieldList > li.humanTLToggled { border-color: var(--color-accent-hover); back
     to   { transform: rotate(360deg); }
 }
 
+
+header     { display: block; width: 100%; padding: 0 2em; font-size: 1rem; z-index: 2; }
+header#mainHeader { margin-bottom: 2em;
+    background: var(--color-fg-less); color: var(--color-bg-raised2); display: table; }
+header#mainHeader > * { display: table-cell; }
+@media screen and (max-width: 70em) {
+    header#mainHeader > * { min-width: 20%; }
+}
+header#mainHeader > *:last-child { text-align: right; }
+
+header#mainHeader, header#mainHeader * { z-index: 5; }
+header#mainHeader:hover,
+header#mainHeader *:hover { z-index: 6; }
+header *   { z-index: 2; }
+header > * { display: inline-block; vertical-align: middle; }
+
+header h2 { font-size: 1.1em; color: inherit; }
+
+header select { background: inherit; font-size: .85rem; border: 0; }
+header select option { color: var(--color-fg-normal); }
+
+header nav     { color: var(--color-bg-raised2); }
+header nav > * { position: relative; display: inline-block; flex: 1; font-size: 1rem; padding: .7em 0; }
+
+header#mainHeader img { display: inline-block; height: 1.9em; margin-right: .5em; vertical-align: middle; filter: invert(1); transition: opacity .4s; }
+header#mainHeader h2 { display: inline-block; vertical-align: middle; font-weight: normal; }
+header#mainHeader > a:focus > img,
+header#mainHeader > a:hover > img { opacity: .7; }
+
+@media screen and (min-width: 75em) {
+
+    header nav > div > div { display: none; position: absolute; right: 0; top: 100%; width: 300px;
+                             background: var(--color-fg-less); text-align: left; }
+    header nav > div > a         { padding: .95em 1em; transition: background .4s, color .4s; }
+    header nav > div:focus > a,
+    header nav > div:hover > a   { color: var(--color-gray); }
+    header nav > div > a:focus + div,
+    header nav > div:hover > div { display: block; animation: fade-in .4s; }
+    header nav > div > a:focus + div > a,
+    header nav > div:hover > div > a       { display: block; padding: .5em 1em; cursor: pointer;
+                                             transition: background .4s, color .4s; }
+    header nav > div > a:focus + div > a:focus,
+    header nav > div:hover > div > a:hover { background: var(--color-fg-normal); color: var(--color-bg-normal); }
+    header     { padding: 0 10em; }
+}
+
 @media screen and (max-width: 75em) {
     body { font-size: 1.08em; }
     h1 img { display: none; }
+    header .branding { padding: .7rem; }
+    header nav:before { content: " \2630 "; display: inline-block; position: absolute; right: 3rem; top: 0;
+                        padding: .8rem 0; font-size: 1.5em; text-align: right; }
+    header nav > *    { display: none; }
+
+    header nav:hover:before { display: none; }
+    header nav:hover { position: absolute; left: 0; top: 0; display: flex;
+                        width: 100%; min-height: 90vh; padding: 2em 1em .5em 1em; background: var(--color-bg-normal); color: var(--color-fg-normal);
+                        border-bottom: 1px solid var(--color-borders); box-shadow: 2px 2px 4px var(--color-borders);
+                        z-index: 3; animation: fade-in .4s; }
+
+    header nav:hover > *    { display: block; flex: 1; min-width: 40vw; padding: 1em; font-size: 1em; }
+    header nav:hover > div a { display: block; padding: .2em 0; }
+    header     { padding: 0 1em; }
 }