LBRYCommunity/spec
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity

print layout

Browse source
This commit is contained in:
Alex Grintsvayg 2019-02-08 09:36:40 -05:00
parent 06ee2aa3fb
commit 785809d434
No known key found for this signature in database
GPG key ID: AEB3F089F86A22B5
6 changed files with 118 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
_layouts/spec.html
View file

@ -8,14 +8,16 @@
<link rel="stylesheet" type="text/css" href="/assets/normalize.css"> <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/tocbot.css">
<link rel="stylesheet" type="text/css" href="/assets/style.css"> <link rel="stylesheet" type="text/css" href="/assets/style.css">
<link rel="stylesheet" type="text/css" href="/assets/print.css" media="print">
</head> </head>
<body> <body>
<main> <main>
<h1>LBRY: A Decentralized Digital Content Marketplace</h1> <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))"> <div class="byline">
Save as PDF Alex Grintsvayg (<a href="mailto:grin@lbry.io">grin@lbry.io</a>), Jeremy Kauffman (<a href="mailto:jeremy@lbry.io">jeremy@lbry.io</a>)
</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> <div class="toc-menu pdf-hide">Menu</div>
<nav class="toc pdf-hide"></nav> <nav class="toc pdf-hide"></nav>
<div id="content"> <div id="content">
@ -53,7 +55,7 @@
// Handle external links // Handle external links
const links = document.links; const links = document.links;
for (var i = 0; i < links.length; i++) { 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].target = '_blank';
links[i].className += ' external-link'; links[i].className += ' external-link';
links[i].rel = "noopener"; links[i].rel = "noopener";

73
assets/print.css Normal file
View 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;
}

73
assets/style.css
View file

@ -2,12 +2,16 @@
box-sizing: border-box; box-sizing: border-box;
} }
html {
font-size: 10px;
}
body { body {
font-size: 18px;
line-height: 1.5; line-height: 1.5;
color: #333; color: #333;
background: #ffffff; background: #ffffff;
font-family: "Source Sans Pro", sans-serif; font-family: "Source Sans Pro", sans-serif;
font-size: 1.8rem;
/* font-family: "Open Sans", sans-serif; */ /* font-family: "Open Sans", sans-serif; */
} }
@ -17,6 +21,11 @@ main {
padding: 0 10px; padding: 0 10px;
} }
.byline {
font-style: italic;
margin-bottom: 2rem;
}
.toc { .toc {
height: 100%; height: 100%;
width: 300px; width: 300px;
@ -73,11 +82,17 @@ h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
visibility: hidden; visibility: hidden;
} }
p { p {
margin-bottom: 1.4rem; 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 { h1, h2, h3, h4, h5, h6 {
line-height: 1.2; 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 */ /* fix weird outline when clicking a TOC link */
outline: 0; outline: 0;
} }
h1 { h1 {
margin-top: 0; margin-top: 0;
font-size: 4rem; font-size: 4rem;
} }
h2 { h2 {
font-size: 3rem; font-size: 3rem;
} }
h3 { h3 {
font-size: 2.25rem; font-size: 2.25rem;
} }
h4 { h4 {
font-size: 1.5rem; font-size: 2rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
h5 { h5 {
font-size: 1.25rem; font-size: 1.75rem;
font-variant: small-caps; font-variant: small-caps;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
h6 {
font-size: 1.125rem;
font-variant: small-caps;
margin-bottom: 1rem;
}
small {
font-size: 0.8rem;
}
a { a {
color: #0074D9; color: #0074D9;
} }
a.external-link::after { 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>'); 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; padding-left: 3px;
} }
code { code {
font-family: "Source Code Pro", monospace; font-family: "Source Code Pro", monospace;
font-size: 0.9rem; font-size: 1.4rem;
color: #B10DC9; color: #B10DC9;
} }
pre { pre {
white-space: pre-wrap;
word-break: break-all;
display: block; display: block;
color: #212529; color: #212529;
overflow: auto; overflow: auto;
@ -143,6 +145,7 @@ pre {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.notice { .notice {
position: relative; position: relative;
padding: .75rem 1.25rem; padding: .75rem 1.25rem;
@ -162,24 +165,24 @@ pre {
margin-bottom: 0; margin-bottom: 0;
} }
ol ol { ol ol {
list-style-type: lower-alpha; list-style-type: lower-alpha;
} }
#toc ul { #toc ul {
list-style-type: none; list-style-type: none;
} }
#toc>ul { #toc>ul {
padding-left: 0; padding-left: 0;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
} }
table tr { table tr {
border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;
} }
th, td { th, td {
padding-left: 5px; padding-left: 5px;
@ -191,27 +194,23 @@ table tbody tr:nth-child(odd) {
background-color: rgba(0,0,0,.05); 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 { dl {
margin-left: 10px; display: flex;
justify-content: space-between;
flex-wrap: wrap;
} }
dt { dt {
font-style: italic; font-style: italic;
width: 80px;
margin-bottom: 15px;
} }
dd + dt { dd {
margin-top: 10px; margin: 0 0 15px;
width: calc(100% - 80px - 10px);
} }
/* add padding to compensate for overlay scrollbars on mac.*/ /* add padding to compensate for overlay scrollbars on mac.*/
/* overlay scrollbars on one-line-high code blocks hide the code */ /* overlay scrollbars on one-line-high code blocks hide the code */
/* ideally id only target mac but idk how */ /* ideally id only target mac but idk how */

4
index.md
View file

@ -923,7 +923,7 @@ URL | Claim ID
`lbry://@Arthur:1` | b7bab5 `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)_ _[Edit this on Github](https://github.com/lbryio/spec/blob/master/index.md)_

BIN
lbry-spec.pdf Normal file
View file

Binary file not shown.

2
pdf.sh Executable file
View 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