diff -r e66bd5c563eb -r b5b5583a3a08 progs/pprint/style.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/progs/pprint/style.css Thu Jul 30 13:50:54 2020 +0100 @@ -0,0 +1,99 @@ +@media print { + @page { margin: 0; } + body { margin: 1.6cm; } +} + + +body { + font-family: Calibri, Segoe, "Segoe UI", "Gill Sans", "Gill Sans MT", sans-serif; +} + +/* It's supposed to look like a tree diagram */ +.tree, .tree ul, .tree li { + list-style: none; + margin: 0; + padding: 0; + position: relative; +} + +.tree { + margin: 0 0 1em; + text-align: center; +} +.tree, .tree ul { + display: table; +} +.tree ul { + width: 100%; +} + .tree li { + display: table-cell; + padding: .5em 0; + vertical-align: top; + } + /* _________ */ + .tree li:before { + outline: solid 1px #666; + content: ""; + left: 0; + position: absolute; + right: 0; + top: 0; + } + .tree li:first-child:before {left: 50%;} + .tree li:last-child:before {right: 50%;} + + .tree code, .tree span { + border: solid .1em #666; + border-radius: .2em; + display: inline-block; + margin: 0 .2em .5em; + padding: .2em .5em; + position: relative; + } + /* If the tree represents DOM structure */ + .tree code { + font-family: monaco, Consolas, 'Lucida Console', monospace; + } + + /* | */ + .tree ul:before, + .tree code:before, + .tree span:before { + outline: solid 1px #666; + content: ""; + height: .5em; + left: 50%; + position: absolute; + } + .tree ul:before { + top: -.5em; + } + .tree code:before, + .tree span:before { + top: -.55em; + } + +/* The root node doesn't connect upwards */ +.tree > li {margin-top: 0;} + .tree > li:before, + .tree > li:after, + .tree > li > code:before, + .tree > li > span:before { + outline: none; + } + + +/* Create two equal columns that floats next to each other */ +.column { + float: left; + width: 40%; + padding: 10px; +} + +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; +}