You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
585 lines
14 KiB
585 lines
14 KiB
---
|
|
# this ensures Jekyll reads the file to be transformed into CSS later
|
|
# only Main files contain this front matter, not partials.
|
|
nav_exclude: true
|
|
---
|
|
/*****************************************************************************/
|
|
/* Tufte Jekyll blog theme
|
|
/* - source: https://github.com/clayh53/tufte-jekyll
|
|
/* - based on Tufte CSS by Dave Liepmann ( https://github.com/edwardtufte/tufte-css )
|
|
/*****************************************************************************/
|
|
|
|
// Imports to create final
|
|
|
|
@import "../_sass/fonts";
|
|
@import "../_sass/settings";
|
|
@import "../_sass/syntax-highlighting";
|
|
|
|
/* Changes from original tufte.css
|
|
|
|
- use border-box instead of content-box for box-sizing
|
|
- change font size as browser width expands or contracts
|
|
- add MathJax styling
|
|
- removes underline from <a> links and sets their color to $constrast-color, except for links that are inside <p>
|
|
- uses marginnote for maincolumn figure caption
|
|
|
|
*/
|
|
|
|
// global resets
|
|
*, *:before, *:after {
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body { height: 100%; }
|
|
|
|
/* clearfix hack after Cederholm (group class name) */
|
|
.group:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
// MathJax styling
|
|
.mathblock, .MJXc-display {
|
|
font-size: 1.5rem !important;
|
|
clear: left;
|
|
}
|
|
|
|
// variable font size
|
|
html {
|
|
font-size: 11px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
@media screen and (min-width: 800px){ html{ font-size: 12px; } }
|
|
@media screen and (min-width: 900px){ html{ font-size: 13px; } }
|
|
@media screen and (min-width: 1000px){ html{ font-size: 14px; } }
|
|
@media screen and (min-width: 1100px){ html{ font-size: 15px; } }
|
|
|
|
body {
|
|
width: 100%;
|
|
padding-left: 12.5%;
|
|
max-width: calc(12.5% + 1400px); // max-width of content box = 1400px
|
|
margin: 0 auto;
|
|
font-family: $body-font;
|
|
background-color: $bg-color;
|
|
color: $text-color;
|
|
counter-reset: sidenote-counter;
|
|
}
|
|
|
|
// changed
|
|
h1 {
|
|
font-weight: 400;
|
|
margin-top: 1.568rem;
|
|
margin-bottom: 1.568rem;
|
|
font-size: 2.5rem;
|
|
line-height: 0.784;
|
|
}
|
|
|
|
h2 {
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
margin-top: 4rem; /* 2.1rem */
|
|
margin-bottom: 1.4rem;
|
|
font-size: 2.2rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
h3 {
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: 1.7rem;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1.4rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
p.subtitle {
|
|
font-style: italic;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.8rem;
|
|
display: block;
|
|
line-height: 1;
|
|
}
|
|
|
|
article {
|
|
width: 55%;
|
|
padding: 5rem 0;
|
|
}
|
|
|
|
/* ==============================
|
|
* Main Body Text
|
|
* ============================== */
|
|
|
|
p, ol, ul {
|
|
font-size: 1.4rem;
|
|
line-height: 2rem;
|
|
margin: 1.4rem 0;
|
|
}
|
|
|
|
p {
|
|
padding-right: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
li { margin-bottom: 0.5em; }
|
|
|
|
blockquote p, pre { padding-right: 0 10%; }
|
|
|
|
blockquote * { font-size: 1.1rem; }
|
|
blockquote p { line-height: 1.75rem; }
|
|
blockquote footer { text-align: right; }
|
|
|
|
/* ==============================
|
|
* Figures and Margins
|
|
* ============================== */
|
|
|
|
// the caption of a figure.maincolumn is never hidden
|
|
figure.maincolumn { margin-bottom: 3em; }
|
|
figure.maincolumn > figcaption { display: block !important; }
|
|
|
|
figure.fullwidth figcaption {
|
|
float: left;
|
|
margin-right: 0%;
|
|
margin-left: 36%;
|
|
}
|
|
|
|
img { max-width: 100%; }
|
|
|
|
.sidenote, .marginnote {
|
|
// goal: width = 50% of <p> (= 27.5% of 87.5% <body>)
|
|
// - vw for constant width regardless of container
|
|
// - 336.875px = 24.0625% of 1400px (max-width of <body>)
|
|
width: 24.0625vw;
|
|
max-width: 336.875px;
|
|
|
|
// goal: 5.5vw of spacing between main column and sidebar
|
|
// - assuming container has width of <article>, then
|
|
// 10% (spacing) + 50% (width) = 60%
|
|
margin-right: -60%;
|
|
|
|
float: right;
|
|
clear: right;
|
|
font-size: 1rem;
|
|
|
|
margin-top: 0;
|
|
margin-bottom: 1.4rem;
|
|
line-height: 1.4;
|
|
vertical-align: baseline;
|
|
position: relative;
|
|
}
|
|
|
|
.sidenote-number { counter-increment: sidenote-counter; }
|
|
.sidenote-number:after, .sidenote:before {
|
|
font-family: et-book-roman-old-style;
|
|
color: $contrast-color; // added
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
.sidenote-number:after {
|
|
content: counter(sidenote-counter);
|
|
font-size: 1rem;
|
|
top: -0.5rem; // use top instead of vertical-align to avoid affecting line-height
|
|
left: 0.1rem;
|
|
}
|
|
.sidenote:before {
|
|
// unicode for a non-breaking space
|
|
content: counter(sidenote-counter) ".\000a0";
|
|
}
|
|
|
|
// account for indentation of list items and blockquotes
|
|
blockquote .sidenote, blockquote .marginnote {
|
|
margin-right: -82.35%; // =70%/85%
|
|
}
|
|
li .sidenote, li .marginnote {
|
|
margin-right: -63.29%; // not quite right yet
|
|
}
|
|
|
|
// margin toggle
|
|
// - hide if screen is wide enough
|
|
input.margin-toggle,
|
|
label.margin-toggle:not(.sidenote-number) {
|
|
display: none;
|
|
}
|
|
|
|
/* ==============================
|
|
* Links
|
|
* ============================== */
|
|
|
|
// new link behavior
|
|
a {
|
|
color: $contrast-color;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Links: replicate underline that clears descenders */
|
|
p > a:link, p > a:visited { color: inherit; }
|
|
|
|
p > a:link {
|
|
background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(currentColor, currentColor);
|
|
background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(currentColor, currentColor);
|
|
-webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
|
|
-moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
|
|
background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
|
|
background-repeat: no-repeat, no-repeat, repeat-x;
|
|
text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8;
|
|
background-position: 0% 93%, 100% 93%, 0% 93%;
|
|
}
|
|
|
|
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
|
p > a:link {
|
|
background-position-y: 87%, 87%, 87%;
|
|
}
|
|
}
|
|
|
|
p > a:link::selection,
|
|
p > a:link::-moz-selection {
|
|
text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
|
|
background: #b4d5fe;
|
|
}
|
|
|
|
/* ==============================
|
|
* Code
|
|
* ============================== */
|
|
|
|
// Markdown code blocks (```, ~~~, or indented blocks) are always <pre><code></code></pre>
|
|
// Markdown code spans (`, ``) are always <p><code></code></p>
|
|
|
|
pre, code {
|
|
font-family: $code-font;
|
|
font-size: 1rem;
|
|
line-height: 1.42;
|
|
margin-top: 1.42rem;
|
|
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */ }
|
|
pre { overflow-x: auto; }
|
|
|
|
/* ==============================
|
|
* Miscellaneous
|
|
* ============================== */
|
|
|
|
.sans {
|
|
font-family: $sans-font;
|
|
letter-spacing: .03em;
|
|
}
|
|
|
|
.fullwidth { max-width: 90%; }
|
|
|
|
.full-width {
|
|
.sidenote, .sidenote-number, .marginnote {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
span.newthought {
|
|
font-variant: small-caps;
|
|
font-size: 1.2em;
|
|
letter-spacing: 0.05rem;
|
|
} // added
|
|
|
|
// helper classes
|
|
.contrast { color: $contrast-color; }
|
|
|
|
.smaller { font-size: 80%; }
|
|
|
|
hr.slender {
|
|
border: 0;
|
|
height: 1px;
|
|
margin-top: 1.4rem;
|
|
margin-bottom:1.4rem;
|
|
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
|
|
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
|
|
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
|
|
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
|
|
}
|
|
|
|
/* ==============================
|
|
* Tables
|
|
* ============================== */
|
|
|
|
// Use booktabs style as default for all tables, including Markdown tables
|
|
table, table.booktabs {
|
|
width: auto;
|
|
margin: 0 auto;
|
|
border-spacing: 0px;
|
|
border-top: 2px solid $border-color;
|
|
border-bottom: 2px solid $border-color;
|
|
}
|
|
|
|
th, .booktabs th {
|
|
border-bottom: 1px solid $border-color;
|
|
padding: 0.65ex 0.5em 0.4ex 0.5em;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
}
|
|
|
|
th, td {
|
|
font-size: 1.2rem;
|
|
line-height: 1.71428571;
|
|
}
|
|
|
|
th, .booktabs th.cmid {
|
|
border-bottom: 1px solid lighten($border-color, 25%);
|
|
}
|
|
|
|
.booktabs th.nocmid {
|
|
border-bottom: none;
|
|
}
|
|
|
|
// add space between thead row and tbody
|
|
tr:first-child td, .booktabs tbody tr:first-child td {
|
|
padding-top: 0.65ex;
|
|
}
|
|
|
|
td, .booktabs td {
|
|
padding-left: 0.5em;
|
|
padding-right: 0.5em;
|
|
text-align: left;
|
|
}
|
|
|
|
caption, .booktabs caption {
|
|
font-size: 90%;
|
|
text-align: left;
|
|
width: auto;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 1ex;
|
|
caption-side: top;
|
|
}
|
|
|
|
.booktabs tbody tr td.l { text-align: left !important; }
|
|
.booktabs tbody tr td.c { text-align: center !important; }
|
|
.booktabs tbody tr td.r { text-align: right !important; }
|
|
|
|
.table-caption {
|
|
float: right;
|
|
clear: right;
|
|
margin-right: -60%;
|
|
width: 50%;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-size: 1.0rem;
|
|
line-height: 1.96;
|
|
}
|
|
|
|
/* ==============================
|
|
* Small Screens
|
|
* ============================== */
|
|
|
|
@media (max-width: 760px) {
|
|
article {
|
|
width: 90%;
|
|
}
|
|
|
|
figure {
|
|
max-width: 90%;
|
|
}
|
|
|
|
figcaption, figure.fullwidth figcaption {
|
|
margin-right: 0%;
|
|
max-width: none;
|
|
}
|
|
|
|
blockquote p, blockquote footer {
|
|
padding-right: 10%;
|
|
}
|
|
|
|
label.margin-toggle:not(.sidenote-number) {
|
|
display: inline;
|
|
color: $contrast-color;
|
|
}
|
|
|
|
blockquote .sidenote,
|
|
blockquote .marginnote,
|
|
li .sidenote,
|
|
li .marginnote,
|
|
.sidenote,
|
|
.marginnote {
|
|
// treat as-if inline
|
|
width: 100%;
|
|
max-width: 100%;
|
|
|
|
display: none;
|
|
float: left;
|
|
padding: 0 5%;
|
|
margin: 1rem 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.margin-toggle:checked + .sidenote,
|
|
.margin-toggle:checked + .marginnote {
|
|
display: block;
|
|
}
|
|
|
|
label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
}
|
|
|
|
/* ==============================
|
|
* Nav and Footer Styling
|
|
* ============================== */
|
|
|
|
header > nav.group, body footer {
|
|
width: 95%;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
// escaped unicode for the carats and then a space on active menu links
|
|
nav.group a.active:before{
|
|
content:"\0003c\000a0";
|
|
}
|
|
nav.group a.active:after{
|
|
content:"\000a0\0003e";
|
|
}
|
|
|
|
header > nav a {
|
|
font-size: 1.2rem;
|
|
font-family: $sans-font;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: $contrast-color;
|
|
padding-top: 1.5rem;
|
|
display: inline-block;
|
|
float: left;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding-right: 2rem;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
ul.footer-links, .credits {
|
|
list-style: none;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
ul.footer-links li {
|
|
display: inline;
|
|
padding: 0.5rem 0.25rem;
|
|
}
|
|
.credits {
|
|
padding: 1rem 0rem;
|
|
}
|
|
|
|
// change font color for credit links in footer
|
|
.credits{
|
|
font-family: $sans-font;
|
|
& a {
|
|
color: $contrast-color;
|
|
}
|
|
}
|
|
|
|
/* ==============================
|
|
* Full-width page styling
|
|
* ============================== */
|
|
|
|
body.full-width {
|
|
width: 90%;
|
|
padding: 0 5%;
|
|
}
|
|
|
|
.full-width article p {
|
|
width: 90%;
|
|
}
|
|
|
|
/* ==============================
|
|
* @media print / screen
|
|
* ============================== */
|
|
|
|
// do not display a print-footer for screen display
|
|
@media screen {
|
|
.print-footer{ display: none; }
|
|
}
|
|
|
|
@media print {
|
|
*, *:before, *:after {
|
|
background: transparent !important;
|
|
color: #000 !important; // Black prints faster
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
@page {
|
|
margin: 0.75in 0.5in 0.75in 0.5in;
|
|
orphans: 4;
|
|
widows: 2;
|
|
}
|
|
|
|
body {
|
|
font-size: 12pt;
|
|
padding-left: 5%;
|
|
max-width: calc(5% + 1400px); // max-width of content box = 1400px
|
|
}
|
|
|
|
article {
|
|
padding: 0;
|
|
}
|
|
|
|
/* this only applies when @media width > 760px */
|
|
.sidenote, .marginnote {
|
|
// goal: width = 50% of <p> (= 27.5% of 95% <body>)
|
|
// - vw for constant width regardless of container
|
|
// - 365.75px = 26.125% of 1400px (max-width of <body>)
|
|
width: 26.125vw;
|
|
max-width: 365.75px;
|
|
}
|
|
|
|
html body span.print-footer {
|
|
font-family: $sans-font;
|
|
font-size: 9pt;
|
|
margin-top: 22.4pt;
|
|
padding-top: 4pt;
|
|
border-top: 1px solid #000;
|
|
}
|
|
|
|
thead {
|
|
display: table-header-group;
|
|
}
|
|
|
|
tr,
|
|
img {
|
|
break-inside: avoid;
|
|
}
|
|
|
|
article h2, article h2 h3, article h3, article h3 h4, article h4, article h4 h5 {
|
|
break-after: avoid;
|
|
}
|
|
|
|
body header, body footer {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media print and (max-width: 760px) {
|
|
blockquote .sidenote,
|
|
blockquote .marginnote,
|
|
li .sidenote,
|
|
li .marginnote,
|
|
.sidenote,
|
|
.marginnote {
|
|
// treat as-if inline
|
|
width: 100%;
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
}
|