Skip to content

Instantly share code, notes, and snippets.

@pcorey pcorey/custom.css Secret
Created May 10, 2019

Embed
What would you like to do?
@import url("https://use.typekit.net/ssa1tke.css");
body {
/* font-family: "Futura", "Avenir Next", sans-serif; */
font-family: "freight-sans-pro",sans-serif;
font-size: 20px;
margin: auto;
/* max-width: 29cm; */
max-width: 800px;
}
code {
font-size: 18px;
}
/* For smart quotes */
q { quotes: "" "" "" ""; }
hr {
width: 50%;
margin: 2em auto;
border: 0;
border-bottom: 4px solid #f8f8f8;
}
h1,h2,h3,h4,h5,h6 {
/* font-family: "Athelas", "Palatino", "Avenir Next", sans-serif; */
margin: 2em 0rem 1em 0;
}
#TOC {
page-break-after: always;
}
h1 {
font-size: 2em;
page-break-before: always
}
h1,h2,h3,h4,h5,h6 {
page-break-after: avoid;
}
.sourceCode {
page-break-inside: avoid;
}
/* h2,h3,h4,h5,h6 { */
/* margin-top: 1rem; */
/* } */
/*h1 {
position: running(header1)
}*/
h1.title {
/*position: running(title);*/
font-size: 2.5em;
line-height: 1.1em;
margin: 0;
}
/*@page{
@top-left {
content: element(title);
font-size: 10px;
line-height: 10px
font-weight: normal;
}
@top-right {
content: element(header1);
font-size: 10px;
line-height: 10px
font-weight: normal;
}
}*/
p {
text-align: justify;
line-height: 1.6;
margin: auto;
margin-bottom:1em;
/* padding-left: 1em; */
/* padding-right: 1em; */
padding-left: 0;
padding-right: 0;
z-index: 10;
word-break: normal;
hyphens: auto;
}
code {
font-family: 'Source Code Pro';
}
blockquote {
/* font-family: "Gill Sans", "Avenir Next", sans-serif; */
font-style: italic;
}
del {
background: #fae6e6;
}
ins {
background: #ecfce6
}
.annotation {
background: #FFB;
color: #333;
}
.author_affiliations::before {
content: "# Affiliations: ";
font-weight: bold;
color: grey;
}
.correspondence::before {
content: "* Correspondence: ";
font-weight: bold;
color: grey;
}
.correspondence-item {
display: inline-block;
margin-right: 10px;
}
aside::before, .comment::before {
content: "[";
font-weight: bold;
color: #222;
}
aside::after, .comment::after {
content: "]";
font-weight: bold;
color: #222;
}
aside, .comment {
background: #FFB;
color: #222;
opacity: 0.5;
z-index: -1;
}
aside:hover, .comment:hover { }
div.info, div.todo, div.warning {
font-size: 0.7em;
line-height: 1em;
float: right;
width: 20%;
margin: 5px;
padding: 0;
background: #EEE;
border-radius: 5px;
border: 1px solid #DDD;
box-shadow: 1px 1px 5px 0px #888;
}
div.info::before { content: "INFO: "; font-weight: bold; }
div.todo::before { content: "TODO: "; font-weight: bold; }
div.warning::before { content: "WARNING: "; font-weight: bold; }
div.warning {background: #CCF;}
div.warning {background: #FCC;}
div.info p, div.todo p, div.warning p { padding: 0.25em; }
figure {
display: inline-block;
text-align: center;
vertical-align: top;
/*float: outside;*/
width: 98%;
font-size: 0.8rem;
background: white;
overflow: visible;
border-radius: 5px;
border: 1px solid #EEE;
box-shadow: 1px 1px 8px 0px #888;
padding: 5px;
margin: 0 0 0.5em 0;
}
figure.nofloat {
float: none;
display: inline-block;
text-align: center;
vertical-align: top;
position: relative;
}
figure img {
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: 22cm;
}
figcaption {
/* font-family: "Futura", "Avenir Next", sans-serif; */
line-height: 1em;
text-align: justify;
}
a { color: #ff0055; }
div#refs p {
font-size: 0.8em;
line-height: 1em;
border-left: 5px solid rgb(90%,90%,90%);
padding-left: 10px;
}
/* Override section behavior.
* We only want the top-level <section> to have padding.
* This makes it easier to work with --section-divs. */
section {
padding-top: initial;
padding-bottom: initial;
}
article > section {
padding-top: 1rem;
padding-bottom: 1rem;
}
/* Make byline (date and/or author) small */
p.byline { font-size: 1.2rem; }
/* Simulate Pandoc's table output styles */
table {
border-top: 2px solid black;
border-bottom: 2px solid black;
}
th {
border-bottom: 1px solid black;
}
td, th {
font-size: 0.9rem;
padding: 10px;
text-align: left;
}
/* Allow tables to be full width
* if they're wrapped in a figure.fullwidth
* (Easier to insert from Pandoc than manually adding table) */
figure.fullwidth table {
width: 90%;
}
@media (max-width: 760px) {
figure.fullwidth table {
width: 100%;
}
}
code {
color: #666;
}
/* Code blocks
*
* Code blocks with a language look like div.sourceCode > pre.sourceCode
* Otherwise, it's just a pre (without .sourceCode) */
div.sourceCode,
pre:not(.sourceCode) {
font-family: "Fira Code", monospace;
/* padding: 1.4rem; */
margin: 2em 0;
/* width: 55%; */
/* font-size: 0.9rem; */
/* font-size: 1rem; */
overflow-x: auto;
}
div.sourceCode code,
pre:not(.sourceCode) code {
font-family: "Source Code Pro", monospace;
/* font-size: 0.9rem; */
}
.fullwidth div.sourceCode,
.fullwidth pre:not(.sourceCode) {
width: 100%;
}
/* We've handled all the margin/padding on the outer-most div.sourceCode */
div.sourceCode pre {
padding: 0;
margin: 0;
}
@media (max-width: 760px) {
div.sourceCode,
pre:not(.sourceCode) {
width: 100%;
}
}
/* Pandoc-generated line numbers need the same stylings as normal <code> */
.lineNumbers pre {
line-height: 1.42;
/* font-size: 0.9rem; */
}
pre.sourceCode.javascript {
background-color: #f8f8f8;
padding: 1em;
}
.sourceCode a {
color: #666;
}
.sourceCode .va {
color: #666;
}
.sourceCode .dt {
color: #666;
}
.sourceCode .dv {
color: #690;
}
.sourceCode .kw {
color: #07a;
font-weight: normal;
}
.sourceCode .at {
color: #DD4A68;
}
.sourceCode .op {
color: #999;
}
.sourceCode .cf {
color: #07a;
/* font-weight: normal; */
}
.sourceCode .vs {
color: #690;
}
.sourceCode .st {
color: #690;
}
.sourceCode .sc {
color: #690;
}
@media print {
body {
font-size: 16px !important;
}
code {
font-size: 14px !important;
}
}
.pageNumber, .totalPages {
font-size: 18px;
}
@page {
size: A4;
margin: 20mm;
counter-increment: page;
counter-reset: page 1;
/*prince-bleed: 5mm;
marks: crop cross;*/
/* orphans:4; */
/* widows:2; */
@bottom-center {
content: "Page " counter(page) " of " counter(pages);
}
@bottom-left {
width: 100%;
/* margin: 10pt 0 30pt 0; */
/* border-top: .25pt solid #666; */
content: "My book";
font-size: 18pt;
color: #333;
}
}
@bottom-left {
width: 100%;
/* margin: 10pt 0 30pt 0; */
/* border-top: .25pt solid #666; */
content: "My book";
font-size: 18pt;
color: #333;
}
.tip {
font-size: 1.6em;
float: right;
max-width: 66%;
margin: 0.5em 0 0.5em 1em;
line-height: 1.6;
color: #ccc;
text-align: right;
}
blockquote {
margin-inline-start: 2em;
margin-inline-end: 2em;
margin-block-start: 2em;
margin-block-end: 2em;
color: #ccc;
}
ul {
list-style-type: disc;
}
#title-block-header {
margin: 200px 0;
page-break-after: always;
}
@media print {
#title-block-header > div {
margin: 0;
position: absolute;
bottom: 1em;
}
}
#title-block-header .title {
font-size: 5em;
margin: 0;
}
#title-block-header .subtitle {
font-size: 1.5em;
color: #ff0055;
margin: 1em 0;
}
#title-block-header .author {
font-size: 1em;
color: #ccc;
margin: 0;
font-weight: bold;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.