zacharybillman-hugo/assets/css/extended/zpb-tufte-sidenotes.css

94 lines
4.2 KiB
CSS

/* Unabashedly stolen from tufte-css https://github.com/edwardtufte/tufte-css */
/* Sidenotes, margin notes, figures, captions */
img { max-width: 100%; }
.sidenote, .marginnote { float: right;
clear: right;
margin-right: -60%;
width: 50%;
margin-top: 0;
margin-bottom: 0;
font-size: 1.1rem;
line-height: 1.3;
vertical-align: baseline;
position: relative; }
.table-caption { float:right;
clear:right;
margin-right: -60%;
width: 50%;
margin-top: 0;
margin-bottom: 0;
font-size: 1.0rem;
line-height: 1.6; }
.sidenote-number { counter-increment: sidenote-counter; }
.sidenote-number:after, .sidenote:before { content: counter(sidenote-counter) " ";
position: relative;
vertical-align: baseline; }
.sidenote-number:after { content: counter(sidenote-counter);
font-size: 1rem;
top: -0.5rem;
left: 0.1rem; }
.sidenote:before { content: counter(sidenote-counter) " ";
top: -0.5rem; }
@media screen and (max-width: 760px) { p, footer { width: 90%; }
pre.code { width: 87.5%; }
ul { width: 85%; }
figure { max-width: 90%; }
figcaption, figure.fullwidth figcaption { margin-right: 0%;
max-width: none; }
blockquote p, blockquote footer { width: 90%; }}
.sans { font-family: sans-serif;
letter-spacing: .03em; }
.code { font-family: monospace;
font-size: 1.125rem;
line-height: 1.6; }
.marginnote .code, .sidenote .code { font-size: 1rem; }
pre.code { width: 52.5%;
padding-left: 2.5%;
overflow-x: scroll; }
.fullwidth { max-width: 90%;
clear:both; }
label.sidenote-number { display: inline; }
label.margin-toggle:not(.sidenote-number) { display: none; }
@media (max-width: 760px) { label.margin-toggle:not(.sidenote-number) { display: inline; }
.sidenote, .marginnote { display: none; }
.margin-toggle:checked + .sidenote,
.margin-toggle:checked + .marginnote { display: block;
float: left;
left: 1rem;
clear: both;
width: 95%;
margin: 1rem 2.5%;
vertical-align: baseline;
position: relative; }
label { cursor: pointer; }
pre.code { width: 90%;
padding: 0; }
.table-caption { display: block;
float: right;
clear: both;
width: 98%;
margin-top: 1rem;
margin-bottom: 0.5rem;
margin-left: 1%;
margin-right: 1%;
vertical-align: baseline;
position: relative; }
div.table-wrapper, table, table.booktabs { width: 85%; }
div.table-wrapper { border-right: 1px solid #efefef; }
img { width: 100%; } }