diff --git a/copyparty/web/md.css b/copyparty/web/md.css
index bd1b3239..6478ad0b 100644
--- a/copyparty/web/md.css
+++ b/copyparty/web/md.css
@@ -13,6 +13,7 @@ html, body {
}
#mw {
margin: 0 auto;
+ padding: 0 1.5em;
}
pre, code, a {
color: #480;
@@ -46,7 +47,7 @@ pre code {
pre code:last-child {
border-bottom: none;
}
-pre code:before {
+pre code::before {
content: counter(precode);
-webkit-user-select: none;
display: inline-block;
@@ -172,14 +173,12 @@ small {
}
table {
border-collapse: collapse;
+ margin: 1em 0;
}
-td {
+th, td {
padding: .2em .5em;
border: .12em solid #aaa;
}
-th {
- border: .12em solid #aaa;
-}
blink {
animation: blinker .7s cubic-bezier(.9, 0, .1, 1) infinite;
}
@@ -202,13 +201,15 @@ blink {
height: 100%;
}
#mw {
- padding: 0 1em;
margin: 0 auto;
right: 0;
}
#mp {
- max-width: 54em;
+ max-width: 52em;
margin-bottom: 6em;
+ word-break: break-word;
+ overflow-wrap: break-word;
+ word-wrap: break-word; /*ie*/
}
a {
color: #fff;
@@ -265,7 +266,7 @@ blink {
#mn a:last-child {
padding-right: .5em;
}
- #mn a:not(:last-child):after {
+ #mn a:not(:last-child)::after {
content: '';
width: 1.05em;
height: 1.05em;
@@ -359,7 +360,7 @@ blink {
background: #282828;
border: .07em dashed #444;
}
- html.dark #mn a:not(:last-child):after {
+ html.dark #mn a:not(:last-child)::after {
border-color: rgba(255,255,255,0.3);
}
html.dark #mn a {
@@ -378,19 +379,19 @@ blink {
}
}
-@media screen and (min-width: 70em) {
+@media screen and (min-width: 66em) {
#mw {
position: fixed;
overflow-y: auto;
left: 14em;
- left: calc(100% - 57em);
+ left: calc(100% - 55em);
max-width: none;
bottom: 0;
scrollbar-color: #eb0 #f7f7f7;
}
#toc {
width: 13em;
- width: calc(100% - 57.3em);
+ width: calc(100% - 55.3em);
max-width: 30em;
background: #eee;
position: fixed;
@@ -445,26 +446,64 @@ blink {
background: #0a0a0a;
}
}
-@media screen and (min-width: 87.5em) {
+@media screen and (min-width: 85.5em) {
#toc { width: 30em }
#mw { left: 30.5em }
}
@media print {
+ @page {
+ size: A4;
+ padding: 0;
+ margin: .5in .2in;
+ mso-header-margin: .2in;
+ mso-footer-margin: .2in;
+ mso-paper-source: 0;
+ }
a {
color: #079;
text-decoration: none;
border-bottom: .07em solid #4ac;
padding: 0 .3em;
}
- #toc {
- margin: 0 !important;
- }
#toc>ul {
border-left: .1em solid #84c4dd;
+ text-decoration: underline;
}
#mn, #mh {
display: none;
}
+ html, body, #toc, #mw {
+ margin: 0 !important;
+ word-break: break-word;
+ width: 52em;
+ }
+ #toc {
+ margin-left: 1em !important;
+ }
+ pre code::before {
+ color: #058;
+ }
+ h1 {
+ margin: 2em 0;
+ }
+ table {
+ page-break-inside: auto;
+ }
+ tr {
+ page-break-inside: avoid;
+ page-break-after: auto;
+ }
+ thead {
+ display: table-header-group;
+ }
+ tfoot {
+ display: table-footer-group;
+ }
+ #mp a.vis::after {
+ content: ' (' attr(href) ')';
+ border-bottom: 1px solid #bbb;
+ color: #777;
+ }
}
/*
diff --git a/copyparty/web/md.html b/copyparty/web/md.html
index db769c56..de965350 100644
--- a/copyparty/web/md.html
+++ b/copyparty/web/md.html
@@ -21,6 +21,7 @@
{%- else %}
edit (basic)
edit (fancy)
+ view raw
{%- endif %}
@@ -41,14 +42,14 @@
{%- endif %}
diff --git a/copyparty/web/md.js b/copyparty/web/md.js
index 3b69c3d4..72c21831 100644
--- a/copyparty/web/md.js
+++ b/copyparty/web/md.js
@@ -35,6 +35,19 @@ function static(obj) {
}
+// dodge browser issues
+(function () {
+ var ua = navigator.userAgent;
+ if (ua.indexOf(') Gecko/') !== -1 && ua.indexOf('Linux') !== -1) {
+ // necessary on ff-68.7 at least
+ var s = document.createElement('style');
+ s.innerHTML = '@page { margin: .6in .2in .8in .2in; }';
+ console.log(s.innerHTML);
+ document.head.appendChild(s);
+ }
+})();
+
+
// add navbar
(function () {
var n = document.location + '';
@@ -141,7 +154,7 @@ function copydom(src, dst, lv) {
}
-function convert_markdown(md_text) {
+function convert_markdown(md_text, dest_dom) {
marked.setOptions({
//headerPrefix: 'h-',
breaks: true,
@@ -229,7 +242,7 @@ function convert_markdown(md_text) {
el.innerHTML = '' + el.innerHTML + '';
}
- copydom(md_dom, dom_pre, 0);
+ copydom(md_dom, dest_dom, 0);
}
@@ -344,7 +357,7 @@ function init_toc() {
// "main" :p
-convert_markdown(dom_src.value);
+convert_markdown(dom_src.value, dom_pre);
var toc = init_toc();
diff --git a/copyparty/web/md2.css b/copyparty/web/md2.css
index 2b72140b..1de6257d 100644
--- a/copyparty/web/md2.css
+++ b/copyparty/web/md2.css
@@ -4,12 +4,12 @@
#mtw {
display: block;
position: fixed;
- left: 0;
+ left: .5em;
bottom: 0;
- width: calc(100% - 58em);
+ width: calc(100% - 56em);
}
#mw {
- left: calc(100% - 57em);
+ left: calc(100% - 55em);
overflow-y: auto;
position: fixed;
bottom: 0;
@@ -30,11 +30,11 @@
#mw.single {
margin: 0;
left: 1em;
- left: max(1em, calc((100% - 58em) / 2));
+ left: max(1em, calc((100% - 56em) / 2));
}
#mtw.single {
- width: 57em;
- width: min(57em, calc(100% - 2em));
+ width: 55em;
+ width: min(55em, calc(100% - 2em));
}
@@ -43,7 +43,7 @@
}
#mt, #mtr {
width: 100%;
- height: calc(100% - 5px);
+ height: calc(100% - 1px);
color: #444;
background: #f7f7f7;
border: 1px solid #999;
diff --git a/copyparty/web/md2.js b/copyparty/web/md2.js
index 73d2e1ae..140bd38f 100644
--- a/copyparty/web/md2.js
+++ b/copyparty/web/md2.js
@@ -70,7 +70,7 @@ var draw_md = (function () {
function draw_md() {
var t0 = new Date().getTime();
var src = dom_src.value;
- convert_markdown(src);
+ convert_markdown(src, dom_pre);
var lines = hesc(src).replace(/\r/g, "").split('\n');
nlines = lines.length;
@@ -552,8 +552,10 @@ document.getElementById('help').onclick = function (e) {
if (e) e.preventDefault();
var dom = document.getElementById('helpbox');
var dtxt = dom.getElementsByTagName('textarea');
- if (dtxt.length > 0)
- dom.innerHTML = 'close' + marked(dtxt[0].value);
+ if (dtxt.length > 0) {
+ convert_markdown(dtxt[0].value, dom);
+ dom.innerHTML = 'close' + dom.innerHTML;
+ }
dom.style.display = 'block';
document.getElementById('helpclose').onclick = function () {