print layout
This commit is contained in:
Alex Grintsvayg
parent
06ee2aa3fb
commit
785809d434
6 changed files with 118 additions and 44 deletions
|
|
@ -8,14 +8,16 @@
|
|||
<link rel="stylesheet" type="text/css" href="/assets/normalize.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/tocbot.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/print.css" media="print">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<main>
|
||||
<h1>LBRY: A Decentralized Digital Content Marketplace</h1>
|
||||
<a href="javascript:;" class="pdf-hide" onclick="this.setAttribute('href', 'https://v2.convertapi.com/convert/web/to/pdf?secret=9XShsyNjNpjmaIz2&hideelements=.pdf-hide&download=attachment&url=' + encodeURI(window.location))">
|
||||
Save as PDF
|
||||
</a>
|
||||
<div class="byline">
|
||||
Alex Grintsvayg (<a href="mailto:grin@lbry.io">grin@lbry.io</a>), Jeremy Kauffman (<a href="mailto:jeremy@lbry.io">jeremy@lbry.io</a>)
|
||||
</div>
|
||||
<a href="/lbry-spec.pdf" class="pdf-hide" target="_blank" rel="noopener">PDF Version</a>
|
||||
<div class="toc-menu pdf-hide">Menu</div>
|
||||
<nav class="toc pdf-hide"></nav>
|
||||
<div id="content">
|
||||
|
|
@ -53,7 +55,7 @@
|
|||
// Handle external links
|
||||
const links = document.links;
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
if (links[i].hostname != window.location.hostname && !links[i].href.startsWith("javascript:")) {
|
||||
if (links[i].hostname != window.location.hostname && !links[i].href.startsWith("javascript:") && !links[i].href.startsWith("mailto:")) {
|
||||
links[i].target = '_blank';
|
||||
links[i].className += ' external-link';
|
||||
links[i].rel = "noopener";
|
||||
|
|
|
|||
73
assets/print.css
Normal file
73
assets/print.css
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
@page {
|
||||
size: letter portrait;
|
||||
margin: 1.5cm 1.5cm 2.5cm;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-print-color-adjust: exact;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff !important;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.pdf-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h2:first-of-type {
|
||||
margin-top: 15rem;
|
||||
}
|
||||
|
||||
a, code {
|
||||
color: black;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 0.25pt solid #333;
|
||||
padding: 0.75em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
||||
p, pre {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
|
||||
a[href^="http"]:not([href^="javascript:"]):not([href^="#"]):after {
|
||||
/*content: ' → ' attr(href) '';*/
|
||||
content: ' <' attr(href) '>';
|
||||
font-size: 0.9em;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
a, blockquote, p, table, dl {
|
||||
break-inside: avoid;
|
||||
}
|
||||
ul, ol, dl, pre, div.highlighter-rouge {
|
||||
break-before: avoid;
|
||||
}
|
||||
img, h1, h2, h3, h4, h5, h6 {
|
||||
break-inside: avoid;
|
||||
break-after: avoid !important;
|
||||
page-break-after: avoid !important;
|
||||
}
|
||||
h2:not(:first-of-type) {
|
||||
break-before: page;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
|
@ -2,12 +2,16 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
background: #ffffff;
|
||||
font-family: "Source Sans Pro", sans-serif;
|
||||
font-size: 1.8rem;
|
||||
/* font-family: "Open Sans", sans-serif; */
|
||||
}
|
||||
|
||||
|
|
@ -17,6 +21,11 @@ main {
|
|||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.byline {
|
||||
font-style: italic;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.toc {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
|
|
@ -73,11 +82,17 @@ h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin-bottom: 1.4rem;
|
||||
overflow-x: auto;
|
||||
|
||||
/* idk why this used to be here but im hesitant to remove it completely */
|
||||
/* i commennted it out because it is causing this bug: */
|
||||
/* https://stackoverflow.com/questions/40910926/why-overflow-yhidden-of-html-lists-makes-bullet-number-to-be-invisible */
|
||||
/*overflow-x: auto;*/
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
|
@ -85,57 +100,44 @@ h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
|
|||
/* fix weird outline when clicking a TOC link */
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.75rem;
|
||||
font-variant: small-caps;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.125rem;
|
||||
font-variant: small-caps;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0074D9;
|
||||
}
|
||||
|
||||
a.external-link::after {
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" color="#0074D9" width="13px" height="13px" class="ext-link-icon"><path fill="currentColor" d="M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z" class=""></path></svg>');
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
|
||||
code {
|
||||
font-family: "Source Code Pro", monospace;
|
||||
font-size: 0.9rem;
|
||||
font-size: 1.4rem;
|
||||
color: #B10DC9;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
display: block;
|
||||
color: #212529;
|
||||
overflow: auto;
|
||||
|
|
@ -143,6 +145,7 @@ pre {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.notice {
|
||||
position: relative;
|
||||
padding: .75rem 1.25rem;
|
||||
|
|
@ -162,24 +165,24 @@ pre {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
#toc ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#toc>ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
table tr {
|
||||
border-top: 1px solid #dee2e6;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
th, td {
|
||||
padding-left: 5px;
|
||||
|
|
@ -191,27 +194,23 @@ table tbody tr:nth-child(odd) {
|
|||
background-color: rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
figcaption {
|
||||
color: #888;
|
||||
font-size: 90%;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
dt {
|
||||
font-style: italic;
|
||||
width: 80px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
dd + dt {
|
||||
margin-top: 10px;
|
||||
dd {
|
||||
margin: 0 0 15px;
|
||||
width: calc(100% - 80px - 10px);
|
||||
}
|
||||
|
||||
|
||||
/* add padding to compensate for overlay scrollbars on mac.*/
|
||||
/* overlay scrollbars on one-line-high code blocks hide the code */
|
||||
/* ideally id only target mac but idk how */
|
||||
|
|
|
|||
4
index.md
4
index.md
|
|
@ -923,7 +923,7 @@ URL | Claim ID
|
|||
`lbry://@Arthur:1` | b7bab5
|
||||
|
||||
|
||||
<pre style="font: 10px/5px monospace;overflow:hidden;text-align: center;margin: 10rem 0">
|
||||
<pre class="pdf-hide" style="font: 10px/5px monospace;overflow:hidden;text-align: center;margin: 10rem 0">
|
||||
|
||||
++
|
||||
:+++++
|
||||
|
|
@ -994,5 +994,3 @@ URL | Claim ID
|
|||
|
||||
|
||||
_[Edit this on Github](https://github.com/lbryio/spec/blob/master/index.md)_
|
||||
|
||||
|
||||
|
|
|
|||
BIN
lbry-spec.pdf
Normal file
BIN
lbry-spec.pdf
Normal file
Binary file not shown.
2
pdf.sh
Executable file
2
pdf.sh
Executable file
|
|
@ -0,0 +1,2 @@
|
|||
#!/bin/bash
|
||||
google-chrome --headless --no-margins --run-all-compositor-stages-before-draw --virtual-time-budget=2000 --print-to-pdf=lbry-spec.pdf http://127.0.0.1:4000
|
||||
Loading…
Reference in a new issue