jrtechs
/
jrtechs-cs224w-notes
mirror of https://github.com/jrtechs/cs224w-notes.git

---# 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
*/
img[src$="centerme"] {  display:block;  margin: 0 auto;}
// 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;    }}