word edit: separate stylesheet for form styling

diff --git a/editor.css b/editor.css
new file mode 100644 (file)
index 0000000..fd92601
--- /dev/null
+++ b/editor.css
@@ -0,0 +1,89 @@
+dl {
+       display: inline-grid;
+       grid: auto-flow / min-content repeat(10, auto);
+}
+
+form > ul {
+       display: table;
+       border-spacing: 0 2px;
+}
+form > ul > li {
+       display: table-row;
+}
+form > ul > li > * {
+       display: table-cell;
+       padding-right: .5em;
+}
+form > ul > li > label {
+       /* th */
+       text-align: right;
+}
+form > ul > li > label + * {
+       /* td */
+       width: 40em;
+}
+
+.multiinput,
+input,select {
+       box-sizing: border-box;
+       flex-grow: 1;
+}
+input:not([type=submit]) {
+       padding: .4rem;
+       font-family: monospace;
+}
+input[type=number] {
+       max-width: 7em;
+}
+select {
+       padding: .3rem .2rem; /* TODO: input */
+}
+#thumbpreview {
+       width: 300px;
+       align-self: start;
+       flex-shrink: 0;
+}
+
+ul.popup {
+       display: flex;
+       flex-wrap: wrap;
+       align-items: end;
+       position: fixed;
+       left: 0;
+       top: 0;
+       margin: auto;
+       max-height: 90%;
+       max-width: 90%;
+       overflow: auto;
+       background: rgba(0, 0, 0, .8);
+       border: 1px solid #CCC;
+}
+
+h1 {
+       margin-bottom: 1ex;
+}
+.inline {
+       display: inline-flex;
+       align-items: baseline;
+       margin: 0 -1ex; /* inner gap */
+}
+.inline > * {
+       margin: 0 1ex;
+}
+.inline .inline {
+       display: flex;
+       margin: 0;
+}
+.inline.multiinput {
+       flex-wrap: wrap;
+}
+.multiinput > input {
+       width: 10em;
+}
+
+#nav > ul,
+#nav > ul strong,
+#nav form {
+       margin: 1ex 0;
+       display: inline-block;
+}

diff --git a/writer.plp b/writer.plp
index a97bbfae4ec4d60e74c6a32750d311f57e72e9e8..48ffd6748245eb97cef7245ae14695444eb9b35d 100644 (file)
--- a/writer.plp
+++ b/writer.plp
@@ -5,98 +5,7 @@ Html({
        version => '1.0',
        nocache => 1,
        raw => <<'EOT',
-<style>
-dl {
-       display: inline-grid;
-       grid: auto-flow / min-content repeat(10, auto);
-}
-
-form > ul {
-       display: table;
-       border-spacing: 0 2px;
-}
-form > ul > li {
-       display: table-row;
-}
-form > ul > li > * {
-       display: table-cell;
-       padding-right: .5em;
-}
-form > ul > li > label {
-       /* th */
-       text-align: right;
-}
-form > ul > li > label + * {
-       /* td */
-       width: 40em;
-}
-
-.multiinput,
-input,select {
-       box-sizing: border-box;
-       flex-grow: 1;
-}
-input:not([type=submit]) {
-       padding: .4rem;
-       font-family: monospace;
-}
-input[type=number] {
-       max-width: 7em;
-}
-select {
-       padding: .3rem .2rem; /* TODO: input */
-}
-#thumbpreview {
-       width: 300px;
-       align-self: start;
-       flex-shrink: 0;
-}
-
-ul.popup {
-       display: flex;
-       flex-wrap: wrap;
-       align-items: end;
-       position: fixed;
-       left: 0;
-       top: 0;
-       margin: auto;
-       max-height: 90%;
-       max-width: 90%;
-       overflow: auto;
-       background: rgba(0, 0, 0, .8);
-       border: 1px solid #CCC;
-}
-
-h1 {
-       margin-bottom: 1ex;
-}
-.inline {
-       display: inline-flex;
-       align-items: baseline;
-       margin: 0 -1ex; /* inner gap */
-}
-.inline > * {
-       margin: 0 1ex;
-}
-.inline .inline {
-       display: flex;
-       margin: 0;
-}
-.inline.multiinput {
-       flex-wrap: wrap;
-}
-.multiinput > input {
-       width: 10em;
-}
-
-#nav > ul,
-#nav > ul strong,
-#nav form {
-       margin: 1ex 0;
-       display: inline-block;
-}
-</style>
-
+<link rel="stylesheet" type="text/css" media="all" href="/editor.css" />
 <script src="/writer.js"></script>
 EOT
 });